From 72d3793406a4a41eb3920bd0898df17932cf9bdb Mon Sep 17 00:00:00 2001 From: Roni Laukkarinen Date: Sun, 10 Nov 2024 13:52:12 +0200 Subject: [PATCH] Add custom validator for comma errors #141 --- .github/workflows/styles.yml | 10 ++-------- .stylelintrc | 32 ++++++++++++++++++++------------ CHANGELOG.md | 1 + layout-multiple-columns.css | 1 - layout-single-column.css | 1 - package.json | 12 ++++++++---- validate-css.js | 28 ++++++++++++++++++++++++++++ 7 files changed, 59 insertions(+), 26 deletions(-) create mode 100644 validate-css.js diff --git a/.github/workflows/styles.yml b/.github/workflows/styles.yml index b3ce361..81bd7a0 100644 --- a/.github/workflows/styles.yml +++ b/.github/workflows/styles.yml @@ -33,17 +33,11 @@ jobs: @ronilaukkarinen/stylelint-a11y@^1.2.7 \ @ronilaukkarinen/stylelint-declaration-strict-value@^1.9.2 \ @ronilaukkarinen/stylelint-value-no-unknown-custom-properties@^4.0.1 \ - postcss@8.4.21 \ - postcss-cli@^10.1.0 \ - postcss-safe-parser@^6.0.0 + postcss@8.4.21 - name: Run stylelint run: | npx stylelint *.css --max-warnings 0 --config .stylelintrc - name: Validate CSS syntax - run: | - for file in *.css; do - echo "Validating $file" - npx postcss "$file" --parser postcss-safe-parser - done + run: node validate-css.js diff --git a/.stylelintrc b/.stylelintrc index 4ff6405..7cbc33d 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -2,12 +2,16 @@ "defaultSeverity": "warning", "plugins": [ "@ronilaukkarinen/stylelint-value-no-unknown-custom-properties", - "stylelint-order" + "stylelint-order", + "stylelint-csstree-validator" ], "extends": [ - "stylelint-config-standard" + "stylelint-config-standard", + "stylelint-config-recommended" ], "rules": { + "csstree/validator": true, + "declaration-block-single-line-max-declarations": 1, "order/order": [ { "type": "at-rule", @@ -47,21 +51,14 @@ "declaration-empty-line-before": null, "font-family-no-missing-generic-family-keyword": true, "font-family-name-quotes": "always-where-required", - "at-rule-no-unknown": null, "no-invalid-position-at-import-rule": null, "declaration-no-important": true, "comment-empty-line-before": null, "function-url-quotes": "always", "unit-no-unknown": true, - "property-no-unknown": true, - "no-duplicate-selectors": true, "length-zero-no-unit": null, "font-weight-notation": "numeric", "number-max-precision": null, - "number-leading-zero": null, - "string-quotes": null, - "max-line-length": null, - "max-empty-lines": null, "selector-class-pattern": null, "selector-max-class": 7, "selector-max-combinators": 7, @@ -71,10 +68,8 @@ "property-no-vendor-prefix": true, "selector-no-vendor-prefix": true, "selector-no-qualifying-type": null, - "declaration-block-no-duplicate-properties": true, "no-unknown-animations": true, "shorthand-property-no-redundant-values": true, - "declaration-block-single-line-max-declarations": 1, "value-keyword-case": null, "csstools/value-no-unknown-custom-properties": [ true, @@ -140,6 +135,19 @@ "property-disallowed-list": [ "font", "background" - ] + ], + "declaration-block-no-duplicate-properties": true, + "declaration-block-no-shorthand-property-overrides": true, + "property-no-unknown": true, + "selector-pseudo-class-no-unknown": true, + "selector-pseudo-element-no-unknown": true, + "selector-type-no-unknown": true, + "media-feature-name-no-unknown": true, + "at-rule-no-unknown": true, + "comment-no-empty": true, + "no-duplicate-selectors": true, + "no-empty-source": true, + "no-invalid-double-slash-comments": true, + "no-irregular-whitespace": true } } \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index 5b856af..3faa3bd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ ### 2.0.5rc: 2024-11-10 * Add unit test to test for CSS syntax errors #141 +* Add custom validator for comma errors #141 ### 2.0.4: 2024-10-18 diff --git a/layout-multiple-columns.css b/layout-multiple-columns.css index c4cb47e..f89398a 100644 --- a/layout-multiple-columns.css +++ b/layout-multiple-columns.css @@ -4043,7 +4043,6 @@ body.embed .entry .detailed-status { /* Threaded line, actually */ .layout-multiple-columns .status__line { border-inline-start: 2px solid var(--color-thread-line); - -webkit-border-start: 2px solid var(--color-thread-line); } .layout-multiple-columns .status__line--full::before { diff --git a/layout-single-column.css b/layout-single-column.css index 0999431..c51ed8a 100644 --- a/layout-single-column.css +++ b/layout-single-column.css @@ -4347,7 +4347,6 @@ body.embed .entry .detailed-status { /* Threaded line, actually */ .layout-single-column .status__line { border-inline-start: 2px solid var(--color-thread-line); - -webkit-border-start: 2px solid var(--color-thread-line); } .layout-single-column .status__line--full::before { diff --git a/package.json b/package.json index eb7b755..bdbb5a9 100644 --- a/package.json +++ b/package.json @@ -12,9 +12,13 @@ "@ronilaukkarinen/stylelint-a11y": "^1.2.7", "@ronilaukkarinen/stylelint-declaration-strict-value": "^1.9.2", "@ronilaukkarinen/stylelint-value-no-unknown-custom-properties": "^4.0.1", - "postcss": "^8.4.21", - "stylelint": "^15.2.0", + "postcss": "^8.4.47", + "postcss-cli": "^11.0.0", + "stylelint": "^15.11.0", + "stylelint-config-recommended": "^14.0.1", "stylelint-config-standard": "^30.0.1", + "stylelint-csstree-validator": "^3.0.0", "stylelint-order": "^6.0.3" - } -} \ No newline at end of file + }, + "dependencies": {} +} diff --git a/validate-css.js b/validate-css.js new file mode 100644 index 0000000..ff9a622 --- /dev/null +++ b/validate-css.js @@ -0,0 +1,28 @@ +// Custom script to validate CSS syntax by Rolle +// https://github.com/stylelint/stylelint/issues/3053 +const fs = require('fs'); +const path = require('path'); + +const cssFiles = fs.readdirSync('.').filter(file => file.endsWith('.css')); +let errorFound = false; + +cssFiles.forEach(file => { + const lines = fs.readFileSync(file, 'utf8').split('\n'); + lines.forEach((line, index) => { + // Check if the line ends with a comma and the next line starts with "{" + const trimmedLine = line.trim(); + const nextLine = lines[index + 1] ? lines[index + 1].trim() : ''; + if (trimmedLine.endsWith(',') && nextLine.startsWith('{')) { + errorFound = true; + console.error(`❌ Trailing comma error in file ${file} on line ${index + 1}`); + } + }); +}); + +if (!errorFound) { + console.log('✅ No trailing comma errors found. CSS validation passed.'); + process.exit(0); +} else { + console.error('❌ CSS validation failed due to trailing commas.'); + process.exit(1); +}