@parcel/transformer-css 2.4.0 → 2.4.1

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;
@@ -124,7 +136,7 @@ var _default = new (_plugin().Transformer)({
         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: (_config$cssModules = config === null || config === void 0 ? void 0 : config.cssModules) !== null && _config$cssModules !== void 0 ? _config$cssModules : asset.meta.cssModulesCompiled == null && /\.module\./.test(asset.filePath),
           analyzeDependencies: asset.meta.hasDependencies !== false,
           sourceMap: !!asset.env.sourceMap,
           drafts: config === null || config === void 0 ? void 0 : config.drafts,
@@ -173,7 +185,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 +194,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 +214,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 +234,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 +249,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 +270,15 @@ 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('*', '*');
+          }
         }
       }
 
@@ -279,33 +286,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.4.1",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -17,16 +17,16 @@
   "source": "src/CSSTransformer.js",
   "engines": {
     "node": ">= 12.0.0",
-    "parcel": "^2.4.0"
+    "parcel": "^2.4.1"
   },
   "dependencies": {
-    "@parcel/css": "^1.7.2",
-    "@parcel/diagnostic": "2.4.0",
-    "@parcel/plugin": "2.4.0",
+    "@parcel/css": "^1.7.4",
+    "@parcel/diagnostic": "2.4.1",
+    "@parcel/plugin": "2.4.1",
     "@parcel/source-map": "^2.0.0",
-    "@parcel/utils": "2.4.0",
+    "@parcel/utils": "2.4.1",
     "browserslist": "^4.6.6",
     "nullthrows": "^1.1.1"
   },
-  "gitHead": "b1bbfdab2e902d33c0b6ff75bfba2d22283a8de6"
+  "gitHead": "80c728ceffdc0829eca568a6ec66c07e07a0b87b"
 }

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(),
@@ -41,7 +54,7 @@ export default (new Transformer({
           code,
           cssModules:
             config?.cssModules ??
-            (asset.meta.cssModulesCompiled !== true &&
+            (asset.meta.cssModulesCompiled == null &&
               /\.module\./.test(asset.filePath)),
           analyzeDependencies: asset.meta.hasDependencies !== false,
           sourceMap: !!asset.env.sourceMap,
@@ -94,7 +107,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 +117,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 +137,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 +158,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 +178,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 +199,15 @@ 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('*', '*');
+          }
         }
       }
 
@@ -203,37 +215,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);