use sourceCode to check for variables

Author: siddharthkp

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

@@ -36,21 +36,27 @@ ruleTester.run('no-color-css-vars', rule, {
         }
       ]
     },
-    // {
-    //   code: `<Box sx={{'&:hover [data-component="copy-link"] button, &:focus [data-component="copy-link"] button': {
-    //       color: 'var(--color-accent-fg)',
-    //     },
-    //   }}></Box>`,
-    //   output: `<Box sx={{'&:hover [data-component="copy-link"] button, &:focus [data-component="copy-link"] button': {
-    //       color: 'accent.fg',
-    //     },
-    //   }}></Box>`,
-    //   errors: [
-    //     {
-    //       message: 'Replace var(--color-accent-fg) with accent.fg'
-    //     }
-    //   ]
-    // },
+    {
+      code: `
+        <Box sx={{
+          '&:hover [data-component="copy-link"] button, &:focus [data-component="copy-link"] button': {
+            color: 'var(--color-accent-fg)'
+          }
+        }}>
+        </Box>`,
+      output: `
+        <Box sx={{
+          '&:hover [data-component="copy-link"] button, &:focus [data-component="copy-link"] button': {
+            color: 'accent.fg'
+          }
+        }}>
+        </Box>`,
+      errors: [
+        {
+          message: 'Replace var(--color-accent-fg) with accent.fg'
+        }
+      ]
+    },
     {
       code: `<Box sx={{boxShadow: '0 0 0 2px var(--color-canvas-subtle)'}} />`,
       output: `<Box sx={{boxShadow: '0 0 0 2px canvas.subtle'}} />`,
@@ -88,17 +94,17 @@ ruleTester.run('no-color-css-vars', rule, {
       ]
     },
     {
-      code: `<Box backgroundColor='var(--color-canvas-default)' />`,
-      output: `<Box backgroundColor='canvas.default' />`,
+      code: `<Box backgroundColor="var(--color-canvas-default)" />`,
+      output: `<Box backgroundColor="canvas.default" />`,
       errors: [
         {
           message: 'Replace var(--color-canvas-default) with canvas.default'
         }
       ]
     },
     {
-      code: `<Box bg='var(--color-canvas-default)' />`,
-      output: `<Box bg='canvas.default' />`,
+      code: `<Box bg="var(--color-canvas-default)" />`,
+      output: `<Box bg="canvas.default" />`,
       errors: [
         {
           message: 'Replace var(--color-canvas-default) with canvas.default'

src/rules/no-color-css-vars.js

@@ -41,31 +41,31 @@ module.exports = {
     return {
       JSXAttribute(node) {
         if (node.name.name === 'sx') {
-          node.value.expression.properties.forEach(property => {
-            if (property.value.type === 'Literal' && typeof property.value.value === 'string') {
-              checkStringLiteral(property.value, context)
-            }
-          })
+          const rawText = context.getSourceCode().getText(node.value)
+          checkForVariables(node.value, rawText)
         } else if (
           styledSystemProps.includes(node.name.name) &&
           node.value.type === 'Literal' &&
           typeof node.value.value === 'string'
         ) {
-          checkStringLiteral(node.value, context)
+          checkForVariables(node.value, node.value.value)
         }
       }
     }
 
-    function checkStringLiteral(node, context) {
+    function checkForVariables(node, rawText) {
+      // performance optimisation: exit early
+      if (!rawText.includes('var')) return
+
       Object.keys(cssVars).forEach(cssVar => {
-        if (node.value.includes(`var(${cssVar}`)) {
-          const fixedString = node.value.replace(`var(${cssVar})`, cssVars[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, `'${fixedString}'`)
+              return fixer.replaceText(node, node.type === 'Literal' ? `"${fixedString}"` : fixedString)
             }
           })
         }