@parcel/transformer-css 2.4.0 → 2.6.0

package/lib/CSSTransformer.js

@@ -107,6 +107,18 @@ var _default = new (_plugin().Transformer)({
     config,
     options
   }) {
+    // Normalize the asset's environment so that properties that only affect JS don't cause CSS to be duplicated.
+    // For example, with ESModule and CommonJS targets, only a single shared CSS bundle should be produced.
+    let env = asset.env;
+    asset.setEnvironment({
+      context: 'browser',
+      engines: {
+        browsers: asset.env.engines.browsers
+      },
+      shouldOptimize: asset.env.shouldOptimize,
+      shouldScopeHoist: asset.env.shouldScopeHoist,
+      sourceMap: asset.env.sourceMap
+    });
     let [code, originalMap] = await Promise.all([asset.getBuffer(), asset.getMap()]);
     let targets = getTargets(asset.env.engines.browsers);
     let res;
@@ -119,12 +131,24 @@ var _default = new (_plugin().Transformer)({
           targets
         });
       } else {
-        var _config$cssModules;
+        let cssModules = false;
+
+        if (asset.meta.type !== 'tag' && asset.meta.cssModulesCompiled == null) {
+          let cssModulesConfig = config === null || config === void 0 ? void 0 : config.cssModules;
+
+          if (asset.isSource && (typeof cssModulesConfig === 'boolean' || cssModulesConfig !== null && cssModulesConfig !== void 0 && cssModulesConfig.global) || /\.module\./.test(asset.filePath)) {
+            if (cssModulesConfig !== null && cssModulesConfig !== void 0 && cssModulesConfig.dashedIdents && !asset.isSource) {
+              cssModulesConfig.dashedIdents = false;
+            }
+
+            cssModules = cssModulesConfig !== null && cssModulesConfig !== void 0 ? cssModulesConfig : true;
+          }
+        }
 
         res = (0, _css().transform)({
           filename: _path().default.relative(options.projectRoot, asset.filePath),
           code,
-          cssModules: (_config$cssModules = config === null || config === void 0 ? void 0 : config.cssModules) !== null && _config$cssModules !== void 0 ? _config$cssModules : asset.meta.cssModulesCompiled !== true && /\.module\./.test(asset.filePath),
+          cssModules,
           analyzeDependencies: asset.meta.hasDependencies !== false,
           sourceMap: !!asset.env.sourceMap,
           drafts: config === null || config === void 0 ? void 0 : config.drafts,
@@ -173,7 +197,7 @@ var _default = new (_plugin().Transformer)({
           loc = (0, _utils().remapSourceLocation)(loc, originalMap);
         }
 
-        if (dep.type === 'import') {
+        if (dep.type === 'import' && !res.exports) {
           asset.addDependency({
             specifier: dep.url,
             specifierType: 'url',
@@ -182,12 +206,7 @@ var _default = new (_plugin().Transformer)({
               // For the glob resolver to distinguish between `@import` and other URL dependencies.
               isCSSImport: true,
               media: dep.media
-            },
-            symbols: new Map([['*', {
-              local: '*',
-              isWeak: true,
-              loc
-            }]])
+            }
           });
         } else if (dep.type === 'url') {
           asset.addURLDependency(dep.url, {
@@ -207,7 +226,6 @@ var _default = new (_plugin().Transformer)({
       asset.symbols.ensure();
       asset.symbols.set('default', 'default');
       let dependencies = new Map();
-      let selfReferences = new Set();
       let locals = new Map();
       let c = 0;
       let depjs = '';
@@ -228,10 +246,6 @@ var _default = new (_plugin().Transformer)({
         let e = exports[key];
         let s = `module.exports[${JSON.stringify(key)}] = \`${e.name}`;
 
-        if (e.isReferenced) {
-          selfReferences.add(e.name);
-        }
-
         for (let ref of e.composes) {
           s += ' ';
 
@@ -247,17 +261,19 @@ var _default = new (_plugin().Transformer)({
               d = `dep_${c++}`;
               depjs += `import * as ${d} from ${JSON.stringify(ref.specifier)};\n`;
               dependencies.set(ref.specifier, d);
-              asset.addDependency({
-                specifier: ref.specifier,
-                specifierType: 'url'
-              });
             }
 
             s += '${' + `${d}[${JSON.stringify(ref.name)}]` + '}';
           }
         }
 
-        s += '`;\n';
+        s += '`;\n'; // If the export is referenced internally (e.g. used @keyframes), add a self-reference
+        // to the JS so the symbol is retained during tree-shaking.
+
+        if (e.isReferenced) {
+          s += `module.exports[${JSON.stringify(key)}];\n`;
+        }
+
         js += s;
       };
 
@@ -266,12 +282,33 @@ var _default = new (_plugin().Transformer)({
         add(key);
       }
 
-      for (let dep of asset.getDependencies()) {
-        if (dep.priority === 'sync') {
-          // TODO: Figure out how to treeshake this
-          let d = `dep_$${c++}`;
-          depjs += `import * as ${d} from ${JSON.stringify(dep.specifier)};\n`;
-          depjs += `for (let key in ${d}) { if (key in module.exports) module.exports[key] += ' ' + ${d}[key]; else module.exports[key] = ${d}[key]; }\n`;
+      if (res.dependencies) {
+        for (let dep of res.dependencies) {
+          if (dep.type === 'import') {
+            // TODO: Figure out how to treeshake this
+            let d = `dep_$${c++}`;
+            depjs += `import * as ${d} from ${JSON.stringify(dep.url)};\n`;
+            js += `for (let key in ${d}) { if (key in module.exports) module.exports[key] += ' ' + ${d}[key]; else module.exports[key] = ${d}[key]; }\n`;
+            asset.symbols.set('*', '*');
+          }
+        }
+      }
+
+      if (res.references != null) {
+        let references = res.references;
+
+        for (let symbol in references) {
+          let reference = references[symbol];
+          asset.addDependency({
+            specifier: reference.specifier,
+            specifierType: 'esm',
+            symbols: new Map([[reference.name, {
+              local: symbol,
+              isWeak: false,
+              loc: null
+            }]])
+          });
+          asset.meta.hasReferences = true;
         }
       }
 
@@ -279,33 +316,10 @@ var _default = new (_plugin().Transformer)({
         type: 'js',
         content: depjs + js,
         dependencies: [],
-        env: asset.env
+        env
       });
+    }
 
-      if (selfReferences.size > 0) {
-        asset.addDependency({
-          specifier: `./${_path().default.basename(asset.filePath)}`,
-          specifierType: 'url',
-          symbols: new Map([...locals].filter(([local]) => selfReferences.has(local)).map(([local, exported]) => [exported, {
-            local,
-            isWeak: false,
-            loc: null
-          }]))
-        });
-      }
-    } // Normalize the asset's environment so that properties that only affect JS don't cause CSS to be duplicated.
-    // For example, with ESModule and CommonJS targets, only a single shared CSS bundle should be produced.
-
-
-    asset.setEnvironment({
-      context: 'browser',
-      engines: {
-        browsers: asset.env.engines.browsers
-      },
-      shouldOptimize: asset.env.shouldOptimize,
-      shouldScopeHoist: asset.env.shouldScopeHoist,
-      sourceMap: asset.env.sourceMap
-    });
     return assets;
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parcel/transformer-css",
-  "version": "2.4.0",
+  "version": "2.6.0",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -17,16 +17,16 @@
   "source": "src/CSSTransformer.js",
   "engines": {
     "node": ">= 12.0.0",
-    "parcel": "^2.4.0"
+    "parcel": "^2.6.0"
   },
   "dependencies": {
-    "@parcel/css": "^1.7.2",
-    "@parcel/diagnostic": "2.4.0",
-    "@parcel/plugin": "2.4.0",
+    "@parcel/css": "^1.9.0",
+    "@parcel/diagnostic": "2.6.0",
+    "@parcel/plugin": "2.6.0",
     "@parcel/source-map": "^2.0.0",
-    "@parcel/utils": "2.4.0",
+    "@parcel/utils": "2.6.0",
     "browserslist": "^4.6.6",
     "nullthrows": "^1.1.1"
   },
-  "gitHead": "b1bbfdab2e902d33c0b6ff75bfba2d22283a8de6"
+  "gitHead": "f2d0a3a27d6e493b23ddc2edbc8a4c0053ff34ab"
 }

package/src/CSSTransformer.js

@@ -21,6 +21,19 @@ export default (new Transformer({
     return conf?.contents;
   },
   async transform({asset, config, options}) {
+    // Normalize the asset's environment so that properties that only affect JS don't cause CSS to be duplicated.
+    // For example, with ESModule and CommonJS targets, only a single shared CSS bundle should be produced.
+    let env = asset.env;
+    asset.setEnvironment({
+      context: 'browser',
+      engines: {
+        browsers: asset.env.engines.browsers,
+      },
+      shouldOptimize: asset.env.shouldOptimize,
+      shouldScopeHoist: asset.env.shouldScopeHoist,
+      sourceMap: asset.env.sourceMap,
+    });
+
     let [code, originalMap] = await Promise.all([
       asset.getBuffer(),
       asset.getMap(),
@@ -36,13 +49,30 @@ export default (new Transformer({
           targets,
         });
       } else {
+        let cssModules = false;
+        if (
+          asset.meta.type !== 'tag' &&
+          asset.meta.cssModulesCompiled == null
+        ) {
+          let cssModulesConfig = config?.cssModules;
+          if (
+            (asset.isSource &&
+              (typeof cssModulesConfig === 'boolean' ||
+                cssModulesConfig?.global)) ||
+            /\.module\./.test(asset.filePath)
+          ) {
+            if (cssModulesConfig?.dashedIdents && !asset.isSource) {
+              cssModulesConfig.dashedIdents = false;
+            }
+
+            cssModules = cssModulesConfig ?? true;
+          }
+        }
+
         res = transform({
           filename: path.relative(options.projectRoot, asset.filePath),
           code,
-          cssModules:
-            config?.cssModules ??
-            (asset.meta.cssModulesCompiled !== true &&
-              /\.module\./.test(asset.filePath)),
+          cssModules,
           analyzeDependencies: asset.meta.hasDependencies !== false,
           sourceMap: !!asset.env.sourceMap,
           drafts: config?.drafts,
@@ -94,7 +124,7 @@ export default (new Transformer({
           loc = remapSourceLocation(loc, originalMap);
         }
 
-        if (dep.type === 'import') {
+        if (dep.type === 'import' && !res.exports) {
           asset.addDependency({
             specifier: dep.url,
             specifierType: 'url',
@@ -104,7 +134,6 @@ export default (new Transformer({
               isCSSImport: true,
               media: dep.media,
             },
-            symbols: new Map([['*', {local: '*', isWeak: true, loc}]]),
           });
         } else if (dep.type === 'url') {
           asset.addURLDependency(dep.url, {
@@ -125,7 +154,6 @@ export default (new Transformer({
       asset.symbols.set('default', 'default');
 
       let dependencies = new Map();
-      let selfReferences = new Set();
       let locals = new Map();
       let c = 0;
       let depjs = '';
@@ -147,10 +175,6 @@ export default (new Transformer({
         let e = exports[key];
         let s = `module.exports[${JSON.stringify(key)}] = \`${e.name}`;
 
-        if (e.isReferenced) {
-          selfReferences.add(e.name);
-        }
-
         for (let ref of e.composes) {
           s += ' ';
           if (ref.type === 'local') {
@@ -171,17 +195,19 @@ export default (new Transformer({
                 ref.specifier,
               )};\n`;
               dependencies.set(ref.specifier, d);
-
-              asset.addDependency({
-                specifier: ref.specifier,
-                specifierType: 'url',
-              });
             }
             s += '${' + `${d}[${JSON.stringify(ref.name)}]` + '}';
           }
         }
 
         s += '`;\n';
+
+        // If the export is referenced internally (e.g. used @keyframes), add a self-reference
+        // to the JS so the symbol is retained during tree-shaking.
+        if (e.isReferenced) {
+          s += `module.exports[${JSON.stringify(key)}];\n`;
+        }
+
         js += s;
       };
 
@@ -190,12 +216,31 @@ export default (new Transformer({
         add(key);
       }
 
-      for (let dep of asset.getDependencies()) {
-        if (dep.priority === 'sync') {
-          // TODO: Figure out how to treeshake this
-          let d = `dep_$${c++}`;
-          depjs += `import * as ${d} from ${JSON.stringify(dep.specifier)};\n`;
-          depjs += `for (let key in ${d}) { if (key in module.exports) module.exports[key] += ' ' + ${d}[key]; else module.exports[key] = ${d}[key]; }\n`;
+      if (res.dependencies) {
+        for (let dep of res.dependencies) {
+          if (dep.type === 'import') {
+            // TODO: Figure out how to treeshake this
+            let d = `dep_$${c++}`;
+            depjs += `import * as ${d} from ${JSON.stringify(dep.url)};\n`;
+            js += `for (let key in ${d}) { if (key in module.exports) module.exports[key] += ' ' + ${d}[key]; else module.exports[key] = ${d}[key]; }\n`;
+            asset.symbols.set('*', '*');
+          }
+        }
+      }
+
+      if (res.references != null) {
+        let references = res.references;
+        for (let symbol in references) {
+          let reference = references[symbol];
+          asset.addDependency({
+            specifier: reference.specifier,
+            specifierType: 'esm',
+            symbols: new Map([
+              [reference.name, {local: symbol, isWeak: false, loc: null}],
+            ]),
+          });
+
+          asset.meta.hasReferences = true;
         }
       }
 
@@ -203,37 +248,10 @@ export default (new Transformer({
         type: 'js',
         content: depjs + js,
         dependencies: jsDeps,
-        env: asset.env,
+        env,
       });
-
-      if (selfReferences.size > 0) {
-        asset.addDependency({
-          specifier: `./${path.basename(asset.filePath)}`,
-          specifierType: 'url',
-          symbols: new Map(
-            [...locals]
-              .filter(([local]) => selfReferences.has(local))
-              .map(([local, exported]) => [
-                exported,
-                {local, isWeak: false, loc: null},
-              ]),
-          ),
-        });
-      }
     }
 
-    // Normalize the asset's environment so that properties that only affect JS don't cause CSS to be duplicated.
-    // For example, with ESModule and CommonJS targets, only a single shared CSS bundle should be produced.
-    asset.setEnvironment({
-      context: 'browser',
-      engines: {
-        browsers: asset.env.engines.browsers,
-      },
-      shouldOptimize: asset.env.shouldOptimize,
-      shouldScopeHoist: asset.env.shouldScopeHoist,
-      sourceMap: asset.env.sourceMap,
-    });
-
     return assets;
   },
 }): Transformer);