fix tests

Co-authored-by: Josh Black <[email protected]>

Author: langermank

src/rules/__tests__/no-color-css-vars.test.js renamed to src/rules/__tests__/new-color-css-vars.test.js

@@ -1,4 +1,4 @@
-const rule = require('../no-color-css-vars')
+const rule = require('../new-color-css-vars')
 const {RuleTester} = require('eslint')
 
 const ruleTester = new RuleTester({
@@ -124,68 +124,24 @@ ruleTester.run('no-color-css-vars', rule, {
           message: 'Replace var(--color-border-default) with var(--borderColor-default, var(--color-border-default))'
         }
       ]
+    },
+    {
+      name: 'variable in styled.component',
+      code: `
+        import {sx, SxProp} from '@primer/react'
+        export const HighlightToken = styled.span\`
+          color: var(--color-accent-emphasis);
+          \${sx}
+        \`
+        const ClickableTokenSpan = styled(HighlightToken)\`
+          &:hover, &:focus { background-color: accent.muted;}
+        \`
+      `,
+      errors: [
+        {
+          message: 'Replace var(--color-accent-emphasis) with var(--fgColor-accent, var(--color-accent-emphasis))'
+        }
+      ]
     }
-    // broken tests start below
-    // {
-    //   name: 'variable in styled.component',
-    //   code: `
-    //     import {sx, SxProp} from '@primer/react'
-    //     export const HighlightToken = styled.span<SxProp>\`
-    //       color: var(--color-accent-emphasis);
-    //       \${sx}
-    //     \`
-    //     const ClickableTokenSpan = styled(HighlightToken)\`
-    //       &:hover, &:focus { background-color: accent.muted;}
-    //     \`
-    //   `,
-    //   output: `
-    //     import {sx, SxProp} from '@primer/react'
-    //     export const HighlightToken = styled.span<SxProp>\`
-    //       color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
-    //       \${sx}
-    //     \`
-    //     const ClickableTokenSpan = styled(HighlightToken)\`
-    //       &:hover, &:focus { background-color: accent.muted;}
-    //     \`
-    //   `,
-    //   errors: [
-    //     {
-    //       message:
-    //         'Replace var(--color-accent-emphasis) with var(--bgColor-accent-emphasis, var(--color-accent-emphasis))'
-    //     }
-    //   ]
-    // }
-    // {
-    //   name: 'MemberExpression in sx: not handled',
-    //   code: `
-    //     const colors = { muted: 'var(--color-fg-muted)' }
-    //     export const Fixture = <Button sx={colors.muted}>Test</Button>
-    //   `,
-    //   output: `
-    //     const colors = { muted: 'var(--fgColor-muted, var(--color-fg-muted))' }
-    //     export const Fixture = <Button sx={colors.muted}>Test</Button>
-    //   `,
-    //   errors: [
-    //     {
-    //       message: 'Replace var(--color-fg-muted) with var(--fgColor-muted, var(--color-fg-muted))'
-    //     }
-    //   ]
-    // }
-    //   {
-    //     name: 'CallExpression in sx: not handled',
-    //     code: `
-    //       const getColors = () => 'var(--color-fg-muted)'
-    //       export const Fixture = <Button sx={getColors()}>Test</Button>
-    //     `,
-    //     output: `
-    //       const getColors = () => 'var(--fgColor-muted, var(--color-fg-muted))'
-    //       export const Fixture = <Button sx={getColors()}>Test</Button>
-    //     `,
-    //     errors: [
-    //       {
-    //         message: 'Replace var(--color-fg-muted) with var(--fgColor-muted, var(--color-fg-muted))'
-    //       }
-    //     ]
-    //   }
   ]
 })

src/rules/no-color-css-vars.js renamed to src/rules/new-color-css-vars.js

@@ -70,28 +70,58 @@ module.exports = {
         ) {
           checkForVariables(node.value, node.value.value)
         }
+      },
+      TaggedTemplateExpression(node) {
+        if (node.tag.type !== 'MemberExpression') {
+          return
+        }
+
+        if (node.tag.object.name !== 'styled') {
+          return
+        }
+
+        const DECLARATION_REGEX = /(.+): (var\(--color-.+\));/
+
+        // const StyledComponent = styled.div`
+        //   color: var(--color-fg-example);
+        //   background: var(--color-bg-example);
+        // `;
+        for (const templateElement of node.quasi.quasis) {
+          const rawValue = templateElement.value.raw
+          const match = rawValue.match(DECLARATION_REGEX)
+          if (!match) {
+            continue
+          }
+
+          const property = match[1].trim()
+          const value = match[2].trim()
+
+          for (const [cssVar, replacements] of Object.entries(cssVars)) {
+            const regex = new RegExp(`var\\(${cssVar}\\)`, 'g')
+
+            for (const {props, replacement} of replacements) {
+              if (!props.includes(property)) {
+                continue
+              }
+
+              if (!regex.test(value)) {
+                continue
+              }
+
+              context.report({
+                node,
+                message: `Replace var(${cssVar}) with var(${replacement}, var(${cssVar}))`
+              })
+            }
+          }
+        }
       }
     }
 
     function checkForVariables(node, rawText) {
       // performance optimisation: exit early
       if (!rawText.includes('var')) return
 
-      // Object.keys(cssVars).forEach(cssVar => {
-      //   if (rawText.includes(`var(${cssVar}`)) {
-      //     const fixedString = rawText.replace(`var(${cssVar})`, cssVars[cssVar])
-
-      //     context.report({
-      //       node,
-      //       message: `Replace var(${cssVar}) with ${cssVars[cssVar]}`,
-      //       fix: function(fixer) {
-      //         return fixer.replaceText(node, node.type === 'Literal' ? `"${fixedString}"` : fixedString)
-      //       }
-      //     })
-      //   }
-      // })
-
-      console.log('Rule is being executed')
       Object.keys(cssVars).forEach(cssVar => {
         if (Array.isArray(cssVars[cssVar])) {
           cssVars[cssVar].forEach(cssVarObject => {