From 05a42e2d84f41181b106d74630cc5a9369ae4baa Mon Sep 17 00:00:00 2001 From: Evilebot Tnawi Date: Tue, 28 May 2019 22:20:13 +0300 Subject: [PATCH] feat: support `@value` at-rule in selectors (#941) BREAKING CHANGE: if you have name of `@value` in selector it will be replaced, you need to rename your name of `@value` or rename your selector --- README.md | 27 ++ package-lock.json | 44 +-- package.json | 4 +- src/plugins/postcss-icss-parser.js | 55 +-- .../__snapshots__/modules-option.test.js.snap | 352 +++++++++++++++++- test/fixtures/modules/composes.css | 55 ++- test/fixtures/modules/something.css | 2 +- .../modules/tests-cases/values-10/source.css | 18 + test/fixtures/modules/values.css | 6 +- 9 files changed, 476 insertions(+), 87 deletions(-) create mode 100644 test/fixtures/modules/tests-cases/values-10/source.css diff --git a/README.md b/README.md index e36feb51..1aa98769 100644 --- a/README.md +++ b/README.md @@ -434,6 +434,33 @@ To import from multiple modules use multiple `composes:` rules. } ``` +##### `Values` + +You can use `@value` to specific values to be reused throughout a document. + +We recommend use prefix `v-` for values, `s-` for selectors and `m-` for media at-rules. + +```css +@value v-primary: #BF4040; +@value s-black: black-selector; +@value m-large: (min-width: 960px); + +.header { + color: v-primary; + padding: 0 10px; +} + +.s-black { + color: black; +} + +@media m-large { + .header { + padding: 0 20px; + } +} +``` + #### `Boolean` Enable **CSS Modules** features. diff --git a/package-lock.json b/package-lock.json index 779c7856..741a4921 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4781,15 +4781,6 @@ } } }, - "eslint-plugin-prettier": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.0.tgz", - "integrity": "sha512-XWX2yVuwVNLOUhQijAkXz+rMPPoCr7WFiAl8ig6I7Xn+pPVhDhzg4DxHpmbeb0iqjO9UronEA3Tb09ChnFVHHA==", - "dev": true, - "requires": { - "prettier-linter-helpers": "^1.0.0" - } - }, "eslint-scope": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.3.tgz", @@ -5085,12 +5076,6 @@ "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz", "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=" }, - "fast-diff": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz", - "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==", - "dev": true - }, "fast-json-stable-stringify": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz", @@ -6739,11 +6724,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", @@ -10065,10 +10045,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.1", + "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-3.0.1.tgz", + "integrity": "sha512-pM5LXcwN4wq3syrfeQE1DImiqduhRLqePwMTE+xpdhOOMV+GRyBKjRAQdlK4hZbPIz/E+Y14H0GEJ79brbSVRQ==", "requires": { + "icss-utils": "^4.0.0", "postcss": "^7.0.6", "postcss-selector-parser": "^6.0.0", "postcss-value-parser": "^3.3.1" @@ -10084,11 +10065,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" } }, @@ -10276,15 +10257,6 @@ "integrity": "sha512-TzGRNvuUSmPgwivDqkZ9tM/qTGW9hqDKWOE9YHiyQdixlKbv7kvEqsmDPrcHJTKwthU774TQwZXVtaQ/mMsvjg==", "dev": true }, - "prettier-linter-helpers": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz", - "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==", - "dev": true, - "requires": { - "fast-diff": "^1.1.2" - } - }, "pretty-format": { "version": "24.8.0", "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-24.8.0.tgz", diff --git a/package.json b/package.json index acb42c6a..6f87397a 100644 --- a/package.json +++ b/package.json @@ -48,9 +48,9 @@ "normalize-path": "^3.0.0", "postcss": "^7.0.14", "postcss-modules-extract-imports": "^2.0.0", - "postcss-modules-local-by-default": "^2.0.6", + "postcss-modules-local-by-default": "^3.0.1", "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/src/plugins/postcss-icss-parser.js b/src/plugins/postcss-icss-parser.js index 6730f50b..bacdeaed 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,23 @@ 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 +57,43 @@ export default postcss.plugin( } const token = node.value; - const importIndex = imports[`$${token}`]; + const replacement = importReplacements[token]; - if (typeof importIndex === 'number') { + if (replacement) { // 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) => { + // Due reusing `ast` from `postcss-loader` some plugins may remove `value`, `selector` or `params` properties + if (node.type === 'decl' && node.value) { + // eslint-disable-next-line no-param-reassign + node.value = replaceImportsInString(node.value.toString()); + } else if (node.type === 'rule' && node.selector) { + // eslint-disable-next-line no-param-reassign + node.selector = replaceValueSymbols( + node.selector.toString(), + importReplacements + ); + } else if (node.type === 'atrule' && node.params) { // eslint-disable-next-line no-param-reassign - atrule.params = replaceImportsInString(atrule.params.toString()); + 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]), }, }); }); diff --git a/test/__snapshots__/modules-option.test.js.snap b/test/__snapshots__/modules-option.test.js.snap index abab561a..6a6eabf9 100644 --- a/test/__snapshots__/modules-option.test.js.snap +++ b/test/__snapshots__/modules-option.test.js.snap @@ -8086,6 +8086,310 @@ Object { exports[`modules case \`values-9\`: (export \`only locals\`) (\`modules\` value is \`true)\`: warnings 1`] = `Array []`; +exports[`modules case \`values-10\`: (export \`all\`) (\`modules\` value is \`false)\`: errors 1`] = `Array []`; + +exports[`modules case \`values-10\`: (export \`all\`) (\`modules\` value is \`false)\`: locals 1`] = `undefined`; + +exports[`modules case \`values-10\`: (export \`all\`) (\`modules\` value is \`false)\`: module (evaluated) 1`] = ` +Array [ + Array [ + 1, + "@value v-primary: #BF4040; +@value s-black: black-selector; +@value m-large: (min-width: 960px); + +.header { + color: v-primary; + padding: 0 10px; +} + +.s-black { + color: black; +} + +@media m-large { + .header { + padding: 0 20px; + } +} +", + "", + ], +] +`; + +exports[`modules case \`values-10\`: (export \`all\`) (\`modules\` value is \`false)\`: warnings 1`] = `Array []`; + +exports[`modules case \`values-10\`: (export \`all\`) (\`modules\` value is \`global)\`: errors 1`] = `Array []`; + +exports[`modules case \`values-10\`: (export \`all\`) (\`modules\` value is \`global)\`: locals 1`] = ` +Object { + "m-large": "(min-width: 960px)", + "s-black": "black-selector", + "v-primary": "#BF4040", +} +`; + +exports[`modules case \`values-10\`: (export \`all\`) (\`modules\` value is \`global)\`: module (evaluated) 1`] = ` +Array [ + Array [ + 1, + ".header { + color: #BF4040; + padding: 0 10px; +} + +.black-selector { + color: black; +} + +@media (min-width: 960px) { + .header { + padding: 0 20px; + } +} +", + "", + ], +] +`; + +exports[`modules case \`values-10\`: (export \`all\`) (\`modules\` value is \`global)\`: warnings 1`] = `Array []`; + +exports[`modules case \`values-10\`: (export \`all\`) (\`modules\` value is \`local)\`: errors 1`] = `Array []`; + +exports[`modules case \`values-10\`: (export \`all\`) (\`modules\` value is \`local)\`: locals 1`] = ` +Object { + "black-selector": "_3xId28FIeFVmNWx5IWeWqN", + "header": "ODvOrT6QaJbrNxuVwTgHn", + "m-large": "(min-width: 960px)", + "s-black": "black-selector", + "v-primary": "#BF4040", +} +`; + +exports[`modules case \`values-10\`: (export \`all\`) (\`modules\` value is \`local)\`: module (evaluated) 1`] = ` +Array [ + Array [ + 1, + ".ODvOrT6QaJbrNxuVwTgHn { + color: #BF4040; + padding: 0 10px; +} + +._3xId28FIeFVmNWx5IWeWqN { + color: black; +} + +@media (min-width: 960px) { + .ODvOrT6QaJbrNxuVwTgHn { + padding: 0 20px; + } +} +", + "", + ], +] +`; + +exports[`modules case \`values-10\`: (export \`all\`) (\`modules\` value is \`local)\`: warnings 1`] = `Array []`; + +exports[`modules case \`values-10\`: (export \`all\`) (\`modules\` value is \`object with mode global)\`: errors 1`] = `Array []`; + +exports[`modules case \`values-10\`: (export \`all\`) (\`modules\` value is \`object with mode global)\`: locals 1`] = ` +Object { + "m-large": "(min-width: 960px)", + "s-black": "black-selector", + "v-primary": "#BF4040", +} +`; + +exports[`modules case \`values-10\`: (export \`all\`) (\`modules\` value is \`object with mode global)\`: module (evaluated) 1`] = ` +Array [ + Array [ + 1, + ".header { + color: #BF4040; + padding: 0 10px; +} + +.black-selector { + color: black; +} + +@media (min-width: 960px) { + .header { + padding: 0 20px; + } +} +", + "", + ], +] +`; + +exports[`modules case \`values-10\`: (export \`all\`) (\`modules\` value is \`object with mode global)\`: warnings 1`] = `Array []`; + +exports[`modules case \`values-10\`: (export \`all\`) (\`modules\` value is \`object with mode local)\`: errors 1`] = `Array []`; + +exports[`modules case \`values-10\`: (export \`all\`) (\`modules\` value is \`object with mode local)\`: locals 1`] = ` +Object { + "black-selector": "_black-selector", + "header": "_header", + "m-large": "(min-width: 960px)", + "s-black": "black-selector", + "v-primary": "#BF4040", +} +`; + +exports[`modules case \`values-10\`: (export \`all\`) (\`modules\` value is \`object with mode local)\`: module (evaluated) 1`] = ` +Array [ + Array [ + 1, + "._header { + color: #BF4040; + padding: 0 10px; +} + +._black-selector { + color: black; +} + +@media (min-width: 960px) { + ._header { + padding: 0 20px; + } +} +", + "", + ], +] +`; + +exports[`modules case \`values-10\`: (export \`all\`) (\`modules\` value is \`object with mode local)\`: warnings 1`] = `Array []`; + +exports[`modules case \`values-10\`: (export \`all\`) (\`modules\` value is \`true)\`: errors 1`] = `Array []`; + +exports[`modules case \`values-10\`: (export \`all\`) (\`modules\` value is \`true)\`: locals 1`] = ` +Object { + "black-selector": "_3xId28FIeFVmNWx5IWeWqN", + "header": "ODvOrT6QaJbrNxuVwTgHn", + "m-large": "(min-width: 960px)", + "s-black": "black-selector", + "v-primary": "#BF4040", +} +`; + +exports[`modules case \`values-10\`: (export \`all\`) (\`modules\` value is \`true)\`: module (evaluated) 1`] = ` +Array [ + Array [ + 1, + ".ODvOrT6QaJbrNxuVwTgHn { + color: #BF4040; + padding: 0 10px; +} + +._3xId28FIeFVmNWx5IWeWqN { + color: black; +} + +@media (min-width: 960px) { + .ODvOrT6QaJbrNxuVwTgHn { + padding: 0 20px; + } +} +", + "", + ], +] +`; + +exports[`modules case \`values-10\`: (export \`all\`) (\`modules\` value is \`true)\`: warnings 1`] = `Array []`; + +exports[`modules case \`values-10\`: (export \`only locals\`) (\`modules\` value is \`false)\`: errors 1`] = `Array []`; + +exports[`modules case \`values-10\`: (export \`only locals\`) (\`modules\` value is \`false)\`: locals 1`] = `undefined`; + +exports[`modules case \`values-10\`: (export \`only locals\`) (\`modules\` value is \`false)\`: module (evaluated) 1`] = `Object {}`; + +exports[`modules case \`values-10\`: (export \`only locals\`) (\`modules\` value is \`false)\`: warnings 1`] = `Array []`; + +exports[`modules case \`values-10\`: (export \`only locals\`) (\`modules\` value is \`global)\`: errors 1`] = `Array []`; + +exports[`modules case \`values-10\`: (export \`only locals\`) (\`modules\` value is \`global)\`: locals 1`] = `undefined`; + +exports[`modules case \`values-10\`: (export \`only locals\`) (\`modules\` value is \`global)\`: module (evaluated) 1`] = ` +Object { + "m-large": "(min-width: 960px)", + "s-black": "black-selector", + "v-primary": "#BF4040", +} +`; + +exports[`modules case \`values-10\`: (export \`only locals\`) (\`modules\` value is \`global)\`: warnings 1`] = `Array []`; + +exports[`modules case \`values-10\`: (export \`only locals\`) (\`modules\` value is \`local)\`: errors 1`] = `Array []`; + +exports[`modules case \`values-10\`: (export \`only locals\`) (\`modules\` value is \`local)\`: locals 1`] = `undefined`; + +exports[`modules case \`values-10\`: (export \`only locals\`) (\`modules\` value is \`local)\`: module (evaluated) 1`] = ` +Object { + "black-selector": "_3xId28FIeFVmNWx5IWeWqN", + "header": "ODvOrT6QaJbrNxuVwTgHn", + "m-large": "(min-width: 960px)", + "s-black": "black-selector", + "v-primary": "#BF4040", +} +`; + +exports[`modules case \`values-10\`: (export \`only locals\`) (\`modules\` value is \`local)\`: warnings 1`] = `Array []`; + +exports[`modules case \`values-10\`: (export \`only locals\`) (\`modules\` value is \`object with mode global)\`: errors 1`] = `Array []`; + +exports[`modules case \`values-10\`: (export \`only locals\`) (\`modules\` value is \`object with mode global)\`: locals 1`] = `undefined`; + +exports[`modules case \`values-10\`: (export \`only locals\`) (\`modules\` value is \`object with mode global)\`: module (evaluated) 1`] = ` +Object { + "m-large": "(min-width: 960px)", + "s-black": "black-selector", + "v-primary": "#BF4040", +} +`; + +exports[`modules case \`values-10\`: (export \`only locals\`) (\`modules\` value is \`object with mode global)\`: warnings 1`] = `Array []`; + +exports[`modules case \`values-10\`: (export \`only locals\`) (\`modules\` value is \`object with mode local)\`: errors 1`] = `Array []`; + +exports[`modules case \`values-10\`: (export \`only locals\`) (\`modules\` value is \`object with mode local)\`: locals 1`] = `undefined`; + +exports[`modules case \`values-10\`: (export \`only locals\`) (\`modules\` value is \`object with mode local)\`: module (evaluated) 1`] = ` +Object { + "black-selector": "_black-selector", + "header": "_header", + "m-large": "(min-width: 960px)", + "s-black": "black-selector", + "v-primary": "#BF4040", +} +`; + +exports[`modules case \`values-10\`: (export \`only locals\`) (\`modules\` value is \`object with mode local)\`: warnings 1`] = `Array []`; + +exports[`modules case \`values-10\`: (export \`only locals\`) (\`modules\` value is \`true)\`: errors 1`] = `Array []`; + +exports[`modules case \`values-10\`: (export \`only locals\`) (\`modules\` value is \`true)\`: locals 1`] = `undefined`; + +exports[`modules case \`values-10\`: (export \`only locals\`) (\`modules\` value is \`true)\`: module (evaluated) 1`] = ` +Object { + "black-selector": "_3xId28FIeFVmNWx5IWeWqN", + "header": "ODvOrT6QaJbrNxuVwTgHn", + "m-large": "(min-width: 960px)", + "s-black": "black-selector", + "v-primary": "#BF4040", +} +`; + +exports[`modules case \`values-10\`: (export \`only locals\`) (\`modules\` value is \`true)\`: warnings 1`] = `Array []`; + exports[`modules composes should supports resolving: errors 1`] = `Array []`; exports[`modules composes should supports resolving: module (evaluated) 1`] = ` @@ -8196,6 +8500,30 @@ Array [ ._26Jdfenl9Xn8HXwb2jipvt { color: gainsboro; } + +._1ya4VhsDkuPhQeVHQydw2Y { + color: #BF4040; +} + +.sGE1Q_LliVEZU2Q4q9j4K { + color: black; +} + +@media (min-width: 960px) { + ._2zSMJ4hQh0FesbZjiKW_ya { + padding: 0 20px; + } +} + +.white { + color: white; +} + +@media (min-width: 320px) { + ._2zSMJ4hQh0FesbZjiKW_ya { + padding: 20px 20px; + } +} ", "", ], @@ -8215,24 +8543,34 @@ 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[\\"v-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[\\"v-something\\"] + \\";\\\\n}\\\\n\\\\n.Ywv5coVC2RU-pIFhN9O4w {\\\\n color: \\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"v-other\\"] + \\";\\\\n}\\\\n\\\\n._1tAbIwITRWAdZZE6wKNk9O {\\\\n prop: \\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"v-def\\"] + \\";\\\\n duplicate: \\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"v-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\\\\n._1ya4VhsDkuPhQeVHQydw2Y {\\\\n color: #BF4040;\\\\n}\\\\n\\\\n.sGE1Q_LliVEZU2Q4q9j4K {\\\\n color: black;\\\\n}\\\\n\\\\n@media (min-width: 960px) {\\\\n ._2zSMJ4hQh0FesbZjiKW_ya {\\\\n padding: 0 20px;\\\\n }\\\\n}\\\\n\\\\n.\\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"s-white\\"] + \\" {\\\\n color: white;\\\\n}\\\\n\\\\n@media \\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"m-small\\"] + \\" {\\\\n ._2zSMJ4hQh0FesbZjiKW_ya {\\\\n padding: 20px 20px;\\\\n }\\\\n}\\\\n\\", \\"\\"]); // Exports exports.locals = { - \\"def\\": \\"\\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"def\\"] + \\"\\", - \\"other\\": \\"_1wABXM_RabWHj--wsPrhvM\\", - \\"something\\": \\"\\" + require(\\"-!../../../src/index.js??ref--4-0!./something.css\\").locals[\\"something\\"] + \\"\\", - \\"foo\\": \\"_1tAbIwITRWAdZZE6wKNk9O\\", - \\"bar\\": \\"block\\", + \\"v-def\\": \\"\\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"v-def\\"] + \\"\\", + \\"v-other\\": \\"\\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"v-other\\"] + \\"\\", + \\"s-white\\": \\"\\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"s-white\\"] + \\"\\", + \\"m-small\\": \\"\\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"m-small\\"] + \\"\\", + \\"v-something\\": \\"\\" + require(\\"-!../../../src/index.js??ref--4-0!./something.css\\").locals[\\"v-something\\"] + \\"\\", + \\"v-foo\\": \\"blue\\", + \\"v-bar\\": \\"block\\", + \\"v-primary\\": \\"#BF4040\\", + \\"s-black\\": \\"black-selector\\", + \\"m-large\\": \\"(min-width: 960px)\\", \\"ghi\\": \\"_14uFt0lIVKKAlKTTT29IIQ\\", \\"class\\": \\"_3XDgIzfUIQkaUInpEdo7fN\\", + \\"other\\": \\"_1wABXM_RabWHj--wsPrhvM\\", \\"other-other\\": \\"_1DFEYnAfn9LZyk4fErI86e\\", \\"green\\": \\"Ywv5coVC2RU-pIFhN9O4w\\", + \\"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\\"] + \\"\\", \\"module\\": \\"_1xUePnlnafMQ1cExy3PUWT \\" + require(\\"-!../../../src/index.js??ref--4-0!package/style.css\\").locals[\\"imported-module\\"] + \\"\\", - \\"alias\\": \\"_26Jdfenl9Xn8HXwb2jipvt \\" + require(\\"-!../../../src/index.js??ref--4-0!aliasesComposes/alias.css\\").locals[\\"imported-alias\\"] + \\"\\" + \\"alias\\": \\"_26Jdfenl9Xn8HXwb2jipvt \\" + require(\\"-!../../../src/index.js??ref--4-0!aliasesComposes/alias.css\\").locals[\\"imported-alias\\"] + \\"\\", + \\"primary-selector\\": \\"_1ya4VhsDkuPhQeVHQydw2Y\\", + \\"black-selector\\": \\"sGE1Q_LliVEZU2Q4q9j4K\\", + \\"header\\": \\"_2zSMJ4hQh0FesbZjiKW_ya\\" };" `; diff --git a/test/fixtures/modules/composes.css b/test/fixtures/modules/composes.css index abf1a32a..8f84d71a 100644 --- a/test/fixtures/modules/composes.css +++ b/test/fixtures/modules/composes.css @@ -1,35 +1,40 @@ @import url(test-other.css) (min-width: 100px); -@value def from './values.css'; -@value other from './values.css'; -@value other from './values.css'; -@value something from './something.css'; -@value foo: blue; -@value bar: block; +@value v-def from './values.css'; +@value v-other from './values.css'; +@value v-other from './values.css'; +@value s-white from './values.css'; +@value m-small from './values.css'; +@value v-something from './something.css'; +@value v-foo: blue; +@value v-bar: block; +@value v-primary: #BF4040; +@value s-black: black-selector; +@value m-large: (min-width: 960px); .ghi { - color: def; + color: v-def; } .class { - color: foo; + color: v-foo; } .other { - display: bar; + display: v-bar; } .other-other { - width: something; + width: v-something; } .green { - color: other; + color: v-other; } .foo { - prop: def; - duplicate: other; + prop: v-def; + duplicate: v-other; } .simple { @@ -56,3 +61,27 @@ color: gainsboro; composes: imported-alias from '~aliasesComposes/alias.css'; } + +.primary-selector { + color: v-primary; +} + +.s-black { + color: black; +} + +@media m-large { + .header { + padding: 0 20px; + } +} + +.s-white { + color: white; +} + +@media m-small { + .header { + padding: 20px 20px; + } +} diff --git a/test/fixtures/modules/something.css b/test/fixtures/modules/something.css index 8d4c11e7..14efd103 100644 --- a/test/fixtures/modules/something.css +++ b/test/fixtures/modules/something.css @@ -1 +1 @@ -@value something: 2112moon; +@value v-something: 2112moon; diff --git a/test/fixtures/modules/tests-cases/values-10/source.css b/test/fixtures/modules/tests-cases/values-10/source.css new file mode 100644 index 00000000..69c88083 --- /dev/null +++ b/test/fixtures/modules/tests-cases/values-10/source.css @@ -0,0 +1,18 @@ +@value v-primary: #BF4040; +@value s-black: black-selector; +@value m-large: (min-width: 960px); + +.header { + color: v-primary; + padding: 0 10px; +} + +.s-black { + color: black; +} + +@media m-large { + .header { + padding: 0 20px; + } +} diff --git a/test/fixtures/modules/values.css b/test/fixtures/modules/values.css index 34aefa7d..017265bd 100644 --- a/test/fixtures/modules/values.css +++ b/test/fixtures/modules/values.css @@ -1,2 +1,4 @@ -@value def: red; -@value other: green; +@value v-def: red; +@value v-other: green; +@value s-white: white; +@value m-small: (min-width: 320px);