Add custom validator for comma errors #141

.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

.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
   }
 }

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
 

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 {

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 {

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"
-  }
-}
+  },
+  "dependencies": {}
+}

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);
+}