update mcss

Author: jquense

README.md

@@ -96,7 +96,7 @@ Different compatibilty plugins can also be more finely enabled/disabled
     options: {
       compat: {
         scoping: false,
-        valueAliasing: false,
+        composesDelimiter: false,
         icssImports: true,
         icssExports: true,
       }
@@ -110,7 +110,7 @@ The compatiblity plugins are outlined below:
 
 ref: https://m-css.com/guide/#global
 
-`css-modules` allows `:global` and `:local` scoping to nest, wheras `modular-css` only allows the `:global(.foo)` pseudo for marking a selector
+`css-modules` allows `:global` and `:local` scoping to nest, whereas `modular-css` only allows the `:global(.foo)` pseudo for marking a selector
 as global.
 
 **When to enable:** If your code contains none-parameterized `:global` or `:local` pseudos like
@@ -122,6 +122,28 @@ as global.
 
 **How to migrate:** Change to the parameterized form `:global(.token) {}`
 
+#### `composesDelimiter`
+
+css-modules uses whitespace to delineate between `composes` classes for multiple classes:
+
+```css
+.btn {
+  composes: appearance-none text-white from global;
+}
+```
+
+`modular-css` is a bit stricter, requiring a comma (`,`);
+
+```css
+.btn {
+  composes: appearance-none, text-white from global;
+}
+```
+
+**When to enable:** Migrating code that uses composes with multiple classes
+
+**How to migrate:** use comma seperators
+
 #### `icssExports`
 
 A very niche feature of css-modules that you may not even know is possible.

lib/loader.js

@@ -2,7 +2,6 @@ const path = require('path');
 const { promisify } = require('util');
 
 const Processor = require('@modular-css/processor');
-const { getOptions } = require('loader-utils');
 
 const getLocalName = require('./getLocalName');
 
@@ -14,6 +13,7 @@ const compatPlugins = {
   // valueAliasing: require('./plugins/compat-value-aliasing'),
   icssImport: require('./plugins/compat-icss-import'),
   icssExport: require('./plugins/compat-icss-export'),
+  composesDelimiter: require('./plugins/compat-composes-delimiter'),
 };
 
 function getLoadFilePrefix(loaderContext) {
@@ -31,7 +31,7 @@ function loader(src, prevMap, meta) {
   const cb = this.async();
   const fs = this._compilation.inputFileSystem;
 
-  const options = getOptions(this) || {};
+  const options = this.options || {};
 
   const prefix = getLoadFilePrefix(this);
 

lib/plugins/at-composes.js

@@ -0,0 +1,19 @@
+const plugin = 'css-modules-loader-compat-composes-delimiter';
+
+/**
+ * use comma seperators for composes classes
+ */
+module.exports = (css) => {
+  css.walkDecls('composes', (decl) => {
+    const [, classes, rest = ''] = decl.value.match(/(.+?)(from.*)?$/);
+
+    // eslint-disable-next-line no-param-reassign
+    decl.value = `${classes
+      .split(/,?\s+/)
+      .filter(Boolean)
+      .join(', ')} ${rest}`;
+  });
+};
+
+module.exports.postcssPlugin = plugin;
+module.exports.phase = 'before';

lib/plugins/compat-composes-delimiter.js

@@ -9,7 +9,7 @@ const importPattern = /^:import\(("[^"]*"|'[^']*'|[^"']+)\)$/;
  * Adds support for using the :import icss syntax.
  */
 module.exports = (css, { opts }) => {
-  const { files, resolve, from } = opts;
+  const { processor, from } = opts;
 
   const replacements = Object.create(null);
   // console.log(files);
@@ -20,7 +20,7 @@ module.exports = (css, { opts }) => {
     // rm quotes
     const path = matches[1].replace(/'|"/g, '');
 
-    const source = files[resolve(from, path)];
+    const source = processor.files[processor.resolve(from, path)];
 
     rule.walkDecls((decl) => {
       const localName = decl.prop;

lib/plugins/compat-icss-import.js

@@ -11,13 +11,13 @@ const plugin = 'css-modules-loader-icss-import/exports';
 const DUMMY_LOCAL_NAME = '____a';
 
 module.exports = (css, { opts, messages }) => {
-  const { files, graph, from } = opts;
+  const { processor, from } = opts;
 
-  const file = files[from];
+  const file = processor.files[from];
 
   // We only want direct dependencies, since those will be required
   // in the css-loader output, the dep tree will be realized
-  const imported = graph.outgoingEdges[from];
+  const imported = processor.graph.outgoingEdges[from];
   const exported = getExports(file, messages, opts);
 
   imported.forEach((dep) =>

lib/plugins/icss-import-export.js

@@ -46,44 +46,44 @@
   },
   "release": {},
   "devDependencies": {
-    "@4c/cli": "^2.1.8",
+    "@4c/cli": "^3.0.1",
     "@4c/import-sort": "^4.3.6",
-    "@4c/jest-preset": "^1.5.0",
+    "@4c/jest-preset": "^1.6.2",
     "@4c/prettier-config": "^1.1.0",
-    "css-loader": "^3.5.3",
-    "eslint": "^6.8.0",
-    "eslint-config-4catalyzer": "^1.1.1",
-    "eslint-config-4catalyzer-jest": "^2.0.6",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-import": "^2.20.2",
-    "eslint-plugin-jest": "^23.8.2",
-    "eslint-plugin-prettier": "^3.1.3",
+    "css-loader": "^6.5.0",
+    "eslint": "^7.0.0",
+    "eslint-config-4catalyzer": "^1.3.0",
+    "eslint-config-4catalyzer-jest": "^2.1.2",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-jest": "^25.2.2",
+    "eslint-plugin-prettier": "^4.0.0",
     "husky": "^4.2.5",
-    "jest": "^25.5.1",
-    "jest-file-snapshot": "^0.3.8",
-    "lint-staged": "^10.2.0",
-    "memfs": "^3.1.2",
-    "mini-css-extract-plugin": "^0.9.0",
-    "prettier": "^2.0.5",
+    "jest": "^27.3.1",
+    "jest-file-snapshot": "^0.5.0",
+    "lint-staged": "^11.2.6",
+    "memfs": "^3.3.0",
+    "mini-css-extract-plugin": "^2.4.3",
+    "prettier": "^2.4.1",
     "sass": "^1.26.5",
     "strip-ansi": "^6.0.0",
-    "webpack-atoms": "^13.0.1",
-    "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3"
+    "webpack-atoms": "^17.1.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.4.0"
   },
   "dependencies": {
-    "@modular-css/processor": "^25.6.0",
+    "@modular-css/processor": "^26.0.0",
     "cssesc": "^3.0.0",
-    "fs-extra": "^9.0.0",
-    "icss-utils": "^4.1.1",
-    "loader-utils": "^2.0.0",
-    "lodash": "^4.17.15",
+    "fs-extra": "^10.0.0",
+    "icss-utils": "^5.1.0",
+    "loader-utils": "^3.1.0",
+    "lodash": "^4.17.21",
     "memory-fs": "^0.5.0",
-    "postcss": "^7.0.27",
-    "postcss-selector-parser": "^6.0.2",
-    "sass-loader": "^8.0.2",
-    "semver": "^7.3.2",
-    "webpack": "^4.43.0"
+    "postcss": "^8.3.11",
+    "postcss-selector-parser": "^6.0.6",
+    "sass-loader": "^12.3.0",
+    "semver": "^7.3.5",
+    "webpack": "^5.60.0"
   },
   "bugs": {
     "url": "https://github.com/4Catalyzer/css-module-loader/issues"

package.json

@@ -0,0 +1,83 @@
+const path = require('path');
+
+const Processor = require('@modular-css/processor');
+
+const plugin = require('../lib/plugins/compat-composes-delimiter');
+
+describe('compat composes', () => {
+  const run = async (str) => {
+    const processor = new Processor({
+      before: [plugin],
+      resolvers: [(src, file) => path.resolve(path.dirname(src), file)],
+    });
+
+    await processor.string(
+      './utils.css',
+      `
+        .foo {
+          color: blue;
+        }
+
+        .bar {
+          bar: red;
+        }
+        .baz {
+          baz: red;
+        }
+      `,
+    );
+
+    return processor.string('./foo.css', str);
+  };
+
+  it('should handle escapes', async () => {
+    const results = await run(`
+      .btn {
+        composes: hover\\:md\\:bar from global;
+
+        color: red;
+      }
+    `);
+
+    expect(results.exports.btn).toHaveLength(2);
+  });
+
+  test.each([
+    ['foo bar baz'],
+    ['foo bar, baz'],
+    ['foo  bar  \t baz'],
+    ['foo,  bar, baz'],
+  ])('should handle: %s', async (input) => {
+    const result = await run(`
+        .btn {
+          composes: ${input} from "./utils.css";
+
+          color: red;
+        }
+      `);
+
+    expect(result.exports.btn).toHaveLength(4);
+  });
+
+  test.each([
+    ['foo bar baz'],
+    ['foo bar, baz'],
+    ['foo  bar  \t baz'],
+    ['foo,  bar, baz'],
+  ])('should locally handle: %s', async (input) => {
+    const result = await run(`
+        .foo {color: blue;}
+
+        .bar { bar: red; }
+        .baz { baz: red; }
+
+        .btn {
+          composes: ${input};
+
+          color: red;
+        }
+      `);
+
+    expect(result.exports.btn).toHaveLength(4);
+  });
+});

test/compat-composes-delimiter.test.js

@@ -19,7 +19,7 @@ describe('compat :export', () => {
       }
     `);
 
-    expect(result.exports).toEqual({
+    expect(result.details.exported).toEqual({
       bar: '1px',
       foo: 'red',
     });
@@ -35,9 +35,8 @@ describe('compat :export', () => {
       }
     `);
 
-    expect(result.exports).toEqual({
+    expect(result.details.exported).toEqual({
       baz: 'red',
-      foo: 'red',
     });
 
     expect(result.details.result.css.trim()).toEqual('');

test/compat-export.test.js

@@ -1,9 +1,9 @@
 const path = require('path');
 
 const fs = require('fs-extra');
-const webpack = require('webpack');
 const { createFsFromVolume, Volume } = require('memfs');
 const prettier = require('prettier');
+const webpack = require('webpack');
 
 const loader = require('../lib/loader');
 
@@ -68,7 +68,7 @@ function createRunner({
               ([result]) => innerResolve(JSON.stringify(result)),
               innerReject,
             );
-          }).then(r => cb(null, r), cb);
+          }).then((r) => cb(null, r), cb);
         },
 
         resolve(request, cb) {
@@ -91,8 +91,8 @@ function createRunner({
 
 const fixtures = fs
   .readdirSync(`${__dirname}/fixtures`)
-  .map(file => `${__dirname}/fixtures/${file}`)
-  .filter(f => !f.endsWith('.json'));
+  .map((file) => `${__dirname}/fixtures/${file}`)
+  .filter((f) => !f.endsWith('.json'));
 
 function runWebpack(config) {
   const compiler = webpack({

test/helpers.js

@@ -1,9 +1,11 @@
 const path = require('path');
+
 const ExtractCSS = require('mini-css-extract-plugin');
+
 // const stripAnsi = require('strip-ansi');
 const { runWebpack } = require('./helpers');
 
-const snapshot = name => path.join(__dirname, `__file_snapshots__/${name}`);
+const snapshot = (name) => path.join(__dirname, `__file_snapshots__/${name}`);
 
 describe('webpack integration', () => {
   function getConfig(entry, options, cssLoaderOptions = {}) {
@@ -95,7 +97,7 @@ describe('webpack integration', () => {
 
   it.each([['camelCase'], ['camelCaseOnly'], ['dashes'], ['dashesOnly']])(
     'should work with localsConvention: %s',
-    async localsConvention => {
+    async (localsConvention) => {
       const assets = await runWebpack(
         getConfig(`./fixtures/complex-names.module.scss`, undefined, {
           localsConvention,