STRWEB-111 Refresh PostCSS stack. (#142)

* remove unnecessary postcss plugins, reconfigure for native css variables

* remove postcss-plugin dependencies from package.json

* remove the imports of removed dependencies

* Update CHANGELOG.md

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## 5.2.0 IN PROGRESS
 
 * Don't worry about the order of CSS imports across modules. Refs STRWEB-110.
+* Remove postcss-plugins: postcss-nesting, postcss-custom-properties, postcss-color-function, postcss-calc. Add CSS variables entry point in webpack config. Refs STRWEB-111.
 
 ## [5.1.0](https://github.com/folio-org/stripes-webpack/tree/v5.1.0) (2024-03-12)
 [Full Changelog](https://github.com/folio-org/stripes-webpack/compare/v5.0.0...v5.1.0)

package.json

@@ -29,6 +29,7 @@
     "@babel/preset-typescript": "^7.7.7",
     "@babel/register": "^7.0.0",
     "@cerner/duplicate-package-checker-webpack-plugin": "~2.1.0",
+    "@csstools/postcss-global-data": "^2.1.1",
     "@csstools/postcss-relative-color-syntax": "^2.0.7",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
     "@svgr/webpack": "^8.1.0",
@@ -55,15 +56,9 @@
     "mini-css-extract-plugin": "^2.7.6",
     "node-object-hash": "^1.2.0",
     "postcss": "^8.4.2",
-    "postcss-calc": "^9.0.1",
-    "postcss-color-function": "folio-org/postcss-color-function",
     "postcss-custom-media": "^9.0.1",
-    "postcss-custom-properties": "12.1.11",
     "postcss-import": "^15.0.1",
     "postcss-loader": "^7.2.4",
-    "postcss-media-minmax": "^5.0.0",
-    "postcss-nesting": "^10.2.0",
-    "postcss-url": "^10.1.3",
     "process": "^0.11.10",
     "react-refresh": "^0.11.0",
     "regenerator-runtime": "^0.13.3",

postcss.config.js

@@ -1,13 +1,10 @@
 const path = require('path');
 const postCssImport = require('postcss-import');
 const autoprefixer = require('autoprefixer');
-const postCssCustomProperties = require('postcss-custom-properties');
-const postCssCalc = require('postcss-calc');
-const postCssNesting = require('postcss-nesting');
 const postCssCustomMedia = require('postcss-custom-media');
-const postCssMediaMinMax = require('postcss-media-minmax');
-const postCssColorFunction = require('postcss-color-function');
+const postCssGlobalData = require('@csstools/postcss-global-data');
 const postCssRelativeColorSyntax = require('@csstools/postcss-relative-color-syntax');
+const postCssOmitImports = require('./webpack/postcss-omit-imports');
 const { generateStripesAlias, tryResolve } = require('./webpack/module-paths');
 
 const locateCssVariables = () => {
@@ -23,18 +20,18 @@ const locateCssVariables = () => {
 
 module.exports = {
   plugins: [
-    postCssImport(),
-    autoprefixer(),
-    postCssCustomProperties({
-      preserve: false,
-      importFrom: [locateCssVariables()],
-      disableDeprecationNotice: true
+    // postcssGlobalData to import custom media queries so that those can be successfully resolve
+    postCssGlobalData({
+      files: [
+        locateCssVariables()
+      ]
     }),
-    postCssCalc(),
-    postCssNesting(),
+    // ignore any imports of variables to keep those from being inlined...
+    postCssImport({filter: (path) => !/variables/.test(path)}),
+    // strip out imports of variables to prevent variable reset via a custom postcss plugin.
+    postCssOmitImports({ contains: /variables/ }),
+    autoprefixer(),
     postCssCustomMedia(),
-    postCssMediaMinMax(),
     postCssRelativeColorSyntax(),
-    postCssColorFunction(),
   ],
 };

webpack.config.base.js

@@ -42,7 +42,7 @@ const specificReact = generateStripesAlias('react');
 
 const baseConfig = {
   entry: {
-    css: ['@folio/stripes-components/lib/global.css'],
+    css: ['@folio/stripes-components/lib/global.css', '@folio/stripes-components/lib/variables.css'],
     stripesConfig: {
       import: 'stripes-config.js'
     },

webpack/postcss-omit-imports.js

@@ -0,0 +1,21 @@
+/* omit-imports will remove imports that match the supplied 'contains' regex */
+
+const plugin = (options = { contains: '' }) => {
+  return {
+    postcssPlugin: 'postcss-omit-imports',
+    prepare (result) {
+      return {
+        AtRuleExit: {
+          import: atRule => {
+            if (options.contains && options.contains.test(atRule.params)) {
+              atRule.remove();
+            }
+          }
+        },
+      }
+    }
+  }
+};
+plugin.postcss = true;
+
+module.exports = plugin;