koddsson / hdx

Refreshing CSS

CSS Compiler

hydroxide (hdx) is a suite of high performance tools for CSS, written in Rust, inspired by the oxidation compiler.

Goals

The goal of this project is to provide a high quality set of tools for writing native CSS and shipping said CSS into production the best way possible. This means:

• Preventing mistakes at author time (parsing & linting).
• Advising best practices and highlighting pitfalls (linting).
• Allow consistent homogeneous code to be written (formatting).
• Allowing the authorship of modern CSS that is downsampled for browser support ("transpiling").
• Provides integration with IDEs (LSP).
• Producing the smallest available artefacts (minification & bundling).
• Provide a way for authors to migrate from alternative authoring formats (such as SCSS).

Roadmap

This project is in the very early stages, and has yet to meet any of its goals. Here is a rough order of operations to get there:

• Write a suitable lexer which:
  • Passes the romainmenke/css-tokenizer-tests test suite.
• Write a suitable parser which:
  • Passes the postcss/postcss-parser-tests test suite.
  • Produces an AST
    • with JSON output
    • with Visitors
    • with CSS output
  • Produces a usable AST for:
    • 960.gs
    • animate
    • blueprint
    • bootstrap 4
    • bootstrap 5
    • font awesome
    • foundation
    • inuit
    • mini.css
    • openprops
    • pure
    • reset (Eric Myer's)
    • tailwind
    • primer css
  • Benchmarks faster than (or as fast as) comparative parsers
  • Is capable of interpreting SCSS files
    • Produces a usable AST for:
      • all bootstrap scss files
      • all foundation scss files
      • all mini.css scss files
      • all primer css scss files
      • all bourbon scss files
• Write a suitable minifier which:
  • Removes trivia such as whitespace/comments
  • Minifies/Folds/Downsamples complex CSS into shorter values:
    • Minifies hex colours into their smallest representation
    • Folds colour values into shorter hex
    • Can downsample css values to shorter, e.g. 0px -> 0
    • Can combine multiple properties into a shorthand e.g. background
    • Can remove duplicate properties
  • Produces a usable CSS for:
    • 960.gs
    • animate
    • blueprint
    • bootstrap 4
    • bootstrap 5
    • font awesome
    • foundation
    • inuit
    • mini.css
    • openprops
    • pure
    • reset (Eric Myer's)
    • tailwind
    • primer css
  • Produces minified CSS smaller than (or as small as) comparative minifiers for
    • 960.gs
    • animate
    • blueprint
    • bootstrap 4
    • bootstrap 5
    • font awesome
    • foundation
    • inuit
    • mini.css
    • openprops
    • pure
    • reset (Eric Myer's)
    • tailwind
    • primer css
  • Benchmarks faster than (or as fast as) comparative minifiers
• Write the formatter
  • Provide the formatter as an npm package
• Write the linter
  • Write a visitor architecture for the AST
  • The linter highlights basic parser errors
  • The linter reports on duplicate CSS
  • The linter reports on empty CSS
  • The linter reports on non-standard or vendor prefixed CSS
  • The linter can safely fix violations
  • The linter can provide explanations / documentation for every violation including guidance on how to fix.
  • Provides all of the rules that comparable linters do
    • Provides all core rules from stylelint.
  • Provide the linter as an npm package
• Write the transpiler which:
  • Can vendor prefix new properties
  • Can convert new colour formats like oklch to rgb/hex
  • Can convert nested css to flattened
  • Can convert SCSS to CSS
    • Can convert the following SCSS to CSS:
      • all bootstrap scss files
      • all foundation scss files
      • all mini.css scss files
      • all primer css scss files
      • all bourbon scss files
• Write the bundler which:
  • Produces a single file from @imports
  • Produces a usable single file for:
    • bootstrap
    • foundation
    • mini.css
    • openprops
    • primer css
  • Can do more advanced compression techniques
    • Mangle variable names
    • Remove variable names to reduce output size
    • Add variable names to reduce output size
  • Resolves URL imports
    • Produces lockfiles
• Write the LSP
  • Integrate the linter into the LSP
  • Integrate the formatter into the LSP
  • Integrate with VSCode (extension?)
  • Integrate with nvim (nvim-lsp?)