fix(metadata): Extract only --sds-c hooks in metadata, enhance extractVarsFromCSS() (#4599)

* add allowPattern option to extractVarsFromCSS

* add and update tests

Author: Dottenpixel

scripts/__tests__/var-extract.spec.js

@@ -25,4 +25,42 @@ describe('extractVarsFromCSS', () => {
     expect(styleHookName).toEqual('--sds-c-icon-color-background');
     expect(actual[styleHookName].fallbackValue).toEqual('');
   });
+
+  it('extracts vars only from allow pattern', () => {
+    const actual = extractVarsFromCSS(
+      `.foo {
+        top: var(--slds-kx-icon-position-top, 1rem);
+        background-color: var(--sds-c-icon-color-background, transparent);
+        left: var(--slds-kx-icon-position-left, 1rem);
+      }`,
+      { allowPattern: /^--sds-c-/ }
+    );
+
+    const styleHookName = Object.keys(actual)[0];
+
+    expect(styleHookName).toEqual('--sds-c-icon-color-background');
+    expect(Object.keys(actual).length).toEqual(1);
+    expect(actual[styleHookName].fallbackValue).toEqual('transparent');
+    expect(actual[styleHookName].category).toEqual('Color');
+    expect(actual[styleHookName].valueType).toEqual('Color');
+  });
+
+  it('extracts vars from multiple allow pattern', () => {
+    const actual = extractVarsFromCSS(
+      `.foo {
+        top: var(--slds-kx-icon-position-top, 1rem);
+        background-color: var(--sds-c-icon-color-background, transparent);
+        left: var(--foo-icon-position-left, 1rem);
+      }`,
+      { allowPattern: /^(?:--sds-c-|--slds-kx-)/ }
+    );
+
+    const [styleHookName1, styleHookName2] = Object.keys(actual);
+
+    expect(styleHookName1).toEqual('--slds-kx-icon-position-top');
+    expect(styleHookName2).toEqual('--sds-c-icon-color-background');
+    expect(Object.keys(actual).length).toEqual(2);
+    expect(actual[styleHookName1].fallbackValue).toEqual('1rem');
+    expect(actual[styleHookName2].category).toEqual('Color');
+  });
 });

scripts/var-extract.js

@@ -3,6 +3,7 @@ const glob = require('fast-glob');
 const css = require('css');
 const { readFileSync } = require('fs-extra');
 
+const { filterObject } = require('../shared/utils/objects');
 const { compileModularCSS } = require('./compile/modular-css');
 const { propTypes } = require('./var-metadata');
 
@@ -12,6 +13,7 @@ const { propTypes } = require('./var-metadata');
 const extractVarsFromSLDS = (props = {}) => {
   const { callback, suppressOutput } = props;
   const cssFolderExists = fs.existsSync('./.generated/css');
+  const varsAllowPattern = /^--sds-c/;
 
   // if there's no css folder yet, generate it!
   if (!cssFolderExists) {
@@ -39,7 +41,9 @@ const extractVarsFromSLDS = (props = {}) => {
 
     cssFiles.map(filename => {
       const cssContent = readFileSync(filename).toString();
-      const fileVars = extractVarsFromCSS(cssContent);
+      const fileVars = extractVarsFromCSS(cssContent, {
+        allowPattern: varsAllowPattern
+      });
 
       if (Object.keys(fileVars).length > 0) {
         varsData = Object.assign(fileVars, varsData);
@@ -67,9 +71,10 @@ const extractVarsFromSLDS = (props = {}) => {
  * @param {string} cssData
  * @returns {object}
  */
-const extractVarsFromCSS = cssContent => {
+const extractVarsFromCSS = (cssContent, options = {}) => {
   const ast = css.parse(cssContent);
   const rules = ast.stylesheet.rules.filter(rule => rule.type === 'rule');
+  const { allowPattern } = options;
   let list = {};
 
   rules.map(rule => {
@@ -121,7 +126,9 @@ const extractVarsFromCSS = cssContent => {
     }
   });
 
-  return list;
+  return allowPattern
+    ? filterObject(list, key => RegExp(allowPattern).test(key))
+    : list;
 };
 
 module.exports = {

shared/utils/objects.js

@@ -0,0 +1,4 @@
+export const filterObject = (obj, callback) =>
+  Object.fromEntries(
+    Object.entries(obj).filter(([key, val]) => callback(key, val))
+  );