add @csstools/postcss-relative-color-syntax plugin (#133)

* add @csstools/postcss-relative-color-syntax plugin * Update CHANGELOG.md
folio-org · Dec 7, 2023 · be399f9 · be399f9
1 parent 6a08438
commit be399f9
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 * Add an entry point for stripes-core's service worker. Refs STRWEB-99.
 * Pass micro-stripes-config to service worker at build-time. Refs STRWEB-102.
+* Add postcss-plugin for relative color syntax support for Firefox. Refs STRWEB-103.
 
 ## [5.0.0](https://github.com/folio-org/stripes-webpack/tree/v5.0.0) (2023-10-11)
 [Full Changelog](https://github.com/folio-org/stripes-webpack/compare/v4.2.0...v5.0.0)

diff --git a/package.json b/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-relative-color-syntax": "^2.0.7",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
     "@svgr/webpack": "^8.1.0",
     "add-asset-html-webpack-plugin": "^5.0.2",

diff --git a/postcss.config.js b/postcss.config.js
@@ -7,7 +7,7 @@ const postCssNesting = require('postcss-nesting');
 const postCssCustomMedia = require('postcss-custom-media');
 const postCssMediaMinMax = require('postcss-media-minmax');
 const postCssColorFunction = require('postcss-color-function');
-
+const postCssRelativeColorSyntax = require('@csstools/postcss-relative-color-syntax');
 const { generateStripesAlias, tryResolve } = require('./webpack/module-paths');
 
 const locateCssVariables = () => {
@@ -34,6 +34,7 @@ module.exports = {
     postCssNesting(),
     postCssCustomMedia(),
     postCssMediaMinMax(),
+    postCssRelativeColorSyntax(),
     postCssColorFunction(),
   ],
 };