New validator (#41775)

* New validator

* update

* remove

* update

Author: mdo

.github/workflows/docs.yml

@@ -30,16 +30,14 @@ jobs:
           node-version: "${{ env.NODE }}"
           cache: npm
 
-      - run: java -version
-
       - name: Install npm dependencies
         run: npm ci
 
       - name: Build docs
         run: npm run docs-build
 
       - name: Validate HTML
-        run: npm run docs-vnu
+        run: npm run docs-html-validate
 
       - name: Run linkinator
         uses: JustinBeckwith/linkinator-action@3d5ba091319fa7b0ac14703761eebb7d100e6f6d # v1.11.0

build/html-validate.mjs

@@ -0,0 +1,104 @@
+#!/usr/bin/env node
+
+/*!
+ * Script to run html-validate for HTML validation.
+ *
+ * This replaces the Java-based vnu-jar validator with a faster, Node.js-only solution.
+ * Benefits:
+ * - No Java dependency required
+ * - Faster execution (no JVM startup time)
+ * - Easy to configure with rule-based system
+ * - Better integration with Node.js build tools
+ *
+ * Copyright 2017-2025 The Bootstrap Authors
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ */
+
+import { HtmlValidate } from 'html-validate'
+import { globby } from 'globby'
+
+const htmlValidate = new HtmlValidate({
+  rules: {
+    // Allow autocomplete on buttons (Bootstrap specific)
+    'attribute-allowed-values': 'off',
+    // Allow aria-disabled on links (Bootstrap specific)
+    'aria-label-misuse': 'off',
+    // Allow modern CSS syntax
+    'valid-id': 'off',
+    // Allow void elements with trailing slashes (Astro)
+    'void-style': 'off',
+    // Allow custom attributes
+    'no-unknown-elements': 'off',
+    'attribute-boolean-style': 'off',
+    'no-inline-style': 'off',
+    // KEEP duplicate ID checking enabled (this is important for HTML validity)
+    'no-dup-id': 'error'
+  },
+  elements: [
+    'html5',
+    {
+      // Allow custom attributes for Astro/framework compatibility
+      '*': {
+        attributes: {
+          'is:raw': { boolean: true },
+          switch: { boolean: true },
+          autocomplete: { enum: ['on', 'off', 'new-password', 'current-password'] }
+        }
+      }
+    }
+  ]
+})
+
+async function validateHTML() {
+  try {
+    console.log('Running html-validate validation...')
+
+    // Find all HTML files
+    const files = await globby([
+      '_site/**/*.html',
+      'js/tests/**/*.html'
+    ], {
+      ignore: ['**/node_modules/**']
+    })
+
+    console.log(`Validating ${files.length} HTML files...`)
+
+    let hasErrors = false
+
+    // Validate all files in parallel to avoid await-in-loop
+    const validationPromises = files.map(file =>
+      htmlValidate.validateFile(file).then(report => ({ file, report }))
+    )
+
+    const validationResults = await Promise.all(validationPromises)
+
+    // Process results and check for errors
+    for (const { file, report } of validationResults) {
+      if (!report.valid) {
+        hasErrors = true
+        console.error(`\nErrors in ${file}:`)
+
+        // Extract error messages with reduced nesting
+        const errorMessages = report.results.flatMap(result =>
+          result.messages.filter(message => message.severity === 2)
+        )
+
+        for (const message of errorMessages) {
+          console.error(`  Line ${message.line}:${message.column} - ${message.message} (${message.ruleId})`)
+        }
+      }
+    }
+
+    if (hasErrors) {
+      console.error('\nHTML validation failed!')
+      process.exit(1)
+    } else {
+      console.log('✓ All HTML files are valid!')
+    }
+  } catch (error) {
+    console.error('HTML validation error:', error)
+    process.exit(1)
+  }
+}
+
+validateHTML()