From 07c5c157f8f23793fab1a71fc9b261a44d56269e Mon Sep 17 00:00:00 2001 From: Jason Quense Date: Fri, 15 Feb 2019 13:53:22 -0500 Subject: [PATCH 1/5] fix: allow values in selectors to work correctly --- src/plugins/postcss-icss-parser.js | 56 ++++++++++++++++-------------- 1 file changed, 30 insertions(+), 26 deletions(-) diff --git a/src/plugins/postcss-icss-parser.js b/src/plugins/postcss-icss-parser.js index 6730f50b..d24f2f10 100644 --- a/src/plugins/postcss-icss-parser.js +++ b/src/plugins/postcss-icss-parser.js @@ -1,6 +1,6 @@ import postcss from 'postcss'; import valueParser from 'postcss-value-parser'; -import { extractICSS } from 'icss-utils'; +import { extractICSS, replaceValueSymbols } from 'icss-utils'; import loaderUtils from 'loader-utils'; const pluginName = 'postcss-icss-parser'; @@ -9,22 +9,22 @@ export default postcss.plugin( pluginName, () => function process(css, result) { - const imports = {}; - const icss = extractICSS(css); - const exports = icss.icssExports; + const importReplacements = Object.create(null); + const { icssImports, icssExports } = extractICSS(css); - Object.keys(icss.icssImports).forEach((key) => { + let index = 0; + Object.keys(icssImports).forEach((key) => { const url = loaderUtils.parseString(key); - Object.keys(icss.icssImports[key]).forEach((prop) => { - const index = Object.keys(imports).length; + Object.keys(icssImports[key]).forEach((prop) => { + index += 1; - imports[`$${prop}`] = index; + importReplacements[prop] = `___CSS_LOADER_IMPORT___${index}___`; result.messages.push({ pluginName, type: 'icss-import', - item: { url, export: icss.icssImports[key][prop], index }, + item: { url, export: icssImports[key][prop], index }, }); const alreadyIncluded = result.messages.find( @@ -56,41 +56,45 @@ export default postcss.plugin( } const token = node.value; - const importIndex = imports[`$${token}`]; + const replacement = importReplacements[token]; - if (typeof importIndex === 'number') { + if (replacement != null) { // eslint-disable-next-line no-param-reassign - node.value = `___CSS_LOADER_IMPORT___${importIndex}___`; + node.value = replacement; } }); return tokens.toString(); } - // Replace tokens in declarations - css.walkDecls((decl) => { - // eslint-disable-next-line no-param-reassign - decl.value = replaceImportsInString(decl.value.toString()); - }); - - // Replace tokens in at-rules - css.walkAtRules((atrule) => { - // Due reusing `ast` from `postcss-loader` some plugins may lack - // `params` property, we need to account for this possibility - if (atrule.params) { + // Replace tokens + css.walk((node) => { + if (node.type === 'decl') { // eslint-disable-next-line no-param-reassign - atrule.params = replaceImportsInString(atrule.params.toString()); + node.value = replaceImportsInString(node.value.toString()); + } else if (node.type === 'rule' && node.selector != null) { + node.selector = replaceValueSymbols( + node.selector, + importReplacements + ); + } else if (node.type === 'atrule') { + // Due reusing `ast` from `postcss-loader` some plugins may lack + // `params` property, we need to account for this possibility + if (node.params) { + // eslint-disable-next-line no-param-reassign + node.params = replaceImportsInString(node.params.toString()); + } } }); // Replace tokens in export - Object.keys(exports).forEach((exportName) => { + Object.keys(icssExports).forEach((exportName) => { result.messages.push({ pluginName, type: 'export', item: { key: exportName, - value: replaceImportsInString(exports[exportName]), + value: replaceImportsInString(icssExports[exportName]), }, }); }); From c8280b81a78ca49d8ed8578145cf81ce256a2901 Mon Sep 17 00:00:00 2001 From: Jason Quense Date: Tue, 7 May 2019 10:32:49 -0400 Subject: [PATCH 2/5] chore: update packages --- package-lock.json | 154 +++++++++--------- package.json | 8 +- .../__snapshots__/modules-option.test.js.snap | 11 +- 3 files changed, 85 insertions(+), 88 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9f6ffeb5..094c6afc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -897,7 +897,7 @@ "dependencies": { "chalk": { "version": "2.3.1", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.1.tgz", + "resolved": "http://registry.npmjs.org/chalk/-/chalk-2.3.1.tgz", "integrity": "sha512-QUU4ofkDoMIVO7hcx1iPTISs88wsO8jA92RQIm4JAwZvFGGAV2hSAA1NX7oVj2Ej2Q6NDTcRDjPTFrMCRZoJ6g==", "dev": true, "requires": { @@ -1723,7 +1723,7 @@ }, "array-equal": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/array-equal/-/array-equal-1.0.0.tgz", + "resolved": "http://registry.npmjs.org/array-equal/-/array-equal-1.0.0.tgz", "integrity": "sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=", "dev": true }, @@ -1813,7 +1813,7 @@ }, "util": { "version": "0.10.3", - "resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz", + "resolved": "http://registry.npmjs.org/util/-/util-0.10.3.tgz", "integrity": "sha1-evsa/lCAUkZInj23/g7TeTNqwPk=", "dev": true, "requires": { @@ -1915,7 +1915,7 @@ }, "chalk": { "version": "1.1.3", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", + "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", "dev": true, "requires": { @@ -1934,7 +1934,7 @@ }, "strip-ansi": { "version": "3.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", + "resolved": "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "dev": true, "requires": { @@ -1943,7 +1943,7 @@ }, "supports-color": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "resolved": "http://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", "dev": true } @@ -2260,7 +2260,7 @@ "dependencies": { "resolve": { "version": "1.1.7", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz", + "resolved": "http://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz", "integrity": "sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=", "dev": true } @@ -2268,7 +2268,7 @@ }, "browserify-aes": { "version": "1.2.0", - "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz", + "resolved": "http://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz", "integrity": "sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==", "dev": true, "requires": { @@ -2305,7 +2305,7 @@ }, "browserify-rsa": { "version": "4.0.1", - "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz", + "resolved": "http://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz", "integrity": "sha1-IeCr+vbyApzy+vsTNWenAdQTVSQ=", "dev": true, "requires": { @@ -2359,7 +2359,7 @@ }, "buffer": { "version": "4.9.1", - "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz", + "resolved": "http://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz", "integrity": "sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=", "dev": true, "requires": { @@ -2453,7 +2453,7 @@ "dependencies": { "callsites": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz", + "resolved": "http://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz", "integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=", "dev": true } @@ -2691,13 +2691,13 @@ }, "slice-ansi": { "version": "0.0.4", - "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-0.0.4.tgz", + "resolved": "http://registry.npmjs.org/slice-ansi/-/slice-ansi-0.0.4.tgz", "integrity": "sha1-7b+JA/ZvfOL46v1s7tZeJkyDGzU=", "dev": true }, "string-width": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", + "resolved": "http://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "dev": true, "requires": { @@ -2708,7 +2708,7 @@ }, "strip-ansi": { "version": "3.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", + "resolved": "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "dev": true, "requires": { @@ -2879,7 +2879,7 @@ }, "concat-stream": { "version": "1.6.2", - "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz", + "resolved": "http://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz", "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==", "dev": true, "requires": { @@ -2968,7 +2968,7 @@ }, "conventional-changelog-angular": { "version": "1.6.6", - "resolved": "https://registry.npmjs.org/conventional-changelog-angular/-/conventional-changelog-angular-1.6.6.tgz", + "resolved": "http://registry.npmjs.org/conventional-changelog-angular/-/conventional-changelog-angular-1.6.6.tgz", "integrity": "sha512-suQnFSqCxRwyBxY68pYTsFkG0taIdinHLNEAX5ivtw8bCRnIgnpvcHmlR/yjUyZIrNPYAoXlY1WiEKWgSE4BNg==", "dev": true, "requires": { @@ -3203,7 +3203,7 @@ }, "conventional-commits-parser": { "version": "2.1.7", - "resolved": "https://registry.npmjs.org/conventional-commits-parser/-/conventional-commits-parser-2.1.7.tgz", + "resolved": "http://registry.npmjs.org/conventional-commits-parser/-/conventional-commits-parser-2.1.7.tgz", "integrity": "sha512-BoMaddIEJ6B4QVMSDu9IkVImlGOSGA1I2BQyOZHeLQ6qVOJLcLKn97+fL6dGbzWEiqDzfH4OkcveULmeq2MHFQ==", "dev": true, "requires": { @@ -3463,7 +3463,7 @@ }, "create-hash": { "version": "1.2.0", - "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz", + "resolved": "http://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz", "integrity": "sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==", "dev": true, "requires": { @@ -3476,7 +3476,7 @@ }, "create-hmac": { "version": "1.1.7", - "resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz", + "resolved": "http://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz", "integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==", "dev": true, "requires": { @@ -3847,7 +3847,7 @@ }, "camelcase-keys": { "version": "2.1.0", - "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz", + "resolved": "http://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz", "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=", "dev": true, "requires": { @@ -3920,7 +3920,7 @@ }, "load-json-file": { "version": "1.1.0", - "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz", + "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz", "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=", "dev": true, "requires": { @@ -3947,7 +3947,7 @@ }, "meow": { "version": "3.7.0", - "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz", + "resolved": "http://registry.npmjs.org/meow/-/meow-3.7.0.tgz", "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=", "dev": true, "requires": { @@ -4105,7 +4105,7 @@ }, "diffie-hellman": { "version": "5.0.3", - "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz", + "resolved": "http://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz", "integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==", "dev": true, "requires": { @@ -4606,7 +4606,7 @@ "dependencies": { "doctrine": { "version": "1.5.0", - "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-1.5.0.tgz", + "resolved": "http://registry.npmjs.org/doctrine/-/doctrine-1.5.0.tgz", "integrity": "sha1-N53Ocw9hZvds76TmcHoVmwLFpvo=", "dev": true, "requires": { @@ -4616,7 +4616,7 @@ }, "load-json-file": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz", + "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz", "integrity": "sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg=", "dev": true, "requires": { @@ -4646,7 +4646,7 @@ }, "pify": { "version": "2.3.0", - "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz", "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", "dev": true }, @@ -5259,7 +5259,7 @@ }, "fs-access": { "version": "1.0.1", - "resolved": "https://registry.npmjs.org/fs-access/-/fs-access-1.0.1.tgz", + "resolved": "http://registry.npmjs.org/fs-access/-/fs-access-1.0.1.tgz", "integrity": "sha1-1qh/JiJxzv6+wwxVNAf7mV2od3o=", "dev": true, "requires": { @@ -5924,7 +5924,7 @@ }, "camelcase-keys": { "version": "2.1.0", - "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz", + "resolved": "http://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz", "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=", "dev": true, "requires": { @@ -5959,7 +5959,7 @@ }, "load-json-file": { "version": "1.1.0", - "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz", + "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz", "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=", "dev": true, "requires": { @@ -5978,7 +5978,7 @@ }, "meow": { "version": "3.7.0", - "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz", + "resolved": "http://registry.npmjs.org/meow/-/meow-3.7.0.tgz", "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=", "dev": true, "requires": { @@ -6025,7 +6025,7 @@ }, "pify": { "version": "2.3.0", - "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz", "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", "dev": true }, @@ -6118,7 +6118,7 @@ }, "git-config-path": { "version": "1.0.1", - "resolved": "https://registry.npmjs.org/git-config-path/-/git-config-path-1.0.1.tgz", + "resolved": "http://registry.npmjs.org/git-config-path/-/git-config-path-1.0.1.tgz", "integrity": "sha1-bTP37WPbDQ4RgTFQO6s6ykfVRmQ=", "dev": true, "requires": { @@ -6140,7 +6140,7 @@ }, "git-raw-commits": { "version": "1.3.6", - "resolved": "https://registry.npmjs.org/git-raw-commits/-/git-raw-commits-1.3.6.tgz", + "resolved": "http://registry.npmjs.org/git-raw-commits/-/git-raw-commits-1.3.6.tgz", "integrity": "sha512-svsK26tQ8vEKnMshTDatSIQSMDdz8CxIIqKsvPqbtV23Etmw6VNaFAitu8zwZ0VrOne7FztwPyRLxK7/DIUTQg==", "dev": true, "requires": { @@ -6182,7 +6182,7 @@ "dependencies": { "pify": { "version": "2.3.0", - "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz", "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", "dev": true } @@ -6288,7 +6288,7 @@ }, "globby": { "version": "6.1.0", - "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz", + "resolved": "http://registry.npmjs.org/globby/-/globby-6.1.0.tgz", "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=", "dev": true, "requires": { @@ -6301,7 +6301,7 @@ "dependencies": { "pify": { "version": "2.3.0", - "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz", "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", "dev": true } @@ -6309,7 +6309,7 @@ }, "got": { "version": "6.7.1", - "resolved": "https://registry.npmjs.org/got/-/got-6.7.1.tgz", + "resolved": "http://registry.npmjs.org/got/-/got-6.7.1.tgz", "integrity": "sha1-JAzQV4WpoY5WHcG0S0HHY+8ejbA=", "dev": true, "requires": { @@ -6640,11 +6640,6 @@ "safer-buffer": ">= 2.1.2 < 3" } }, - "icss-replace-symbols": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz", - "integrity": "sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=" - }, "icss-utils": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-4.1.0.tgz", @@ -6917,7 +6912,7 @@ }, "is-accessor-descriptor": { "version": "0.1.6", - "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz", + "resolved": "http://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz", "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=", "dev": true, "requires": { @@ -6973,7 +6968,7 @@ }, "is-data-descriptor": { "version": "0.1.4", - "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz", + "resolved": "http://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz", "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=", "dev": true, "requires": { @@ -7113,7 +7108,7 @@ }, "is-obj": { "version": "1.0.1", - "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz", + "resolved": "http://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz", "integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8=", "dev": true }, @@ -8006,7 +8001,7 @@ }, "json5": { "version": "1.0.1", - "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz", + "resolved": "http://registry.npmjs.org/json5/-/json5-1.0.1.tgz", "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==", "requires": { "minimist": "^1.2.0" @@ -8266,7 +8261,7 @@ }, "chalk": { "version": "1.1.3", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", + "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", "dev": true, "requires": { @@ -8288,7 +8283,7 @@ }, "strip-ansi": { "version": "3.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", + "resolved": "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "dev": true, "requires": { @@ -8297,7 +8292,7 @@ }, "supports-color": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "resolved": "http://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", "dev": true } @@ -8818,7 +8813,7 @@ }, "minimist": { "version": "1.2.0", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", + "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=" }, "minimist-options": { @@ -8890,7 +8885,7 @@ }, "mkdirp": { "version": "0.5.1", - "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", + "resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "dev": true, "requires": { @@ -8899,7 +8894,7 @@ "dependencies": { "minimist": { "version": "0.0.8", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", + "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", "dev": true } @@ -9316,7 +9311,7 @@ "dependencies": { "minimist": { "version": "0.0.10", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz", + "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz", "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=", "dev": true }, @@ -9367,7 +9362,7 @@ }, "os-tmpdir": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", + "resolved": "http://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=", "dev": true }, @@ -9499,7 +9494,7 @@ }, "parse-git-config": { "version": "1.1.1", - "resolved": "https://registry.npmjs.org/parse-git-config/-/parse-git-config-1.1.1.tgz", + "resolved": "http://registry.npmjs.org/parse-git-config/-/parse-git-config-1.1.1.tgz", "integrity": "sha1-06mYQxcTL1c5hxK7pDjhKVkN34w=", "dev": true, "requires": { @@ -9562,7 +9557,7 @@ }, "path-browserify": { "version": "0.0.0", - "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-0.0.0.tgz", + "resolved": "http://registry.npmjs.org/path-browserify/-/path-browserify-0.0.0.tgz", "integrity": "sha1-oLhwcpquIUAFt9UDLsLLuw+0RRo=", "dev": true }, @@ -9580,7 +9575,7 @@ }, "path-is-absolute": { "version": "1.0.1", - "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", + "resolved": "http://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", "dev": true }, @@ -9691,9 +9686,9 @@ "dev": true }, "postcss": { - "version": "7.0.14", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.14.tgz", - "integrity": "sha512-NsbD6XUUMZvBxtQAJuWDJeeC4QFsmWsfozWxCJPWf3M55K9iu2iMDaKqyoOdTJ1R4usBXuxlVFAIo8rZPQD4Bg==", + "version": "7.0.16", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.16.tgz", + "integrity": "sha512-MOo8zNSlIqh22Uaa3drkdIAgUGEL+AD1ESiSdmElLUmE2uVDo1QloiT/IfW9qRw8Gw+Y/w69UVMGwbufMSftxA==", "requires": { "chalk": "^2.4.2", "source-map": "^0.6.1", @@ -9994,10 +9989,11 @@ } }, "postcss-modules-local-by-default": { - "version": "2.0.6", - "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-2.0.6.tgz", - "integrity": "sha512-oLUV5YNkeIBa0yQl7EYnxMgy4N6noxmiwZStaEJUSe2xPMcdNc8WmBQuQCx18H5psYbVxz8zoHk0RAAYZXP9gA==", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-3.0.0.tgz", + "integrity": "sha512-dApUojS+3/gWksAEoLID6Pu//oVmxFE74PIaJl7Ws+DlsbEJlTbAMPrmA2I0Knc7zguRbTtsiB19hSMhsmIqGw==", "requires": { + "icss-utils": "^4.0.0", "postcss": "^7.0.6", "postcss-selector-parser": "^6.0.0", "postcss-value-parser": "^3.3.1" @@ -10013,11 +10009,11 @@ } }, "postcss-modules-values": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-2.0.0.tgz", - "integrity": "sha512-Ki7JZa7ff1N3EIMlPnGTZfUMe69FFwiQPnVSXC9mnn3jozCRBYIxiZd44yJOV2AmabOo4qFf8s0dC/+lweG7+w==", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-3.0.0.tgz", + "integrity": "sha512-1//E5jCBrZ9DmRX+zCtmQtRSV6PV42Ix7Bzj9GbwJceduuf7IqP8MgeTXuRDHOWj2m0VzZD5+roFWDuU8RQjcg==", "requires": { - "icss-replace-symbols": "^1.1.0", + "icss-utils": "^4.0.0", "postcss": "^7.0.6" } }, @@ -10467,7 +10463,7 @@ }, "readable-stream": { "version": "2.3.6", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", + "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", "dev": true, "requires": { @@ -10882,7 +10878,7 @@ }, "safe-regex": { "version": "1.1.0", - "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz", + "resolved": "http://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz", "integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=", "dev": true, "requires": { @@ -11015,7 +11011,7 @@ }, "sha.js": { "version": "2.4.11", - "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz", + "resolved": "http://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz", "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==", "dev": true, "requires": { @@ -11363,7 +11359,7 @@ }, "sprintf-js": { "version": "1.0.3", - "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", + "resolved": "http://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=", "dev": true }, @@ -11570,7 +11566,7 @@ }, "string_decoder": { "version": "1.1.1", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", "dev": true, "requires": { @@ -11619,7 +11615,7 @@ }, "strip-eof": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz", + "resolved": "http://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz", "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=", "dev": true }, @@ -11865,7 +11861,7 @@ }, "through": { "version": "2.3.8", - "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", + "resolved": "http://registry.npmjs.org/through/-/through-2.3.8.tgz", "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=", "dev": true }, @@ -12014,7 +12010,7 @@ }, "tty-browserify": { "version": "0.0.0", - "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz", + "resolved": "http://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz", "integrity": "sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY=", "dev": true }, @@ -12363,7 +12359,7 @@ }, "vm-browserify": { "version": "0.0.4", - "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-0.0.4.tgz", + "resolved": "http://registry.npmjs.org/vm-browserify/-/vm-browserify-0.0.4.tgz", "integrity": "sha1-XX6kW7755Kb/ZflUOOCofDV9WnM=", "dev": true, "requires": { @@ -12553,7 +12549,7 @@ }, "wrap-ansi": { "version": "2.1.0", - "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz", + "resolved": "http://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz", "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=", "dev": true, "requires": { @@ -12572,7 +12568,7 @@ }, "string-width": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", + "resolved": "http://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "dev": true, "requires": { @@ -12583,7 +12579,7 @@ }, "strip-ansi": { "version": "3.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", + "resolved": "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "dev": true, "requires": { diff --git a/package.json b/package.json index 8b432a7c..37199b43 100644 --- a/package.json +++ b/package.json @@ -38,16 +38,16 @@ "webpack": "^4.0.0" }, "dependencies": { + "camelcase": "^5.2.0", "cssesc": "^3.0.0", "icss-utils": "^4.1.0", "loader-utils": "^1.2.3", - "camelcase": "^5.2.0", "normalize-path": "^3.0.0", - "postcss": "^7.0.14", + "postcss": "^7.0.16", "postcss-modules-extract-imports": "^2.0.0", - "postcss-modules-local-by-default": "^2.0.6", + "postcss-modules-local-by-default": "^3.0.0", "postcss-modules-scope": "^2.1.0", - "postcss-modules-values": "^2.0.0", + "postcss-modules-values": "^3.0.0", "postcss-value-parser": "^3.3.0", "schema-utils": "^1.0.0" }, diff --git a/test/__snapshots__/modules-option.test.js.snap b/test/__snapshots__/modules-option.test.js.snap index 45d35998..81942be1 100644 --- a/test/__snapshots__/modules-option.test.js.snap +++ b/test/__snapshots__/modules-option.test.js.snap @@ -5362,7 +5362,7 @@ Array [ color: blue; } -._1wABXM_RabWHj--wsPrhvM { +.green { display: block; } @@ -5374,7 +5374,7 @@ Array [ color: green; } -._1tAbIwITRWAdZZE6wKNk9O { +._3SRb8VDtr6fpZVzVUOJOM2 { prop: red; duplicate: green; } @@ -5417,19 +5417,20 @@ exports.i(require(\\"-!../../../src/index.js??ref--4-0!package/style.css\\"), \\ exports.i(require(\\"-!../../../src/index.js??ref--4-0!aliasesComposes/alias.css\\"), \\"\\"); // Module -exports.push([module.id, \\"._14uFt0lIVKKAlKTTT29IIQ {\\\\n color: \\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"def\\"] + \\";\\\\n}\\\\n\\\\n._3XDgIzfUIQkaUInpEdo7fN {\\\\n color: blue;\\\\n}\\\\n\\\\n._1wABXM_RabWHj--wsPrhvM {\\\\n display: block;\\\\n}\\\\n\\\\n._1DFEYnAfn9LZyk4fErI86e {\\\\n width: \\" + require(\\"-!../../../src/index.js??ref--4-0!./something.css\\").locals[\\"something\\"] + \\";\\\\n}\\\\n\\\\n.Ywv5coVC2RU-pIFhN9O4w {\\\\n color: \\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"other\\"] + \\";\\\\n}\\\\n\\\\n._1tAbIwITRWAdZZE6wKNk9O {\\\\n prop: \\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"def\\"] + \\";\\\\n duplicate: \\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"other\\"] + \\";\\\\n}\\\\n\\\\n.Q3SQ3BwtBwUFLlg6adzOI {\\\\n color: red;\\\\n}\\\\n\\\\n._1n5XhXj4SFnYrwziC3un0d {\\\\n color: yellow;\\\\n}\\\\n\\\\n._3dnFnGkAVAiMA6etF-naHc {\\\\n color: gray;\\\\n}\\\\n\\\\n._1xUePnlnafMQ1cExy3PUWT {\\\\n color: gray;\\\\n}\\\\n\\\\n._26Jdfenl9Xn8HXwb2jipvt {\\\\n color: gainsboro;\\\\n}\\\\n\\", \\"\\"]); +exports.push([module.id, \\"._14uFt0lIVKKAlKTTT29IIQ {\\\\n color: \\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"def\\"] + \\";\\\\n}\\\\n\\\\n._3XDgIzfUIQkaUInpEdo7fN {\\\\n color: blue;\\\\n}\\\\n\\\\n.\\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"other\\"] + \\" {\\\\n display: block;\\\\n}\\\\n\\\\n._1DFEYnAfn9LZyk4fErI86e {\\\\n width: \\" + require(\\"-!../../../src/index.js??ref--4-0!./something.css\\").locals[\\"something\\"] + \\";\\\\n}\\\\n\\\\n.Ywv5coVC2RU-pIFhN9O4w {\\\\n color: \\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"other\\"] + \\";\\\\n}\\\\n\\\\n._3SRb8VDtr6fpZVzVUOJOM2 {\\\\n prop: \\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"def\\"] + \\";\\\\n duplicate: \\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"other\\"] + \\";\\\\n}\\\\n\\\\n.Q3SQ3BwtBwUFLlg6adzOI {\\\\n color: red;\\\\n}\\\\n\\\\n._1n5XhXj4SFnYrwziC3un0d {\\\\n color: yellow;\\\\n}\\\\n\\\\n._3dnFnGkAVAiMA6etF-naHc {\\\\n color: gray;\\\\n}\\\\n\\\\n._1xUePnlnafMQ1cExy3PUWT {\\\\n color: gray;\\\\n}\\\\n\\\\n._26Jdfenl9Xn8HXwb2jipvt {\\\\n color: gainsboro;\\\\n}\\\\n\\", \\"\\"]); // Exports exports.locals = { \\"def\\": \\"\\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"def\\"] + \\"\\", - \\"other\\": \\"_1wABXM_RabWHj--wsPrhvM\\", + \\"other\\": \\"\\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"other\\"] + \\"\\", \\"something\\": \\"\\" + require(\\"-!../../../src/index.js??ref--4-0!./something.css\\").locals[\\"something\\"] + \\"\\", - \\"foo\\": \\"_1tAbIwITRWAdZZE6wKNk9O\\", + \\"foo\\": \\"blue\\", \\"bar\\": \\"block\\", \\"ghi\\": \\"_14uFt0lIVKKAlKTTT29IIQ\\", \\"class\\": \\"_3XDgIzfUIQkaUInpEdo7fN\\", \\"other-other\\": \\"_1DFEYnAfn9LZyk4fErI86e\\", \\"green\\": \\"Ywv5coVC2RU-pIFhN9O4w\\", + \\"blue\\": \\"_3SRb8VDtr6fpZVzVUOJOM2\\", \\"simple\\": \\"Q3SQ3BwtBwUFLlg6adzOI \\" + require(\\"-!../../../src/index.js??ref--4-0!./imported-simple.css\\").locals[\\"imported-simple\\"] + \\"\\", \\"relative\\": \\"_1n5XhXj4SFnYrwziC3un0d \\" + require(\\"-!../../../src/index.js??ref--4-0!./relative.css\\").locals[\\"imported-relative\\"] + \\"\\", \\"top-relative\\": \\"_3dnFnGkAVAiMA6etF-naHc \\" + require(\\"-!../../../src/index.js??ref--4-0!../modules/top-relative.css\\").locals[\\"imported-relative\\"] + \\"\\", From fa8b1a60bf6b52383d8314d09c98c1eab73ca30d Mon Sep 17 00:00:00 2001 From: Jason Quense Date: Tue, 7 May 2019 12:10:44 -0400 Subject: [PATCH 3/5] test: clean up and add test cases --- src/plugins/postcss-icss-parser.js | 2 +- .../__snapshots__/modules-option.test.js.snap | 64 +++++++++++++++++-- test/fixtures/modules/composes.css | 3 +- test/fixtures/modules/values-in-selectors.css | 14 ++++ test/modules-option.test.js | 17 +++++ 5 files changed, 91 insertions(+), 9 deletions(-) create mode 100644 test/fixtures/modules/values-in-selectors.css diff --git a/src/plugins/postcss-icss-parser.js b/src/plugins/postcss-icss-parser.js index d24f2f10..b4471ac3 100644 --- a/src/plugins/postcss-icss-parser.js +++ b/src/plugins/postcss-icss-parser.js @@ -58,7 +58,7 @@ export default postcss.plugin( const token = node.value; const replacement = importReplacements[token]; - if (replacement != null) { + if (replacement) { // eslint-disable-next-line no-param-reassign node.value = replacement; } diff --git a/test/__snapshots__/modules-option.test.js.snap b/test/__snapshots__/modules-option.test.js.snap index 81942be1..6b79f638 100644 --- a/test/__snapshots__/modules-option.test.js.snap +++ b/test/__snapshots__/modules-option.test.js.snap @@ -5359,10 +5359,10 @@ Array [ } ._3XDgIzfUIQkaUInpEdo7fN { - color: blue; + color: foo; } -.green { +._1t1lFvgmmUiqhBGTbP08cn { display: block; } @@ -5374,7 +5374,7 @@ Array [ color: green; } -._3SRb8VDtr6fpZVzVUOJOM2 { +._1tAbIwITRWAdZZE6wKNk9O { prop: red; duplicate: green; } @@ -5417,20 +5417,20 @@ exports.i(require(\\"-!../../../src/index.js??ref--4-0!package/style.css\\"), \\ exports.i(require(\\"-!../../../src/index.js??ref--4-0!aliasesComposes/alias.css\\"), \\"\\"); // Module -exports.push([module.id, \\"._14uFt0lIVKKAlKTTT29IIQ {\\\\n color: \\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"def\\"] + \\";\\\\n}\\\\n\\\\n._3XDgIzfUIQkaUInpEdo7fN {\\\\n color: blue;\\\\n}\\\\n\\\\n.\\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"other\\"] + \\" {\\\\n display: block;\\\\n}\\\\n\\\\n._1DFEYnAfn9LZyk4fErI86e {\\\\n width: \\" + require(\\"-!../../../src/index.js??ref--4-0!./something.css\\").locals[\\"something\\"] + \\";\\\\n}\\\\n\\\\n.Ywv5coVC2RU-pIFhN9O4w {\\\\n color: \\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"other\\"] + \\";\\\\n}\\\\n\\\\n._3SRb8VDtr6fpZVzVUOJOM2 {\\\\n prop: \\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"def\\"] + \\";\\\\n duplicate: \\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"other\\"] + \\";\\\\n}\\\\n\\\\n.Q3SQ3BwtBwUFLlg6adzOI {\\\\n color: red;\\\\n}\\\\n\\\\n._1n5XhXj4SFnYrwziC3un0d {\\\\n color: yellow;\\\\n}\\\\n\\\\n._3dnFnGkAVAiMA6etF-naHc {\\\\n color: gray;\\\\n}\\\\n\\\\n._1xUePnlnafMQ1cExy3PUWT {\\\\n color: gray;\\\\n}\\\\n\\\\n._26Jdfenl9Xn8HXwb2jipvt {\\\\n color: gainsboro;\\\\n}\\\\n\\", \\"\\"]); +exports.push([module.id, \\"._14uFt0lIVKKAlKTTT29IIQ {\\\\n color: \\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"def\\"] + \\";\\\\n}\\\\n\\\\n._3XDgIzfUIQkaUInpEdo7fN {\\\\n color: foo;\\\\n}\\\\n\\\\n._1t1lFvgmmUiqhBGTbP08cn {\\\\n display: block;\\\\n}\\\\n\\\\n._1DFEYnAfn9LZyk4fErI86e {\\\\n width: \\" + require(\\"-!../../../src/index.js??ref--4-0!./something.css\\").locals[\\"something\\"] + \\";\\\\n}\\\\n\\\\n.Ywv5coVC2RU-pIFhN9O4w {\\\\n color: \\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"other\\"] + \\";\\\\n}\\\\n\\\\n._1tAbIwITRWAdZZE6wKNk9O {\\\\n prop: \\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"def\\"] + \\";\\\\n duplicate: \\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"other\\"] + \\";\\\\n}\\\\n\\\\n.Q3SQ3BwtBwUFLlg6adzOI {\\\\n color: red;\\\\n}\\\\n\\\\n._1n5XhXj4SFnYrwziC3un0d {\\\\n color: yellow;\\\\n}\\\\n\\\\n._3dnFnGkAVAiMA6etF-naHc {\\\\n color: gray;\\\\n}\\\\n\\\\n._1xUePnlnafMQ1cExy3PUWT {\\\\n color: gray;\\\\n}\\\\n\\\\n._26Jdfenl9Xn8HXwb2jipvt {\\\\n color: gainsboro;\\\\n}\\\\n\\", \\"\\"]); // Exports exports.locals = { \\"def\\": \\"\\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"def\\"] + \\"\\", \\"other\\": \\"\\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"other\\"] + \\"\\", \\"something\\": \\"\\" + require(\\"-!../../../src/index.js??ref--4-0!./something.css\\").locals[\\"something\\"] + \\"\\", - \\"foo\\": \\"blue\\", \\"bar\\": \\"block\\", \\"ghi\\": \\"_14uFt0lIVKKAlKTTT29IIQ\\", \\"class\\": \\"_3XDgIzfUIQkaUInpEdo7fN\\", + \\"block\\": \\"_1t1lFvgmmUiqhBGTbP08cn\\", \\"other-other\\": \\"_1DFEYnAfn9LZyk4fErI86e\\", \\"green\\": \\"Ywv5coVC2RU-pIFhN9O4w\\", - \\"blue\\": \\"_3SRb8VDtr6fpZVzVUOJOM2\\", + \\"foo\\": \\"_1tAbIwITRWAdZZE6wKNk9O\\", \\"simple\\": \\"Q3SQ3BwtBwUFLlg6adzOI \\" + require(\\"-!../../../src/index.js??ref--4-0!./imported-simple.css\\").locals[\\"imported-simple\\"] + \\"\\", \\"relative\\": \\"_1n5XhXj4SFnYrwziC3un0d \\" + require(\\"-!../../../src/index.js??ref--4-0!./relative.css\\").locals[\\"imported-relative\\"] + \\"\\", \\"top-relative\\": \\"_3dnFnGkAVAiMA6etF-naHc \\" + require(\\"-!../../../src/index.js??ref--4-0!../modules/top-relative.css\\").locals[\\"imported-relative\\"] + \\"\\", @@ -5441,6 +5441,58 @@ exports.locals = { exports[`modules composes should supports resolving: warnings 1`] = `Array []`; +exports[`modules composes should values in selectors: errors 1`] = `Array []`; + +exports[`modules composes should values in selectors: module (evaluated) 1`] = ` +Array [ + Array [ + 2, + " +", + "", + ], + Array [ + 3, + "._22ETk3ZhhvjVe-4dAULcsF { + display: block; +} +", + "", + ], + Array [ + 1, + "/* At the moment local-by-default doesn't understand values .btn would get hashed */ +.btn { + display: block; +} + +.green > ._22ETk3ZhhvjVe-4dAULcsF { + color: blue; +} +", + "", + ], +] +`; + +exports[`modules composes should values in selectors: module 1`] = ` +"exports = module.exports = require(\\"../../../src/runtime/api.js\\")(false); +// Imports +exports.i(require(\\"-!../../../src/index.js??ref--4-0!./values.css\\"), \\"\\"); +exports.i(require(\\"-!../../../src/index.js??ref--4-0!./imported-simple.css\\"), \\"\\"); + +// Module +exports.push([module.id, \\"/* At the moment local-by-default doesn't understand values .btn would get hashed */\\\\n.btn {\\\\n display: block;\\\\n}\\\\n\\\\n.\\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"other\\"] + \\" > .\\" + require(\\"-!../../../src/index.js??ref--4-0!./imported-simple.css\\").locals[\\"imported-simple\\"] + \\" {\\\\n color: blue;\\\\n}\\\\n\\", \\"\\"]); + +// Exports +exports.locals = { + \\"other\\": \\"\\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"other\\"] + \\"\\", + \\"button-class\\": \\"btn\\" +};" +`; + +exports[`modules composes should values in selectors: warnings 1`] = `Array []`; + exports[`modules issue #286: errors 1`] = `Array []`; exports[`modules issue #286: module (evaluated) 1`] = ` diff --git a/test/fixtures/modules/composes.css b/test/fixtures/modules/composes.css index abf1a32a..254f5ba4 100644 --- a/test/fixtures/modules/composes.css +++ b/test/fixtures/modules/composes.css @@ -4,7 +4,6 @@ @value other from './values.css'; @value other from './values.css'; @value something from './something.css'; -@value foo: blue; @value bar: block; .ghi { @@ -15,7 +14,7 @@ color: foo; } -.other { +.block { display: bar; } diff --git a/test/fixtures/modules/values-in-selectors.css b/test/fixtures/modules/values-in-selectors.css new file mode 100644 index 00000000..a95f79a2 --- /dev/null +++ b/test/fixtures/modules/values-in-selectors.css @@ -0,0 +1,14 @@ +@value other from './values.css'; +@value button-class: btn; + +:import('imported-simple.css') { + other-child: imported-simple; +} +/* At the moment local-by-default doesn't understand values .btn would get hashed */ +:global(.button-class) { + display: block; +} + +.other > .other-child { + color: blue; +} diff --git a/test/modules-option.test.js b/test/modules-option.test.js index 84dae6ec..3d73020e 100644 --- a/test/modules-option.test.js +++ b/test/modules-option.test.js @@ -54,6 +54,23 @@ describe('modules', () => { expect(stats.compilation.errors).toMatchSnapshot('errors'); }); + it('composes should values in selectors', async () => { + const config = { + loader: { options: { import: true, modules: true } }, + }; + const testId = './modules/values-in-selectors.css'; + const stats = await webpack(testId, config); + const { modules } = stats.toJson(); + const module = modules.find((m) => m.id === testId); + + expect(module.source).toMatchSnapshot('module'); + expect(evaluated(module.source, modules)).toMatchSnapshot( + 'module (evaluated)' + ); + expect(stats.compilation.warnings).toMatchSnapshot('warnings'); + expect(stats.compilation.errors).toMatchSnapshot('errors'); + }); + it('issue #286', async () => { const config = { loader: { From 2eacc3a1f1cf15f27ee31f25dcdf49d187b68304 Mon Sep 17 00:00:00 2001 From: Jason Quense Date: Tue, 7 May 2019 15:05:03 -0400 Subject: [PATCH 4/5] docs: docs and one more test --- README.md | 44 ++++++++++++++++++- .../__snapshots__/modules-option.test.js.snap | 18 +++++++- test/fixtures/modules/values-in-selectors.css | 4 ++ 3 files changed, 62 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index d431314b..e23ac03f 100644 --- a/README.md +++ b/README.md @@ -437,6 +437,46 @@ To import from multiple modules use multiple `composes:` rules. } ``` +##### `Values` + +`css-loader` also includes support for css-modules `@value`s which you can read more of here: https://github.com/css-modules/postcss-modules-values Values provide a way to declare import and exports +for specific values in a css file that can be used in another. + +```css +/* theme.css */ +@value primary: #BF4040; +@value secondary: #1F4F7F; +``` + +Values are automatically exported and can be imported like so: + +```css +@value primary from './theme.css'; + +.text-primary { + color: primary; +} +``` + +You also don't need to declare a an export as a value to reference in another file: + +```css +/* button.css */ + +.button { + color: red; +} +``` + +```css +@value button from './button.css'; + +/* the 'button' class will be replaced with it's hashed value from 'button.css' */ +.toolbar > .button { + margin-left: 2rem; +} +``` + ### `localIdentName` Type: `String` @@ -584,8 +624,8 @@ By default, the exported JSON keys mirror the class names. If you want to cameli | Name | Type | Description | | :----------------: | :---------: | :----------------------------------------------------------------------------------------------------------------------- | -| **`false`** | `{Boolean}` | Class names won't be camelized | -| **`true`** | `{Boolean}` | Class names will be camelized, the original class name will not to be removed from the locals | +| **`false`** | `{Boolean}` | Class names won't be camelized | +| **`true`** | `{Boolean}` | Class names will be camelized, the original class name will not to be removed from the locals | | **`'dashes'`** | `{String}` | Only dashes in class names will be camelized | | **`'only'`** | `{String}` | Introduced in `0.27.1`. Class names will be camelized, the original class name will be removed from the locals | | **`'dashesOnly'`** | `{String}` | Introduced in `0.27.1`. Dashes in class names will be camelized, the original class name will be removed from the locals | diff --git a/test/__snapshots__/modules-option.test.js.snap b/test/__snapshots__/modules-option.test.js.snap index 6b79f638..b4b1c6fe 100644 --- a/test/__snapshots__/modules-option.test.js.snap +++ b/test/__snapshots__/modules-option.test.js.snap @@ -5453,6 +5453,14 @@ Array [ ], Array [ 3, + ".dSGVakTZ8YY-XNW64tg9F { + display: inline; +} +", + "", + ], + Array [ + 4, "._22ETk3ZhhvjVe-4dAULcsF { display: block; } @@ -5469,6 +5477,9 @@ Array [ .green > ._22ETk3ZhhvjVe-4dAULcsF { color: blue; } + +.uTNBxZ_JJrJOoGzCUbSnW > .dSGVakTZ8YY-XNW64tg9F { +} ", "", ], @@ -5479,15 +5490,18 @@ exports[`modules composes should values in selectors: module 1`] = ` "exports = module.exports = require(\\"../../../src/runtime/api.js\\")(false); // Imports exports.i(require(\\"-!../../../src/index.js??ref--4-0!./values.css\\"), \\"\\"); +exports.i(require(\\"-!../../../src/index.js??ref--4-0!./relative.css\\"), \\"\\"); exports.i(require(\\"-!../../../src/index.js??ref--4-0!./imported-simple.css\\"), \\"\\"); // Module -exports.push([module.id, \\"/* At the moment local-by-default doesn't understand values .btn would get hashed */\\\\n.btn {\\\\n display: block;\\\\n}\\\\n\\\\n.\\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"other\\"] + \\" > .\\" + require(\\"-!../../../src/index.js??ref--4-0!./imported-simple.css\\").locals[\\"imported-simple\\"] + \\" {\\\\n color: blue;\\\\n}\\\\n\\", \\"\\"]); +exports.push([module.id, \\"/* At the moment local-by-default doesn't understand values .btn would get hashed */\\\\n.btn {\\\\n display: block;\\\\n}\\\\n\\\\n.\\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"other\\"] + \\" > .\\" + require(\\"-!../../../src/index.js??ref--4-0!./imported-simple.css\\").locals[\\"imported-simple\\"] + \\" {\\\\n color: blue;\\\\n}\\\\n\\\\n.uTNBxZ_JJrJOoGzCUbSnW > .\\" + require(\\"-!../../../src/index.js??ref--4-0!./relative.css\\").locals[\\"imported-relative\\"] + \\" {\\\\n}\\\\n\\", \\"\\"]); // Exports exports.locals = { \\"other\\": \\"\\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"other\\"] + \\"\\", - \\"button-class\\": \\"btn\\" + \\"imported-relative\\": \\"\\" + require(\\"-!../../../src/index.js??ref--4-0!./relative.css\\").locals[\\"imported-relative\\"] + \\"\\", + \\"button-class\\": \\"btn\\", + \\"button\\": \\"uTNBxZ_JJrJOoGzCUbSnW\\" };" `; diff --git a/test/fixtures/modules/values-in-selectors.css b/test/fixtures/modules/values-in-selectors.css index a95f79a2..fd9a34d6 100644 --- a/test/fixtures/modules/values-in-selectors.css +++ b/test/fixtures/modules/values-in-selectors.css @@ -1,4 +1,5 @@ @value other from './values.css'; +@value imported-relative from './relative.css'; @value button-class: btn; :import('imported-simple.css') { @@ -12,3 +13,6 @@ .other > .other-child { color: blue; } + +.button > .imported-relative { +} From e2ae7776411e422ac1add476896270eddeed6495 Mon Sep 17 00:00:00 2001 From: Jason Quense Date: Wed, 8 May 2019 09:14:03 -0400 Subject: [PATCH 5/5] docs: add media atRule example --- README.md | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index e23ac03f..dd496a0e 100644 --- a/README.md +++ b/README.md @@ -446,15 +446,24 @@ for specific values in a css file that can be used in another. /* theme.css */ @value primary: #BF4040; @value secondary: #1F4F7F; + +@value large: (min-width: 960px); ``` Values are automatically exported and can be imported like so: ```css -@value primary from './theme.css'; +@value primary, large from './theme.css'; -.text-primary { +.header { color: primary; + padding: 0 10px; +} + +@media large { + .header { + padding: 0 20px; + } } ```