test: postcss-loader

package.json

@@ -43,6 +43,8 @@
     "jest": "^23.6.0",
     "lint-staged": "^8.1.0",
     "memory-fs": "^0.4.1",
+    "postcss-loader": "^3.0.0",
+    "postcss-preset-env": "^6.4.0",
     "prettier": "^1.15.2",
     "standard-version": "^4.0.0",
     "strip-ansi": "^5.0.0",

test/__snapshots__/loader.test.js.snap

@@ -443,3 +443,87 @@ You may need an appropriate loader to handle this file type.
 `;
 
 exports[`loader should throws error when no loader for assets: warnings 1`] = `Array []`;
+
+exports[`loader using together with "postcss-loader": errors 1`] = `Array []`;
+
+exports[`loader using together with "postcss-loader": module (evaluated) 1`] = `
+Array [
+  Array [
+    1,
+    ":root {
+  --fontSize: 1rem;
+  --mainColor: rgba(18,52,86,0.47059);
+  --secondaryColor: rgba(102, 51, 153, 0.9);
+}
+
+html {
+  overflow-x: hidden;
+  overflow-y: auto;
+  overflow: hidden auto;
+}
+
+@media (max-width: 50rem) {
+  body {
+    color: rgba(18,52,86,0.47059);
+    color: var(--mainColor);
+    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
+    font-size: 1rem;
+    font-size: var(--fontSize);
+    line-height: calc(1rem * 1.5);
+    line-height: calc(var(--fontSize) * 1.5);
+    word-wrap: break-word;
+    padding-left: calc(1rem / 2 + 1px);
+    padding-right: calc(1rem / 2 + 1px);
+    padding-left: calc(var(--fontSize) / 2 + 1px);
+    padding-right: calc(var(--fontSize) / 2 + 1px);
+  }
+}
+
+h1,h2,h3,h4,h5,h6 {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+main.hero, .hero.main {
+  background-image: img1x.png;
+}
+
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+
+main.hero, .hero.main {
+  background-image: img2x.png;
+}
+}
+
+main.hero, .hero.main {
+  background-image: -webkit-image-set(url(/webpack/public/path/img1x.png) 1x, url(/webpack/public/path/img2x.png) 2x);
+  background-image: image-set(\\"img1x.png\\" 1x, \\"img2x.png\\" 2x);
+}
+
+a {
+  color: rgba(0, 0, 255, 0.9)
+}
+
+a:hover {
+    color: #639;
+  }
+",
+    "",
+  ],
+]
+`;
+
+exports[`loader using together with "postcss-loader": module 1`] = `
+"var escape = require(\\"../../../lib/runtime/escape.js\\");
+exports = module.exports = require(\\"../../../lib/runtime/api.js\\")(false);
+// imports
+
+
+// module
+exports.push([module.id, \\":root {\\\\n  --fontSize: 1rem;\\\\n  --mainColor: rgba(18,52,86,0.47059);\\\\n  --secondaryColor: rgba(102, 51, 153, 0.9);\\\\n}\\\\n\\\\nhtml {\\\\n  overflow-x: hidden;\\\\n  overflow-y: auto;\\\\n  overflow: hidden auto;\\\\n}\\\\n\\\\n@media (max-width: 50rem) {\\\\n  body {\\\\n    color: rgba(18,52,86,0.47059);\\\\n    color: var(--mainColor);\\\\n    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;\\\\n    font-size: 1rem;\\\\n    font-size: var(--fontSize);\\\\n    line-height: calc(1rem * 1.5);\\\\n    line-height: calc(var(--fontSize) * 1.5);\\\\n    word-wrap: break-word;\\\\n    padding-left: calc(1rem / 2 + 1px);\\\\n    padding-right: calc(1rem / 2 + 1px);\\\\n    padding-left: calc(var(--fontSize) / 2 + 1px);\\\\n    padding-right: calc(var(--fontSize) / 2 + 1px);\\\\n  }\\\\n}\\\\n\\\\nh1,h2,h3,h4,h5,h6 {\\\\n  margin-top: 0;\\\\n  margin-bottom: 0;\\\\n}\\\\n\\\\nmain.hero, .hero.main {\\\\n  background-image: img1x.png;\\\\n}\\\\n\\\\n@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\\\\n\\\\nmain.hero, .hero.main {\\\\n  background-image: img2x.png;\\\\n}\\\\n}\\\\n\\\\nmain.hero, .hero.main {\\\\n  background-image: -webkit-image-set(url(\\" + escape(require(\\"./img1x.png\\")) + \\") 1x, url(\\" + escape(require(\\"./img2x.png\\")) + \\") 2x);\\\\n  background-image: image-set(\\\\\\"img1x.png\\\\\\" 1x, \\\\\\"img2x.png\\\\\\" 2x);\\\\n}\\\\n\\\\na {\\\\n  color: rgba(0, 0, 255, 0.9)\\\\n}\\\\n\\\\na:hover {\\\\n    color: #639;\\\\n  }\\\\n\\", \\"\\"]);
+
+// exports
+"
+`;
+
+exports[`loader using together with "postcss-loader": warnings 1`] = `Array []`;

test/fixtures/postcss-present-env/source.css

@@ -0,0 +1,39 @@
+@custom-media --viewport-medium (width <= 50rem);
+@custom-selector :--heading h1, h2, h3, h4, h5, h6;
+
+:root {
+  --fontSize: 1rem;
+  --mainColor: #12345678;
+  --secondaryColor: lab(32.5 38.5 -47.6 / 90%);
+}
+
+html {
+  overflow: hidden auto;
+}
+
+@media (--viewport-medium) {
+  body {
+    color: var(--mainColor);
+    font-family: system-ui;
+    font-size: var(--fontSize);
+    line-height: calc(var(--fontSize) * 1.5);
+    overflow-wrap: break-word;
+    padding-inline: calc(var(--fontSize) / 2 + 1px);
+  }
+}
+
+:--heading {
+  margin-block: 0;
+}
+
+.hero:matches(main, .main) {
+  background-image: image-set("img1x.png" 1x, "img2x.png" 2x);
+}
+
+a {
+  color: rgb(0 0 100% / 90%);
+
+  &:hover {
+    color: rebeccapurple;
+  }
+}

test/helpers.js

@@ -31,6 +31,7 @@ function evaluated(output, modules, moduleId = 1) {
         const importedModule = modules.find((el) => {
           const modulePath = el.identifier.split('!').pop();
           const importedPaths = [
+            'postcss-present-env',
             'icss/tests-cases/import',
             'import',
             'import/node_modules',
@@ -88,21 +89,32 @@ const moduleConfig = (config) => {
                 loader: path.resolve(__dirname, '../index.js'),
                 options: (config.loader && config.loader.options) || {},
               },
-            ].concat(
-              config.sourceMap
-                ? [
-                    {
-                      loader: path.resolve(
-                        __dirname,
-                        './fixtures/source-map-loader.js'
-                      ),
-                      options: {
-                        sourceMap: config.sourceMap,
+            ]
+              .concat(
+                config.sourceMap
+                  ? [
+                      {
+                        loader: path.resolve(
+                          __dirname,
+                          './fixtures/source-map-loader.js'
+                        ),
+                        options: {
+                          sourceMap: config.sourceMap,
+                        },
                       },
-                    },
-                  ]
-                : []
-            ),
+                    ]
+                  : []
+              )
+              .concat(
+                config.postcssLoader
+                  ? [
+                      {
+                        loader: 'postcss-loader',
+                        options: config.postcssLoaderOptions,
+                      },
+                    ]
+                  : []
+              ),
           },
           {
             test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,

test/loader.test.js

@@ -1,5 +1,7 @@
 const path = require('path');
 
+const postcssPresetEnv = require('postcss-preset-env');
+
 const { webpack, evaluated, normalizeErrors } = require('./helpers');
 
 describe('loader', () => {
@@ -87,4 +89,24 @@ describe('loader', () => {
     );
     expect(normalizeErrors(stats.compilation.errors)).toMatchSnapshot('errors');
   });
+
+  it('using together with "postcss-loader"', async () => {
+    const config = {
+      postcssLoader: true,
+      postcssLoaderOptions: {
+        plugins: () => [postcssPresetEnv({ stage: 0 })],
+      },
+    };
+    const testId = './postcss-present-env/source.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');
+  });
 });