fix(hooks): Tweak styling hooks automated fallback extraction (#4904)

fredboyle · web-flow · commit 5aad1953f842 · 2021-11-17T12:56:55.000-08:00
diff --git a/.storybook/scss/ui/index.scss b/.storybook/scss/ui/index.scss
@@ -32,6 +32,7 @@ html {
   td {
     padding-top: 0.375rem;
     padding-bottom: 0.375rem;
+    white-space: normal;
   }
 
   .hooks-table__section {
diff --git a/scripts/__tests__/var-extract.spec.js b/scripts/__tests__/var-extract.spec.js
@@ -26,6 +26,17 @@ describe('extractVarsFromCSS', () => {
     expect(actual[styleHookName].fallbackValue).toEqual('');
   });
 
+  it('extracts vars from malformed var function value with no fallback', () => {
+    const actual = extractVarsFromCSS(
+      '.foo { background-color: var(--sds-c-icon-color-background,); }'
+    );
+
+    const styleHookName = Object.keys(actual)[0];
+
+    expect(styleHookName).toEqual('--sds-c-icon-color-background');
+    expect(actual[styleHookName].fallbackValue).toEqual('');
+  });
+
   it('extracts vars only from allow pattern', () => {
     const actual = extractVarsFromCSS(
       `.foo {
@@ -63,4 +74,30 @@ describe('extractVarsFromCSS', () => {
     expect(actual[styleHookName1].fallbackValue).toEqual('1rem');
     expect(actual[styleHookName2].category).toEqual('Color');
   });
+
+  it('extracts vars from nested var functions value with fallback', () => {
+    const actual = extractVarsFromCSS(
+      '.foo { background-color: var(--slds-c-icon-color-background, var(--sds-c-icon-color-background, transparent)); }'
+    );
+
+    const styleHookName = Object.keys(actual)[0];
+
+    expect(styleHookName).toEqual('--slds-c-icon-color-background');
+    expect(actual[styleHookName].fallbackValue).toEqual('transparent');
+    expect(actual[styleHookName].category).toEqual('Color');
+    expect(actual[styleHookName].valueType).toEqual('Color');
+  });
+
+  it('extracts vars from deeply nested var functions value with fallback', () => {
+    const actual = extractVarsFromCSS(
+      '.foo { background-color: var(--slds-c-icon-color-background, var(--sds-c-icon-color-background, var(--sds-g-icon-color, transparent))); }'
+    );
+
+    const styleHookName = Object.keys(actual)[0];
+
+    expect(styleHookName).toEqual('--slds-c-icon-color-background');
+    expect(actual[styleHookName].fallbackValue).toEqual('transparent');
+    expect(actual[styleHookName].category).toEqual('Color');
+    expect(actual[styleHookName].valueType).toEqual('Color');
+  });
 });
diff --git a/scripts/var-extract.js b/scripts/var-extract.js
@@ -29,20 +29,20 @@ const extractVarsFromSLDS = (props = {}) => {
   // getting list of components and utilities to parse
   const componentList = fs
     .readdirSync('./.generated/css/components')
-    .map(name => `./.generated/css/components/${name}/**/index.css`);
+    .map((name) => `./.generated/css/components/${name}/**/index.css`);
   const utilityList = fs
     .readdirSync('./.generated/css/utilities')
-    .map(name => `./.generated/css/utilities/${name}/**/index.css`);
+    .map((name) => `./.generated/css/utilities/${name}/**/index.css`);
 
   // parse through all variants of each component / util
-  componentList.concat(utilityList).map(fileGlob => {
+  componentList.concat(utilityList).map((fileGlob) => {
     const cssFiles = glob.sync(fileGlob);
     let varsData = {};
 
-    cssFiles.map(filename => {
+    cssFiles.map((filename) => {
       const cssContent = readFileSync(filename).toString();
       const fileVars = extractVarsFromCSS(cssContent, {
-        allowPattern: varsAllowPattern
+        allowPattern: varsAllowPattern,
       });
 
       if (Object.keys(fileVars).length > 0) {
@@ -73,12 +73,12 @@ const extractVarsFromSLDS = (props = {}) => {
  */
 const extractVarsFromCSS = (cssContent, options = {}) => {
   const ast = css.parse(cssContent);
-  const rules = ast.stylesheet.rules.filter(rule => rule.type === 'rule');
+  const rules = ast.stylesheet.rules.filter((rule) => rule.type === 'rule');
   const { allowPattern } = options;
   let list = {};
 
-  rules.map(rule => {
-    const filtered = rule.declarations.filter(dec => {
+  rules.map((rule) => {
+    const filtered = rule.declarations.filter((dec) => {
       if (!dec.value) return false;
 
       // match on var values that are not custom props
@@ -89,49 +89,102 @@ const extractVarsFromCSS = (cssContent, options = {}) => {
       return false;
     });
 
-    if (filtered.length > 0) {
-      const vars = rule.declarations
-        .filter(dec => (dec.value ? dec.value.match(/var\(/) : false))
-        .map(dec => {
-          const cssVar = dec.value.match(/(--.*?)[,|)]/)[1];
-          const fallbackMatch = dec.value.match(/,\s(.*)\)/);
-          const fallback = fallbackMatch ? fallbackMatch[1] : '';
-
-          return {
-            [cssVar]: fallback
-          };
-        });
-
-      vars.forEach(cssVar => {
-        const varName = Object.keys(cssVar)[0];
-        if (varName) {
-          const categories = Object.keys(propTypes);
-
-          const matchedCategory = categories.find(option => {
-            if (varName.includes(option)) {
-              return option;
-            }
-          });
+    ///
+    // is this a CSS variable
+    function isCssVarClause(value) {
+      // if it DOES contain `var(` it is a CSS variable clause
+      return !!value.includes('var(');
+    }
 
-          list[varName] = { fallbackValue: cssVar[varName] };
+    // is this a CSS variable reassignment
+    function isCssVarReassignment(value) {
+      // if it DOES NOT contain a comma it is a reassignment
+      return !value.includes(',');
+    }
+
+    // regex:
+    //    var\(                 -> find something that starts with `var(`
+    //    (?=\S*['-]*)          -> positive lookahead, zero or more non-space characters and zero or more ' or - characters
+    //    ([a-zA-Z'-]+)         -> match group 1, one or more alpha characters
+    //    \s*,\s*               -> zero or more spaces, a comma, zero or more spaces
+    //    (.+)                  -> match group 2, one or more of any character
+    //    \)                    -> a closing parenthesis
+    const varRegex = /var\((?=\S*['-]*)([a-zA-Z'-]+)\s*[,]?\s*(.*)\)/;
+
+    /**
+     * Recursively drill into a CSS value to find the fallback value
+     *
+     * @param {string} - CSS property's value
+     * @returns {object} - hookName, name of the hook; fallback, value of the fallback
+     */
+    function findFallbackRecursively(value) {
+      // get the fallback value from the CSS variable clause
+      let regex = varRegex;
+      let matches = value.match(regex);
+
+      if (matches) {
+        let fallbackValue = matches[2];
+
+        // if we have another CSS variable clause then keep drilling in
+        if (isCssVarClause(fallbackValue)) {
+          return findFallbackRecursively(fallbackValue);
+        } else {
+          return matches[2].trim();
+        }
+      }
 
-          if (matchedCategory) {
-            list[varName].category = propTypes[matchedCategory].type;
-            list[varName].valueType = propTypes[
-              matchedCategory
-            ].valueTypes.join('');
+      // if we have a reassignment
+      if (isCssVarReassignment(value)) {
+        return null;
+      }
+
+      return value;
+    }
+    ///
+
+    if (filtered.length > 0) {
+      filtered.forEach((decl) => {
+        if (decl.value) {
+          // search for a `var(...)` value
+          let matches = decl.value.match(varRegex);
+          // if we found a match then extract the hook name, if no hook then return null
+          let hookName = matches ? matches[1] : null;
+          // recursively search for the fallback value
+          let fallback = findFallbackRecursively(decl.value);
+
+          // if we have a hook then generate an object to add to the list of results
+          if (hookName) {
+            // retrieve the category names from the JSON config
+            const categories = Object.keys(propTypes);
+
+            // do we have a category match? If so return it
+            const matchedCategory = categories.find((option) => {
+              if (hookName.includes(option)) {
+                return option;
+              }
+            });
+
+            // add the fallback value to the hook's object in the list of results
+            list[hookName] = { fallbackValue: fallback };
+
+            // if a category was found add the metadata to the hook's object in the list of results
+            if (matchedCategory) {
+              list[hookName].category = propTypes[matchedCategory].type;
+              list[hookName].valueType =
+                propTypes[matchedCategory].valueTypes.join(', ');
+            }
           }
         }
       });
     }
   });
 
   return allowPattern
-    ? filterObject(list, key => RegExp(allowPattern).test(key))
+    ? filterObject(list, (key) => RegExp(allowPattern).test(key))
     : list;
 };
 
 module.exports = {
   extractVarsFromCSS,
-  extractVarsFromSLDS
+  extractVarsFromSLDS,
 };
diff --git a/scripts/var-metadata.js b/scripts/var-metadata.js
@@ -50,5 +50,25 @@ export const propTypes = {
   shadow: {
     type: 'Box Shadow',
     valueTypes: ['String']
+  },
+  'text-color': {
+    type: 'Color',
+    valueTypes: ['Color']
+  },
+  'text-align': {
+    type: 'Text',
+    valueTypes: ['String']
+  },
+  'image-background': {
+    type: 'Image',
+    valueTypes: ['Image']
+  },
+  'size-background': {
+    type: 'Image',
+    valueTypes: ['String', 'Dimension']
+  },
+  'position-zindex': {
+    type: 'Position',
+    valueTypes: ['Integer']
   }
 };
diff --git a/shared/components/StylingHooksTable.jsx b/shared/components/StylingHooksTable.jsx
@@ -100,15 +100,15 @@ class StylingHooksTable extends Component {
                             ii === categoryVars.length - 1
                         })}
                       >
-                        {ii === 0 ? (
+                        {ii === 0 && (
                           <th
                             className="hooks-table__col-category"
                             scope="rowgroup"
                             rowSpan={categoryVars.length}
                           >
                             {category}
                           </th>
-                        ) : null}
+                        )}
                         <td>
                           <div className="slds-grid">
                             <Copy
@@ -124,15 +124,19 @@ class StylingHooksTable extends Component {
                           </div>
                         </td>
                         <td>
-                          {varData.types.map((type, x) => {
+                          {varData.types.map((type, x, arr) => {
                             const formattedType = formatType(type);
                             return (
-                              <a
-                                key={`${category}-${i}-${ii}-${x}`}
-                                href={`https://developer.mozilla.org/en-US/docs/Web/CSS/${formattedType}`}
-                              >
-                                {type}
-                              </a>
+                              <>
+                                <a
+                                  key={`${category}-${i}-${ii}-${x}`}
+                                  href={`https://developer.mozilla.org/en-US/docs/Web/CSS/${formattedType}`}
+                                >
+                                  {type}
+                                </a>
+                                {/* Proper comma separation when there is more than 1 valueType */}
+                                {(arr.length > 1 && x <= 0) && (', ')}
+                              </>
                             );
                           })}
                         </td>
diff --git a/ui/components/rich-text-editor/RELEASENOTES.md b/ui/components/rich-text-editor/RELEASENOTES.md
@@ -2,6 +2,11 @@
 
 # Rich Text Editor Release Notes
 
+## 2.17.0
+
+### Added
+- Added `slds` as the default namespace with `sds` fallbacks for Styling Hooks.
+
 ## 2.16.0
 
 ### Changed
diff --git a/ui/components/rich-text-editor/base/_index.scss b/ui/components/rich-text-editor/base/_index.scss
@@ -186,8 +186,8 @@
  */
 .slds-rich-text-area__content {
   overflow-y: auto;
-  min-height: var(--sds-c-textarea-sizing-min-height, $size-xx-small);
-  max-height: var(--sds-c-textarea-sizing-max-height, $size-small);
+  min-height: var(--slds-c-textarea-sizing-min-height, var(--sds-c-textarea-sizing-min-height, $size-xx-small));
+  max-height: var(--slds-c-textarea-sizing-max-height, var(--sds-c-textarea-sizing-max-height, $size-small));
   padding: $spacing-medium;
   background-color: $color-background-input;
 }

Original file line number	Diff line number	Diff line change
`@@ -32,6 +32,7 @@ html {`
`32`	`32`	`td {`
`33`	`33`	`padding-top: 0.375rem;`
`34`	`34`	`padding-bottom: 0.375rem;`
	`35`	`+ white-space: normal;`
`35`	`36`	`}`
`36`	`37`
`37`	`38`	`.hooks-table__section {`