feat: add stylelint configuration and update package.json for CSS linting

deleonio · deleonio · commit 39828ad2763f · 2025-05-07T00:36:12.000+02:00
Refs: #7537
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -37,5 +37,6 @@
 	"javascript.updateImportsOnFileMove.enabled": "always",
 	"typescript.preferences.importModuleSpecifier": "relative",
 	"typescript.updateImportsOnFileMove.enabled": "always",
-	"html.customData": ["./node_modules/@public-ui/components/vscode-custom-data.json"]
+	"html.customData": ["./node_modules/@public-ui/components/vscode-custom-data.json"],
+	"stylelint.validate": ["css", "scss", "sass", "less"]
 }
diff --git a/package.json b/package.json
@@ -27,6 +27,9 @@
 		"clean:pnpm": "pnpm -r exec rimraf pnpm-lock.yaml && rimraf pnpm-lock.yaml && pnpm clean",
 		"format": "pnpm -r format",
 		"lint": "pnpm -r lint",
+		"lint:eslint": "pnpm -r --no-bail lint:eslint",
+		"lint:stylelint": "pnpm -r --no-bail lint:stylelint",
+		"lint:tsc": "pnpm -r --no-bail lint:tsc",
 		"lint-staged": "lint-staged",
 		"unused": "pnpm -r unused",
 		"ts-prune": "git clean -f -d -X packages/adapters/**/src && pnpm -r exec npx ts-prune src -e",
diff --git a/packages/components/.stylelintignore b/packages/components/.stylelintignore
@@ -0,0 +1 @@
+src/assets/
diff --git a/packages/components/.stylelintrc.json b/packages/components/.stylelintrc.json
@@ -0,0 +1,42 @@
+{
+	"extends": ["stylelint-config-standard", "stylelint-config-recommended-scss"],
+	"plugins": ["stylelint-scss"],
+	"rules": {
+		"block-no-empty": true,
+		"color-no-invalid-hex": true,
+		"custom-property-pattern": "^[a-z0-9]+(?:-[a-z0-9]+)*(?:--[a-z0-9]+(?:-[a-z0-9]+)*)*$",
+		"declaration-block-no-duplicate-properties": true,
+		"declaration-property-value-no-unknown": null,
+		"no-duplicate-selectors": true,
+		"selector-class-pattern": "^[a-z0-9]+(?:-[a-z0-9]+)*(?:__(?:[a-z0-9]+(?:-[a-z0-9]+)*))?(?:--(?:[a-z0-9]+(?:-[a-z0-9]+)*))?$",
+
+		"scss/load-no-partial-leading-underscore": true,
+		"scss/at-mixin-pattern": "^[a-z][a-z0-9-]*$",
+		"scss/dollar-variable-pattern": "^[a-z][a-z0-9-]*$",
+
+		"comment-empty-line-before": null,
+		"declaration-empty-line-before": null,
+		"selector-pseudo-element-colon-notation": null,
+		"color-function-notation": null,
+		"alpha-value-notation": null,
+		"value-keyword-case": null,
+		"property-no-vendor-prefix": null,
+		"rule-empty-line-before": null,
+		"at-rule-empty-line-before": null,
+		"media-feature-range-notation": null,
+		"declaration-block-no-redundant-longhand-properties": null,
+		"shorthand-property-no-redundant-values": null,
+		"comment-whitespace-inside": null,
+		"declaration-property-value-keyword-no-deprecated": null,
+		"declaration-block-no-duplicate-properties": null,
+		"no-descending-specificity": null,
+		"no-duplicate-selectors": null,
+		"font-family-no-missing-generic-family-keyword": null,
+		"keyframes-name-pattern": null,
+		"declaration-block-no-shorthand-property-overrides": null,
+		"color-hex-length": null,
+		"custom-property-empty-line-before": null,
+		"scss/at-mixin-pattern": null,
+		"scss/dollar-variable-pattern": null
+	}
+}
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -60,7 +60,10 @@
 		"clear": "rimraf -g dist doc loader www ../adapters/angular/v15/src ../adapters/angular/v16/src ../adapters/angular/v17/src ../adapters/angular/v18/src ../adapters/hydrate/dist ../adapters/react/src ../adapters/solid/src ../adapters/vaadin/*.java ../adapters/vue/src",
 		"format": "prettier --check src",
 		"lighthouse": "lighthouse --chrome-flags=\"--headless\" --output-path lighthouse.report.html --preset=desktop --quiet",
-		"lint": "tsc --noemit && eslint src",
+		"lint": "pnpm lint:eslint && pnpm lint:stylelint && pnpm lint:tsc",
+		"lint:eslint": "eslint src",
+		"lint:stylelint": "stylelint \"src/**/*.{css,scss}\"",
+		"lint:tsc": "tsc --noemit",
 		"dev": "cross-env NODE_ENV=development stencil build --prod --watch",
 		"test": "pnpm test:unit",
 		"test:unit": "cross-env NODE_ENV=test stencil test --spec --json --outputFile dist/jest-test-results.json",
@@ -123,6 +126,10 @@
 		"pug": "3.0.3",
 		"rimraf": "6.0.1",
 		"stencil-awesome-test": "1.0.6",
+		"stylelint": "16.17.0",
+		"stylelint-config-recommended-scss": "14.1.0",
+		"stylelint-config-standard": "37.0.0",
+		"stylelint-scss": "6.11.1",
 		"terser": "5.39.0",
 		"twig": "1.17.1",
 		"typescript": "5.8.2"
diff --git a/packages/samples/react/.stylelintrc.json b/packages/samples/react/.stylelintrc.json
@@ -0,0 +1,42 @@
+{
+	"extends": ["stylelint-config-standard", "stylelint-config-recommended-scss"],
+	"plugins": ["stylelint-scss"],
+	"rules": {
+		"block-no-empty": true,
+		"color-no-invalid-hex": true,
+		"custom-property-pattern": "^[a-z0-9]+(?:-[a-z0-9]+)*(?:--[a-z0-9]+(?:-[a-z0-9]+)*)*$",
+		"declaration-block-no-duplicate-properties": true,
+		"declaration-property-value-no-unknown": null,
+		"no-duplicate-selectors": true,
+		"selector-class-pattern": "^[a-z0-9]+(?:-[a-z0-9]+)*(?:__(?:[a-z0-9]+(?:-[a-z0-9]+)*))?(?:--(?:[a-z0-9]+(?:-[a-z0-9]+)*))?$",
+
+		"scss/load-no-partial-leading-underscore": true,
+		"scss/at-mixin-pattern": "^[a-z][a-z0-9-]*$",
+		"scss/dollar-variable-pattern": "^[a-z][a-z0-9-]*$",
+
+		"comment-empty-line-before": null,
+		"declaration-empty-line-before": null,
+		"selector-pseudo-element-colon-notation": null,
+		"color-function-notation": null,
+		"alpha-value-notation": null,
+		"value-keyword-case": null,
+		"property-no-vendor-prefix": null,
+		"rule-empty-line-before": null,
+		"at-rule-empty-line-before": null,
+		"media-feature-range-notation": null,
+		"declaration-block-no-redundant-longhand-properties": null,
+		"shorthand-property-no-redundant-values": null,
+		"comment-whitespace-inside": null,
+		"declaration-property-value-keyword-no-deprecated": null,
+		"declaration-block-no-duplicate-properties": null,
+		"no-descending-specificity": null,
+		"no-duplicate-selectors": null,
+		"font-family-no-missing-generic-family-keyword": null,
+		"keyframes-name-pattern": null,
+		"declaration-block-no-shorthand-property-overrides": null,
+		"color-hex-length": null,
+		"custom-property-empty-line-before": null,
+		"scss/at-mixin-pattern": null,
+		"scss/dollar-variable-pattern": null
+	}
+}
diff --git a/packages/samples/react/package.json b/packages/samples/react/package.json
@@ -12,7 +12,10 @@
 		"build": "rimraf dist && cross-env NODE_ENV=production webpack",
 		"build:deps": "pnpm --filter @public-ui/sample-react^... build",
 		"format": "prettier --check src",
-		"lint": "tsc --noemit && eslint \"{src,tests,e2e}/**/*.{html,js,json,jsx,ts,tsx,gql,graphql}\"",
+		"lint": "pnpm lint:eslint && pnpm lint:stylelint && pnpm lint:tsc",
+		"lint:eslint": "eslint src",
+		"lint:stylelint": "stylelint \"src/**/*.{css,scss}\"",
+		"lint:tsc": "tsc --noemit",
 		"postinstall": "pnpm exec playwright install",
 		"prepare": "npm-run-all prepare:*",
 		"prepare:components-assets": "cpy \"node_modules/@public-ui/components/assets/**/*\" public/assets --dot",
@@ -68,6 +71,10 @@
 		"rimraf": "6.0.1",
 		"sass-loader": "16.0.5",
 		"string-replace-loader": "3.1.0",
+		"stylelint": "16.17.0",
+		"stylelint-config-recommended-scss": "14.1.0",
+		"stylelint-config-standard": "37.0.0",
+		"stylelint-scss": "6.11.1",
 		"tslib": "2.8.1",
 		"typescript": "5.8.2",
 		"webpack": "5.98.0",
diff --git a/packages/themes/default/.stylelintrc.json b/packages/themes/default/.stylelintrc.json
@@ -0,0 +1,42 @@
+{
+	"extends": ["stylelint-config-standard", "stylelint-config-recommended-scss"],
+	"plugins": ["stylelint-scss"],
+	"rules": {
+		"block-no-empty": true,
+		"color-no-invalid-hex": true,
+		"custom-property-pattern": "^[a-z0-9]+(?:-[a-z0-9]+)*(?:--[a-z0-9]+(?:-[a-z0-9]+)*)*$",
+		"declaration-block-no-duplicate-properties": true,
+		"declaration-property-value-no-unknown": null,
+		"no-duplicate-selectors": true,
+		"selector-class-pattern": "^[a-z0-9]+(?:-[a-z0-9]+)*(?:__(?:[a-z0-9]+(?:-[a-z0-9]+)*))?(?:--(?:[a-z0-9]+(?:-[a-z0-9]+)*))?$",
+
+		"scss/load-no-partial-leading-underscore": true,
+		"scss/at-mixin-pattern": "^[a-z][a-z0-9-]*$",
+		"scss/dollar-variable-pattern": "^[a-z][a-z0-9-]*$",
+
+		"comment-empty-line-before": null,
+		"declaration-empty-line-before": null,
+		"selector-pseudo-element-colon-notation": null,
+		"color-function-notation": null,
+		"alpha-value-notation": null,
+		"value-keyword-case": null,
+		"property-no-vendor-prefix": null,
+		"rule-empty-line-before": null,
+		"at-rule-empty-line-before": null,
+		"media-feature-range-notation": null,
+		"declaration-block-no-redundant-longhand-properties": null,
+		"shorthand-property-no-redundant-values": null,
+		"comment-whitespace-inside": null,
+		"declaration-property-value-keyword-no-deprecated": null,
+		"declaration-block-no-duplicate-properties": null,
+		"no-descending-specificity": null,
+		"no-duplicate-selectors": null,
+		"font-family-no-missing-generic-family-keyword": null,
+		"keyframes-name-pattern": null,
+		"declaration-block-no-shorthand-property-overrides": null,
+		"color-hex-length": null,
+		"custom-property-empty-line-before": null,
+		"scss/at-mixin-pattern": null,
+		"scss/dollar-variable-pattern": null
+	}
+}
diff --git a/packages/themes/default/package.json b/packages/themes/default/package.json
@@ -46,7 +46,10 @@
 		"build": "rollup -c",
 		"dev": "rollup -c --watch",
 		"format": "prettier --check src",
-		"lint": "tsc --noemit && eslint src",
+		"lint": "pnpm lint:eslint && pnpm lint:stylelint && pnpm lint:tsc",
+		"lint:eslint": "eslint src",
+		"lint:stylelint": "stylelint \"src/**/*.{css,scss}\"",
+		"lint:tsc": "tsc --noemit",
 		"prepare": "cpy \"node_modules/@public-ui/components/assets/**/*\" assets --dot",
 		"start": "npm-run-all --parallel dev serve",
 		"serve": "sh serve.sh DEFAULT",
@@ -71,6 +74,10 @@
 		"rollup": "4.36.0",
 		"rollup-plugin-postcss": "4.0.2",
 		"sass": "1.86.0",
+		"stylelint": "16.17.0",
+		"stylelint-config-recommended-scss": "14.1.0",
+		"stylelint-config-standard": "37.0.0",
+		"stylelint-scss": "6.11.1",
 		"typescript": "5.8.2",
 		"unbuild": "1.2.1"
 	},
diff --git a/packages/themes/ecl/.stylelintrc.json b/packages/themes/ecl/.stylelintrc.json
@@ -0,0 +1,42 @@
+{
+	"extends": ["stylelint-config-standard", "stylelint-config-recommended-scss"],
+	"plugins": ["stylelint-scss"],
+	"rules": {
+		"block-no-empty": true,
+		"color-no-invalid-hex": true,
+		"custom-property-pattern": "^[a-z0-9]+(?:-[a-z0-9]+)*(?:--[a-z0-9]+(?:-[a-z0-9]+)*)*$",
+		"declaration-block-no-duplicate-properties": true,
+		"declaration-property-value-no-unknown": null,
+		"no-duplicate-selectors": true,
+		"selector-class-pattern": "^[a-z0-9]+(?:-[a-z0-9]+)*(?:__(?:[a-z0-9]+(?:-[a-z0-9]+)*))?(?:--(?:[a-z0-9]+(?:-[a-z0-9]+)*))?$",
+
+		"scss/load-no-partial-leading-underscore": true,
+		"scss/at-mixin-pattern": "^[a-z][a-z0-9-]*$",
+		"scss/dollar-variable-pattern": "^[a-z][a-z0-9-]*$",
+
+		"comment-empty-line-before": null,
+		"declaration-empty-line-before": null,
+		"selector-pseudo-element-colon-notation": null,
+		"color-function-notation": null,
+		"alpha-value-notation": null,
+		"value-keyword-case": null,
+		"property-no-vendor-prefix": null,
+		"rule-empty-line-before": null,
+		"at-rule-empty-line-before": null,
+		"media-feature-range-notation": null,
+		"declaration-block-no-redundant-longhand-properties": null,
+		"shorthand-property-no-redundant-values": null,
+		"comment-whitespace-inside": null,
+		"declaration-property-value-keyword-no-deprecated": null,
+		"declaration-block-no-duplicate-properties": null,
+		"no-descending-specificity": null,
+		"no-duplicate-selectors": null,
+		"font-family-no-missing-generic-family-keyword": null,
+		"keyframes-name-pattern": null,
+		"declaration-block-no-shorthand-property-overrides": null,
+		"color-hex-length": null,
+		"custom-property-empty-line-before": null,
+		"scss/at-mixin-pattern": null,
+		"scss/dollar-variable-pattern": null
+	}
+}
diff --git a/packages/themes/ecl/package.json b/packages/themes/ecl/package.json
@@ -8,7 +8,10 @@
 		"build": "rollup -c",
 		"dev": "rollup -c --watch",
 		"format": "prettier --check src",
-		"lint": "tsc --noemit && eslint src",
+		"lint": "pnpm lint:eslint && pnpm lint:stylelint && pnpm lint:tsc",
+		"lint:eslint": "eslint src",
+		"lint:stylelint": "stylelint \"src/**/*.{css,scss}\"",
+		"lint:tsc": "tsc --noemit",
 		"prepare": "cpy \"node_modules/@public-ui/components/assets/**/*\" assets --dot",
 		"start:ec": "npm-run-all --parallel dev serve:ec",
 		"start:eu": "npm-run-all --parallel dev serve:eu",
@@ -38,6 +41,10 @@
 		"rollup": "4.36.0",
 		"rollup-plugin-postcss": "4.0.2",
 		"sass": "1.86.0",
+		"stylelint": "16.17.0",
+		"stylelint-config-recommended-scss": "14.1.0",
+		"stylelint-config-standard": "37.0.0",
+		"stylelint-scss": "6.11.1",
 		"typescript": "5.8.2",
 		"unbuild": "1.2.1"
 	},
diff --git a/packages/tools/kolibri-cli/package.json b/packages/tools/kolibri-cli/package.json
@@ -23,7 +23,9 @@
 		"build": "tsc",
 		"reset": "pnpm i @public-ui/components@1.1.7",
 		"format": "prettier -c src",
-		"lint": "tsc --noemit && eslint src",
+		"lint": "pnpm lint:eslint && pnpm lint:tsc",
+		"lint:eslint": "eslint src",
+		"lint:tsc": "tsc --noemit",
 		"start": "rimraf test && cpy \"../../samples/react/src/components\" test/src && cpy \"../../samples/react/public/*.html\" test/ && ts-node src/index.ts migrate --ignore-uncommitted-changes --test-tasks test",
 		"restart": "pnpm reset && pnpm start",
 		"unused": "knip",
diff --git a/packages/tools/visual-tests/package.json b/packages/tools/visual-tests/package.json
@@ -23,7 +23,8 @@
 	"description": "Provides utility to run visual regression tests for themes.",
 	"scripts": {
 		"format": "prettier --check src",
-		"lint": "eslint src",
+		"lint": "pnpm lint:eslint",
+		"lint:eslint": "eslint src",
 		"unused": "knip",
 		"postinstall": "pnpm exec playwright install"
 	},
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -37,5 +37,6 @@`
`37`	`37`	`"javascript.updateImportsOnFileMove.enabled": "always",`
`38`	`38`	`"typescript.preferences.importModuleSpecifier": "relative",`
`39`	`39`	`"typescript.updateImportsOnFileMove.enabled": "always",`
`40`		`- "html.customData": ["./node_modules/@public-ui/components/vscode-custom-data.json"]`
	`40`	`+ "html.customData": ["./node_modules/@public-ui/components/vscode-custom-data.json"],`
	`41`	`+ "stylelint.validate": ["css", "scss", "sass", "less"]`
`41`	`42`	`}`