From 120a88899376a29c8756234fdc648c519921f515 Mon Sep 17 00:00:00 2001 From: Ingmar Hergst Date: Mon, 13 Jun 2022 17:07:25 +0200 Subject: [PATCH] fix(postcss-merge-longhand): preserve hyphenated custom property case Extends the regex that is used to locate custom properties inside a value so that their case is preserved to also preserve the case of custom property names that contain hyphen-minus characters. For example, the case of the custom property in the following rule should be preserved: ```css border: 1px solid rgba(var(--colors-secondaryColor)); ``` --- packages/postcss-merge-longhand/src/lib/parseWsc.js | 2 +- packages/postcss-merge-longhand/test/borders.js | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/postcss-merge-longhand/src/lib/parseWsc.js b/packages/postcss-merge-longhand/src/lib/parseWsc.js index c0ef4a043..a0bc16c12 100644 --- a/packages/postcss-merge-longhand/src/lib/parseWsc.js +++ b/packages/postcss-merge-longhand/src/lib/parseWsc.js @@ -6,7 +6,7 @@ const none = /^\s*(none|medium)(\s+none(\s+(none|currentcolor))?)?\s*$/i; /* Approximate https://drafts.csswg.org/css-values-4/#typedef-dashed-ident */ // eslint-disable-next-line no-control-regex -const varRE = /--(\w|[^\x00-\x7F])+/g; +const varRE = /--(\w|-|[^\x00-\x7F])+/g; /** @type {(v: string) => string} */ const toLower = (v) => { let match; diff --git a/packages/postcss-merge-longhand/test/borders.js b/packages/postcss-merge-longhand/test/borders.js index af8cf0da3..b6e5efee9 100644 --- a/packages/postcss-merge-longhand/test/borders.js +++ b/packages/postcss-merge-longhand/test/borders.js @@ -1195,6 +1195,11 @@ test( ) ); +test( + 'Should preserve case of css custom property names with hyphens', + passthroughCSS('h1 { border: 1px solid rgba(var(--colors-secondaryColor)); }') +); + test( 'Should preserve case of css custom properties example 2', processCSS(