test: clean up and add test cases

Author: jquense

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;
           }

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`] = `

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;
 }
 

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;
+}

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: {