MVP of CSS parser

[Jarred-Sumner]

In #14122, we've added a new CSS parser to Bun (a Zig port of LightningCSS, huge thanks to Devon Govett, the LightningCSS contributors, and the Servo contributors)

This issue is meant to track the work towards getting the CSS parser fully usable in bun build, Bun.build, and Bun Kit. It will be closed when these features are implemented and tested.

Integration into bun build

• Support Bun.build API
• Support bun build --no-bundle
• Support bun build
• Support bun build with --minify

Features to implement

• Sourcemaps (needs integration with bun build and Bun.build as well)
• @import must resolve files and integrate with the module resolver, using bun.ImportKind and work with Bun.build plugins
• url() must resolve files and integrate with the module resolver
• Nesting rules

Minification pass

• media
• import
• style
• keyframes
• font-face
• font-palette-values
• page
• supports
• counter-style
• namespace
• moz-document
• nesting
• viewport
• custom-media
• layer-statement
• layer-block
• property
• container
• scope
• starting-style
• unknown
• custom

Minify and downlevel properties

(210/292)

• -webkit-mask-composite
• accent-color
• align-content
• align-items
• align-self
• animation-composition
• animation-delay
• animation-direction
• animation-duration
• animation-fill-mode
• animation-iteration-count
• animation-name
• animation-play-state
• animation-range-end
• animation-range-start
• animation-range
• animation-timeline
• animation-timing-function
• aspect-ratio
• backdrop-filter
• backface-visibility
• background-attachment
• background-clip
• background-color
• background-image
• background-origin
• background-position-x
• background-position-y
• background-position
• background-repeat
• background-size
• background
• block-size
• border-block-color
• border-block-end-width
• border-block-end
• border-block-start-width
• border-block-start
• border-block-style
• border-block-width
• border-block
• border-bottom-left-radius
• border-bottom-right-radius
• border-bottom-width
• border-bottom
• border-color
• border-end-end-radius
• border-end-start-radius
• border-image-outset
• border-image-repeat
• border-image-slice
• border-image-source
• border-image-width
• border-image
• border-inline-color
• border-inline-end-style
• border-inline-end-width
• border-inline-end
• border-inline-start-style
• border-inline-start-width
• border-inline-start
• border-inline-style
• border-inline-width
• border-inline
• border-left-width
• border-left
• border-radius
• border-right-width
• border-right
• border-start-end-radius
• border-start-start-radius
• border-style
• border-top-left-radius
• border-top-right-radius
• border-top-width
• border-top
• border-width
• border
• box-align
• box-decoration-break
• box-direction
• box-flex-group
• box-flex
• box-lines
• box-ordinal-group
• box-orient
• box-pack
• box-shadow
• box-sizing
• caret-color
• caret-shape
• clip-path
• clip-rule
• color
• color-interpolation-filters
• color-interpolation
• color-rendering
• color-scheme
• composes
• column-gap
• container-name
• container-type
• direction
• display
• fill-opacity
• fill-rule
• flex-align
• flex-basis
• flex-direction
• flex-flow
• flex-grow
• flex-item-align
• flex-line-pack
• flex-negative
• flex-order
• flex-pack
• flex-positive
• flex-preferred-size
• flex-shrink
• flex-wrap
• flex
• font-family
• font-palette
• font-size
• font-stretch
• font-style
• font-variant-caps
• font-weight
• height
• image-rendering
• inline-size
• inset-block-end
• inset-block-start
• inset-block
• inset-inline-end
• inset-inline-start
• inset-inline
• inset
• justify-content
• justify-items
• justify-self
• letter-spacing
• line-break
• line-height
• list-style-image
• list-style-position
• list-style-type
• list-style
• margin-block-end
• margin-block-start
• margin-block
• margin-bottom
• margin-inline-end
• margin-inline-start
• margin-inline
• margin-left
• margin-right
• margin-top
• margin
• marker-end
• marker-mid
• marker-side
• marker-start
• mask-border-mode
• mask-border-outset
• mask-border-repeat
• mask-border-slice
• mask-border-source
• mask-border-width
• mask-border
• mask-box-image-outset
• mask-box-image-repeat
• mask-box-image-slice
• mask-box-image-source
• mask-box-image-width
• mask-box-image
• mask-clip
• mask-composite
• mask-image
• mask-mode
• mask-origin
• mask-position-x
• mask-position-y
• mask-position
• mask-repeat
• mask-size
• mask-source-type
• mask-type
• mask
• max-block-size
• max-height
• max-inline-size
• max-width
• min-block-size
• min-height
• min-inline-size
• min-width
• opacity
• outline-color
• outline-style
• outline-width
• outline
• overflow-wrap
• overflow-x
• overflow-y
• overflow
• padding-block-end
• padding-block-start
• padding-block
• padding-bottom
• padding-inline-end
• padding-inline-start
• padding-inline
• padding-left
• padding-right
• padding-top
• padding
• perspective-origin
• place-content
• place-items
• place-self
• position
• right
• row-gap
• scroll-margin-block-end
• scroll-margin-block-start
• scroll-margin-block
• scroll-margin-bottom
• scroll-margin-inline-end
• scroll-margin-inline-start
• scroll-margin-inline
• scroll-margin-left
• scroll-margin-right
• scroll-margin-top
• scroll-margin
• scroll-padding-block-end
• scroll-padding-block-start
• scroll-padding-block
• scroll-padding-bottom
• scroll-padding-inline-end
• scroll-padding-inline-start
• scroll-padding-inline
• scroll-padding-left
• scroll-padding-right
• scroll-padding-top
• scroll-padding
• shape-rendering
• stroke-dasharray
• stroke-dashoffset
• stroke-linecap
• stroke-linejoin
• stroke-miterlimit
• stroke-opacity
• stroke-width
• tab-size
• text-align-last
• text-align
• text-decoration-color
• text-decoration-line
• text-decoration-skip-ink
• text-decoration-style
• text-decoration-thickness
• text-decoration
• text-emphasis-color
• text-emphasis-position
• text-emphasis-style
• text-emphasis
• text-indent
• text-justify
• text-overflow
• text-rendering
• text-shadow
• text-size-adjust
• text-transform
• top
• transform-box
• transform-origin
• transform-style
• transition-delay
• transition-duration
• transition-property
• transition-timing-function
• unicode-bidi
• user-select
• vertical-align
• view-transition-name
• visibility
• white-space
• word-break
• word-spacing
• word-wrap
• width
• z-index

Finish porting test suites

• From LightningCSS: https://github.com/parcel-bundler/lightningcss/blob/master/src/lib.rs
• From esbuild? https://github.com/evanw/esbuild/blob/main/internal/css_parser/css_parser_test.go

Integration tests

We need integration tests that verify we can successfully parse and minify CSS from real-world libraries.

• Tailwind
• Shadcn
• Bootstrap
• DaisyUI
• Mantine
• Chroma
• Mui
• Antd
• PrimeFlex
• PrimeReact

Optimize and profile

Performance should be faster than LightningCSS and esbuild. Currently, it's slightly slower than LightningCSS and missing features. We've done zero performance work so far. Performance will improve when we finish implementing the specific AST nodes for the properties and values.

[devongovett]

If you refuse to simply use Lightning CSS directly (as I proposed in 2022, and I am still open to helping with) and must copy my code instead, please at least consider contributing if you find bugs or opportunities for optimization. I have put thousands of hours of development effort into Lightning CSS in my spare time, so I would appreciate anything you could contribute back given that you are finding value in it. Thanks in advance.

[Jarred-Sumner]

@devongovett would love to + we're happy to do a monthly github sponsors donation

[romainmenke]

Also please be a good citizen and at least try to make a bundler that works the same as other CSS bundlers and respects the CSS specification.

Currently it only passes 12 out of 136 tests: https://github.com/romainmenke/css-import-tests

Either use something other than @import (as Sass does with @use) or follow the spec so that CSS authors can freely switch between tools or even having no tools at all.

[Jarred-Sumner]

Also please be a good citizen and at least try to make a bundler that works the same as other CSS bundlers and respects the CSS specification.

Thank you for running these tests. This is part of why we call it “experimental” and it’s behind the —experimental-css flag — it’s not fully ready yet

[romainmenke]

I know it isn't ready yet :)
That is why I am reaching out here and now and sharing the test suite.
I am hoping that the finished thing will be compliant so that CSS authors gain a new tool that is helpful for them 🤞