peacevilla.blogg.se - Parcel minify

#Parcel minify series#

The referenced file will be processed by Parcel, and the URL reference will be rewritten to point to the output filename. The url() function can be used to reference a file, for example a background image or font. When the plugin is enabled, you can also use globs to import multiple CSS files at once. To import a CSS file from npm, use the npm: scheme. You can also use absolute and tilde specifiers. Referenced files should be relative to the containing CSS file. This means that at runtime a separate network request will not be needed to load the dependency. The at-rule can be used to inline another CSS file into the same CSS bundle as the containing file. Or import it from a JavaScript file: import './index.css' Dependencies #ĬSS assets can contain dependencies referenced by syntax, as well as references to images, fonts, etc. To add a CSS file, either reference it with a tag in an HTML file: See the Lightning CSS website for documentation.Parcel includes support for CSS out of the box. Lightning CSS can be used from Parcel, as a standalone library from JavaScript or Rust, using a standalone CLI, or wrapped as a plugin within any other tool. Custom transforms – The Lightning CSS visitor API can be used to implement custom transform plugins.Opt-in support for locally scoped CSS variables and other dashed identifiers.Locally scoped custom identifiers, e.g.CSS modules – Lightning CSS supports compiling a subset of CSS modules features.Parcel automatically tracks all of the files, configuration, plugins, and dev dependencies that are involved in your build, and granularly invalidates the cache when something changes. If you restart the dev server, Parcel will only rebuild files that have changed since the last time it ran. (width <= 100px) or (100px < width < 500px)) Parcel caches everything it builds to disk. clamp(), round(), rem(), and mod() math functions.Space separated components in rgb and hsl functions.color() function supporting predefined color spaces such as display-p3 and xyz.lab(), lch(), oklab(), and oklch() colors.Syntax lowering – Lightning CSS parses modern CSS syntax, and generates more compatible output where needed, based on browser targets.Browserslist configuration – Lightning CSS supports opt-in browserslist configuration discovery to resolve browser targets and integrate with your existing tools and config setup.Vendor prefixing – Lightning CSS accepts a list of browser targets, and automatically adds (and removes) vendor prefixes.converting to shorter units, removing unnecessary quotation marks, etc.

Removing default property sub-values which will be inferred by browsers.

Converting colors to shorter hex notation where possible.

Reducing calc() expressions where possible.

Removing vendor prefixes that are not needed, based on the provided browser targets.

Combining CSS transforms into a single matrix or vice versa when smaller.

Merging adjacent rules with the same selectors or declarations when it is safe to do so.

Combining longhand properties into shorthands where possible.

This includes many optimizations including:

Minification – One of the main purposes of Lightning CSS is to minify CSS to make it smaller.

These provide a solid general purpose CSS-parsing foundation on top of which Lightning CSS implements support for all specific CSS rules and properties.

Browser-grade parser – Lightning CSS is built on the cssparser and selectors crates created by Mozilla and used by Firefox and Servo.

Lightning CSS parses all values using the grammar from the CSS specification, and exposes a specific value type for each property. This means that each transformer that wants to do something with these values must interpret them itself, leading to duplicate work and inconsistencies.

#Parcel minify series#

Typed property values – many other CSS parsers treat property values as an untyped series of tokens.Extremely fast – Parsing and minifying large files is completed in milliseconds, often with significantly smaller output than other tools.Use it with Parcel, as a standalone library or CLI, or via a plugin with any other tool. An extremely fast CSS parser, transformer, and minifier written in Rust.