perf: Improve setup for postcss to increase performance

README.md

@@ -31,12 +31,12 @@ For now there are 3 commands you can use.
 # Loaders
 |Name|Additional parameters allowed|Description|
 |:--|:---|:---|
-|[css][css-loader]|`{env, postcssPresetEnvOptions}`|Loads a CSS file|
+|[css][css-loader]|`{env, postcssOpts}`|Loads a CSS file|
 |[cyclejs][cyclejs-loader]|`{excludePattern, plugins, presets}`|A functional and reactive JavaScript framework for predictable code. Uses [babel-loader][babel-loader]|
 |[graphql][graphql-loader]|`{excludePattern}`|A query language for your API|
 |[react][babel-loader]|`{excludePattern, plugins, presets}`|A JavaScript library for building user interfaces. Uses [babel-loader][babel-loader]|
-|[scss][sass-loader]|`{env, cwd, scssPath, useScssVariables, postcssPresetEnvOptions}`|Loads a Sass/SCSS file and compiles it to CSS.|
-|utils|`{env, postcssPresetEnvOptions}`|An aggregation of [postcss-loader][postcss-loader], [url-loader][url-loader] and [style-loader][style-loader]|
+|[scss][sass-loader]|`{env, scssVariables, postcssOpts}`|Loads a Sass/SCSS file and compiles it to CSS.|
+|utils|`{env, postcssOpts}`|An aggregation of [postcss-loader][postcss-loader], [url-loader][url-loader] and [style-loader][style-loader]|
 
 [babel-loader]: https://github.com/babel/babel-loader
 [css-loader]: https://github.com/webpack-contrib/css-loader

loaders/css.js

@@ -1,7 +1,8 @@
 const {extractCssPlugin, postcss} = require('./utils');
 
-module.exports = ({env, postcssPresetEnvOptions}) => ({
+module.exports = ({env, postcssOpts}) => ({
   test: /\.css$/,
+  exclude: /node_modules/,
   loader: extractCssPlugin(env)([
     {
       loader: 'css-loader',
@@ -11,6 +12,6 @@ module.exports = ({env, postcssPresetEnvOptions}) => ({
         localIdentName: '[path]___[name]__[local]',
       }
     },
-    postcss({postcssPresetEnvOptions}),
+    postcss(postcssOpts),
   ])
 });

loaders/scss.js

@@ -1,10 +1,11 @@
-const path = require('path');
 const {extractCssPlugin, postcss} = require('./utils');
+const {readFileSync} = require('fs');
 
 module.exports = (
-  {env, cwd, useScssVariables, postcssPresetEnvOptions, scssPath = '/src/scss'}) => (
+  {env, scssVariables, postcssOpts}) => (
   {
     test: /\.scss$/,
+    exclude: /node_modules/,
     loader: extractCssPlugin(env)([
       {
         loader: 'css-loader',
@@ -15,16 +16,11 @@ module.exports = (
           localIdentName: '[path]___[name]__[local]',
         }
       },
-      postcss({postcssPresetEnvOptions}),
+      postcss(postcssOpts),
       {
         loader: 'sass-loader',
         options: {
-          data: `
-            ${useScssVariables && `@import "variables";`}
-          `,
-          includePaths: [
-            path.isAbsolute(scssPath) ? scssPath : path.join(cwd, scssPath)
-          ]
+          data: scssVariables ? readFileSync(scssVariables, 'utf-8') : '',
         }
       }
     ])

loaders/utils.js

@@ -1,19 +1,15 @@
 const {flatten} = require('lodash');
-const postcssPresetEnv = require('postcss-preset-env');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const transitions = require('postcss-will-change-transition');
 
 const extractCssPlugin = env => env === 'production'
   ? use => [MiniCssExtractPlugin.loader, ...use]
   : use => ['style-loader', ...use];
 
-const postcss = ({postcssPresetEnvOptions}) => ({
+const postcss = opts => ({
   loader: 'postcss-loader',
   options: {
-    plugins: () => [
-      postcssPresetEnv(postcssPresetEnvOptions),
-      transitions
-    ]
+    plugins: () => opts || [transitions]
   }
 });
 

package.json

@@ -55,7 +55,6 @@
     "node-sass": "^4.9.2",
     "optimize-css-assets-webpack-plugin": "^5.0.0",
     "postcss-loader": "^2.1.6",
-    "postcss-preset-env": "^5.3.0",
     "postcss-will-change-transition": "^1.2.0",
     "sass-loader": "^7.0.3",
     "style-loader": "^0.21.0",

tests/loaders/css.test.js

@@ -21,9 +21,9 @@ describe('CSS loader', () => {
   it('should return the defaults if no options are provided', () =>
     expect(css({})).toMatchObject(defaults)
   );
-  it('should load postcss-preset-env and postcss-will-change-transition', () => {
+  it('should load postcss-will-change-transition', () => {
     const {plugins} = css({}).loader[2].options;
-    return expect(plugins().length).toBe(2);
+    return expect(plugins().length).toBe(1);
   });
   describe('receives an options object to customize the config', () => {
     it('should use MiniCssExtractPlugin if options.env = production', () =>

tests/loaders/scss.test.js

@@ -1,3 +1,4 @@
+const path = require('path');
 const {scss} = require('../../loaders');
 
 describe('SCSS loader', () => {
@@ -21,8 +22,7 @@ describe('SCSS loader', () => {
       }, {
         loader: 'sass-loader',
         options: {
-          data: '\n            undefined\n          ',
-          includePaths: [expect.stringMatching('src/scss')]
+          data: '',
         }
       }
     ],
@@ -38,16 +38,13 @@ describe('SCSS loader', () => {
     it('should use style-loader if options.env != production', () =>
       expect(scss({env: 'development'}).loader[0]).toBe('style-loader')
     );
-    it('allows to enable SCSS variables', () => {
-      const useScssVariables = true;
-      return expect(scss({useScssVariables}).loader[3].options.data)
-      .toBe('\n            @import "variables";\n          ');
-    });
-    it('allows to include SASS files from a different path', () => {
-      const cwd = './path';
-      const scssPath = './scssPath/scss';
-      return expect(scss({cwd, scssPath}).loader[3].options.includePaths)
-      .toContain('path/scssPath/scss');
+    it('allows to not pass SCSS variables path', () =>
+      expect(scss({}).loader[3].options.data).toBe('')
+    );
+    it('allows to pass SCSS variables path', () => {
+      const scssVariables = path.resolve(__dirname, './variables.scss');
+      return expect(scss({scssVariables}).loader[3].options.data)
+      .toBe('$test: 10px;\n');
     });
   });
 });

tests/loaders/variables.scss

@@ -0,0 +1 @@
+$test: 10px;