Lightning CSS@lightningcss

An extremely fast CSS parser, transformer, bundler, and minifier.

lightningcss.dev
Joined August 2022
4 Photos and videos
Load newest
Raw values avoid needing to fully specify the whole AST when returning new CSS values. You can just return a raw CSS string, which Lightning CSS will parse and insert into the AST for you. lightningcss.dev/transforms.…
Example of a visitor that replaces a custom color() function with a raw CSS value.

ALT Example of a visitor that replaces a custom color() function with a raw CSS value.
1
2
1,872
Custom at-rules are validated during parsing, and fully type safe in visitors. We use the definition to automatically infer the types of the prelude and body so you can avoid unnecessary checks. Check out the docs to learn more! lightningcss.dev/transforms.…

Custom Transforms – Lightning CSS

An extremely fast CSS parser, transformer, bundler, and minifier.

lightningcss.dev
Devon Govett
@devongovett
10 Feb 2023
Replying to @devongovett
Performed some magic with TypeScript so the rule types in custom visitors are actually inferred from this definition too! 🤯
Code showing two custom at rule definitions, and a custom rule visitor. TypeScript inlay hints are shown for the prelude and body of each rule type based on an if statement checking the rule's name.

ALT Code showing two custom at rule definitions, and a custom rule visitor. TypeScript inlay hints are shown for the prelude and body of each rule type based on an if statement checking the rule's name.

1
3
6
4,424
Lightning CSS v1.19.0 is out! 📏 Custom at-rule parsing 🍣 Return raw values from custom transforms 🚨 Better error messages in transforms 🪺 Support `&` selector in non-nested rules 🧥 Merge non-adjacent @​layer rules 🧑‍🍳 Improve selector downleveling github.com/parcel-bundler/li…
Code example showing two custom at rule definitions. @mixin registers a mixin, and @apply inlines it into a rule.

ALT Code example showing two custom at rule definitions. @mixin registers a mixin, and @apply inlines it into a rule.

1
11
52
12,312
Lightning CSS retweeted
Devon Govett
@devongovett
4 Jan 2023
Finally, this release also includes: 🪺 Support for nested container and layer rules 🪵 Vendor prefixing for supports rules 🖥️ Compile input from stdin via CLI ⌛️ Reduced Rust crate compile times Happy new year! 🎆 github.com/parcel-bundler/li…

Release v1.18.0 · parcel-bundler/lightningcss

This release adds support for custom transform visitors written in JavaScript, which lets you extend Lightning CSS with support for custom CSS syntax extensions, perform build time transforms, and ...

github.com
1
3
15
3,336
Lightning CSS retweeted
Devon Govett
@devongovett
4 Jan 2023
I've also added documentation for all Lightning CSS features to the website, including transpilation, bundling, css modules, and minification. It gives examples of the main transforms that Lightning CSS performs, and how to configure them. lightningcss.dev/docs.html

Getting Started – Lightning CSS

An extremely fast CSS parser, transformer, bundler, and minifier.

lightningcss.dev
1
1
7
3,496
Lightning CSS retweeted
Devon Govett
@devongovett
4 Jan 2023
The Lightning CSS playground has also been updated to support custom visitors right in your browser! It also now has a much nicer editing experience with syntax highlighting and inline errors powered by Code Mirror. lightningcss.dev/playground/…
2
1
10
6,046
Lightning CSS retweeted
Devon Govett
@devongovett
4 Jan 2023
Excited to announce the Lightning CSS visitor API! It lets you build custom CSS transform plugins in JavaScript. ⚡️ 🚀 6x faster than postcss 🍱 Fully parsed values for all CSS rules and properties 🌾 Granular API 🪆 Composable 💪 Fully typed lightningcss.dev/transforms.…
Example code for a custom visitor plugin that replaces a --branding-padding environment variable with a value representing 20px.

ALT Example code for a custom visitor plugin that replaces a --branding-padding environment variable with a value representing 20px.

10
68
430
114,851
Lightning CSS retweeted
Devon Govett
@devongovett
2 Dec 2022
CSS minified by @lightningcss 😎
Shu
@shuding
2 Dec 2022
Nextra 2.0 is here: 🔹 Redesigned UI 🔹 Image optimization 🔹 Built-in full-text search 🔹 Build-time code highlighting 🔹 MDX v2 🔹 Next SEO 🔹 Multiple docs zones 🔹 Menus and separators 🔹 ... nextra.site
1
1
27
Lightning CSS v1.17.0 is out! ⚡️ 🪺 Updated nesting syntax 🦋 Rust visitor API for building custom transforms 🖨️ Support for @​page margin rules 🗜️ Simplify :is() selector with a single simple argument 📺 Fix media query parenthesization github.com/parcel-bundler/li…
.foo { color: red; .bar { color: blue; } }

ALT .foo { color: red; .bar { color: blue; } }

1
20
118
Yesterday we released v1.16.1, which includes bug fixes for nesting, border shorthands, and auto prefixing. Also improved browserslist integration in the CLI! github.com/parcel-bundler/li…

Release v1.16.1 · parcel-bundler/lightningcss

Bug fixes Parse :nth-col() and :nth-last-col() selectors – @yisibl in #302 Use :is for non-leading nesting with multiple compound selectors – 8652701 Fix flipped border-bottom-right and border-bot...

github.com
2
9
Lightning CSS retweeted
Jacob Rask@jacobrask
22 Sep 2022
Replying to @devongovett @lightningcss
Renovate will now replace @parcel/css with lightningcss github.com/renovatebot/renov…

feat(presets): Add @parcel/css -> lightningcss replacement by jacobrask · Pull Request #17766 ·...

Changes Add @parcel/css -> lightningcss replacement. Context @parcel/css was renamed lightningcss, see https://twitter.com/devongovett/status/1567898042787049473 Documentation (please check ...

github.com
1
2
2
Lightning CSS retweeted
Devon Govett
@devongovett
20 Sep 2022
Really excited about this. I’ve often wanted to manipulate colors programmatically over the years (ala SASS). Happy to see this finally standardized as part of CSS Color Level 5. w3.org/TR/css-color-5/ Lightning CSS already supports color-mix() too, btw! 😄
color-mix in lch with teal 65%, olive 45%. Output shows rgb fallback and computed lch color.

ALT color-mix in lch with teal 65%, olive 45%. Output shows rgb fallback and computed lch color.

Lightning CSS@lightningcss
20 Sep 2022
New release! ⚡️ Lightning CSS now supports relative color syntax, which allows you to adjust colors with math functions! If you've ever wanted to lighten or darken a color, now you can – and a lot more. Playground: lightningcss.dev/playground/… Release notes: github.com/parcel-bundler/li…
An input lch color, adjusting slateblue by darkening it 10%. Output shows a hex color, and calculated lch value.

ALT An input lch color, adjusting slateblue by darkening it 10%. Output shows a hex color, and calculated lch value.

4
12
50
New release! ⚡️ Lightning CSS now supports relative color syntax, which allows you to adjust colors with math functions! If you've ever wanted to lighten or darken a color, now you can – and a lot more. Playground: lightningcss.dev/playground/… Release notes: github.com/parcel-bundler/li…
An input lch color, adjusting slateblue by darkening it 10%. Output shows a hex color, and calculated lch value.

ALT An input lch color, adjusting slateblue by darkening it 10%. Output shows a hex color, and calculated lch value.

1
25
95
Lightning CSS retweeted
Stephanie Eckles@5t3ph
16 Sep 2022
✨ Just updated my @eleven_ty Sass Skeleton to remove 4 dependencies in favor of Lightning CSS which minifies and prefixes all-in-one! github.com/5t3ph/11ty-sass-s…

GitHub - 5t3ph/11ty-sass-skeleton: Featuring absolutely nothing beyond a base HTML5 template and...

Featuring absolutely nothing beyond a base HTML5 template and the essential setup to watch and compile your Sass alongside 11ty. - 5t3ph/11ty-sass-skeleton

github.com
2
5
69
Lightning CSS v1.15.0 is out! ⚡️ Includes support for bundling with inline source maps, an option to preserve imports when analyzing deps, fixes for cascade layers, flex shorthand, custom media queries, and more. github.com/parcel-bundler/li…

Release v1.15.0 · parcel-bundler/lightningcss

This release includes several new features and a bunch of bug fixes. New features Use inline source maps during bundling – bfa8b8c Add new preserveImports option for analyzeDependencies, which pre...

github.com
6
39
Lightning CSS retweeted
Lawrence Chen
@lawrencecchen
9 Sep 2022
Wrote a Vite plugin for Lightning CSS!⚡ github.com/lawrencecchen/vit…

GitHub - lawrencecchen/vite-plugin-lightningcss

Contribute to lawrencecchen/vite-plugin-lightningcss development by creating an account on GitHub.

github.com
Devon Govett
@devongovett
8 Sep 2022
Excited to announce that Parcel CSS is now Lightning CSS! ⚡️ This new name makes it clear that it can be used outside Parcel, with other build tools or standalone. Had way too much fun designing the new website too! 😜 lightningcss.dev Follow @lightningcss for updates.
1
5
19
Lightning CSS retweeted
Devon Govett
@devongovett
8 Sep 2022
Excited to announce that Parcel CSS is now Lightning CSS! ⚡️ This new name makes it clear that it can be used outside Parcel, with other build tools or standalone. Had way too much fun designing the new website too! 😜 lightningcss.dev Follow @lightningcss for updates.

Lightning CSS

An extremely fast CSS parser, transformer, bundler, and minifier.

lightningcss.dev
27
120
681
css
6
Load more