@parcel/transformer-css 2.0.0-nightly.85 → 2.0.0-nightly.852

package/lib/CSSTransformer.js

@@ -5,15 +5,75 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _plugin = require("@parcel/plugin");
+function _sourceMap() {
+  const data = _interopRequireDefault(require("@parcel/source-map"));
 
-var _utils = require("@parcel/utils");
+  _sourceMap = function () {
+    return data;
+  };
 
-var _postcss = _interopRequireDefault(require("postcss"));
+  return data;
+}
+
+function _plugin() {
+  const data = require("@parcel/plugin");
+
+  _plugin = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _utils() {
+  const data = require("@parcel/utils");
 
-var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));
+  _utils = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _postcss() {
+  const data = _interopRequireDefault(require("postcss"));
+
+  _postcss = function () {
+    return data;
+  };
+
+  return data;
+}
 
-var _semver = _interopRequireDefault(require("semver"));
+function _nullthrows() {
+  const data = _interopRequireDefault(require("nullthrows"));
+
+  _nullthrows = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _postcssValueParser() {
+  const data = _interopRequireDefault(require("postcss-value-parser"));
+
+  _postcssValueParser = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _semver() {
+  const data = _interopRequireDefault(require("semver"));
+
+  _semver = function () {
+    return data;
+  };
+
+  return data;
+}
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -24,11 +84,11 @@ function canHaveDependencies(filePath, code) {
   return !/\.css$/.test(filePath) || IMPORT_RE.test(code) || URL_RE.test(code);
 }
 
-var _default = new _plugin.Transformer({
+var _default = new (_plugin().Transformer)({
   canReuseAST({
     ast
   }) {
-    return ast.type === 'postcss' && _semver.default.satisfies(ast.version, '^7.0.0');
+    return ast.type === 'postcss' && _semver().default.satisfies(ast.version, '^8.2.1');
   },
 
   async parse({
@@ -46,114 +106,161 @@ var _default = new _plugin.Transformer({
 
     let code = await asset.getCode();
 
-    if (!canHaveDependencies(asset.filePath, code)) {
+    if (code != null && !canHaveDependencies(asset.filePath, code)) {
       return null;
     }
 
     return {
       type: 'postcss',
-      version: '7.0.0',
-      isDirty: false,
-      program: _postcss.default.parse(code, {
+      version: '8.2.1',
+      program: _postcss().default.parse(code, {
         from: asset.filePath
-      })
+      }).toJSON()
     };
   },
 
-  transform({
+  async transform({
     asset
   }) {
-    let ast = asset.ast; // Check for `hasDependencies` being false here as well, as it's possible
+    // 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,
+      sourceMap: asset.env.sourceMap
+    }); // Check for `hasDependencies` being false here as well, as it's possible
     // another transformer (such as PostCSSTransformer) has already parsed an
     // ast and CSSTransformer's parse was never called.
 
+    let ast = await asset.getAST();
+
     if (!ast || asset.meta.hasDependencies === false) {
       return [asset];
     }
 
-    ast.program.walkAtRules('import', rule => {
-      let params = (0, _postcssValueParser.default)(rule.params);
+    let program = _postcss().default.fromJSON(ast.program);
+
+    let originalSourceMap = await asset.getMap();
+
+    let createLoc = (start, specifier, lineOffset, colOffset) => {
+      let loc = (0, _utils().createDependencyLocation)(start, specifier, lineOffset, colOffset);
+
+      if (originalSourceMap) {
+        loc = (0, _utils().remapSourceLocation)(loc, originalSourceMap);
+      }
+
+      return loc;
+    };
+
+    let isDirty = false;
+    program.walkAtRules('import', rule => {
+      let params = (0, _postcssValueParser().default)(rule.params);
       let [name, ...media] = params.nodes;
-      let moduleSpecifier;
+      let specifier;
 
       if (name.type === 'function' && name.value === 'url' && name.nodes.length) {
         name = name.nodes[0];
       }
 
-      moduleSpecifier = name.value;
+      specifier = name.value;
 
-      if (!moduleSpecifier) {
-        throw new Error('Could not find import name for ' + rule);
-      }
+      if (!specifier) {
+        throw new Error('Could not find import name for ' + String(rule));
+      } // If this came from an inline <style> tag, don't inline the imported file. Replace with the correct URL instead.
+      // TODO: run CSSPackager on inline style tags.
+      // let inlineHTML =
+      //   this.options.rendition && this.options.rendition.inlineHTML;
+      // if (inlineHTML) {
+      //   name.value = asset.addURLDependency(dep, {loc: rule.source.start});
+      //   rule.params = params.toString();
+      // } else {
 
-      if ((0, _utils.isURL)(moduleSpecifier)) {
-        name.value = asset.addURLDependency(moduleSpecifier, {
-          loc: (0, _utils.createDependencyLocation)(rule.source.start, moduleSpecifier, 0, 8)
-        });
-      } else {
-        // If this came from an inline <style> tag, don't inline the imported file. Replace with the correct URL instead.
-        // TODO: run CSSPackager on inline style tags.
-        // let inlineHTML =
-        //   this.options.rendition && this.options.rendition.inlineHTML;
-        // if (inlineHTML) {
-        //   name.value = asset.addURLDependency(dep, {loc: rule.source.start});
-        //   rule.params = params.toString();
-        // } else {
-        media = _postcssValueParser.default.stringify(media).trim();
-        let dep = {
-          moduleSpecifier,
-          // Offset by 8 as it does not include `@import `
-          loc: (0, _utils.createDependencyLocation)(rule.source.start, moduleSpecifier, 0, 8),
-          meta: {
-            media
-          }
-        };
-        asset.addDependency(dep);
-        rule.remove(); // }
-      }
 
-      ast.isDirty = true;
+      media = _postcssValueParser().default.stringify(media).trim();
+      let dep = {
+        specifier,
+        specifierType: 'url',
+        // Offset by 8 as it does not include `@import `
+        loc: createLoc((0, _nullthrows().default)(rule.source.start), specifier, 0, 8),
+        meta: {
+          // For the glob resolver to distinguish between `@import` and other URL dependencies.
+          isCSSImport: true,
+          media
+        }
+      };
+      asset.addDependency(dep);
+      rule.remove(); // }
+
+      isDirty = true;
     });
-    ast.program.walkDecls(decl => {
+    program.walkDecls(decl => {
       if (URL_RE.test(decl.value)) {
-        let parsed = (0, _postcssValueParser.default)(decl.value);
-        let isDirty = false;
+        let parsed = (0, _postcssValueParser().default)(decl.value);
+        let isDeclDirty = false;
         parsed.walk(node => {
           if (node.type === 'function' && node.value === 'url' && node.nodes.length > 0 && !node.nodes[0].value.startsWith('#') // IE's `behavior: url(#default#VML)`
           ) {
-              node.nodes[0].value = asset.addURLDependency(node.nodes[0].value, {
-                loc: (0, _utils.createDependencyLocation)(decl.source.start, node.nodes[0].value)
+              let url = asset.addURLDependency(node.nodes[0].value, {
+                loc: createLoc((0, _nullthrows().default)(decl.source.start), node.nodes[0].value, 0, node.nodes[0].sourceIndex)
               });
-              isDirty = true;
+              isDeclDirty = node.nodes[0].value !== url;
+              node.nodes[0].value = url;
             }
         });
 
-        if (isDirty) {
+        if (isDeclDirty) {
           decl.value = parsed.toString();
-          ast.isDirty = true;
+          isDirty = true;
         }
       }
     });
+
+    if (isDirty) {
+      asset.setAST({ ...ast,
+        program: program.toJSON()
+      });
+    }
+
     return [asset];
   },
 
   async generate({
-    asset
+    asset,
+    ast,
+    options
   }) {
-    let code;
+    let result = await (0, _postcss().default)().process(_postcss().default.fromJSON(ast.program), {
+      from: undefined,
+      to: options.projectRoot + '/index',
+      map: {
+        annotation: false,
+        inline: false,
+        sourcesContent: false
+      },
+      // Pass postcss's own stringifier to it to silence its warning
+      // as we don't want to perform any transformations -- only generate
+      stringifier: _postcss().default.stringify
+    });
+    let map = null;
+    let originalSourceMap = await asset.getMap();
 
-    if (!asset.ast || !asset.ast.isDirty) {
-      code = await asset.getCode();
-    } else {
-      code = '';
+    if (result.map != null) {
+      map = new (_sourceMap().default)(options.projectRoot);
+      map.addVLQMap(result.map.toJSON());
 
-      _postcss.default.stringify(asset.ast.program, c => {
-        code += c;
-      });
+      if (originalSourceMap) {
+        map.extends(originalSourceMap.toBuffer());
+      }
+    } else {
+      map = originalSourceMap;
     }
 
     return {
-      code
+      content: result.css,
+      map
     };
   }
 

package/package.json

@@ -1,10 +1,14 @@
 {
   "name": "@parcel/transformer-css",
-  "version": "2.0.0-nightly.85+e33d9161",
+  "version": "2.0.0-nightly.852+843eb50e",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/parcel"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/parcel-bundler/parcel.git"
@@ -12,15 +16,17 @@
   "main": "lib/CSSTransformer.js",
   "source": "src/CSSTransformer.js",
   "engines": {
-    "node": ">= 10.0.0",
-    "parcel": "^2.0.0-alpha.1.1"
+    "node": ">= 12.0.0",
+    "parcel": "^2.0.0-beta.1"
   },
   "dependencies": {
-    "@parcel/plugin": "2.0.0-nightly.85+e33d9161",
-    "@parcel/utils": "2.0.0-nightly.85+e33d9161",
-    "postcss": "^7.0.5",
-    "postcss-value-parser": "^3.3.1",
+    "@parcel/plugin": "2.0.0-nightly.852+843eb50e",
+    "@parcel/source-map": "2.0.0-rc.7",
+    "@parcel/utils": "2.0.0-nightly.852+843eb50e",
+    "nullthrows": "^1.1.1",
+    "postcss": "^8.3.0",
+    "postcss-value-parser": "^4.1.0",
     "semver": "^5.4.1"
   },
-  "gitHead": "e33d91613d0ab9f600c93c5f8466f20fe9ca9dce"
+  "gitHead": "843eb50ef398f61acd07847bc12a9f72aef02c06"
 }

package/src/CSSTransformer.js

@@ -1,10 +1,13 @@
 // @flow
 
+import type {Root} from 'postcss';
 import type {FilePath} from '@parcel/types';
 
+import SourceMap from '@parcel/source-map';
 import {Transformer} from '@parcel/plugin';
-import {createDependencyLocation, isURL} from '@parcel/utils';
+import {createDependencyLocation, remapSourceLocation} from '@parcel/utils';
 import postcss from 'postcss';
+import nullthrows from 'nullthrows';
 import valueParser from 'postcss-value-parser';
 import semver from 'semver';
 
@@ -15,9 +18,9 @@ function canHaveDependencies(filePath: FilePath, code: string) {
   return !/\.css$/.test(filePath) || IMPORT_RE.test(code) || URL_RE.test(code);
 }
 
-export default new Transformer({
+export default (new Transformer({
   canReuseAST({ast}) {
-    return ast.type === 'postcss' && semver.satisfies(ast.version, '^7.0.0');
+    return ast.type === 'postcss' && semver.satisfies(ast.version, '^8.2.1');
   },
 
   async parse({asset}) {
@@ -32,33 +35,61 @@ export default new Transformer({
     }
 
     let code = await asset.getCode();
-    if (!canHaveDependencies(asset.filePath, code)) {
+    if (code != null && !canHaveDependencies(asset.filePath, code)) {
       return null;
     }
 
     return {
       type: 'postcss',
-      version: '7.0.0',
-      isDirty: false,
-      program: postcss.parse(code, {
-        from: asset.filePath,
-      }),
+      version: '8.2.1',
+      program: postcss
+        .parse(code, {
+          from: asset.filePath,
+        })
+        .toJSON(),
     };
   },
 
-  transform({asset}) {
-    let ast = asset.ast;
+  async transform({asset}) {
+    // 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,
+      sourceMap: asset.env.sourceMap,
+    });
+
     // Check for `hasDependencies` being false here as well, as it's possible
     // another transformer (such as PostCSSTransformer) has already parsed an
     // ast and CSSTransformer's parse was never called.
+    let ast = await asset.getAST();
     if (!ast || asset.meta.hasDependencies === false) {
       return [asset];
     }
 
-    ast.program.walkAtRules('import', rule => {
+    let program: Root = postcss.fromJSON(ast.program);
+    let originalSourceMap = await asset.getMap();
+    let createLoc = (start, specifier, lineOffset, colOffset) => {
+      let loc = createDependencyLocation(
+        start,
+        specifier,
+        lineOffset,
+        colOffset,
+      );
+      if (originalSourceMap) {
+        loc = remapSourceLocation(loc, originalSourceMap);
+      }
+      return loc;
+    };
+
+    let isDirty = false;
+    program.walkAtRules('import', rule => {
       let params = valueParser(rule.params);
       let [name, ...media] = params.nodes;
-      let moduleSpecifier;
+      let specifier;
       if (
         name.type === 'function' &&
         name.value === 'url' &&
@@ -67,55 +98,42 @@ export default new Transformer({
         name = name.nodes[0];
       }
 
-      moduleSpecifier = name.value;
+      specifier = name.value;
 
-      if (!moduleSpecifier) {
-        throw new Error('Could not find import name for ' + rule);
+      if (!specifier) {
+        throw new Error('Could not find import name for ' + String(rule));
       }
 
-      if (isURL(moduleSpecifier)) {
-        name.value = asset.addURLDependency(moduleSpecifier, {
-          loc: createDependencyLocation(
-            rule.source.start,
-            moduleSpecifier,
-            0,
-            8,
-          ),
-        });
-      } else {
-        // If this came from an inline <style> tag, don't inline the imported file. Replace with the correct URL instead.
-        // TODO: run CSSPackager on inline style tags.
-        // let inlineHTML =
-        //   this.options.rendition && this.options.rendition.inlineHTML;
-        // if (inlineHTML) {
-        //   name.value = asset.addURLDependency(dep, {loc: rule.source.start});
-        //   rule.params = params.toString();
-        // } else {
-        media = valueParser.stringify(media).trim();
-        let dep = {
-          moduleSpecifier,
-          // Offset by 8 as it does not include `@import `
-          loc: createDependencyLocation(
-            rule.source.start,
-            moduleSpecifier,
-            0,
-            8,
-          ),
-          meta: {
-            media,
-          },
-        };
-        asset.addDependency(dep);
-        rule.remove();
-        // }
-      }
-      ast.isDirty = true;
+      // If this came from an inline <style> tag, don't inline the imported file. Replace with the correct URL instead.
+      // TODO: run CSSPackager on inline style tags.
+      // let inlineHTML =
+      //   this.options.rendition && this.options.rendition.inlineHTML;
+      // if (inlineHTML) {
+      //   name.value = asset.addURLDependency(dep, {loc: rule.source.start});
+      //   rule.params = params.toString();
+      // } else {
+      media = valueParser.stringify(media).trim();
+      let dep = {
+        specifier,
+        specifierType: 'url',
+        // Offset by 8 as it does not include `@import `
+        loc: createLoc(nullthrows(rule.source.start), specifier, 0, 8),
+        meta: {
+          // For the glob resolver to distinguish between `@import` and other URL dependencies.
+          isCSSImport: true,
+          media,
+        },
+      };
+      asset.addDependency(dep);
+      rule.remove();
+      // }
+      isDirty = true;
     });
 
-    ast.program.walkDecls(decl => {
+    program.walkDecls(decl => {
       if (URL_RE.test(decl.value)) {
         let parsed = valueParser(decl.value);
-        let isDirty = false;
+        let isDeclDirty = false;
 
         parsed.walk(node => {
           if (
@@ -124,39 +142,65 @@ export default new Transformer({
             node.nodes.length > 0 &&
             !node.nodes[0].value.startsWith('#') // IE's `behavior: url(#default#VML)`
           ) {
-            node.nodes[0].value = asset.addURLDependency(node.nodes[0].value, {
-              loc: createDependencyLocation(
-                decl.source.start,
+            let url = asset.addURLDependency(node.nodes[0].value, {
+              loc: createLoc(
+                nullthrows(decl.source.start),
                 node.nodes[0].value,
+                0,
+                node.nodes[0].sourceIndex,
               ),
             });
-            isDirty = true;
+            isDeclDirty = node.nodes[0].value !== url;
+            node.nodes[0].value = url;
           }
         });
 
-        if (isDirty) {
+        if (isDeclDirty) {
           decl.value = parsed.toString();
-          ast.isDirty = true;
+          isDirty = true;
         }
       }
     });
 
+    if (isDirty) {
+      asset.setAST({
+        ...ast,
+        program: program.toJSON(),
+      });
+    }
+
     return [asset];
   },
 
-  async generate({asset}) {
-    let code;
-    if (!asset.ast || !asset.ast.isDirty) {
-      code = await asset.getCode();
+  async generate({asset, ast, options}) {
+    let result = await postcss().process(postcss.fromJSON(ast.program), {
+      from: undefined,
+      to: options.projectRoot + '/index',
+      map: {
+        annotation: false,
+        inline: false,
+        sourcesContent: false,
+      },
+      // Pass postcss's own stringifier to it to silence its warning
+      // as we don't want to perform any transformations -- only generate
+      stringifier: postcss.stringify,
+    });
+
+    let map = null;
+    let originalSourceMap = await asset.getMap();
+    if (result.map != null) {
+      map = new SourceMap(options.projectRoot);
+      map.addVLQMap(result.map.toJSON());
+      if (originalSourceMap) {
+        map.extends(originalSourceMap.toBuffer());
+      }
     } else {
-      code = '';
-      postcss.stringify(asset.ast.program, c => {
-        code += c;
-      });
+      map = originalSourceMap;
     }
 
     return {
-      code,
+      content: result.css,
+      map,
     };
   },
-});
+}): Transformer);