thulite-css-validation-test

Description

A sample site for testing w3 CSS validator against @thulite/doks-core

Summary

Some SCSS variables are not being replaced during libsass processing and are ending up as text in the CSS.

Test procedure

1. Set up a test site
   1. npm create thulite@latest thulite-css-validation-test -- --template doks
   2. cd thulite-css-validation-test
   3. npm install
   4. Start the hugo server: npm run dev
   5. Browse to the CSS
      1. In your browser 'view-source'
      2. Click on the 'main.<hash>.css' link.
      3. OR use your browser developer tools and set to NOT display source.
   6. Search for $body-bg-dark.
   7. Observe it is present in the 'live' CSS.
   8. Cancel the server (Ctrl-C)
   9. Build the site: hugo --gc
2. Obtain and install W3 Nu Validator
   1. Download the latest release from https://github.com/validator/validator/releases
      1. E.g. wget https://github.com/validator/validator/releases/download/latest/vnu.jar
   2. Ensure you have a recent-ish Java JRE (I use openjdk-17-jre from Debian 12 'Bookworm')
3. Use the Validator and observe the results
   1. Execute java -jar ./vnu.jar --skip-non-css $(find public -name '*.css' | tr $'\n' ' ')
4. Go to the file and line containing an error like error: CSS: “color”: Parse Error.
   • In our case, these are usually unprocessed variables.