@parcel/transformer-css 2.2.0 → 2.3.2

package/lib/CSSTransformer.js

@@ -75,26 +75,6 @@ function _postcssValueParser() {
   return data;
 }
 
-function _postcssModules() {
-  const data = _interopRequireDefault(require("postcss-modules"));
-
-  _postcssModules = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _fileSystemLoader() {
-  const data = _interopRequireDefault(require("css-modules-loader-core/lib/file-system-loader"));
-
-  _fileSystemLoader = function () {
-    return data;
-  };
-
-  return data;
-}
-
 function _semver() {
   const data = _interopRequireDefault(require("semver"));
 
@@ -117,7 +97,7 @@ function _path() {
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const URL_RE = /url\s*\("?(?![a-z]+:)/;
+const URL_RE = /url\s*\(/;
 const IMPORT_RE = /@import/;
 const COMPOSES_RE = /composes:.+from\s*("|').*("|')\s*;?/;
 const FROM_IMPORT_RE = /.+from\s*(?:"|')(.*)(?:"|')\s*;?/;
@@ -262,14 +242,15 @@ var _default = new (_plugin().Transformer)({
         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)`
           ) {
-              let urlNode = node.nodes[0];
-              let url = asset.addURLDependency(urlNode.value, {
-                loc: decl.source && decl.source.start && createLoc(decl.source.start, urlNode.value, 0, decl.source.start.offset + urlNode.sourceIndex + 1, 0)
-              });
-              isDeclDirty = urlNode.value !== url;
-              urlNode.type = 'word';
-              urlNode.value = url;
-            }
+            let urlNode = node.nodes[0];
+            let url = asset.addURLDependency(urlNode.value, {
+              loc: decl.source && decl.source.start && createLoc(decl.source.start, urlNode.value, 0, decl.source.start.offset + urlNode.sourceIndex + 1, 0)
+            });
+            isDeclDirty = urlNode.value !== url;
+            urlNode.type = 'string';
+            urlNode.quote = '"';
+            urlNode.value = url;
+          }
         });
 
         if (isDeclDirty) {
@@ -360,11 +341,16 @@ async function compileCSSModules(asset, env, program, resolve, options) {
     });
   }
 
+  let postcssModules = await options.packageManager.require('postcss-modules', asset.filePath, {
+    range: '^4.3.0',
+    saveDev: true,
+    shouldAutoInstall: options.shouldAutoInstall
+  });
   let {
     root
-  } = await (0, _postcss().default)([(0, _postcssModules().default)({
+  } = await (0, _postcss().default)([postcssModules({
     getJSON: (filename, json) => cssModules = json,
-    Loader: createLoader(asset, resolve),
+    Loader: await createLoader(asset, resolve, options),
     generateScopedName: (name, filename) => `${name}_${(0, _hash().hashString)(_path().default.relative(options.projectRoot, filename)).substr(0, 6)}`
   })]).process(program, {
     from: asset.filePath,
@@ -409,8 +395,11 @@ async function compileCSSModules(asset, env, program, resolve, options) {
   return assets;
 }
 
-function createLoader(asset, resolve) {
-  return class extends _fileSystemLoader().default {
+async function createLoader(asset, resolve, options) {
+  let {
+    default: FileSystemLoader
+  } = await options.packageManager.require('postcss-modules/build/css-loader-core/loader', asset.filePath);
+  return class extends FileSystemLoader {
     async fetch(composesPath, relativeTo) {
       let importPath = composesPath.replace(/^["']|["']$/g, '');
       let resolved = await resolve(relativeTo, importPath);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parcel/transformer-css",
-  "version": "2.2.0",
+  "version": "2.3.2",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -17,19 +17,20 @@
   "source": "src/CSSTransformer.js",
   "engines": {
     "node": ">= 12.0.0",
-    "parcel": "^2.2.0"
+    "parcel": "^2.3.2"
   },
   "dependencies": {
-    "@parcel/hash": "^2.2.0",
-    "@parcel/plugin": "^2.2.0",
+    "@parcel/hash": "2.3.2",
+    "@parcel/plugin": "2.3.2",
     "@parcel/source-map": "^2.0.0",
-    "@parcel/utils": "^2.2.0",
-    "css-modules-loader-core": "^1.1.0",
+    "@parcel/utils": "2.3.2",
     "nullthrows": "^1.1.1",
-    "postcss": "^8.3.0",
-    "postcss-modules": "^3.2.2",
-    "postcss-value-parser": "^4.1.0",
+    "postcss": "^8.4.5",
+    "postcss-value-parser": "^4.2.0",
     "semver": "^5.7.1"
   },
-  "gitHead": "4745cd3023f8d5a5adcf9e565d5b82d1418dc262"
+  "devDependencies": {
+    "postcss-modules": "^4.3.0"
+  },
+  "gitHead": "47379bf8fabeb2cfe03ade8802d942388b153e5b"
 }

package/src/CSSTransformer.js

@@ -1,7 +1,7 @@
 // @flow
 
 import type {Root} from 'postcss';
-import type {FilePath, MutableAsset} from '@parcel/types';
+import type {FilePath, MutableAsset, PluginOptions} from '@parcel/types';
 
 import {hashString} from '@parcel/hash';
 import SourceMap from '@parcel/source-map';
@@ -10,12 +10,10 @@ import {createDependencyLocation, remapSourceLocation} from '@parcel/utils';
 import postcss from 'postcss';
 import nullthrows from 'nullthrows';
 import valueParser from 'postcss-value-parser';
-import postcssModules from 'postcss-modules';
-import FileSystemLoader from 'css-modules-loader-core/lib/file-system-loader';
 import semver from 'semver';
 import path from 'path';
 
-const URL_RE = /url\s*\("?(?![a-z]+:)/;
+const URL_RE = /url\s*\(/;
 const IMPORT_RE = /@import/;
 const COMPOSES_RE = /composes:.+from\s*("|').*("|')\s*;?/;
 const FROM_IMPORT_RE = /.+from\s*(?:"|')(.*)(?:"|')\s*;?/;
@@ -185,7 +183,8 @@ export default (new Transformer({
                 ),
             });
             isDeclDirty = urlNode.value !== url;
-            urlNode.type = 'word';
+            urlNode.type = 'string';
+            urlNode.quote = '"';
             urlNode.value = url;
           }
         });
@@ -273,10 +272,20 @@ async function compileCSSModules(asset, env, program, resolve, options) {
     });
   }
 
+  let postcssModules = await options.packageManager.require(
+    'postcss-modules',
+    asset.filePath,
+    {
+      range: '^4.3.0',
+      saveDev: true,
+      shouldAutoInstall: options.shouldAutoInstall,
+    },
+  );
+
   let {root} = await postcss([
     postcssModules({
       getJSON: (filename, json) => (cssModules = json),
-      Loader: createLoader(asset, resolve),
+      Loader: await createLoader(asset, resolve, options),
       generateScopedName: (name, filename) =>
         `${name}_${hashString(
           path.relative(options.projectRoot, filename),
@@ -328,10 +337,15 @@ async function compileCSSModules(asset, env, program, resolve, options) {
   return assets;
 }
 
-function createLoader(
+async function createLoader(
   asset: MutableAsset,
   resolve: (from: FilePath, to: string) => Promise<FilePath>,
+  options: PluginOptions,
 ) {
+  let {default: FileSystemLoader} = await options.packageManager.require(
+    'postcss-modules/build/css-loader-core/loader',
+    asset.filePath,
+  );
   return class ParcelFileSystemLoader extends FileSystemLoader {
     async fetch(composesPath, relativeTo) {
       let importPath = composesPath.replace(/^["']|["']$/g, '');