feat: environment variable

feat: tests

fix: format

Author: steveblue

.github/workflows/main.yml

@@ -4,10 +4,10 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
-    - name: Install
-      run: npm install
-    - name: Compile
-      run: npm run build
-    - name: Run tests
-      run: npm run test
+      - uses: actions/checkout@v2
+      - name: Install
+        run: npm install
+      - name: Compile
+        run: npm run build
+      - name: Run tests
+        run: npm run test

.gitignore

@@ -1,5 +1,5 @@
 .vscode
 .DS_Store
 node_modules
-test/onExtract
+test/extract
 dist

README.md

@@ -23,12 +23,13 @@ export default {
 
 ## Options
 
-| Property             | Description                                       |
-| -------------------- | ------------------------------------------------- |
-| include              | Files to include                                  |
-| exclude              | Files to exclude                                  |
-| styleRegex           | Custom regex for selecting CSS in file            |
-| configPath           | Path to directory that contains postcss.config.js |
+| Property   | Description                                                              |
+| ---------- | ------------------------------------------------------------------------ |
+| include    | Files to include                                                         |
+| exclude    | Files to exclude                                                         |
+| env        | Environment variable, defaults to `process.env.NODE_ENV` where available |
+| styleRegex | Custom regex for selecting CSS in file                                   |
+| configPath | Path to directory that contains postcss.config.js                        |
 
 ## Template Literals in JavaScript
 

package.json

@@ -7,6 +7,7 @@
     "build:dist": "cp src/package.json dist/package.json && cp README.md dist/README.md && cp CHANGELOG.md dist/CHANGELOG.md",
     "prettier": "prettier --write .",
     "test": "jest",
+    "test:clean": "rm -rf test/extract",
     "version": "./version.sh"
   },
   "repository": {
@@ -39,4 +40,4 @@
     "prettier": "^2.2.1",
     "typescript": "^4.1.3"
   }
-}
+}

src/index.ts

@@ -22,9 +22,14 @@ export default function inlinePostCSS(options: any = {}) {
       }
 
       try {
-
         let configPath;
 
+        const env = process.env.NODE_ENV
+          ? options.env
+            ? options.env
+            : null
+          : null;
+
         const postcssOptions = {
           from: options.from ? path.join(process.cwd(), options.from) : id,
           to: options.to ? path.join(process.cwd(), options.to) : id,
@@ -48,29 +53,32 @@ export default function inlinePostCSS(options: any = {}) {
 
         if (typeof config === 'function') {
           config = config({
-            env: process.env.NODE_ENV,
+            env,
           });
         }
 
         const outputConfig = options.plugins
           ? options.plugins
           : Object.keys(config.plugins)
-            .filter((key) => config.plugins[key])
-            .map((key) => require(key));
+              .filter((key) => config.plugins[key])
+              .map((key) => require(key));
 
         const matches = code.match(styleRegex);
 
-        return Promise.all(matches.map(css => postcss(outputConfig)
-          .process(css.split('`')[1], postcssOptions))).then((transforms: any) => {
-            let mappings = '';
-            transforms.forEach((transform, index) => {
-              code = code.replace(matches[index].split('`')[1], transform.css);
-            });
-            return {
-              code,
-              map: null,
-            };
+        return Promise.all(
+          matches.map((css) =>
+            postcss(outputConfig).process(css.split('`')[1], postcssOptions)
+          )
+        ).then((transforms: any) => {
+          let mappings = '';
+          transforms.forEach((transform, index) => {
+            code = code.replace(matches[index].split('`')[1], transform.css);
           });
+          return {
+            code,
+            map: null,
+          };
+        });
       } catch (error) {
         if (options.failOnError) {
           this.error(error.message);

test/fixtures/multiple.js

@@ -1,22 +1,21 @@
-
 const containerStyle = css`
-.container {
-  display: block;
-  background: #abcefe;
-  color: white;
-}
+  .container {
+    display: block;
+    background: #abcefe;
+    color: white;
+  }
 `;
 
 const fontStyle = css`
-* {
-  font-size: 1.0em;
-  font-weight: 400;
-  line-height: 1.2em;
-} 
-`
+  * {
+    font-size: 1em;
+    font-weight: 400;
+    line-height: 1.2em;
+  }
+`;
 
 const horizontalListStyle = css`
-.horizontal {
-  display: flex;
-} 
+  .horizontal {
+    display: flex;
+  }
 `;

test/index.html

@@ -1,14 +1,12 @@
-<!doctype html>
+<!DOCTYPE html>
 <html class="no-js" lang="">
+  <head>
+    <meta charset="utf-8" />
+    <title></title>
+    <script src="extract/bundle.js"></script>
+  </head>
 
-<head>
-  <meta charset="utf-8">
-  <title></title>
-  <script src="onExtract/bundle.js"></script>
-</head>
-
-<body>
-
-  <button is="my-button"></button>
-</body>
+  <body>
+    <button is="my-button"></button>
+  </body>
 </html>

test/index.test.js

@@ -9,22 +9,19 @@ function fixture(...args) {
 }
 
 async function write({ input, output, plugin, outDir, options }) {
-
   const jsCodePath = path.join(outDir, 'bundle.js');
 
   const bundle = await rollup({
     input: fixture(input),
-    plugins: [
-      plugin,
-    ],
+    plugins: [plugin],
   });
 
   await bundle.write({
     format: 'esm',
     file: path.join(outDir, output),
     sourcemap: true,
     sourcemapFile: path.join(outDir, `${output}.map`),
-    ...options
+    ...options,
   });
 
   return {
@@ -44,21 +41,20 @@ async function write({ input, output, plugin, outDir, options }) {
     hasSourceMap(bundle) {
       const file = fs.readFileSync(path.join(outDir, bundle), 'utf8');
       return file.includes('sourceMappingURL');
-    }
+    },
   };
-
 }
 
 test('should process with plugins declared in rollup.config.js', async () => {
   const res = await write({
     input: 'component.js',
     output: 'bundle.js',
-    outDir: 'test/onExtract',
+    outDir: 'test/extract',
     plugin: inlinePostCSS({
       plugins: [require('postcss-csso'), require('postcss-rgb-plz')],
     }),
     options: {
-      sourcemap: false
+      sourcemap: false,
     },
   });
   expect(await res.hasRGBColorValues('bundle.js')).toBe(true);
@@ -70,7 +66,7 @@ test('should process file with custom regex', async () => {
   const res = await write({
     input: 'custom.js',
     output: 'custom.js',
-    outDir: 'test/onExtract',
+    outDir: 'test/extract',
     plugin: inlinePostCSS({
       styleRegex: /(?:foo`)((.|\n)+?)(?=(`(\n|;|,)))/gi,
     }),
@@ -84,7 +80,7 @@ test('should reference postcss.config.js', async () => {
   const res = await write({
     input: 'component.js',
     output: 'config.js',
-    outDir: 'test/onExtract',
+    outDir: 'test/extract',
     plugin: inlinePostCSS({
       configPath: path.join(__dirname, 'config'),
     }),
@@ -98,13 +94,38 @@ test('should process multiple css declarations', async () => {
   const res = await write({
     input: 'multiple.js',
     output: 'multiple.js',
-    outDir: 'test/onExtract',
+    outDir: 'test/extract',
     plugin: inlinePostCSS(),
     options: {},
   });
   expect(await res.hasRGBColorValues('multiple.js')).toBe(true);
   expect(await res.hasSourceMap('multiple.js')).toBe(true);
-  // expect(await res.isMinified('multiple.js')).toBe(true);
 });
 
+test('should not minify css when environnment is development', async () => {
+  const res = await write({
+    input: 'custom.js',
+    output: 'unminified.js',
+    outDir: 'test/extract',
+    plugin: inlinePostCSS({
+      configPath: path.join(__dirname, 'unminified'),
+      env: 'DEV',
+    }),
+    options: {},
+  });
+  expect(await res.isMinified('unminified.js')).toBe(false);
+});
 
+test('should minify css when environnment is production', async () => {
+  const res = await write({
+    input: 'custom.js',
+    output: 'minified.js',
+    outDir: 'test/extract',
+    plugin: inlinePostCSS({
+      configPath: path.join(__dirname, 'unminified'),
+      env: 'PROD',
+    }),
+    options: {},
+  });
+  expect(await res.isMinified('minified.js')).toBe(false);
+});

test/unminified/postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = (ctx) => ({
+  plugins: {
+    'postcss-csso': ctx.env === 'PROD' ? {} : null,
+  },
+});