feat(linters): add fixable in use-zindex rule

juntossomosmais · Nov 29, 2024 · 2cf5ad6 · 2cf5ad6
1 parent 7abb1ab
commit 2cf5ad6
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 37 deletions.
diff --git a/packages/linters/src/stylelint/plugins/__tests__/use-zindex-tokens.spec.js b/packages/linters/src/stylelint/plugins/__tests__/use-zindex-tokens.spec.js
@@ -4,6 +4,7 @@ const { messages } = require('../use-zindex-tokens')
 
 const validCss = '.class { z-index: var(--zindex-1); }'
 const invalidCss = '.class { z-index: 10; }'
+const invalidUnknownZIndexTokenValue = '.class { z-index: 180; }'
 
 const config = {
   plugins: ['@juntossomosmais/linters/stylelint/plugins/use-zindex-tokens.js'],
@@ -46,10 +47,34 @@ describe('use-zindex-tokens rule', () => {
     expect(result.results[0].warnings[0].rule).toBe('plugin/use-zindex-tokens')
     expect(result.results[0].warnings[0].severity).toBe('error')
     expect(result.results[0].warnings[0].text).toBe(
-      messages.useToken({ tokenName: 'zindex-10', tokenValue: '10' })
+      messages.useToken({ tokenName: 'zindex-10', tokenValue: '10' }) + '1'
     )
   })
 
+  it('should fix invalid CSS', async () => {
+    const result = await stylelint.lint({
+      code: invalidCss,
+      config,
+      fix: true,
+    })
+
+    expect(result.results[0].warnings).toHaveLength(0)
+    expect(result.output).toBe('.class { z-index: var(--zindex-10); }')
+  })
+
+  it('should not fix invalid CSS with unknown static values', async () => {
+    const result = await stylelint.lint({
+      code: invalidUnknownZIndexTokenValue,
+      config,
+      fix: true,
+    })
+
+    expect(result.results[0].warnings).toHaveLength(1)
+    expect(result.results[0].warnings[0].rule).toBe('plugin/use-zindex-tokens')
+    expect(result.results[0].warnings[0].severity).toBe('error')
+    expect(result.results[0].warnings[0].text).toBe(messages.noStaticValue)
+  })
+
   it('should rejects invalid CSS random value', async () => {
     const result = await stylelint.lint({
       code: '.class { z-index: 15px; }',

diff --git a/packages/linters/src/stylelint/plugins/use-zindex-tokens.js b/packages/linters/src/stylelint/plugins/use-zindex-tokens.js
@@ -14,52 +14,65 @@ const meta = {
     category: 'Best Practices',
     recommended: true,
   },
-  fixable: null,
+  fixable: true,
   schema: [],
 }
 
-module.exports = stylelint.createPlugin(ruleName, (primaryOption) => {
-  return function (root, result) {
-    const validOptions = stylelint.utils.validateOptions(result, ruleName, {
-      actual: primaryOption,
-    })
+module.exports = stylelint.createPlugin(
+  ruleName,
+  (primaryOption, _, context) => {
+    return function (root, result) {
+      const validOptions = stylelint.utils.validateOptions(result, ruleName, {
+        actual: primaryOption,
+      })
 
-    if (!validOptions) return
+      if (!validOptions) return
 
-    root.walkDecls((decl) => {
-      if (decl.prop !== 'z-index') return
+      root.walkDecls((decl) => {
+        if (decl.prop !== 'z-index') return
 
-      const zIndexValue = parseInt(decl.value, 10)
+        const zIndexValue = parseInt(decl.value, 10)
 
-      if (!isNaN(zIndexValue)) {
-        const tokenName = Object.keys(tokens).find(
-          (key) =>
-            tokens[key] === String(zIndexValue) ||
-            tokens[key] === `var(${zIndexValue})`
-        )
+        if (!isNaN(zIndexValue)) {
+          const tokenName = Object.keys(tokens).find(
+            (key) =>
+              tokens[key] === String(zIndexValue) ||
+              tokens[key] === `var(${zIndexValue})`
+          )
 
-        if (tokenName) {
-          stylelint.utils.report({
-            message: messages.useToken({
-              tokenName,
-              tokenValue: tokens[tokenName],
-            }),
-            node: decl,
-            result,
-            ruleName,
-          })
-        } else {
-          stylelint.utils.report({
-            message: messages.noStaticValue,
-            node: decl,
-            result,
-            ruleName,
-          })
+          if (tokenName) {
+            const fix = () => {
+              decl.value = `var(--${tokenName})`
+            }
+
+            if (context.fix) {
+              fix()
+
+              return
+            }
+
+            stylelint.utils.report({
+              message: messages.useToken({
+                tokenName,
+                tokenValue: tokens[tokenName],
+              }),
+              node: decl,
+              result,
+              ruleName,
+            })
+          } else {
+            stylelint.utils.report({
+              message: messages.noStaticValue,
+              node: decl,
+              result,
+              ruleName,
+            })
+          }
         }
-      }
-    })
+      })
+    }
   }
-})
+)
 
 module.exports.ruleName = ruleName
 module.exports.messages = messages