feat: similified no-slds-private-var Eslint v9

Author: riteshiitbbs007

packages/eslint-plugin-slds/src/config/rule-messages.yml

@@ -104,6 +104,13 @@ no-slds-namespace-for-custom-hooks:
   messages:
     customHookNamespace: "Using the --slds namespace for {{token}} isn't supported. Create the custom styling hook in your namespace. Example: --myapp-{{tokenWithoutNamespace}}"
 
+no-slds-private-var:
+  description: "Some SLDS styling hooks are private and reserved only for internal Salesforce use. Private SLDS styling hooks have prefixes --_slds- and --slds-s-. For more information, look up private CSS in lightningdesignsystem.com."
+  url: "https://developer.salesforce.com/docs/platform/slds-linter/guide/reference-rules.html#no-slds-private-var"
+  type: "problem"
+  messages:
+    privateVar: "This styling hook is reserved for internal Salesforce use. Remove the --_slds- or –slds-s private variable within selector {{prop}}. For more information, look up private CSS in lightningdesignsystem.com."
+
 enforce-component-hook-naming-convention:
   description: "Replace component styling hooks that use a deprecated naming convention."
   url: "https://developer.salesforce.com/docs/platform/slds-linter/guide/reference-rules.html#enforce-component-hook-naming-convention"

packages/eslint-plugin-slds/src/index.ts

@@ -13,6 +13,7 @@ import noUnsupportedHooksSlds2 from './rules/v9/no-unsupported-hooks-slds2';
 import noSldsVarWithoutFallback from './rules/v9/no-slds-var-without-fallback';
 import noSldsNamespaceForCustomHooks from './rules/v9/no-slds-namespace-for-custom-hooks';
 import enforceComponentHookNamingConvention from './rules/v9/enforce-component-hook-naming-convention';
+import noSldsPrivateVar from './rules/v9/no-slds-private-var';
 
 
 import htmlParser from "@html-eslint/parser";
@@ -31,7 +32,8 @@ const rules = {
   "no-unsupported-hooks-slds2": noUnsupportedHooksSlds2,
   "no-slds-var-without-fallback": noSldsVarWithoutFallback,
   "no-slds-namespace-for-custom-hooks": noSldsNamespaceForCustomHooks,
-  "enforce-component-hook-naming-convention": enforceComponentHookNamingConvention
+  "enforce-component-hook-naming-convention": enforceComponentHookNamingConvention,
+  "no-slds-private-var": noSldsPrivateVar
 };
 
 const plugin = {
@@ -86,7 +88,8 @@ Object.assign(plugin.configs, {
         "@salesforce-ux/slds/no-unsupported-hooks-slds2": "warn",
         "@salesforce-ux/slds/no-slds-var-without-fallback": "warn",
         "@salesforce-ux/slds/no-slds-namespace-for-custom-hooks": "warn",
-        "@salesforce-ux/slds/enforce-component-hook-naming-convention": "error"
+        "@salesforce-ux/slds/enforce-component-hook-naming-convention": "error",
+        "@salesforce-ux/slds/no-slds-private-var": "warn"
       }
     }
   ],

packages/eslint-plugin-slds/src/rules/v9/no-slds-private-var.ts

@@ -0,0 +1,41 @@
+import { Rule } from 'eslint';
+import ruleMessages from '../../config/rule-messages.yml';
+
+const ruleConfig = ruleMessages['no-slds-private-var'];
+const { type, description, url, messages } = ruleConfig;
+
+export default {
+  meta: {
+    type,
+    docs: {
+      description,
+      recommended: true,
+      url,
+    },
+    fixable: 'code',
+    messages
+  },
+  
+  create(context) {
+    return {
+      // Handle CSS custom properties (declarations starting with --)
+      "Declaration"(node) {
+        // Check if this is a custom property declaration
+        if (node.property && typeof node.property === 'string' && node.property.startsWith('--_slds-')) {
+          context.report({
+            node,
+            messageId: 'privateVar',
+            data: { prop: node.property },
+            fix(fixer) {
+              // Auto-fix: replace --_slds- with --slds-
+              const newProperty = node.property.replace('--_slds-', '--slds-');
+              const sourceCode = context.sourceCode.getText(node);
+              const fixedCode = sourceCode.replace(node.property, newProperty);
+              return fixer.replaceText(node, fixedCode);
+            }
+          });
+        }
+      },
+    };
+  },
+} as Rule.RuleModule;

packages/eslint-plugin-slds/test/rules/no-slds-private-var.test.js

@@ -0,0 +1,147 @@
+const rule = require('../../src/rules/v9/no-slds-private-var').default;
+const { RuleTester } = require('eslint');
+
+let cssPlugin;
+try {
+  cssPlugin = require('@eslint/css').default || require('@eslint/css');
+} catch (e) {
+  cssPlugin = require('@eslint/css');
+}
+
+const ruleTester = new RuleTester({
+  plugins: {
+    css: cssPlugin,
+  },
+  language: 'css/css',
+});
+
+ruleTester.run('no-slds-private-var', rule, {
+  valid: [
+    {
+      code: `.example { --slds-valid-var: #fff; }`,
+      filename: 'test.css',
+    },
+    {
+      code: `.example { color: red; }`,
+      filename: 'test.css',
+    },
+    {
+      code: `.example { background: #123456; }`,
+      filename: 'test.css',
+    },
+    // Custom properties that don't match the private pattern
+    {
+      code: `.example { --my-custom-var: blue; }`,
+      filename: 'test.css',
+    },
+    {
+      code: `.example { --slds-regular-hook: var(--lwc-brand-primary); }`,
+      filename: 'test.css',
+    },
+    // Complex selectors with valid properties
+    {
+      code: `.container .example:hover { --slds-button-color: #0176d3; }`,
+      filename: 'test.css',
+    },
+    // Regular CSS properties
+    {
+      code: `.example { margin: 0; padding: 8px; }`,
+      filename: 'test.css',
+    },
+  ],
+  invalid: [
+    // Basic private variable usage
+    {
+      code: `.example { --_slds-deprecated-var: #fff; }`,
+      output: `.example { --slds-deprecated-var: #fff; }`,
+      filename: 'test.css',
+      errors: [{
+        messageId: 'privateVar',
+        type: 'Declaration'
+      }]
+    },
+    
+    // Private variable in complex selector
+    {
+      code: `.container .example { --_slds-private-hook: #123456; }`,
+      output: `.container .example { --slds-private-hook: #123456; }`,
+      filename: 'test.css',
+      errors: [{
+        messageId: 'privateVar',
+        type: 'Declaration'
+      }]
+    },
+
+    // Multiple private variables in same file
+    {
+      code: `
+        .example1 { 
+          --_slds-deprecated-var: #fff; 
+        }
+        .example2 { 
+          --_slds-another-private: #000; 
+        }
+      `,
+      output: `
+        .example1 { 
+          --slds-deprecated-var: #fff; 
+        }
+        .example2 { 
+          --slds-another-private: #000; 
+        }
+      `,
+      filename: 'test.css',
+      errors: [
+        {
+          messageId: 'privateVar',
+          type: 'Declaration'
+        },
+        {
+          messageId: 'privateVar',
+          type: 'Declaration'
+        }
+      ]
+    },
+
+    // Private variable with pseudo-selector
+    {
+      code: `.example:hover { --_slds-hover-state: #0176d3; }`,
+      output: `.example:hover { --slds-hover-state: #0176d3; }`,
+      filename: 'test.css',
+      errors: [{
+        messageId: 'privateVar',
+        type: 'Declaration'
+      }]
+    },
+
+    // Private variable in media query
+    {
+      code: `
+        @media (min-width: 768px) {
+          .example { --_slds-responsive-var: 20px; }
+        }
+      `,
+      output: `
+        @media (min-width: 768px) {
+          .example { --slds-responsive-var: 20px; }
+        }
+      `,
+      filename: 'test.css',
+      errors: [{
+        messageId: 'privateVar',
+        type: 'Declaration'
+      }]
+    },
+
+    // Private variable with complex value
+    {
+      code: `.example { --_slds-complex-var: var(--lwc-brand-primary, #0176d3); }`,
+      output: `.example { --slds-complex-var: var(--lwc-brand-primary, #0176d3); }`,
+      filename: 'test.css',
+      errors: [{
+        messageId: 'privateVar',
+        type: 'Declaration'
+      }]
+    },
+  ]
+});

packages/stylelint-plugin-slds/stylelint.rules.internal.json

@@ -12,12 +12,6 @@
             "severity": "warning"
         }
     ],
-    "slds/no-slds-private-var": [
-        true,
-        {
-            "severity": "warning"
-        }
-    ],
     "slds/reduce-annotations": [
         true,
         {

packages/stylelint-plugin-slds/stylelint.rules.json

@@ -5,12 +5,6 @@
             "severity": "warning"
         }
     ],
-    "slds/no-slds-private-var": [
-        true,
-        {
-            "severity": "warning"
-        }
-    ],
     "slds/reduce-annotations": [
         true,
         {