@parcel/transformer-css 2.8.3 → 2.9.0

package/lib/CSSTransformer.js

@@ -4,93 +4,65 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 function _path() {
   const data = _interopRequireDefault(require("path"));
-
   _path = function () {
     return data;
   };
-
   return data;
 }
-
 function _sourceMap() {
   const data = _interopRequireDefault(require("@parcel/source-map"));
-
   _sourceMap = function () {
     return data;
   };
-
   return data;
 }
-
 function _plugin() {
   const data = require("@parcel/plugin");
-
   _plugin = function () {
     return data;
   };
-
   return data;
 }
-
 function _lightningcss() {
   const data = require("lightningcss");
-
   _lightningcss = function () {
     return data;
   };
-
   return data;
 }
-
 function _utils() {
   const data = require("@parcel/utils");
-
   _utils = function () {
     return data;
   };
-
   return data;
 }
-
 function _browserslist() {
   const data = _interopRequireDefault(require("browserslist"));
-
   _browserslist = function () {
     return data;
   };
-
   return data;
 }
-
 function _nullthrows() {
   const data = _interopRequireDefault(require("nullthrows"));
-
   _nullthrows = function () {
     return data;
   };
-
   return data;
 }
-
 function _diagnostic() {
   const data = _interopRequireWildcard(require("@parcel/diagnostic"));
-
   _diagnostic = function () {
     return data;
   };
-
   return data;
 }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var _default = new (_plugin().Transformer)({
   async loadConfig({
     config,
@@ -101,7 +73,6 @@ var _default = new (_plugin().Transformer)({
     });
     return conf === null || conf === void 0 ? void 0 : conf.contents;
   },
-
   async transform({
     asset,
     config,
@@ -123,7 +94,6 @@ var _default = new (_plugin().Transformer)({
     let [code, originalMap] = await Promise.all([asset.getBuffer(), asset.getMap()]);
     let targets = getTargets(asset.env.engines.browsers);
     let res;
-
     try {
       if (asset.meta.type === 'attr') {
         res = (0, _lightningcss().transformStyleAttribute)({
@@ -134,19 +104,15 @@ var _default = new (_plugin().Transformer)({
         });
       } else {
         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, _lightningcss().transform)({
           filename: _path().default.relative(options.projectRoot, asset.filePath),
           code,
@@ -161,23 +127,19 @@ var _default = new (_plugin().Transformer)({
       }
     } catch (err) {
       var _err$data;
-
       err.filePath = asset.filePath;
       let diagnostic = (0, _diagnostic().errorToDiagnostic)(err, {
         origin: '@parcel/transformer-css'
       });
-
       if (((_err$data = err.data) === null || _err$data === void 0 ? void 0 : _err$data.type) === 'AmbiguousUrlInCustomProperty' && err.data.url) {
         let p = '/' + (0, _utils().relativePath)(options.projectRoot, _path().default.resolve(_path().default.dirname(asset.filePath), err.data.url), false);
         diagnostic[0].hints = [`Replace with: url(${p})`];
         diagnostic[0].documentationURL = 'https://parceljs.org/languages/css/#url()';
       }
-
       throw new (_diagnostic().default)({
         diagnostic
       });
     }
-
     if (res.warnings) {
       for (let warning of res.warnings) {
         logger.warn({
@@ -187,45 +149,39 @@ var _default = new (_plugin().Transformer)({
             codeHighlights: [{
               start: {
                 line: warning.loc.line,
-                column: warning.loc.column
+                column: warning.loc.column + 1
               },
               end: {
                 line: warning.loc.line,
-                column: warning.loc.column
+                column: warning.loc.column + 1
               }
             }]
           }]
         });
       }
     }
-
     asset.setBuffer(res.code);
-
     if (res.map != null) {
       let vlqMap = JSON.parse(res.map.toString());
       let map = new (_sourceMap().default)(options.projectRoot);
       map.addVLQMap(vlqMap);
-
       if (originalMap) {
         map.extends(originalMap);
       }
-
       asset.setMap(map);
     }
-
     if (res.dependencies) {
       for (let dep of res.dependencies) {
-        let loc = dep.loc;
-
+        let loc = convertLoc(dep.loc);
         if (originalMap) {
           loc = (0, _utils().remapSourceLocation)(loc, originalMap);
         }
-
         if (dep.type === 'import' && !res.exports) {
           asset.addDependency({
             specifier: dep.url,
             specifierType: 'url',
             loc,
+            packageConditions: ['style'],
             meta: {
               // For the glob resolver to distinguish between `@import` and other URL dependencies.
               isCSSImport: true,
@@ -242,9 +198,7 @@ var _default = new (_plugin().Transformer)({
         }
       }
     }
-
     let assets = [asset];
-
     if (res.exports != null) {
       let exports = res.exports;
       asset.symbols.ensure();
@@ -254,25 +208,19 @@ var _default = new (_plugin().Transformer)({
       let c = 0;
       let depjs = '';
       let js = '';
-
       for (let key in exports) {
         locals.set(exports[key].name, key);
       }
-
       let seen = new Set();
-
       let add = key => {
         if (seen.has(key)) {
           return;
         }
-
         seen.add(key);
         let e = exports[key];
         let s = `module.exports[${JSON.stringify(key)}] = \`${e.name}`;
-
         for (let ref of e.composes) {
           s += ' ';
-
           if (ref.type === 'local') {
             add((0, _nullthrows().default)(locals.get(ref.name)));
             s += '${' + `module.exports[${JSON.stringify((0, _nullthrows().default)(locals.get(ref.name)))}]` + '}';
@@ -280,36 +228,35 @@ var _default = new (_plugin().Transformer)({
             s += ref.name;
           } else if (ref.type === 'dependency') {
             let d = dependencies.get(ref.specifier);
-
             if (d == null) {
               d = `dep_${c++}`;
               depjs += `import * as ${d} from ${JSON.stringify(ref.specifier)};\n`;
               dependencies.set(ref.specifier, d);
               asset.addDependency({
                 specifier: ref.specifier,
-                specifierType: 'esm'
+                specifierType: 'esm',
+                packageConditions: ['style']
               });
             }
-
             s += '${' + `${d}[${JSON.stringify(ref.name)}]` + '}';
           }
         }
+        s += '`;\n';
 
-        s += '`;\n'; // If the export is referenced internally (e.g. used @keyframes), add a self-reference
+        // 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;
       };
 
-      for (let key in exports) {
+      // It's possible that the exports can be ordered differently between builds.
+      // Sorting by key is safe as the order is irrelevant but needs to be deterministic.
+      for (let key of Object.keys(exports).sort()) {
         asset.symbols.set(key, exports[key].name);
         add(key);
       }
-
       if (res.dependencies) {
         for (let dep of res.dependencies) {
           if (dep.type === 'import') {
@@ -321,15 +268,14 @@ var _default = new (_plugin().Transformer)({
           }
         }
       }
-
       if (res.references != null) {
         let references = res.references;
-
         for (let symbol in references) {
           let reference = references[symbol];
           asset.addDependency({
             specifier: reference.specifier,
             specifierType: 'esm',
+            packageConditions: ['style'],
             symbols: new Map([[reference.name, {
               local: symbol,
               isWeak: false,
@@ -339,7 +285,6 @@ var _default = new (_plugin().Transformer)({
           asset.meta.hasReferences = true;
         }
       }
-
       assets.push({
         type: 'js',
         content: depjs + js,
@@ -347,27 +292,33 @@ var _default = new (_plugin().Transformer)({
         env
       });
     }
-
     return assets;
   }
-
 });
-
 exports.default = _default;
 let cache = new Map();
-
 function getTargets(browsers) {
   if (browsers == null) {
     return undefined;
   }
-
   let cached = cache.get(browsers);
-
   if (cached != null) {
     return cached;
   }
-
   let targets = (0, _lightningcss().browserslistToTargets)((0, _browserslist().default)(browsers));
   cache.set(browsers, targets);
   return targets;
+}
+function convertLoc(loc) {
+  return {
+    filePath: loc.filePath,
+    start: {
+      line: loc.start.line,
+      column: loc.start.column
+    },
+    end: {
+      line: loc.end.line,
+      column: loc.end.column + 1
+    }
+  };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parcel/transformer-css",
-  "version": "2.8.3",
+  "version": "2.9.0",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -17,16 +17,16 @@
   "source": "src/CSSTransformer.js",
   "engines": {
     "node": ">= 12.0.0",
-    "parcel": "^2.8.3"
+    "parcel": "^2.9.0"
   },
   "dependencies": {
-    "@parcel/diagnostic": "2.8.3",
-    "@parcel/plugin": "2.8.3",
+    "@parcel/diagnostic": "2.9.0",
+    "@parcel/plugin": "2.9.0",
     "@parcel/source-map": "^2.1.1",
-    "@parcel/utils": "2.8.3",
+    "@parcel/utils": "2.9.0",
     "browserslist": "^4.6.6",
     "lightningcss": "^1.16.1",
     "nullthrows": "^1.1.1"
   },
-  "gitHead": "349a6caf40ec8abb6a49fcae0765f8f8deb2073d"
+  "gitHead": "dd9435be8afed35c5ffc161cf4b586fd6c78fc1f"
 }

package/src/CSSTransformer.js

@@ -1,5 +1,7 @@
 // @flow strict-local
 
+import type {SourceLocation} from '@parcel/types';
+
 import path from 'path';
 import SourceMap from '@parcel/source-map';
 import {Transformer} from '@parcel/plugin';
@@ -7,6 +9,7 @@ import {
   transform,
   transformStyleAttribute,
   browserslistToTargets,
+  type SourceLocation as LightningSourceLocation,
 } from 'lightningcss';
 import {remapSourceLocation, relativePath} from '@parcel/utils';
 import browserslist from 'browserslist';
@@ -116,11 +119,11 @@ export default (new Transformer({
                 {
                   start: {
                     line: warning.loc.line,
-                    column: warning.loc.column,
+                    column: warning.loc.column + 1,
                   },
                   end: {
                     line: warning.loc.line,
-                    column: warning.loc.column,
+                    column: warning.loc.column + 1,
                   },
                 },
               ],
@@ -146,7 +149,7 @@ export default (new Transformer({
 
     if (res.dependencies) {
       for (let dep of res.dependencies) {
-        let loc = dep.loc;
+        let loc = convertLoc(dep.loc);
         if (originalMap) {
           loc = remapSourceLocation(loc, originalMap);
         }
@@ -156,6 +159,7 @@ export default (new Transformer({
             specifier: dep.url,
             specifierType: 'url',
             loc,
+            packageConditions: ['style'],
             meta: {
               // For the glob resolver to distinguish between `@import` and other URL dependencies.
               isCSSImport: true,
@@ -225,6 +229,7 @@ export default (new Transformer({
               asset.addDependency({
                 specifier: ref.specifier,
                 specifierType: 'esm',
+                packageConditions: ['style'],
               });
             }
             s += '${' + `${d}[${JSON.stringify(ref.name)}]` + '}';
@@ -242,7 +247,9 @@ export default (new Transformer({
         js += s;
       };
 
-      for (let key in exports) {
+      // It's possible that the exports can be ordered differently between builds.
+      // Sorting by key is safe as the order is irrelevant but needs to be deterministic.
+      for (let key of Object.keys(exports).sort()) {
         asset.symbols.set(key, exports[key].name);
         add(key);
       }
@@ -266,6 +273,7 @@ export default (new Transformer({
           asset.addDependency({
             specifier: reference.specifier,
             specifierType: 'esm',
+            packageConditions: ['style'],
             symbols: new Map([
               [reference.name, {local: symbol, isWeak: false, loc: null}],
             ]),
@@ -304,3 +312,11 @@ function getTargets(browsers) {
   cache.set(browsers, targets);
   return targets;
 }
+
+function convertLoc(loc: LightningSourceLocation): SourceLocation {
+  return {
+    filePath: loc.filePath,
+    start: {line: loc.start.line, column: loc.start.column},
+    end: {line: loc.end.line, column: loc.end.column + 1},
+  };
+}