Merge pull request #548 from greenpeace/bump-css-vars-extract

PLANET-5983: Properly extract vars from multiple files

package.json

@@ -39,11 +39,11 @@
     "webpack-fix-style-only-entries": "^0.3.1"
   },
   "dependencies": {
+    "@greenpeace/planet4-postcss-css-variables": "^0.2.0",
     "classnames": "^2.2.6",
     "font-picker-react": "^3.5.2",
     "jest-environment-node": "^26.0.1",
     "photoswipe": "^4.1.3",
-    "postcss-css-variables-extract": "^0.1.2",
     "react-color": "^2.19.3",
     "react-hotkeys-hook": "^3.0.3",
     "tinycolor2": "^1.4.2"

webpack.config.js

@@ -5,12 +5,10 @@ const TerserJSPlugin = require('terser-webpack-plugin');
 const FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries");
 const RemovePlugin = require('remove-files-webpack-plugin');
 const dashDash = require('@greenpeace/dashdash');
-const cssVariables = require( 'postcss-css-variables-extract' );
-const fs = require( 'fs' );
-const collectVarUsages = require( 'postcss-css-variables-extract/lib/scss-var-usages' );
-const mergeVarUsages = require( 'postcss-css-variables-extract/lib/merge-var-usages' );
+const cssVariables = require( '@greenpeace/planet4-postcss-css-variables' );
+const VariableCombinePlugin = require( '@greenpeace/planet4-postcss-css-variables/variableCombinePlugin' )
 
-let allCssVars = {};
+const allCssVars = {};
 
 const entryPoints = blockName => {
   return {
@@ -127,25 +125,7 @@ module.exports = {
         ]
       }
     }),
-    {
-      apply: ( compiler ) => {
-        compiler.hooks.done.tap( 'DoneWriteCssVars', ( ) => {
-          // We use postcss to get the selector and resolved default value. For the original file and line number
-          // we use a separate scripts which loops through all scss files. Only variables that are in the final css
-          // are included.
-          const scssUsages = collectVarUsages( './assets/src' );
-          const mergedUsages = mergeVarUsages( allCssVars, scssUsages );
-          fs.writeFile(
-            './assets/build/css-variables.json',
-            JSON.stringify( mergedUsages, null, 2 ),
-            err => !!err && console.log( err )
-          );
-          // todo: handle multiple files. The next line only works as intended if there is one style file.
-          // allCssVars = {}
-        } );
-      }
-    }
-
+    VariableCombinePlugin({filename: './assets/build/css-variables.json', allCssVars})
   ],
   optimization: {
     ...defaultConfig.optimization,