CoolFace
Apppublic

sourav-das/stem-separator

sourceHugging Facemitupdated 6mo agoView on Hugging Face
3likes
README.md106 linesDownload Raw Back to lightningcss
1# ⚡️ Lightning CSS2 3An extremely fast CSS parser, transformer, and minifier written in Rust. Use it with [Parcel](https://parceljs.org), as a standalone library or CLI, or via a plugin with any other tool.4 5<img width="680" alt="performance and build size charts" src="https://user-images.githubusercontent.com/19409/189022599-28246659-f94a-46a4-9de0-b6d17adb0e22.png#gh-light-mode-only">6<img width="680" alt="performance and build size charts" src="https://user-images.githubusercontent.com/19409/189022693-6956b044-422b-4f56-9628-d59c6f791095.png#gh-dark-mode-only">7 8## Features9 10- **Extremely fast** – Parsing and minifying large files is completed in milliseconds, often with significantly smaller output than other tools. See [benchmarks](#benchmarks) below.11- **Typed property values** – many other CSS parsers treat property values as an untyped series of tokens. This means that each transformer that wants to do something with these values must interpret them itself, leading to duplicate work and inconsistencies. Lightning CSS parses all values using the grammar from the CSS specification, and exposes a specific value type for each property.12- **Browser-grade parser** – Lightning CSS is built on the [cssparser](https://github.com/servo/rust-cssparser) and [selectors](https://github.com/servo/stylo/tree/main/selectors) crates created by Mozilla and used by Firefox and Servo. These provide a solid general purpose CSS-parsing foundation on top of which Lightning CSS implements support for all specific CSS rules and properties.13- **Minification** – One of the main purposes of Lightning CSS is to minify CSS to make it smaller. This includes many optimizations including:14  - Combining longhand properties into shorthands where possible.15  - Merging adjacent rules with the same selectors or declarations when it is safe to do so.16  - Combining CSS transforms into a single matrix or vice versa when smaller.17  - Removing vendor prefixes that are not needed, based on the provided browser targets.18  - Reducing `calc()` expressions where possible.19  - Converting colors to shorter hex notation where possible.20  - Minifying gradients.21  - Minifying CSS grid templates.22  - Normalizing property value order.23  - Removing default property sub-values which will be inferred by browsers.24  - Many micro-optimizations, e.g. converting to shorter units, removing unnecessary quotation marks, etc.25- **Vendor prefixing** – Lightning CSS accepts a list of browser targets, and automatically adds (and removes) vendor prefixes.26- **Browserslist configuration** – Lightning CSS supports opt-in browserslist configuration discovery to resolve browser targets and integrate with your existing tools and config setup.27- **Syntax lowering** – Lightning CSS parses modern CSS syntax, and generates more compatible output where needed, based on browser targets.28  - CSS Nesting29  - Custom media queries (draft spec)30  - Logical properties31  * [Color Level 5](https://drafts.csswg.org/css-color-5/)32    - `color-mix()` function33    - Relative color syntax, e.g. `lab(from purple calc(l * .8) a b)`34  - [Color Level 4](https://drafts.csswg.org/css-color-4/)35    - `lab()`, `lch()`, `oklab()`, and `oklch()` colors36    - `color()` function supporting predefined color spaces such as `display-p3` and `xyz`37    - Space separated components in `rgb` and `hsl` functions38    - Hex with alpha syntax39    - `hwb()` color syntax40    - Percent syntax for opacity41    - `#rgba` and `#rrggbbaa` hex colors42  - Selectors43    - `:not` with multiple arguments44    - `:lang` with multiple arguments45    - `:dir`46    - `:is`47  - Double position gradient stops (e.g. `red 40% 80%`)48  - `clamp()`, `round()`, `rem()`, and `mod()` math functions49  - Alignment shorthands (e.g. `place-items`)50  - Two-value `overflow` shorthand51  - Media query range syntax (e.g. `@media (width <= 100px)` or `@media (100px < width < 500px)`)52  - Multi-value `display` property (e.g. `inline flex`)53  - `system-ui` font family fallbacks54- **CSS modules** – Lightning CSS supports compiling a subset of [CSS modules](https://github.com/css-modules/css-modules) features.55  - Locally scoped class and id selectors56  - Locally scoped custom identifiers, e.g. `@keyframes` names, grid lines/areas, `@counter-style` names, etc.57  - Opt-in support for locally scoped CSS variables and other dashed identifiers.58  - `:local()` and `:global()` selectors59  - The `composes` property60- **Custom transforms** – The Lightning CSS visitor API can be used to implement custom transform plugins.61 62## Documentation63 64Lightning CSS can be used from [Parcel](https://parceljs.org), as a standalone library from JavaScript or Rust, using a standalone CLI, or wrapped as a plugin within any other tool. See the [Lightning CSS website](https://lightningcss.dev/docs.html) for documentation.65 66## Benchmarks67 68<img width="680" alt="performance and build size charts" src="https://user-images.githubusercontent.com/19409/189022599-28246659-f94a-46a4-9de0-b6d17adb0e22.png#gh-light-mode-only">69<img width="680" alt="performance and build size charts" src="https://user-images.githubusercontent.com/19409/189022693-6956b044-422b-4f56-9628-d59c6f791095.png#gh-dark-mode-only">70 71```72$ node bench.js bootstrap-4.css73cssnano: 544.809ms74159636 bytes75 76esbuild: 17.199ms77160332 bytes78 79lightningcss: 4.16ms80143091 bytes81 82 83$ node bench.js animate.css84cssnano: 283.105ms8571723 bytes86 87esbuild: 11.858ms8872183 bytes89 90lightningcss: 1.973ms9123666 bytes92 93 94$ node bench.js tailwind.css95cssnano: 2.198s961925626 bytes97 98esbuild: 107.668ms991961642 bytes100 101lightningcss: 43.368ms1021824130 bytes103```104 105For more benchmarks comparing more tools and input, see [here](http://goalsmashers.github.io/css-minification-benchmark/). Note that some of the tools shown perform unsafe optimizations that may change the behavior of the original CSS in favor of smaller file size. Lightning CSS does not do this – the output CSS should always behave identically to the input. Keep this in mind when comparing file sizes between tools.106