@salesforce-ux/slds-linter 0.0.11 → 0.0.12-alpha

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +38 -49
  2. package/bin/slds-linter.js +26 -7
  3. package/package.json +40 -40
package/README.md CHANGED
@@ -1,4 +1,8 @@
1
- # SDS Linter
1
+ # SLDS Linter
2
+
3
+ ## Overview
4
+
5
+ SLDS Linter provides custom linting rules specifically built for Salesforce Lightning Design System 2 (SLDS 2 beta). SLDS Linter is designed to uplift your Cascading Style Sheet (CSS), Lightning Web Component (LWC), and Aura component files to SLDS 2 and to conform to SLDS best practices. SLDS Linter rules allow you to maintain consistent styling and identify common issues when working with Lightning components.
2
6
 
3
7
  ## Features
4
8
 
@@ -9,66 +13,51 @@
9
13
  LWC Components (.html): Linting is applied to Lightning Web Components.
10
14
  * Aura Components (.cmp): Linting is applied to Aura Components.
11
15
 
12
- - Stylelint for CSS FilesStylelint rules are applied to .css files associated with the components. This ensures consistent styling practices are followed throughout the project.
13
-
14
- ## Installation
15
-
16
- To install the SDS Linter Utility in your project, you can use npm:
17
-
18
- ```
19
- npm install @salesforce-ux/sds-linter --save-dev
20
- ```
21
-
22
- ### Usage
23
-
24
- After installing the package, you need to add a few commands to your `package.json` to allow running the commands needed for linting.
25
-
26
- You need to add the below in "scripts" item in `package.json`
27
-
28
- ```
29
- "lint:styles": "stylelint ./**/*.css --config=.stylelintrc.yml",
30
- "lint:components": "eslint ./**/*.{html,cmp} --ext .html,.cmp --config=.eslintrc.yml",
31
- "lint": "npm run lint:components; npm run lint:styles",
32
- "fix": "stylelint ./**/*.css -c .stylelintrc.yml --fix ",
33
- "report": "node node_modules/@salesforce-ux/stylelint-sds/build/report.js force-app/ -c .stylelintrc.yml",
34
- "setup-lint": "node ./node_modules/@salesforce-ux/sds-linter/build/setup.js"
35
- ```
16
+ - Stylelint for CSS Files:
17
+ Stylelint rules are applied to .css files associated with the components. This ensures consistent styling practices are followed throughout the project.
36
18
 
37
- once the above scripts are added. You can setup the configuration by running
19
+ Follow the below instructions to integrate SLDS Linter into your project.
38
20
 
39
- ```
40
- npm run setup-lint
41
- ```
21
+ ---
42
22
 
43
- which will inturn create `.eslintrc.yml` & `.stylelintrc.yml` in the root folder.
23
+ ### Set Up SLDS Linter in Your Component Repository
44
24
 
45
- NOTE: If the project root already containing `.eslintrc.yml` & `.stylelintrc.yml`, we don't overwrite those files and the use needs to merge those files manually. You can find the configuration files in this repostory in the root folder.
46
-
47
- ### Command-Line Interface (CLI)
48
-
49
- * To lint all components and styles in your project:
25
+ To install the SLDS Linter Utility in your project, you can use npm:
50
26
 
51
27
  ```
52
- npm run lint:components
53
- npm run lint:styles
28
+ npm install @salesforce-ux/slds-linter --save-dev
54
29
  ```
55
- * To auto-fix some of the most confident fixes automatically.
56
30
 
57
- ```
58
- npm run fix
59
- ```
60
- * To run a report in .sarif format
31
+ ### Command-Line Interface (CLI)
32
+
33
+ To see what all options does slds-linter provide please run `npx @salesforce-ux/slds-linter --help` which gives the below output.
61
34
 
62
35
  ```
63
- npm run report
36
+ Usage: npx @salesforce-ux/slds-linter [command]
37
+
38
+ Commands:
39
+ lint Run both ESLint and Stylelint
40
+ lint:styles Run only Stylelint
41
+ lint:components Run only ESLint
42
+ fix Fix auto-fixable issues
43
+ report Generate a linting report
44
+
45
+ Options:
46
+ --version Show version number [boolean]
47
+ --help Show help [boolean]
64
48
  ```
65
49
 
66
- ### Contribution
67
-
68
- We welcome contributions to improve this utility. If you have any suggestions, bug reports, or want to contribute code, please open an issue or pull request.
50
+ - `npx @salesforce-ux/slds-linter lint`- Runs the ESlint and Stylelint rules on your HTML/CSS/CMP files and outputs issues.
51
+ - `npx @salesforce-ux/slds-linter lint:styles` - Runs the Stylelint rules on your CSS files and outputs issues.
52
+ - `npx @salesforce-ux/slds-linter lint:components` - Runs the ESlint rules on your HTML/CMP files and outputs issues.
53
+ - `npx @salesforce-ux/slds-linter fix`: Attempts to automatically fix violations.
54
+ - `npx @salesforce-ux/slds-linter report`: Generates a SARIF report for static analysis.
69
55
 
70
- ### License
71
56
 
72
- This project is licensed under the MIT License - see the LICENSE file for details.
57
+ 1. Run `npx @salesforce-ux/slds-linter lint` to see the lint output on terminal. For specific files, you can go ahead with either `npx @salesforce-ux/slds-linter lint:styles` for lint errors within css files or `npx @salesforce-ux/slds-linter lint:components` for lint errors within html/cmp files.
58
+ 2. To run SLDS Linter, in Terminal, run `npx @salesforce-ux/slds-linter report` to generate a Sarif report in the project root directory. It will be named as `slds-linter-report.sarif`.
59
+ 3. Open the generated Sarif file.
60
+ 4. Make a note of how many components SLDS Linter has identified that you must update.
61
+ 5. Run `npx @salesforce-ux/slds-linter fix` to automatically fix validation errors in bulk.
73
62
 
74
- For any questions or issues, feel free to reach out to the maintainers or open an issue in the repository.
63
+ For any questions or issues, feel free to reach out to the maintainers or open an issue in the repository.
package/bin/slds-linter.js CHANGED
@@ -9,9 +9,12 @@ import { hideBin } from 'yargs/helpers';
9
9
 
10
10
  const eslintConfigPath = fileURLToPath(await import.meta.resolve('@salesforce-ux/eslint-plugin-slds/build/.eslintrc.yml'));
11
11
  const stylelintConfigPath = fileURLToPath(await import.meta.resolve('@salesforce-ux/stylelint-plugin-slds/build/.stylelintrc.yml'));
12
+ const reportExecuterPath = fileURLToPath(await import.meta.resolve('@salesforce-ux/stylelint-plugin-slds/build/report.js'));
12
13
 
13
14
  // ✅ Define CLI Commands using `yargs`
14
15
  yargs(hideBin(process.argv))
16
+ .scriptName('')
17
+ .usage('Usage: npx @salesforce-ux/slds-linter [command]')
15
18
  .command(
16
19
  'lint',
17
20
  'Run both ESLint and Stylelint',
@@ -20,12 +23,20 @@ yargs(hideBin(process.argv))
20
23
  console.log(chalk.cyan('🔍 Running ESLint and Stylelint...'));
21
24
  try {
22
25
  execSync(`eslint **/*.{html,cmp} --config ${eslintConfigPath} --ext .html,.cmp`, { stdio: 'inherit' });
26
+ console.log(chalk.green('✅ Linting components completed successfully!'));
27
+ } catch (error) {
28
+ console.error(chalk.red('❌ Linting components failed. Please fix the errors and try again.'));
29
+ //process.exit(1);
30
+ }
31
+
32
+ try {
23
33
  execSync(`stylelint ./**/*.css --config ${stylelintConfigPath}`, { stdio: 'inherit' });
24
- console.log(chalk.green('✅ Linting completed successfully!'));
34
+ console.log(chalk.green('✅ Linting styles completed successfully!'));
25
35
  } catch (error) {
26
- console.error(chalk.red('❌ Linting failed. Please fix the errors and try again.'));
27
- process.exit(1);
36
+ console.error(chalk.red('❌ Linting styles failed. Please fix the errors and try again.'));
37
+ //process.exit(1);
28
38
  }
39
+
29
40
  }
30
41
  )
31
42
  .command(
@@ -66,12 +77,20 @@ yargs(hideBin(process.argv))
66
77
  console.log(chalk.cyan('🔧 Running auto-fix for ESLint and Stylelint...'));
67
78
  try {
68
79
  execSync(`eslint **/*.{html,cmp} --config ${eslintConfigPath} --fix --ext .html,.cmp`, { stdio: 'inherit' });
80
+ console.log(chalk.green('✅ Auto-fix components applied successfully!'));
81
+ } catch (error) {
82
+ console.error(chalk.red('❌ Fixing components failed. Please check linting errors.'));
83
+ //process.exit(1);
84
+ }
85
+
86
+ try {
69
87
  execSync(`stylelint "**/*.css" -c ${stylelintConfigPath} --fix`, { stdio: 'inherit' });
70
- console.log(chalk.green('✅ Auto-fix applied successfully!'));
88
+ console.log(chalk.green('✅ Auto-fix styles applied successfully!'));
71
89
  } catch (error) {
72
- console.error(chalk.red('❌ Fixing failed. Please check linting errors.'));
73
- process.exit(1);
90
+ console.error(chalk.red('❌ Fixing styles failed. Please check linting errors.'));
91
+ //process.exit(1);
74
92
  }
93
+
75
94
  }
76
95
  )
77
96
  .command(
@@ -88,7 +107,7 @@ yargs(hideBin(process.argv))
88
107
  (argv) => {
89
108
  console.log(chalk.cyan(`📊 Generating linting report for ${argv.dir}...`));
90
109
  try {
91
- execSync(`node node_modules/@salesforce-ux/stylelint-plugin-slds/build/report.js ${argv.dir} -c ${stylelintConfigPath}`, { stdio: 'inherit' });
110
+ execSync(`node ${reportExecuterPath} ${argv.dir} -c ${stylelintConfigPath}`, { stdio: 'inherit' });
92
111
  console.log(chalk.green('✅ Report generated successfully!'));
93
112
  } catch (error) {
94
113
  console.error(chalk.red('❌ Failed to generate the report.'));
package/package.json CHANGED
@@ -1,42 +1,42 @@
1
1
  {
2
- "name": "@salesforce-ux/slds-linter",
3
- "version": "0.0.11",
4
- "description": "SLDS Linter with both stylelint and eslint together",
5
- "main": "index.mjs",
6
- "bin": {
7
- "slds-linter": "./bin/slds-linter.js"
8
- },
9
- "workspaces": [
10
- "packages/*"
11
- ],
12
- "access": "public",
13
- "files": [
14
- "build/",
15
- "bin/",
16
- "README.md"
17
- ],
18
- "scripts": {
19
- "build": "rollup --config rollup.config.js",
20
- "clean": "rm -rf build package-lock.json",
21
- "test": "echo 'Not implemented!'",
22
- "setup-lint": "node ./build/setup.js"
23
- },
24
- "type": "module",
25
- "dependencies": {
26
- "@salesforce-ux/eslint-plugin-slds": "0.0.11",
27
- "@salesforce-ux/stylelint-plugin-slds": "0.0.11",
28
- "chalk": "^5.3.0",
29
- "yargs": "^17.7.2"
30
- },
31
- "keywords": [
32
- "eslint SDS",
33
- "stylelint SDS",
34
- "salesforce",
35
- "sds linter"
36
- ],
37
- "author": "Kishore Nemalipuri",
38
- "license": "MIT",
39
- "devDependencies": {
40
- "@rollup/plugin-typescript": "^12.1.2"
41
- }
2
+ "name": "@salesforce-ux/slds-linter",
3
+ "version": "0.0.12-alpha",
4
+ "description": "SLDS Linter with both stylelint and eslint together",
5
+ "main": "index.mjs",
6
+ "bin": {
7
+ "slds-linter": "./bin/slds-linter.js"
8
+ },
9
+ "workspaces": [
10
+ "packages/*"
11
+ ],
12
+ "access": "public",
13
+ "files": [
14
+ "build/",
15
+ "bin/",
16
+ "README.md"
17
+ ],
18
+ "scripts": {
19
+ "build": "rollup --config rollup.config.js",
20
+ "clean": "rm -rf build package-lock.json",
21
+ "test": "echo 'Not implemented!'",
22
+ "setup-lint": "node ./build/setup.js"
23
+ },
24
+ "type": "module",
25
+ "dependencies": {
26
+ "@salesforce-ux/eslint-plugin-slds": "^0.0.12-alpha",
27
+ "@salesforce-ux/stylelint-plugin-slds": "^0.0.12-alpha",
28
+ "chalk": "^5.3.0",
29
+ "yargs": "^17.7.2"
30
+ },
31
+ "keywords": [
32
+ "eslint SDS",
33
+ "stylelint SDS",
34
+ "salesforce",
35
+ "sds linter"
36
+ ],
37
+ "author": "Kishore Nemalipuri",
38
+ "license": "MIT",
39
+ "devDependencies": {
40
+ "@rollup/plugin-typescript": "^12.1.2"
41
+ }
42
42
  }