Skip to content

Commit 05a42e2

Browse files
evilebottnawievilebottnawi
authoredMay 28, 2019
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
·
v7.1.2v3.0.0
1 parent fd8d2e6 commit 05a42e2

File tree

9 files changed

+476
-87
lines changed

9 files changed

+476
-87
lines changed
 

‎README.md

+27
Original file line numberDiff line numberDiff line change
@@ -434,6 +434,33 @@ To import from multiple modules use multiple `composes:` rules.
434434
}
435435
```
436436

437+
##### `Values`
438+
439+
You can use `@value` to specific values to be reused throughout a document.
440+
441+
We recommend use prefix `v-` for values, `s-` for selectors and `m-` for media at-rules.
442+
443+
```css
444+
@value v-primary: #BF4040;
445+
@value s-black: black-selector;
446+
@value m-large: (min-width: 960px);
447+
448+
.header {
449+
color: v-primary;
450+
padding: 0 10px;
451+
}
452+
453+
.s-black {
454+
color: black;
455+
}
456+
457+
@media m-large {
458+
.header {
459+
padding: 0 20px;
460+
}
461+
}
462+
```
463+
437464
#### `Boolean`
438465

439466
Enable **CSS Modules** features.

‎package-lock.json

+8-36
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,9 @@
4848
"normalize-path": "^3.0.0",
4949
"postcss": "^7.0.14",
5050
"postcss-modules-extract-imports": "^2.0.0",
51-
"postcss-modules-local-by-default": "^2.0.6",
51+
"postcss-modules-local-by-default": "^3.0.1",
5252
"postcss-modules-scope": "^2.1.0",
53-
"postcss-modules-values": "^2.0.0",
53+
"postcss-modules-values": "^3.0.0",
5454
"postcss-value-parser": "^3.3.0",
5555
"schema-utils": "^1.0.0"
5656
},

‎src/plugins/postcss-icss-parser.js

+29-26
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import postcss from 'postcss';
22
import valueParser from 'postcss-value-parser';
3-
import { extractICSS } from 'icss-utils';
3+
import { extractICSS, replaceValueSymbols } from 'icss-utils';
44
import loaderUtils from 'loader-utils';
55

66
const pluginName = 'postcss-icss-parser';
@@ -9,22 +9,23 @@ export default postcss.plugin(
99
pluginName,
1010
() =>
1111
function process(css, result) {
12-
const imports = {};
13-
const icss = extractICSS(css);
14-
const exports = icss.icssExports;
12+
const importReplacements = Object.create(null);
13+
const { icssImports, icssExports } = extractICSS(css);
1514

16-
Object.keys(icss.icssImports).forEach((key) => {
15+
let index = 0;
16+
17+
Object.keys(icssImports).forEach((key) => {
1718
const url = loaderUtils.parseString(key);
1819

19-
Object.keys(icss.icssImports[key]).forEach((prop) => {
20-
const index = Object.keys(imports).length;
20+
Object.keys(icssImports[key]).forEach((prop) => {
21+
index += 1;
2122

22-
imports[`$${prop}`] = index;
23+
importReplacements[prop] = `___CSS_LOADER_IMPORT___${index}___`;
2324

2425
result.messages.push({
2526
pluginName,
2627
type: 'icss-import',
27-
item: { url, export: icss.icssImports[key][prop], index },
28+
item: { url, export: icssImports[key][prop], index },
2829
});
2930

3031
const alreadyIncluded = result.messages.find(
@@ -56,41 +57,43 @@ export default postcss.plugin(
5657
}
5758

5859
const token = node.value;
59-
const importIndex = imports[`$${token}`];
60+
const replacement = importReplacements[token];
6061

61-
if (typeof importIndex === 'number') {
62+
if (replacement) {
6263
// eslint-disable-next-line no-param-reassign
63-
node.value = `___CSS_LOADER_IMPORT___${importIndex}___`;
64+
node.value = replacement;
6465
}
6566
});
6667

6768
return tokens.toString();
6869
}
6970

70-
// Replace tokens in declarations
71-
css.walkDecls((decl) => {
72-
// eslint-disable-next-line no-param-reassign
73-
decl.value = replaceImportsInString(decl.value.toString());
74-
});
75-
76-
// Replace tokens in at-rules
77-
css.walkAtRules((atrule) => {
78-
// Due reusing `ast` from `postcss-loader` some plugins may lack
79-
// `params` property, we need to account for this possibility
80-
if (atrule.params) {
71+
// Replace tokens
72+
css.walk((node) => {
73+
// Due reusing `ast` from `postcss-loader` some plugins may remove `value`, `selector` or `params` properties
74+
if (node.type === 'decl' && node.value) {
75+
// eslint-disable-next-line no-param-reassign
76+
node.value = replaceImportsInString(node.value.toString());
77+
} else if (node.type === 'rule' && node.selector) {
78+
// eslint-disable-next-line no-param-reassign
79+
node.selector = replaceValueSymbols(
80+
node.selector.toString(),
81+
importReplacements
82+
);
83+
} else if (node.type === 'atrule' && node.params) {
8184
// eslint-disable-next-line no-param-reassign
82-
atrule.params = replaceImportsInString(atrule.params.toString());
85+
node.params = replaceImportsInString(node.params.toString());
8386
}
8487
});
8588

8689
// Replace tokens in export
87-
Object.keys(exports).forEach((exportName) => {
90+
Object.keys(icssExports).forEach((exportName) => {
8891
result.messages.push({
8992
pluginName,
9093
type: 'export',
9194
item: {
9295
key: exportName,
93-
value: replaceImportsInString(exports[exportName]),
96+
value: replaceImportsInString(icssExports[exportName]),
9497
},
9598
});
9699
});

‎test/__snapshots__/modules-option.test.js.snap

+345-7
Original file line numberDiff line numberDiff line change
@@ -8086,6 +8086,310 @@ Object {
80868086
80878087
exports[`modules case \`values-9\`: (export \`only locals\`) (\`modules\` value is \`true)\`: warnings 1`] = `Array []`;
80888088
8089+
exports[`modules case \`values-10\`: (export \`all\`) (\`modules\` value is \`false)\`: errors 1`] = `Array []`;
8090+
8091+
exports[`modules case \`values-10\`: (export \`all\`) (\`modules\` value is \`false)\`: locals 1`] = `undefined`;
8092+
8093+
exports[`modules case \`values-10\`: (export \`all\`) (\`modules\` value is \`false)\`: module (evaluated) 1`] = `
8094+
Array [
8095+
Array [
8096+
1,
8097+
"@value v-primary: #BF4040;
8098+
@value s-black: black-selector;
8099+
@value m-large: (min-width: 960px);
8100+
8101+
.header {
8102+
color: v-primary;
8103+
padding: 0 10px;
8104+
}
8105+
8106+
.s-black {
8107+
color: black;
8108+
}
8109+
8110+
@media m-large {
8111+
.header {
8112+
padding: 0 20px;
8113+
}
8114+
}
8115+
",
8116+
"",
8117+
],
8118+
]
8119+
`;
8120+
8121+
exports[`modules case \`values-10\`: (export \`all\`) (\`modules\` value is \`false)\`: warnings 1`] = `Array []`;
8122+
8123+
exports[`modules case \`values-10\`: (export \`all\`) (\`modules\` value is \`global)\`: errors 1`] = `Array []`;
8124+
8125+
exports[`modules case \`values-10\`: (export \`all\`) (\`modules\` value is \`global)\`: locals 1`] = `
8126+
Object {
8127+
"m-large": "(min-width: 960px)",
8128+
"s-black": "black-selector",
8129+
"v-primary": "#BF4040",
8130+
}
8131+
`;
8132+
8133+
exports[`modules case \`values-10\`: (export \`all\`) (\`modules\` value is \`global)\`: module (evaluated) 1`] = `
8134+
Array [
8135+
Array [
8136+
1,
8137+
".header {
8138+
color: #BF4040;
8139+
padding: 0 10px;
8140+
}
8141+
8142+
.black-selector {
8143+
color: black;
8144+
}
8145+
8146+
@media (min-width: 960px) {
8147+
.header {
8148+
padding: 0 20px;
8149+
}
8150+
}
8151+
",
8152+
"",
8153+
],
8154+
]
8155+
`;
8156+
8157+
exports[`modules case \`values-10\`: (export \`all\`) (\`modules\` value is \`global)\`: warnings 1`] = `Array []`;
8158+
8159+
exports[`modules case \`values-10\`: (export \`all\`) (\`modules\` value is \`local)\`: errors 1`] = `Array []`;
8160+
8161+
exports[`modules case \`values-10\`: (export \`all\`) (\`modules\` value is \`local)\`: locals 1`] = `
8162+
Object {
8163+
"black-selector": "_3xId28FIeFVmNWx5IWeWqN",
8164+
"header": "ODvOrT6QaJbrNxuVwTgHn",
8165+
"m-large": "(min-width: 960px)",
8166+
"s-black": "black-selector",
8167+
"v-primary": "#BF4040",
8168+
}
8169+
`;
8170+
8171+
exports[`modules case \`values-10\`: (export \`all\`) (\`modules\` value is \`local)\`: module (evaluated) 1`] = `
8172+
Array [
8173+
Array [
8174+
1,
8175+
".ODvOrT6QaJbrNxuVwTgHn {
8176+
color: #BF4040;
8177+
padding: 0 10px;
8178+
}
8179+
8180+
._3xId28FIeFVmNWx5IWeWqN {
8181+
color: black;
8182+
}
8183+
8184+
@media (min-width: 960px) {
8185+
.ODvOrT6QaJbrNxuVwTgHn {
8186+
padding: 0 20px;
8187+
}
8188+
}
8189+
",
8190+
"",
8191+
],
8192+
]
8193+
`;
8194+
8195+
exports[`modules case \`values-10\`: (export \`all\`) (\`modules\` value is \`local)\`: warnings 1`] = `Array []`;
8196+
8197+
exports[`modules case \`values-10\`: (export \`all\`) (\`modules\` value is \`object with mode global)\`: errors 1`] = `Array []`;
8198+
8199+
exports[`modules case \`values-10\`: (export \`all\`) (\`modules\` value is \`object with mode global)\`: locals 1`] = `
8200+
Object {
8201+
"m-large": "(min-width: 960px)",
8202+
"s-black": "black-selector",
8203+
"v-primary": "#BF4040",
8204+
}
8205+
`;
8206+
8207+
exports[`modules case \`values-10\`: (export \`all\`) (\`modules\` value is \`object with mode global)\`: module (evaluated) 1`] = `
8208+
Array [
8209+
Array [
8210+
1,
8211+
".header {
8212+
color: #BF4040;
8213+
padding: 0 10px;
8214+
}
8215+
8216+
.black-selector {
8217+
color: black;
8218+
}
8219+
8220+
@media (min-width: 960px) {
8221+
.header {
8222+
padding: 0 20px;
8223+
}
8224+
}
8225+
",
8226+
"",
8227+
],
8228+
]
8229+
`;
8230+
8231+
exports[`modules case \`values-10\`: (export \`all\`) (\`modules\` value is \`object with mode global)\`: warnings 1`] = `Array []`;
8232+
8233+
exports[`modules case \`values-10\`: (export \`all\`) (\`modules\` value is \`object with mode local)\`: errors 1`] = `Array []`;
8234+
8235+
exports[`modules case \`values-10\`: (export \`all\`) (\`modules\` value is \`object with mode local)\`: locals 1`] = `
8236+
Object {
8237+
"black-selector": "_black-selector",
8238+
"header": "_header",
8239+
"m-large": "(min-width: 960px)",
8240+
"s-black": "black-selector",
8241+
"v-primary": "#BF4040",
8242+
}
8243+
`;
8244+
8245+
exports[`modules case \`values-10\`: (export \`all\`) (\`modules\` value is \`object with mode local)\`: module (evaluated) 1`] = `
8246+
Array [
8247+
Array [
8248+
1,
8249+
"._header {
8250+
color: #BF4040;
8251+
padding: 0 10px;
8252+
}
8253+
8254+
._black-selector {
8255+
color: black;
8256+
}
8257+
8258+
@media (min-width: 960px) {
8259+
._header {
8260+
padding: 0 20px;
8261+
}
8262+
}
8263+
",
8264+
"",
8265+
],
8266+
]
8267+
`;
8268+
8269+
exports[`modules case \`values-10\`: (export \`all\`) (\`modules\` value is \`object with mode local)\`: warnings 1`] = `Array []`;
8270+
8271+
exports[`modules case \`values-10\`: (export \`all\`) (\`modules\` value is \`true)\`: errors 1`] = `Array []`;
8272+
8273+
exports[`modules case \`values-10\`: (export \`all\`) (\`modules\` value is \`true)\`: locals 1`] = `
8274+
Object {
8275+
"black-selector": "_3xId28FIeFVmNWx5IWeWqN",
8276+
"header": "ODvOrT6QaJbrNxuVwTgHn",
8277+
"m-large": "(min-width: 960px)",
8278+
"s-black": "black-selector",
8279+
"v-primary": "#BF4040",
8280+
}
8281+
`;
8282+
8283+
exports[`modules case \`values-10\`: (export \`all\`) (\`modules\` value is \`true)\`: module (evaluated) 1`] = `
8284+
Array [
8285+
Array [
8286+
1,
8287+
".ODvOrT6QaJbrNxuVwTgHn {
8288+
color: #BF4040;
8289+
padding: 0 10px;
8290+
}
8291+
8292+
._3xId28FIeFVmNWx5IWeWqN {
8293+
color: black;
8294+
}
8295+
8296+
@media (min-width: 960px) {
8297+
.ODvOrT6QaJbrNxuVwTgHn {
8298+
padding: 0 20px;
8299+
}
8300+
}
8301+
",
8302+
"",
8303+
],
8304+
]
8305+
`;
8306+
8307+
exports[`modules case \`values-10\`: (export \`all\`) (\`modules\` value is \`true)\`: warnings 1`] = `Array []`;
8308+
8309+
exports[`modules case \`values-10\`: (export \`only locals\`) (\`modules\` value is \`false)\`: errors 1`] = `Array []`;
8310+
8311+
exports[`modules case \`values-10\`: (export \`only locals\`) (\`modules\` value is \`false)\`: locals 1`] = `undefined`;
8312+
8313+
exports[`modules case \`values-10\`: (export \`only locals\`) (\`modules\` value is \`false)\`: module (evaluated) 1`] = `Object {}`;
8314+
8315+
exports[`modules case \`values-10\`: (export \`only locals\`) (\`modules\` value is \`false)\`: warnings 1`] = `Array []`;
8316+
8317+
exports[`modules case \`values-10\`: (export \`only locals\`) (\`modules\` value is \`global)\`: errors 1`] = `Array []`;
8318+
8319+
exports[`modules case \`values-10\`: (export \`only locals\`) (\`modules\` value is \`global)\`: locals 1`] = `undefined`;
8320+
8321+
exports[`modules case \`values-10\`: (export \`only locals\`) (\`modules\` value is \`global)\`: module (evaluated) 1`] = `
8322+
Object {
8323+
"m-large": "(min-width: 960px)",
8324+
"s-black": "black-selector",
8325+
"v-primary": "#BF4040",
8326+
}
8327+
`;
8328+
8329+
exports[`modules case \`values-10\`: (export \`only locals\`) (\`modules\` value is \`global)\`: warnings 1`] = `Array []`;
8330+
8331+
exports[`modules case \`values-10\`: (export \`only locals\`) (\`modules\` value is \`local)\`: errors 1`] = `Array []`;
8332+
8333+
exports[`modules case \`values-10\`: (export \`only locals\`) (\`modules\` value is \`local)\`: locals 1`] = `undefined`;
8334+
8335+
exports[`modules case \`values-10\`: (export \`only locals\`) (\`modules\` value is \`local)\`: module (evaluated) 1`] = `
8336+
Object {
8337+
"black-selector": "_3xId28FIeFVmNWx5IWeWqN",
8338+
"header": "ODvOrT6QaJbrNxuVwTgHn",
8339+
"m-large": "(min-width: 960px)",
8340+
"s-black": "black-selector",
8341+
"v-primary": "#BF4040",
8342+
}
8343+
`;
8344+
8345+
exports[`modules case \`values-10\`: (export \`only locals\`) (\`modules\` value is \`local)\`: warnings 1`] = `Array []`;
8346+
8347+
exports[`modules case \`values-10\`: (export \`only locals\`) (\`modules\` value is \`object with mode global)\`: errors 1`] = `Array []`;
8348+
8349+
exports[`modules case \`values-10\`: (export \`only locals\`) (\`modules\` value is \`object with mode global)\`: locals 1`] = `undefined`;
8350+
8351+
exports[`modules case \`values-10\`: (export \`only locals\`) (\`modules\` value is \`object with mode global)\`: module (evaluated) 1`] = `
8352+
Object {
8353+
"m-large": "(min-width: 960px)",
8354+
"s-black": "black-selector",
8355+
"v-primary": "#BF4040",
8356+
}
8357+
`;
8358+
8359+
exports[`modules case \`values-10\`: (export \`only locals\`) (\`modules\` value is \`object with mode global)\`: warnings 1`] = `Array []`;
8360+
8361+
exports[`modules case \`values-10\`: (export \`only locals\`) (\`modules\` value is \`object with mode local)\`: errors 1`] = `Array []`;
8362+
8363+
exports[`modules case \`values-10\`: (export \`only locals\`) (\`modules\` value is \`object with mode local)\`: locals 1`] = `undefined`;
8364+
8365+
exports[`modules case \`values-10\`: (export \`only locals\`) (\`modules\` value is \`object with mode local)\`: module (evaluated) 1`] = `
8366+
Object {
8367+
"black-selector": "_black-selector",
8368+
"header": "_header",
8369+
"m-large": "(min-width: 960px)",
8370+
"s-black": "black-selector",
8371+
"v-primary": "#BF4040",
8372+
}
8373+
`;
8374+
8375+
exports[`modules case \`values-10\`: (export \`only locals\`) (\`modules\` value is \`object with mode local)\`: warnings 1`] = `Array []`;
8376+
8377+
exports[`modules case \`values-10\`: (export \`only locals\`) (\`modules\` value is \`true)\`: errors 1`] = `Array []`;
8378+
8379+
exports[`modules case \`values-10\`: (export \`only locals\`) (\`modules\` value is \`true)\`: locals 1`] = `undefined`;
8380+
8381+
exports[`modules case \`values-10\`: (export \`only locals\`) (\`modules\` value is \`true)\`: module (evaluated) 1`] = `
8382+
Object {
8383+
"black-selector": "_3xId28FIeFVmNWx5IWeWqN",
8384+
"header": "ODvOrT6QaJbrNxuVwTgHn",
8385+
"m-large": "(min-width: 960px)",
8386+
"s-black": "black-selector",
8387+
"v-primary": "#BF4040",
8388+
}
8389+
`;
8390+
8391+
exports[`modules case \`values-10\`: (export \`only locals\`) (\`modules\` value is \`true)\`: warnings 1`] = `Array []`;
8392+
80898393
exports[`modules composes should supports resolving: errors 1`] = `Array []`;
80908394
80918395
exports[`modules composes should supports resolving: module (evaluated) 1`] = `
@@ -8196,6 +8500,30 @@ Array [
81968500
._26Jdfenl9Xn8HXwb2jipvt {
81978501
color: gainsboro;
81988502
}
8503+
8504+
._1ya4VhsDkuPhQeVHQydw2Y {
8505+
color: #BF4040;
8506+
}
8507+
8508+
.sGE1Q_LliVEZU2Q4q9j4K {
8509+
color: black;
8510+
}
8511+
8512+
@media (min-width: 960px) {
8513+
._2zSMJ4hQh0FesbZjiKW_ya {
8514+
padding: 0 20px;
8515+
}
8516+
}
8517+
8518+
.white {
8519+
color: white;
8520+
}
8521+
8522+
@media (min-width: 320px) {
8523+
._2zSMJ4hQh0FesbZjiKW_ya {
8524+
padding: 20px 20px;
8525+
}
8526+
}
81998527
",
82008528
"",
82018529
],
@@ -8215,24 +8543,34 @@ exports.i(require(\\"-!../../../src/index.js??ref--4-0!package/style.css\\"), \\
82158543
exports.i(require(\\"-!../../../src/index.js??ref--4-0!aliasesComposes/alias.css\\"), \\"\\");
82168544
82178545
// Module
8218-
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\\", \\"\\"]);
8546+
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\\", \\"\\"]);
82198547
82208548
// Exports
82218549
exports.locals = {
8222-
\\"def\\": \\"\\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"def\\"] + \\"\\",
8223-
\\"other\\": \\"_1wABXM_RabWHj--wsPrhvM\\",
8224-
\\"something\\": \\"\\" + require(\\"-!../../../src/index.js??ref--4-0!./something.css\\").locals[\\"something\\"] + \\"\\",
8225-
\\"foo\\": \\"_1tAbIwITRWAdZZE6wKNk9O\\",
8226-
\\"bar\\": \\"block\\",
8550+
\\"v-def\\": \\"\\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"v-def\\"] + \\"\\",
8551+
\\"v-other\\": \\"\\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"v-other\\"] + \\"\\",
8552+
\\"s-white\\": \\"\\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"s-white\\"] + \\"\\",
8553+
\\"m-small\\": \\"\\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"m-small\\"] + \\"\\",
8554+
\\"v-something\\": \\"\\" + require(\\"-!../../../src/index.js??ref--4-0!./something.css\\").locals[\\"v-something\\"] + \\"\\",
8555+
\\"v-foo\\": \\"blue\\",
8556+
\\"v-bar\\": \\"block\\",
8557+
\\"v-primary\\": \\"#BF4040\\",
8558+
\\"s-black\\": \\"black-selector\\",
8559+
\\"m-large\\": \\"(min-width: 960px)\\",
82278560
\\"ghi\\": \\"_14uFt0lIVKKAlKTTT29IIQ\\",
82288561
\\"class\\": \\"_3XDgIzfUIQkaUInpEdo7fN\\",
8562+
\\"other\\": \\"_1wABXM_RabWHj--wsPrhvM\\",
82298563
\\"other-other\\": \\"_1DFEYnAfn9LZyk4fErI86e\\",
82308564
\\"green\\": \\"Ywv5coVC2RU-pIFhN9O4w\\",
8565+
\\"foo\\": \\"_1tAbIwITRWAdZZE6wKNk9O\\",
82318566
\\"simple\\": \\"Q3SQ3BwtBwUFLlg6adzOI \\" + require(\\"-!../../../src/index.js??ref--4-0!./imported-simple.css\\").locals[\\"imported-simple\\"] + \\"\\",
82328567
\\"relative\\": \\"_1n5XhXj4SFnYrwziC3un0d \\" + require(\\"-!../../../src/index.js??ref--4-0!./relative.css\\").locals[\\"imported-relative\\"] + \\"\\",
82338568
\\"top-relative\\": \\"_3dnFnGkAVAiMA6etF-naHc \\" + require(\\"-!../../../src/index.js??ref--4-0!../modules/top-relative.css\\").locals[\\"imported-relative\\"] + \\"\\",
82348569
\\"module\\": \\"_1xUePnlnafMQ1cExy3PUWT \\" + require(\\"-!../../../src/index.js??ref--4-0!package/style.css\\").locals[\\"imported-module\\"] + \\"\\",
8235-
\\"alias\\": \\"_26Jdfenl9Xn8HXwb2jipvt \\" + require(\\"-!../../../src/index.js??ref--4-0!aliasesComposes/alias.css\\").locals[\\"imported-alias\\"] + \\"\\"
8570+
\\"alias\\": \\"_26Jdfenl9Xn8HXwb2jipvt \\" + require(\\"-!../../../src/index.js??ref--4-0!aliasesComposes/alias.css\\").locals[\\"imported-alias\\"] + \\"\\",
8571+
\\"primary-selector\\": \\"_1ya4VhsDkuPhQeVHQydw2Y\\",
8572+
\\"black-selector\\": \\"sGE1Q_LliVEZU2Q4q9j4K\\",
8573+
\\"header\\": \\"_2zSMJ4hQh0FesbZjiKW_ya\\"
82368574
};"
82378575
`;
82388576

‎test/fixtures/modules/composes.css

+42-13
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,40 @@
11
@import url(test-other.css) (min-width: 100px);
22

3-
@value def from './values.css';
4-
@value other from './values.css';
5-
@value other from './values.css';
6-
@value something from './something.css';
7-
@value foo: blue;
8-
@value bar: block;
3+
@value v-def from './values.css';
4+
@value v-other from './values.css';
5+
@value v-other from './values.css';
6+
@value s-white from './values.css';
7+
@value m-small from './values.css';
8+
@value v-something from './something.css';
9+
@value v-foo: blue;
10+
@value v-bar: block;
11+
@value v-primary: #BF4040;
12+
@value s-black: black-selector;
13+
@value m-large: (min-width: 960px);
914

1015
.ghi {
11-
color: def;
16+
color: v-def;
1217
}
1318

1419
.class {
15-
color: foo;
20+
color: v-foo;
1621
}
1722

1823
.other {
19-
display: bar;
24+
display: v-bar;
2025
}
2126

2227
.other-other {
23-
width: something;
28+
width: v-something;
2429
}
2530

2631
.green {
27-
color: other;
32+
color: v-other;
2833
}
2934

3035
.foo {
31-
prop: def;
32-
duplicate: other;
36+
prop: v-def;
37+
duplicate: v-other;
3338
}
3439

3540
.simple {
@@ -56,3 +61,27 @@
5661
color: gainsboro;
5762
composes: imported-alias from '~aliasesComposes/alias.css';
5863
}
64+
65+
.primary-selector {
66+
color: v-primary;
67+
}
68+
69+
.s-black {
70+
color: black;
71+
}
72+
73+
@media m-large {
74+
.header {
75+
padding: 0 20px;
76+
}
77+
}
78+
79+
.s-white {
80+
color: white;
81+
}
82+
83+
@media m-small {
84+
.header {
85+
padding: 20px 20px;
86+
}
87+
}

‎test/fixtures/modules/something.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
@value something: 2112moon;
1+
@value v-something: 2112moon;

‎test/fixtures/modules/tests-cases/values-10/source.css

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
@value v-primary: #BF4040;
2+
@value s-black: black-selector;
3+
@value m-large: (min-width: 960px);
4+
5+
.header {
6+
color: v-primary;
7+
padding: 0 10px;
8+
}
9+
10+
.s-black {
11+
color: black;
12+
}
13+
14+
@media m-large {
15+
.header {
16+
padding: 0 20px;
17+
}
18+
}

‎test/fixtures/modules/values.css

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
1-
@value def: red;
2-
@value other: green;
1+
@value v-def: red;
2+
@value v-other: green;
3+
@value s-white: white;
4+
@value m-small: (min-width: 320px);

0 commit comments

Comments
 (0)
Please sign in to comment.