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.