Merge pull request #1582 from btea/feat/postcss-minify-font-values-re…

…move-quotes-support-function feat: `removeQuotes` support custom functions
cssnano · Mar 20, 2024 · f3b0a5b · f3b0a5b
2 parents 9bdbd2b + 592b7a7
commit f3b0a5b
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 5 deletions.
diff --git a/.changeset/fresh-wolves-design.md b/.changeset/fresh-wolves-design.md
@@ -0,0 +1,5 @@
+---
+"postcss-minify-font-values": minor
+---
+
+removeQuotes support custom functions to handle css variables
diff --git a/packages/postcss-minify-font-values/README.md b/packages/postcss-minify-font-values/README.md
@@ -52,13 +52,15 @@ Pass `false` to disable the module from removing duplicated font families.
 
 ##### removeQuotes
 
-Type: `boolean`
+Type: `boolean` | `(prop: string) => '' | 'font' | 'font-family' | 'font-weight'`
 Default: `true`
 
 Pass `false` to disable the module from removing quotes from font families.
 Note that oftentimes, this is a *safe optimisation* & is done safely. For more
 details, see [Mathias Bynens' article][mathias].
 
+Pass a function to determine whether a css variable is one of `font`, `font-family`, and `font-weight` to determine whether the variable needs to remove quotes.
+
 ## Usage
 
 ```js

diff --git a/packages/postcss-minify-font-values/src/index.js b/packages/postcss-minify-font-values/src/index.js
@@ -22,23 +22,28 @@ function hasVariableFunction(value) {
  */
 function transform(prop, value, opts) {
   let lowerCasedProp = prop.toLowerCase();
+  let variableType = '';
 
-  if (lowerCasedProp === 'font-weight' && !hasVariableFunction(value)) {
+  if (typeof opts.removeQuotes === 'function') {
+    variableType = opts.removeQuotes(prop);
+    opts.removeQuotes = true;
+  }
+  if ((lowerCasedProp === 'font-weight' || variableType === 'font-weight') && !hasVariableFunction(value)) {
     return minifyWeight(value);
-  } else if (lowerCasedProp === 'font-family' && !hasVariableFunction(value)) {
+  } else if ((lowerCasedProp === 'font-family'  || variableType === 'font-family') && !hasVariableFunction(value)) {
     const tree = valueParser(value);
 
     tree.nodes = minifyFamily(tree.nodes, opts);
 
     return tree.toString();
-  } else if (lowerCasedProp === 'font') {
+  } else if (lowerCasedProp === 'font' || variableType === 'font') {
     return minifyFont(value, opts);
   }
 
   return value;
 }
 
-/** @typedef {{removeAfterKeyword?: boolean, removeDuplicates?: boolean, removeQuotes?: boolean}} Options */
+/** @typedef {{removeAfterKeyword?: boolean, removeDuplicates?: boolean, removeQuotes?: boolean | ((prop: string) => '' | 'font' | 'font-family' | 'font-weight')}} Options */
 
 /**
  * @type {import('postcss').PluginCreator<Options>}

diff --git a/packages/postcss-minify-font-values/test/index.js b/packages/postcss-minify-font-values/test/index.js
@@ -21,6 +21,17 @@ test(
   )
 );
 
+test(
+  'css variable should unquote font names',
+  processCSS(
+    'h1{--font-family:"Helvetica Neue"}',
+    'h1{--font-family:Helvetica Neue}',
+    {
+      removeQuotes: (prop) => (prop === '--font-family' ? 'font-family' : '')
+    }
+  )
+);
+
 test(
   'should unquote font names with one character name',
   processCSS('h1{font-family:"A"}', 'h1{font-family:A}')
@@ -34,6 +45,17 @@ test(
   )
 );
 
+test(
+  'css variable should unquote font names with one character name #1',
+  processCSS(
+    'h1{--font-family:"A";--font-family:"A"}',
+    'h1{--font-family:A;--font-family:A}',
+    {
+      removeQuotes: (prop) => (prop === '--font-family' ? 'font-family' : '')
+    }
+  )
+);
+
 test(
   'should unquote font names with space at the start',
   processCSS(
@@ -42,6 +64,17 @@ test(
   )
 );
 
+test(
+  'css variable should unquote font names with space at the start',
+  processCSS(
+    'h1{--font-family:" Helvetica Neue"}',
+    'h1{--font-family:\\ Helvetica Neue}',
+    {
+      removeQuotes: (prop) => (prop === '--font-family' ? 'font-family' : '')
+    }
+  )
+);
+
 test(
   'should unquote font names with space at the end',
   processCSS(
@@ -50,11 +83,33 @@ test(
   )
 );
 
+test(
+  'css variable should unquote font names with space at the end',
+  processCSS(
+    'h1{--font-family:"Helvetica Neue "}',
+    'h1{--font-family:Helvetica Neue\\ }',
+    {
+      removeQuotes: (prop) => (prop === '--font-family' ? 'font-family' : '')
+    }
+  )
+);
+
 test(
   'should unquote and join identifiers with a slash, if numeric',
   processCSS('h1{font-family:"Bond 007"}', 'h1{font-family:Bond\\ 007}')
 );
 
+test(
+  'css variable should unquote and join identifiers with a slash, if numeric',
+  processCSS(
+    'h1{--font-family:"Bond 007"}', 
+    'h1{--font-family:Bond\\ 007}',
+    {
+      removeQuotes: (prop) => (prop === '--font-family' ? 'font-family' : '')
+    }
+  )
+);
+
 test(
   'should not unquote font name contains generic font family word at start',
   passthroughCSS('h1{font-family:"serif custom font"}')