test: pre loader

Author: alexander-akait

package-lock.json

@@ -70,11 +70,12 @@
     "jest": "^23.4.0",
     "lint-staged": "^7.2.0",
     "memory-fs": "^0.4.1",
-    "postcss-modules": "^1.4.1",
+    "node-sass": "^4.9.4",
     "postcss-loader": "^3.0.0",
     "postcss-preset-env": "^6.0.6",
     "pre-commit": "^1.2.2",
     "prettier": "^1.13.7",
+    "sass-loader": "^7.1.0",
     "standard-version": "^4.0.0",
     "strip-ansi": "^4.0.0",
     "webpack": "^4.16.0"

package.json

@@ -1,81 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`loader ICSS (next generation of css modules): errors 1`] = `Array []`;
-
-exports[`loader ICSS (next generation of css modules): export (evaluated) 1`] = `undefined`;
-
-exports[`loader ICSS (next generation of css modules): module (evaluated) 1`] = `
-Array [
-  Array [
-    1,
-    "._button_lj5dw_1 {
-  dispaly: block;
-}/* colors.css */._text-primary_1g01d_5 {
-  color: #BF4040;
-}._text-secondary_1g01d_9 {
-  color: #1F4F7F;
-}
-
-/* my-component.css */
-
-/* alias paths for other values or composition */
-
-/* import multiple from a single file */
-
-/* make local aliases to imported values */
-
-._class_1szx8_12 {
-  box-shadow: 0 0 10px #1F4F7F;
-}
-
-._foo_1szx8_17 {
-  color: red;
-}
-
-._foo_1szx8_17 ._bar_1szx8_21 {
-  color: yellow;
-}
-
-.foo .bar {
-  color: aqua;
-}
-
-._foo_1szx8_17 .bar {
-  color: green;
-}
-
-.foo ._bar_1szx8_21 {
-  color: yellowgreen;
-}
-
-._foo_1szx8_17.bar {
-  color: paleturquoise;
-}
-
-._foo_1szx8_17 .bar ._baz_1szx8_41 {
-  color: coral;
-}
-
-._foo_1szx8_17.bar ._baz_1szx8_41 {
-  color: lime;
-}
-",
-    "",
-  ],
-]
-`;
-
-exports[`loader ICSS (next generation of css modules): module 1`] = `
-"// CSS runtime
-module.exports = exports = require(\\"../../../src/runtime/api.js\\")(false);
-
-// CSS module
-exports.push([module.id, \\"._button_lj5dw_1 {\\\\n  dispaly: block;\\\\n}/* colors.css */._text-primary_1g01d_5 {\\\\n  color: #BF4040;\\\\n}._text-secondary_1g01d_9 {\\\\n  color: #1F4F7F;\\\\n}\\\\n\\\\n/* my-component.css */\\\\n\\\\n/* alias paths for other values or composition */\\\\n\\\\n/* import multiple from a single file */\\\\n\\\\n/* make local aliases to imported values */\\\\n\\\\n._class_1szx8_12 {\\\\n  box-shadow: 0 0 10px #1F4F7F;\\\\n}\\\\n\\\\n._foo_1szx8_17 {\\\\n  color: red;\\\\n}\\\\n\\\\n._foo_1szx8_17 ._bar_1szx8_21 {\\\\n  color: yellow;\\\\n}\\\\n\\\\n.foo .bar {\\\\n  color: aqua;\\\\n}\\\\n\\\\n._foo_1szx8_17 .bar {\\\\n  color: green;\\\\n}\\\\n\\\\n.foo ._bar_1szx8_21 {\\\\n  color: yellowgreen;\\\\n}\\\\n\\\\n._foo_1szx8_17.bar {\\\\n  color: paleturquoise;\\\\n}\\\\n\\\\n._foo_1szx8_17 .bar ._baz_1szx8_41 {\\\\n  color: coral;\\\\n}\\\\n\\\\n._foo_1szx8_17.bar ._baz_1szx8_41 {\\\\n  color: lime;\\\\n}\\\\n\\", \\"\\"]);
-"
-`;
-
-exports[`loader ICSS (next generation of css modules): warnings 1`] = `Array []`;
-
 exports[`loader basic (css endpoint): errors 1`] = `Array []`;
 
 exports[`loader basic (css endpoint): escape 1`] = `
@@ -649,3 +573,66 @@ exports.push([module.id, \\":root {\\\\n  --fontSize: 1rem;\\\\n  --mainColor: r
 `;
 
 exports[`loader using together with "postcss-loader" (reuse ast): warnings 1`] = `Array []`;
+
+exports[`loader using together with "sass-loader": errors 1`] = `Array []`;
+
+exports[`loader using together with "sass-loader": export (evaluated) 1`] = `undefined`;
+
+exports[`loader using together with "sass-loader": module (evaluated) 1`] = `
+Array [
+  Array [
+    3,
+    ".other-class {
+  color: blue;
+}
+",
+    "",
+  ],
+  Array [
+    1,
+    "body {
+  color: white; }
+
+body {
+  font: 100% Helvetica, sans-serif;
+  color: #333; }
+
+nav ul {
+  margin: 0;
+  padding: 0;
+  list-style: none; }
+
+nav li {
+  display: inline-block; }
+
+nav a {
+  display: block;
+  padding: 6px 12px;
+  text-decoration: none; }
+
+.box {
+  -webkit-transform: rotate(30deg);
+  -ms-transform: rotate(30deg);
+  transform: rotate(30deg); }
+
+.background {
+  background: url(/webpack/public/path/5b1f36bc41ab31f5b801d48ba1d65781.png); }
+",
+    "",
+  ],
+]
+`;
+
+exports[`loader using together with "sass-loader": module 1`] = `
+"// CSS runtime
+module.exports = exports = require(\\"../../../src/runtime/api.js\\")(false);
+// CSS imports
+var escape = require(\\"../../../src/runtime/escape.js\\");
+var ___CSS_LOADER_URL___0___ = escape(require(\\"./img.png\\"));
+exports.i(require(\\"-!../../../src/index.js??ref--4-0!./style.css\\"), \\"\\");
+// CSS module
+exports.push([module.id, \\"body {\\\\n  color: white; }\\\\n\\\\nbody {\\\\n  font: 100% Helvetica, sans-serif;\\\\n  color: #333; }\\\\n\\\\nnav ul {\\\\n  margin: 0;\\\\n  padding: 0;\\\\n  list-style: none; }\\\\n\\\\nnav li {\\\\n  display: inline-block; }\\\\n\\\\nnav a {\\\\n  display: block;\\\\n  padding: 6px 12px;\\\\n  text-decoration: none; }\\\\n\\\\n.box {\\\\n  -webkit-transform: rotate(30deg);\\\\n  -ms-transform: rotate(30deg);\\\\n  transform: rotate(30deg); }\\\\n\\\\n.background {\\\\n  background: url(\\" + ___CSS_LOADER_URL___0___ + \\"); }\\\\n\\", \\"\\"]);
+"
+`;
+
+exports[`loader using together with "sass-loader": warnings 1`] = `Array []`;

test/__snapshots__/loader.test.js.snap

@@ -0,0 +1,3 @@
+body {
+  color: white;
+}

test/fixtures/sass-loader/_reset.scss

@@ -0,0 +1,42 @@
+$font-stack: Helvetica, sans-serif;
+$primary-color: #333;
+
+@import 'reset';
+@import 'style.css';
+
+body {
+  font: 100% $font-stack;
+  color: $primary-color;
+}
+
+nav {
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  li {
+    display: inline-block;
+  }
+
+  a {
+    display: block;
+    padding: 6px 12px;
+    text-decoration: none;
+  }
+}
+
+@mixin transform($property) {
+  -webkit-transform: $property;
+  -ms-transform: $property;
+  transform: $property;
+}
+
+.box {
+  @include transform(rotate(30deg));
+}
+
+.background {
+  background: url('./img.png');
+}

test/fixtures/sass-loader/basic.scss

@@ -0,0 +1,3 @@
+.other-class {
+  color: blue;
+}

test/fixtures/sass-loader/img.png

@@ -31,13 +31,13 @@ function evaluated(output, modules, moduleId = 1) {
           const modulePath = el.identifier.split('!').pop();
           const importedPaths = [
             '',
-            'icss',
             'import',
             'import/node_modules',
             'messages-api',
             'source-map',
             'url',
             'url/node_modules',
+            'sass-loader',
           ].map((importedPath) =>
             path.resolve(__dirname, `../fixtures/${importedPath}`, module)
           );

test/fixtures/sass-loader/style.css

@@ -109,29 +109,18 @@ describe('loader', () => {
     expect(stats.compilation.errors).toMatchSnapshot('errors');
   });
 
-  test('ICSS (next generation of css modules)', async () => {
+  test('using together with "sass-loader"', async () => {
     const config = {
       rules: [
         {
-          test: /\.css$/,
+          test: /\.s[ca]ss$/i,
           use: [
             {
               loader: path.resolve(__dirname, '../src'),
-              options: {
-                importLoaders: 1,
-              },
+              options: {},
             },
             {
-              loader: 'postcss-loader',
-              options: {
-                plugins: () => [
-                  require('postcss-modules')({
-                    // Can be 'global' or 'local',
-                    scopeBehaviour: 'local',
-                    getJSON() {},
-                  }),
-                ],
-              },
+              loader: 'sass-loader',
             },
           ],
         },
@@ -143,10 +132,9 @@ describe('loader', () => {
         },
       ],
     };
-    const stats = await webpack('css-modules/basic.css', config);
+    const stats = await webpack('sass-loader/basic.scss', config);
     const { modules } = stats.toJson();
-    const [, module] = modules;
-
+    const [, , , module] = modules;
     const evaluatedModule = evaluated(module.source, modules);
 
     expect(module.source).toMatchSnapshot('module');