Update remaining transformers config (#4743)

* add pug config

* fix

* fix...

* js config fixes

* update svgo config

* tweak

* update sass config loader

packages/core/integration-tests/test/sass.js

@@ -121,7 +121,6 @@ describe('sass', function() {
  {
  name: 'index.css',
  assets: ['index.scss'],
- includedFiles: {'index.scss': ['package.json']},
  },
  {
  type: 'woff2',
@@ -180,7 +179,7 @@ describe('sass', function() {
  name: 'index.css',
  assets: ['index.sass'],
  includedFiles: {
- 'index.sass': ['package.json', 'foo.sass', 'bar.sass'],
+ 'index.sass': ['foo.sass', 'bar.sass'],
  },
  },
  ]);
@@ -219,7 +218,6 @@ describe('sass', function() {
  {
  name: 'index.css',
  assets: ['index.scss'],
- includedFiles: {'index.scss': ['.sassrc.js', 'package.json']},
  },
  ]);
 
@@ -266,7 +264,7 @@ To @import files from node_modules, use "library/style.sass"
  {
  name: 'index.css',
  assets: ['index.sass'],
- includedFiles: {'index.sass': ['package.json', 'style.sass']},
+ includedFiles: {'index.sass': ['style.sass']},
  },
  ]);
 
@@ -284,7 +282,7 @@ To @import files from node_modules, use "library/style.sass"
  name: 'index.css',
  assets: ['index.sass'],
  includedFiles: {
- 'index.sass': ['.sassrc.js', 'package.json', 'style.sass'],
+ 'index.sass': ['style.sass'],
  },
  },
  ]);

packages/transformers/pug/src/PugTransformer.js

@@ -4,20 +4,38 @@ import path from 'path';
 import {Transformer} from '@parcel/plugin';
 
 export default new Transformer({
- async getConfig({asset}) {
- const config = await asset.getConfig([
+ async loadConfig({config}) {
+ let configFile = await config.getConfig([
  '.pugrc',
  '.pugrc.js',
  'pug.config.js',
  ]);
- return config || {};
+
+ if (configFile) {
+ let isJavascript = path.extname(configFile.filePath) === '.js';
+ if (isJavascript) {
+ config.shouldInvalidateOnStartup();
+ config.shouldReload();
+ }
+
+ config.setResult({
+ contents: configFile.contents,
+ isSerialisable: !isJavascript,
+ });
+ }
  },
 
- async transform({asset, config, options}) {
- if (!config) {
- return [asset];
+ preSerializeConfig({config}) {
+ if (!config.result) return;
+
+ // Ensure we dont try to serialise functions
+ if (!config.result.isSerialisable) {
+ config.result.contents = {};
  }
+ },
 
+ async transform({asset, config, options}) {
+ const pugConfig = config ? config.contents : {};
  const pug = await options.packageManager.require('pug', asset.filePath, {
  autoinstall: options.autoinstall,
  });
@@ -27,19 +45,19 @@ export default new Transformer({
  compileDebug: false,
  basedir: path.dirname(asset.filePath),
  filename: asset.filePath,
- pretty: config.pretty || false,
- doctype: config.doctype,
- filters: config.filters,
- filterOptions: config.filterOptions,
- filterAliases: config.filterAliases,
+ pretty: pugConfig.pretty || false,
+ doctype: pugConfig.doctype,
+ filters: pugConfig.filters,
+ filterOptions: pugConfig.filterOptions,
+ filterAliases: pugConfig.filterAliases,
  });
 
  for (let filePath of render.dependencies) {
  await asset.addIncludedFile({filePath});
  }
 
  asset.type = 'html';
- asset.setCode(render(config.locals));
+ asset.setCode(render(pugConfig.locals));
 
  return [asset];
  },

packages/transformers/sass/src/SassTransformer.js

@@ -1,93 +1,79 @@
 // @flow
-import type {FilePath} from '@parcel/types';
-import type {FileSystem} from '@parcel/fs';
-import type {PluginLogger} from '@parcel/logger';
-
 import {Transformer} from '@parcel/plugin';
-import {promisify, resolve} from '@parcel/utils';
-import {dirname, join as joinPath} from 'path';
+import {promisify} from '@parcel/utils';
+import path from 'path';
 import {EOL} from 'os';
 import SourceMap from '@parcel/source-map';
 
 // E.g: ~library/file.sass
 const WEBPACK_ALIAS_RE = /^~[^/]/;
 
-let didWarnAboutNodeSass = false;
-async function warnAboutNodeSassBeingUnsupported(
- fs: FileSystem,
- filePath: FilePath,
- logger: PluginLogger,
-) {
- if (!didWarnAboutNodeSass) {
- try {
- await resolve(fs, 'node-sass', {basedir: dirname(filePath)});
- logger.warn({
- origin: '@parcel/transformer-sass',
- message:
- '`node-sass` is unsupported in Parcel 2, it will use Dart Sass a.k.a. `sass`',
- });
- } catch (err) {
- if (err.code !== 'MODULE_NOT_FOUND') {
- throw err;
- }
- } finally {
- didWarnAboutNodeSass = true;
- }
- }
-}
-
 export default new Transformer({
- async getConfig({asset, resolve, options}) {
- let config = await asset.getConfig(['.sassrc', '.sassrc.js'], {
+ async loadConfig({config, options}) {
+ let configFile = await config.getConfig(['.sassrc', '.sassrc.js'], {
  packageKey: 'sass',
  });
 
- if (config === null) {
- config = {};
- }
+ let configResult = {
+ contents: configFile ? configFile.contents : {},
+ isSerialisable: true,
+ };
 
- const code = await asset.getCode();
- config.data = config.data ? config.data + EOL + code : code;
- config.file = asset.filePath;
+ if (configFile && path.extname(configFile.filePath) === '.js') {
+   config.shouldInvalidateOnStartup();
+  config.shouldReload();
 
- if (config.importer === undefined) {
- config.importer = [];
- } else if (!Array.isArray(config.importer)) {
- config.importer = [config.importer];
+ configResult.isSerialisable = false;
  }
 
- config.importer = [...config.importer, resolvePathImporter({resolve})];
+ if (configResult.contents.importer === undefined) {
+ configResult.contents.importer = [];
+ } else if (!Array.isArray(configResult.contents.importer)) {
+ configResult.contents.importer = [configResult.contents.importer];
+ }
 
- config.indentedSyntax =
- typeof config.indentedSyntax === 'boolean'
- ? config.indentedSyntax
- : asset.type === 'sass';
+ // Always emit sourcemap
+ configResult.contents.sourceMap = true;
+ // sources are created relative to the directory of outFile
+ configResult.contents.outFile = path.join(
+ options.projectRoot,
+ 'style.css.map',
+ );
+ configResult.contents.omitSourceMapUrl = true;
+ configResult.contents.sourceMapContents = false;
 
- if (options.sourceMaps) {
- config.sourceMap = true;
- // sources are created relative to the directory of outFile
- config.outFile = joinPath(options.projectRoot, 'style.css.map');
- config.omitSourceMapUrl = true;
- config.sourceMapContents = false;
- }
+ config.setResult(configResult);
+ },
 
- return config;
+ preSerializeConfig({config}) {
+ if (!config.result) return;
+
+ // Ensure we dont try to serialise functions
+ if (!config.result.isSerialisable) {
+ config.result.contents = {};
+ }
  },
 
- async transform({asset, options, config, logger}) {
- await warnAboutNodeSassBeingUnsupported(
- options.inputFS,
- asset.filePath,
- logger,
- );
+ async transform({asset, options, config, resolve}) {
+ let rawConfig = config ? config.contents : {};
  let sass = await options.packageManager.require('sass', asset.filePath, {
  autoinstall: options.autoinstall,
  });
- const sassRender = promisify(sass.render.bind(sass));
 
+ const sassRender = promisify(sass.render.bind(sass));
  let css;
  try {
- let result = await sassRender(config);
+ let code = await asset.getCode();
+ let result = await sassRender({
+ ...rawConfig,
+ file: asset.filePath,
+ data: rawConfig.data ? rawConfig.data + EOL + code : code,
+ importer: [...rawConfig.importer, resolvePathImporter({resolve})],
+ indentedSyntax:
+ typeof rawConfig.indentedSyntax === 'boolean'
+ ? rawConfig.indentedSyntax
+ : asset.type === 'sass',
+ });
 
  css = result.css;
  for (let included of result.stats.includedFiles) {

packages/transformers/stylus/src/StylusTransformer.js

@@ -7,13 +7,36 @@ import path from 'path';
 const URL_RE = /^(?:url\s*\(\s*)?['"]?(?:[#/]|(?:https?:)?\/\/)/i;
 
 export default new Transformer({
- getConfig({asset}) {
- return asset.getConfig(['.stylusrc', '.stylusrc.js'], {
+ async loadConfig({config}) {
+ let configFile = await config.getConfig(['.stylusrc', '.stylusrc.js'], {
  packageKey: 'stylus',
  });
+
+ if (configFile) {
+ let isJavascript = path.extname(configFile.filePath) === '.js';
+ if (isJavascript) {
+ config.shouldInvalidateOnStartup();
+ config.shouldReload();
+ }
+
+ config.setResult({
+ contents: configFile.contents,
+ isSerialisable: !isJavascript,
+ });
+ }
+ },
+
+ preSerializeConfig({config}) {
+ if (!config.result) return;
+
+ // Ensure we dont try to serialise functions
+ if (!config.result.isSerialisable) {
+ config.result.contents = {};
+ }
  },
 
  async transform({asset, resolve, config, options}) {
+ let stylusConfig = config ? config.contents : {};
  // stylus should be installed locally in the module that's being required
  let stylus = await options.packageManager.require(
  'stylus',
@@ -22,7 +45,7 @@ export default new Transformer({
  );
 
  let code = await asset.getCode();
- let style = stylus(code, config);
+ let style = stylus(code, stylusConfig);
  style.set('filename', asset.filePath);
  style.set('include css', true);
  // Setup a handler for the URL function so we add dependencies for linked assets.

packages/transformers/svgo/src/SVGOTransformer.js

@@ -3,14 +3,15 @@
 import {Transformer} from '@parcel/plugin';
 
 import SVGO from 'svgo';
+import path from 'path';
 
 const defaultConfig = {
  plugins: [{prefixIds: true}],
 };
 
 export default new Transformer({
- async getConfig({asset}) {
- let config = await asset.getConfig(
+ async loadConfig({config}) {
+ let configFile = await config.getConfig(
  [
  '.svgorc',
  '.svgorc.json',
@@ -24,14 +25,33 @@ export default new Transformer({
  },
  );
 
- config = {...defaultConfig, ...config};
+ if (configFile) {
+ let isJavascript = path.extname(configFile.filePath) === '.js';
+ if (isJavascript) {
+ config.shouldInvalidateOnStartup();
+ config.shouldReload();
+ }
+
+ config.setResult({
+ contents: configFile.contents,
+ isSerialisable: !isJavascript,
+ });
+ }
+ },
+
+ preSerializeConfig({config}) {
+ if (!config.result) return;
 
- return config;
+ // Ensure we dont try to serialise functions
+ if (!config.result.isSerialisable) {
+ config.result.contents = {};
+ }
  },
 
  async transform({asset, config}) {
+ let svgoConfig = config ? config.contents : {};
  let code = await asset.getCode();
- let svgo = new SVGO(config);
+ let svgo = new SVGO({...defaultConfig, ...svgoConfig});
  let res = await svgo.optimize(code);
 
  asset.setCode(res.data);