NEW: @W-19053333@ Add CSS Config to ESLint Engine with New Rules

packages/code-analyzer-eslint-engine/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@salesforce/code-analyzer-eslint-engine",
   "description": "Plugin package that adds 'eslint' as an engine into Salesforce Code Analyzer",
-  "version": "0.32.0",
+  "version": "0.33.0-SNAPSHOT",
   "author": "The Salesforce Code Analyzer Team",
   "license": "BSD-3-Clause",
   "homepage": "https://developer.salesforce.com/docs/platform/salesforce-code-analyzer/overview",
@@ -16,7 +16,7 @@
     "@eslint/js": "^9.35.0",
     "@lwc/eslint-plugin-lwc": "^3.2.0",
     "@lwc/eslint-plugin-lwc-platform": "^6.1.0",
-    "@salesforce-ux/eslint-plugin-slds": "^0.5.3",
+    "@salesforce-ux/eslint-plugin-slds": "^1.0.2",
     "@salesforce/code-analyzer-engine-api": "0.30.0",
     "@salesforce/code-analyzer-eslint8-engine": "0.7.0",
     "@salesforce/eslint-config-lwc": "^4.0.0",

packages/code-analyzer-eslint-engine/src/base-config.ts

@@ -9,11 +9,11 @@ import globals from "globals";
 
 export class BaseConfigFactory {
     private readonly engineConfig: ESLintEngineConfig;
-
+    
     constructor(engineConfig: ESLintEngineConfig) {
         this.engineConfig = engineConfig;
     }
-
+    
     createBaseConfigArray(): Linter.Config[] {
         const configArray: Linter.Config[] = [{
             linterOptions: {
@@ -28,7 +28,7 @@ export class BaseConfigFactory {
                     "$Label": "readonly",        // ^
                     "$Locale": "readonly",       // ^
                     "$Resource": "readonly",     // ^
-
+                    
                     // ESLint doesn't natively know about various browser and node globals. So we add them here to
                     // remove false positives for our users.
                     ... globals.node,
@@ -37,85 +37,99 @@ export class BaseConfigFactory {
                 }
             }
         }];
-
+        
         if (this.useJsBaseConfig() && this.useLwcBaseConfig()) {
             configArray.push(...this.createJavascriptPlusLwcConfigArray());
         } else if (this.useJsBaseConfig()) {
             configArray.push(...this.createJavascriptConfigArray());
         } else if (this.useLwcBaseConfig()) {
             configArray.push(...this.createLwcConfigArray());
         }
-        if (this.useSldsBaseConfig()) {
-            configArray.push(...this.createSldsConfigArray());
+        if (this.useSldsCSSBaseConfig()) {
+            configArray.push(...this.createSldsCSSConfigArray());
+        }
+        if (this.useSldsHTMLBaseConfig()) {
+            configArray.push(...this.createSldsHTMLConfigArray());
         }
         if (this.useTsBaseConfig()) {
             configArray.push(...this.createTypescriptConfigArray());
         }
         return configArray;
     }
-
+    
     private createJavascriptPlusLwcConfigArray(): Linter.Config[] {
         let configs: Linter.Config[] = validateAndGetRawLwcConfigArray();
-
+        
         // TODO: Remove the For the following 2 updates when https://github.com/salesforce/eslint-config-lwc/issues/158 is fixed
         // 1) Turn off the babel parser's configFile option from the lwc base plugin
         configs[0].languageOptions!.parserOptions!.babelOptions.configFile = false;
         // 2) For some reason babel doesn't like .cjs files unless we explicitly set this to undefined because I think
         // ESLint 9 is setting it to "commonjs" automatically when the field doesn't exist in the parserOptions (and for
         // babel "commonjs" isn't a valid option)
         configs[0].languageOptions!.parserOptions!.sourceType = undefined;
-
+        
         // Swap out eslintJs.configs.recommended with eslintJs.configs.all
         configs[1] = eslintJs.configs.all;
-
+        
         // This one rule is broken and thus, we need to turn it off for now.
         // See https://git.soma.salesforce.com/lwc/eslint-plugin-lwc-platform/issues/152
         configs[5].rules = {
             ...configs[5].rules,
             '@lwc/lwc-platform/valid-offline-wire': 'off'
         }
-
+        
         // Restrict these configs to just javascript files
         configs = configs.map(config => {
             return {
                 ...config,
                 files: this.engineConfig.file_extensions.javascript.map(ext => `**/*${ext}`)
             }
         });
-
+        
         return configs;
     }
-
+    
     private createLwcConfigArray(): Linter.Config[] {
         const configs: Linter.Config[] = this.createJavascriptPlusLwcConfigArray();
-
+        
         // Remove any explicitly listed rule that is a base javascript rule from the recommended LWC/Lightning rules.
         // Note the modified base rules don't have namespace like jest/*, @lwc/*, etc (and thus has no '/').
         configs[4].rules = Object.fromEntries(
             Object.entries(configs[4].rules as Linter.RulesRecord).filter(([key]) => key.includes('/'))
         );
-
+        
         // Remove the eslintJs.configs.all (at element 1). Note that this delete is after the configs[4] update above so
         // we can work with the original index [4] instead of [3] to avoid confusion.
         configs.splice(1, 1);
-
+        
         return configs;
     }
-
+    
     private createJavascriptConfigArray(): Linter.Config[] {
         return [{
             ... eslintJs.configs.all,
             files: this.engineConfig.file_extensions.javascript.map(ext => `**/*${ext}`)
         }];
     }
-
-    private createSldsConfigArray(): Linter.Config[] {
-        return sldsEslintPlugin.configs['flat/recommended'].map(conf => ({
-            ...conf,
-            files: this.engineConfig.file_extensions.html.map(ext => `**/*${ext}`)
-        }));
+
+    private createSldsHTMLConfigArray(): Linter.Config[] {
+        return sldsEslintPlugin.configs['flat/recommended-html'].map((htmlConfig: Linter.Config) => {
+            return {
+                ...htmlConfig,
+                files: this.engineConfig.file_extensions.html.map(ext => `**/*${ext}`)
+            };
+        });
     }
-
+
+    private createSldsCSSConfigArray(): Linter.Config[] {        
+        return sldsEslintPlugin.configs['flat/recommended-css'].map((cssConfig: Linter.Config) => {
+            return {
+                ...cssConfig,
+                files: this.engineConfig.file_extensions.css.map(ext => `**/*${ext}`)
+            };
+        });
+    }
+
     private createTypescriptConfigArray(): Linter.Config[] {
         const configs: Linter.Config[] = [];
         for (const conf of ([eslintJs.configs.all, ...eslintTs.configs.all] as Linter.Config[])) {
@@ -126,7 +140,7 @@ export class BaseConfigFactory {
                     ... (conf.languageOptions ?? {}),
                     parserOptions: {
                         ... (conf.languageOptions?.parserOptions ?? {}),
-
+                        
                         // Finds the tsconfig.json file nearest to each source file. This should work for most users.
                         // If not, then we may consider letting user specify this via config or alternatively users can
                         // just set disable_typescript_base_config=true and configure typescript in their own eslint
@@ -138,19 +152,23 @@ export class BaseConfigFactory {
         }
         return configs;
     }
-
+    
     private useJsBaseConfig(): boolean {
         return !this.engineConfig.disable_javascript_base_config && this.engineConfig.file_extensions.javascript.length > 0;
     }
-
+    
     private useLwcBaseConfig(): boolean {
         return !this.engineConfig.disable_lwc_base_config && this.engineConfig.file_extensions.javascript.length > 0;
     }
-
-    private useSldsBaseConfig(): boolean {
+
+    private useSldsCSSBaseConfig(): boolean {
+        return !this.engineConfig.disable_slds_base_config && this.engineConfig.file_extensions.css.length > 0;
+    }
+
+    private useSldsHTMLBaseConfig(): boolean {
         return !this.engineConfig.disable_slds_base_config && this.engineConfig.file_extensions.html.length > 0;
     }
-
+    
     private useTsBaseConfig(): boolean {
         return !this.engineConfig.disable_typescript_base_config && this.engineConfig.file_extensions.typescript.length > 0;
     }
@@ -181,7 +199,7 @@ function validateAndGetRawLwcConfigArray(): Linter.Config[] {
         //   - and lib/configs/recommended.js of https://www.npmjs.com/package/@lwc/eslint-plugin-lwc-platform?activeTab=code
         throw new Error("INTERNAL ERROR: The recommended config for @salesforce/eslint-config-lwc or @lwc/eslint-plugin-lwc-platform must have changed.");
     }
-
+    
     // Return a shallow copy since we will be making modifications
     return rawLwcConfigs.map(config => { return {... config}});
 }

packages/code-analyzer-eslint-engine/src/config.ts

@@ -28,7 +28,7 @@ export type ESLintEngineConfig = {
     // Default: false
     disable_lwc_base_config: boolean
 
-    // If true then the base configuration that supplies the slds rules for html and cmp files will not be applied.
+    // If true then the base configuration that supplies the slds rules for html, cmp, and css files will not be applied.
     // Default: false
     disable_slds_base_config: boolean
 
@@ -41,8 +41,9 @@ export type ESLintEngineConfig = {
     // rules, add them under the 'javascript' language. To associate file extensions to the standard TypeScript
     // rules or custom TypeScript-based rules, add them under the 'typescript' language. To associate file extensions
     // to standard LWC HTML rules, Component (CMP) rules, or custom HTML rules, add them under the 'html' language.
-    // To allow for the discovery of custom rules that are associated with any other language, then add the associated
-    // file extensions under the 'other' language.
+    // To associate file extensions to CSS or SCSS rules, add them under the 'css' language. To allow for the 
+    // discovery of custom rules that are associated with any other language, then add the associated file extensions
+    // under the 'other' language.
     file_extensions: FileExtensionsObject
 
     // (INTERNAL USE ONLY) Copy of the code analyzer config root.
@@ -53,6 +54,7 @@ export type FileExtensionsObject = {
     javascript: string[],
     typescript: string[],
     html: string[],
+    css: string[],
     other: string[]
 };
 
@@ -68,6 +70,7 @@ export const DEFAULT_CONFIG: ESLintEngineConfig = {
         javascript: ['.js', '.cjs', '.mjs'],
         typescript: ['.ts'],
         html: ['.html', '.htm', '.cmp'],
+        css: ['.css', '.scss'],
         other: []
     },
     config_root: process.cwd() // INTERNAL USE ONLY

packages/code-analyzer-eslint-engine/src/messages.ts

@@ -51,7 +51,8 @@ const MESSAGE_CATALOG : { [key: string]: string } = {
         `rules, add them under the 'javascript' language. To associate file extensions to the standard TypeScript\n` +
         `rules or custom TypeScript-based rules, add them under the 'typescript' language.\n` +
         `To associate file extensions to standard LWC HTML rules, Component (CMP) rules, or custom HTML rules, add them\n` +
-        `under the 'html' language. To allow for the discovery of custom rules that are associated with any other language,\n` +
+        `under the 'html' language. To associate file extensions to CSS or SCSS rules, add them under the 'css' language.\n `+
+        `To allow for the discovery of custom rules that are associated with any other language,\n` +
         `then add the associated file extensions under the 'other' language.`,
 
     UnsupportedEngineName: