From f318602a5366f250bf583c5f02be703839a429b3 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Sun, 12 Dec 2021 13:29:59 -0500 Subject: [PATCH] Update readme --- README.md | 28 ++++++++++++++++++++++------ 1 file changed, 22 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 539770b8..c44ed0b2 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,13 @@ -# parcel-css +# @parcel/css -A WIP CSS parser, transformer, and minifier written in Rust. +A CSS parser, transformer, and minifier written in Rust. ## Features - **Extremely fast** – Parsing and minifying large files is completed in milliseconds, often with significantly smaller output than other tools. See [benchmarks](#benchmarks) below. -- **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. `parcel-css` parses all values using the grammar from the CSS specification, and exposes a specific value type for each property. -- **Minification** – One of the main purposes of `parcel-css` is to minify CSS to make it smaller. This includes many optimizations including: +- **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. `@parcel/css` parses all values using the grammar from the CSS specification, and exposes a specific value type for each property. +- **Browser-grade parser** – `@parcel/css` is built on the [cssparser](https://github.com/servo/rust-cssparser) and [selectors](https://github.com/servo/servo/tree/master/components/selectors) crates created by Mozilla and used by Firefox and Servo. These provide a solid general purpose CSS-parsing foundation on top of which `@parcel/css` implements support for all specific CSS rules and properties. +- **Minification** – One of the main purposes of `@parcel/css` is to minify CSS to make it smaller. This includes many optimizations including: - Combining longhand properties into shorthands where possible. - Merging adjacent rules with the same selectors or declarations when it is safe to do so. - Combining CSS transforms into a single matrix or visa versa when smaller. @@ -17,8 +18,8 @@ A WIP CSS parser, transformer, and minifier written in Rust. - Normalizing property value order. - Removing default property sub-values which will be inferred by browsers. - Many micro-optimizations, e.g. converting to shorter units, removing unnecessary quotation marks, etc. -- **Vendor prefixing** – `parcel-css` accepts a list of browser targets, and automatically adds (and removes) vendor prefixes. -- **Syntax lowering** – `parcel-css` parses modern CSS syntax, and generates more compatible output where needed, based on browser targets. +- **Vendor prefixing** – `@parcel/css` accepts a list of browser targets, and automatically adds (and removes) vendor prefixes. +- **Syntax lowering** – `@parcel/css` parses modern CSS syntax, and generates more compatible output where needed, based on browser targets. - CSS Level 4 Color syntax - Space separated components in `rgb` and `hsl` functions - Hex with alpha syntax @@ -34,6 +35,8 @@ A WIP CSS parser, transformer, and minifier written in Rust. ## Documentation +`@parcel/css` can be used from [Parcel](https://parceljs.org), as a standalone library from JavaScript or Rust, or wrapped as a plugin within any other tool. + ### From JavaScript More docs to come, but here is a simple example: @@ -58,6 +61,19 @@ let {code, map} = css.transform({ See the Rust API docs on [docs.rs](https://docs.rs/parcel_css). +### With Parcel + +Add the following to your `.parcelrc`: + +```json +{ + "extends": "@parcel/config-default", + "optimizers": { + "*.css": ["@parcel/optimizer-css"] + } +} +``` + ## Benchmarks ```