Playground • Docs • Rust docs • npm • GitHub
+GitHub • Rust docs • npm • Playground
+Playground • Docs • Rust docs • npm • GitHub
Lightning CSS is over 100x faster than comparable JavaScript-based tools. It can minify over 2.7 million lines of code per second on a single thread.
Lightning CSS is written in Rust, a native systems programming language. It was built with performance in mind from the start, designed to make efficient use of memory, and limit AST passes.
+Lightning CSS lets you use modern CSS features and future syntax today. Features such as CSS nesting, custom media queries, high gamut color spaces, logical properties, and new selector features are automatically converted to more compatible syntax based on your browser targets.
Lightning CSS also automatically adds vendor prefixes for your browser targets, so you can keep your source code clean and repetition free.
+last 2 versionsLightning CSS is not only fast when it comes to build time. It produces smaller output, so your website loads faster too.
The Lightning CSS minifier combines longhand properties into shorthands, removes unnecessary vendor prefixes, merges compatible adjacent rules, removes unnecessary default values, reduces calc() expressions, shortens colors, minifies gradients, and much more.
Lightning CSS supports CSS modules, which locally scope classes, ids, @keyframes, CSS variables, and more. This ensures that there are no unintended name clashes between different CSS files.
Lightning CSS generates a mapping of the original names to scoped names, which can be used from your JavaScript. This also enables unused classes and variables to be tree-shaken.
+.heading {
composes: typography from './typography.css';
@@ -168,6 +172,7 @@ CSS modules
Browser grade
Lightning CSS is written in Rust, using the cssparser and selectors crates created by Mozilla and used by Firefox. These provide a solid CSS-parsing foundation on top of which Lightning CSS implements support for all specific CSS rules and properties.
Lightning CSS fully parses every CSS rule, property, and value just as a browser would. This reduces duplicate work for transformers, leading to improved performance and minification.
+
Background([Background {
image: Url(Url { url: "img.png" }),
@@ -380,6 +385,17 @@ Browser grade
line-height: 1.4em;
}
+ main p a {
+ font-weight: bold;
+ font-size: 0.9em;
+ color: inherit;
+ text-decoration: none;
+ }
+
+ main p a:hover {
+ text-decoration: underline;
+ }
+
figure {
max-width: 800px;
margin: 0;
@@ -426,6 +442,11 @@ Browser grade
color: #aaa;
}
+ .warp p a {
+ color: var(--gold-text);
+ text-shadow: 0 0 7px var(--gold-shadow);
+ }
+
.crush {
background-image: url(crush.svg), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='rgb(0 0 0 / .2)' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E"), linear-gradient(to bottom right, lch(75% 82.34 80.104), lch(68% 82.34 80.104));
background-size: 600px auto, auto, auto;
@@ -450,6 +471,10 @@ Browser grade
color: #222;
}
+ .crush p a {
+ color: lch(30% 73.588 34.159);
+ }
+
@media (width < 1200px) {
.crush {
padding-right: var(--padding);
@@ -616,6 +641,11 @@ Browser grade
font-size: 15px;
}
+ .future a {
+ color: lch(85% 58 205);
+ text-shadow: 0 0 10px lch(85% 58 205 / .6);
+ }
+
@media (width < 1200px) {
.future .inner {
flex-direction: column;
@@ -731,6 +761,10 @@ Browser grade
color: black;
}
+ .parser p:last-of-type a {
+ font-size: 0.8em;
+ }
+
@media (width < 1200px) {
.parser {
flex-direction: column;
diff --git a/website/minification.html b/website/minification.html
new file mode 100644
index 00000000..c9b51522
--- /dev/null
+++ b/website/minification.html
@@ -0,0 +1 @@
+`](https://www.w3.org/TR/css-values-4/#dashed-idents) names can also be enabled using the `dashedIdents` option when calling the Lightning CSS API. When using the CLI, enable the `--css-modules-dashed-idents` flag.
+
+```js
+let { code, map, exports } = transform({
+ // ...
+ cssModules: {
+ dashedIdents: true
+ },
+});
+```
+
+When enabled, CSS variables will be renamed so they don't conflict with variable names defined in other files. Referencing a variable uses the standard `var()` syntax, which Lightning CSS will update to match the locally scoped variable name.
+
+```css
+:root {
+ --accent-color: hotpink;
+}
+
+.button {
+ background: var(--accent-color);
+}
+```
+
+becomes:
+
+```css
+:root {
+ --EgL3uq_accent-color: hotpink;
+}
+
+.EgL3uq_button {
+ background: var(--EgL3uq_accent-color);
+}
+```
+
+You can also reference variables defined in other files using the `from` keyword:
+
+```css
+.button {
+ background: var(--accent-color from "./vars.module.css");
+}
+```
+
+Global variables may be referenced using the `from global` syntax.
+
+```css
+.button {
+ color: var(--color from global);
+}
+```
+
+The same syntax also applies to other CSS values that use the [``](https://www.w3.org/TR/css-values-4/#dashed-idents) syntax. For example, the [@font-palette-values](https://drafts.csswg.org/css-fonts-4/#font-palette-values) rule and [font-palette](https://drafts.csswg.org/css-fonts-4/#propdef-font-palette) property use the `` syntax to define and refer to custom font color palettes, and will be scoped and referenced the same way as CSS variables.
+
+## Custom naming patterns
+
+By default, Lightning CSS prepends the hash of the filename to each class name and identifier in a CSS file. You can configure this naming pattern using the `pattern` when calling the Lightning CSS API. When using the CLI, provide the `--css-modules-pattern` option.
+
+A pattern is a string with placeholders that will be filled in by Lightning CSS. This allows you to add custom prefixes or adjust the naming convention for scoped classes.
+
+```js
+let { code, map, exports } = transform({
+ // ...
+ cssModules: {
+ pattern: 'my-company-[name]-[hash]-[local]'
+ }
+});
+```
+
+The following placeholders are currently supported:
+
+* `[name]` - The base name of the file, without the extension.
+* `[hash]` - A hash of the full file path.
+* `[local]` - The original class name or identifier.
+
+
+
+### CSS Grid
+
+**Note:** CSS grid line names can be ambiguous due to automatic postfixing done by the browser, which generates line names ending with `-start` and `-end` for each grid template area. When using CSS grid, your `"pattern"` configuration must end with the `[local]` placeholder so that these references work correctly.
+
+```js
+let { code, map, exports } = transform({
+ // ...
+ cssModules: {
+ // ❌ [local] must be at the end so that
+ // auto-generated grid line names work
+ pattern: '[local]-[hash]'
+ // ✅ do this instead
+ pattern: '[hash]-[local]'
+ }
+});
+```
+
+```css
+.grid {
+ grid-template-areas: "nav main";
+}
+
+.nav {
+ grid-column-start: nav-start;
+}
+```
+
+
+
+## Unsupported features
+
+Lightning CSS does not currently implement all CSS modules features available in other implementations. Some of these may be added in the future.
+
+* Non-function syntax for the `:local` and `:global` pseudo classes.
+* The `@value` rule – superseded by standard CSS variables.
+* The `:import` and `:export` ICSS rules.
diff --git a/website/pages/docs.md b/website/pages/docs.md
new file mode 100644
index 00000000..e24b64f7
--- /dev/null
+++ b/website/pages/docs.md
@@ -0,0 +1,179 @@
+
+
+# Getting Started
+
+Lightning CSS can be used as a library from JavaScript or Rust, or from a standalone CLI. It can also be wrapped as a plugin in other build tools, and it is the built into [Parcel](https://parceljs.org) out of the box.
+
+## From Node
+
+First, install Lightning CSS using a package manager such as npm or Yarn.
+
+```shell
+npm install --save-dev lightningcss
+```
+
+Once installed, import the module and call one of the Lightning CSS APIs. The `transform` function compiles a CSS stylesheet from a [Node Buffer](https://nodejs.org/api/buffer.html). This example minifies the input CSS, and outputs the compiled code and a source map.
+
+```js
+import { transform } from 'lightningcss';
+
+let { code, map } = transform({
+ filename: 'style.css',
+ code: Buffer.from('.foo { color: red }'),
+ minify: true,
+ sourceMap: true
+});
+```
+
+See [Transpilation](transpilation.html) for details about syntax lowering and vendor prefixing CSS for your browser targets, and the draft syntax support in Lightning CSS. You can also use the `bundle` API to process `@import` rules and inline them – see [Bundling](bundling.html) for details.
+
+The [TypeScript definitions](https://github.com/parcel-bundler/lightningcss/blob/master/node/index.d.ts) also include documentation for all API options.
+
+## From Rust
+
+Lightning CSS can also be used as a Rust library to parse, transform, and minify CSS. See the Rust API docs on [docs.rs](https://docs.rs/lightningcss).
+
+## With Parcel
+
+[Parcel](https://parceljs.org) includes Lightning CSS as the default CSS transformer. You should also add a `browserslist` property to your `package.json`, which defines the target browsers that your CSS will be compiled for.
+
+While Lightning CSS handles the most commonly used PostCSS plugins like `autoprefixer`, `postcss-preset-env`, and CSS modules, you may still need PostCSS for more custom plugins like TailwindCSS. If that's the case, your PostCSS config will be picked up automatically. You can remove the plugins listed above from your PostCSS config, and they'll be handled by Lightning CSS.
+
+You can also configure Lightning CSS in the `package.json` in the root of your project. Currently, three options are supported: [drafts](transpilation.html#draft-syntax), which can be used to enable CSS nesting and custom media queries, [pseudoClasses](transpilation.html#pseudo-class-replacement), which allows replacing some pseudo classes like `:focus-visible` with normal classes that can be applied via JavaScript (e.g. polyfills), and [cssModules](css-modules.html), which enables CSS modules globally rather than only for files ending in `.module.css`, or accepts an options object.
+
+```json
+{
+ "@parcel/transformer-css": {
+ "cssModules": true,
+ "drafts": {
+ "nesting": true,
+ "customMedia": true
+ },
+ "pseudoClasses": {
+ "focusVisible": "focus-ring"
+ }
+ }
+}
+```
+
+See the [Parcel docs](https://parceljs.org/languages/css) for more details.
+
+## From Deno or in browser
+
+The `lightningcss-wasm` package can be used in Deno or directly in browsers. This uses a WebAssembly build of Lightning CSS. Use `TextEncoder` and `TextDecoder` convert code from a string to a typed array and back.
+
+```js
+import init, { transform } from 'https://unpkg.com/lightningcss-wasm';
+
+await init();
+
+let {code, map} = transform({
+ filename: 'style.css',
+ code: new TextEncoder().encode('.foo { color: red }'),
+ minify: true,
+});
+
+console.log(new TextDecoder().decode(code));
+```
+
+Note that the `bundle` and visitor APIs are not currently available in the WASM build.
+
+## With webpack
+
+[css-minimizer-webpack-plugin](https://webpack.js.org/plugins/css-minimizer-webpack-plugin/) has built in support for Lightning CSS. To use it, first install Lightning CSS in your project with a package manager like npm or Yarn:
+
+```shell
+npm install --save-dev lightningcss css-minimizer-webpack-plugin browserslist
+```
+
+Next, configure `css-minifier-webpack-plugin` to use Lightning CSS as the minifier. You can provide options using the `minimizerOptions` object. See [Transpilation](transpilation.html) for details.
+
+```js
+// webpack.config.js
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const lightningcss = require('lightningcss');
+const browserslist = require('browserslist');
+
+module.exports = {
+ optimization: {
+ minimize: true,
+ minimizer: [
+ new CssMinimizerPlugin({
+ minify: CssMinimizerPlugin.lightningCssMinify,
+ minimizerOptions: {
+ targets: lightningcss.browserslistToTargets(browserslist('>= 0.25%'))
+ },
+ }),
+ ],
+ },
+};
+```
+
+## With Vite
+
+[vite-plugin-lightningcss](https://github.com/lawrencecchen/vite-plugin-lightningcss) provides support for [transpilation](transpilation.html) using Lightning CSS in Vite.
+
+First, install it into your project:
+
+```shell
+npm install --save-dev vite-plugin-lightningcss
+```
+
+Then, add it to your Vite config. You can pass options to the `lightningcss` plugin, including a `browserslist` config and other options documented in [Transpilation](transpilation.html).
+
+```js
+// vite.config.ts
+import lightningcss from 'vite-plugin-lightningcss';
+
+export default {
+ plugins: [
+ lightningcss({
+ browserslist: '>= 0.25%',
+ }),
+ ],
+};
+```
+
+Note that Vite uses PostCSS and esbuild internally for processing and minifying CSS even with this plugin, but it can still be a good alterntive to PostCSS plugins like autoprefixer and postcss-preset-env.
+
+## From the CLI
+
+Lightning CSS includes a standalone CLI that can be used to compile, minify, and bundle CSS files. It can be used when you only need to compile CSS, and don't need more advanced functionality from a larger build tool such as code splitting and support for other languages.
+
+To use the CLI, install the `lightningcss-cli` package with an npm compatible package manager:
+
+```shell
+npm install --save-dev lightningcss-cli
+```
+
+Then, you can run the `lightningcss` command via `npx`, `yarn`, or by setting up a script in your package.json.
+
+```json
+{
+ "scripts": {
+ "build": "lightningcss --minify --bundle --targets '>= 0.25%' input.css -o output.css"
+ }
+}
+```
+
+To see all of the available options, use the `--help` argument:
+
+```shell
+npx lightningcss --help
+```
+
+## Error recovery
+
+By default, Lightning CSS is strict, and will error when parsing an invalid rule or declaration. However, sometimes you may encounter a third party library that you can't easily modify, which unintentionally contains invalid syntax, or IE-specific hacks. In these cases, you can enable the `errorRecovery` option (or `--error-recovery` CLI flag). This will skip over invalid rules and declarations, omitting them in the output, and producing a warning instead of an error. You should also open an issue or PR to fix the issue in the library if possible.
+
+## Source maps
+
+Lightning CSS supports generating source maps when compiling, minifying, and bundling your source code to make debugging easier. Use the `sourceMap` option to enable it when using the API, or the `--sourcemap` CLI flag.
+
+If the input CSS came from another compiler such as SASS or Less, you can also pass an input source map to Lightning CSS using the `inputSourceMap` API option. This will map compiled locations back to their location in the original source code.
+
+Finally, the `projectRoot` option can be used to make file paths in source maps relative to a root directory. This makes build stable between machines.
diff --git a/website/pages/minification.md b/website/pages/minification.md
new file mode 100644
index 00000000..0dcd5b79
--- /dev/null
+++ b/website/pages/minification.md
@@ -0,0 +1,284 @@
+
+
+# Minification
+
+Lightning CSS can optimize your CSS to make it smaller, which can help improve the loading performance of your website. When using the Lightning CSS API, enable the `minify` option, or when using the CLI, use the `--minify` flag.
+
+```js
+import { transform } from 'lightningcss';
+
+let { code, map } = transform({
+ // ...
+ minify: true
+});
+```
+
+## Optimizations
+
+The Lightning CSS minifier includes many optimizations to generate the smallest possible output for all rules, properties, and values in your stylesheet. Lightning CSS does not perform any optimizations that change the behavior of your CSS unless it can prove that it is safe to do so. For example, only adjacent style rules are merged to avoid changing the order and potentially breaking the styles.
+
+### Shorthands
+
+Lightning CSS will combine longhand properties into shorthands when all of the constituent longhand properties are defined. For example:
+
+```css
+.foo {
+ padding-top: 1px;
+ padding-left: 2px;
+ padding-bottom: 3px;
+ padding-right: 4px;
+}
+```
+
+minifies to:
+
+```css
+.foo{padding:1px 4px 3px 2px}
+```
+
+This is supported across most shorthand properties defined in the CSS spec.
+
+### Merge adjacent rules
+
+Lightning CSS will merge adjacent style rules with the same selectors or declarations.
+
+```css
+.a {
+ color: red;
+}
+
+.b {
+ color: red;
+}
+
+.c {
+ color: green;
+}
+
+.c {
+ padding: 10px;
+}
+```
+
+becomes:
+
+```css
+.a,.b{color:red}.c{color:green;padding:10px}
+```
+
+In addition to style rules, Lightning CSS will also merge adjacent `@media`, `@supports`, and `@container` rules with identical queries, and adjacent `@layer` rules with the same layer name.
+
+Lightning CSS will not merge rules that are not adjacent, e.g. if another rule is between rules with the same declarations or selectors. This is because changing the order of the rules could cause the behavior of the compiled CSS to differ from the input CSS.
+
+### Remove prefixes
+
+Lightning CSS will remove vendor prefixed properties that are not needed according to your configured browser targets. This is more likely to affect precompiled libraries that include unused prefixes rather than your own code.
+
+For example, when compiling for modern browsers, prefixed versions of the `transition` property will be removed, since the unprefixed version is supported by all browsers.
+
+```css
+.button {
+ -webkit-transition: background 200ms;
+ -moz-transition: background 200ms;
+ transition: background 200ms;
+}
+```
+
+becomes:
+
+```css
+.button{transition:background .2s}
+```
+
+See [Transpilation](transpilation.html) for more on how to configure browser targets.
+
+### Reduce calc
+
+Lightning CSS will reduce `calc()` and other math expressions to constant values where possible. When different units are used, the terms are reduced as much as possible.
+
+```css
+.foo {
+ width: calc(100px * 2);
+ height: calc(((75.37% - 63.5px) - 900px) + (2 * 100px));
+}
+```
+
+minifies to:
+
+```css
+.foo{width:200px;height:calc(75.37% - 763.5px)}
+```
+
+Note that `calc()` expressions with variables are currently left unmodified by Lightning CSS.
+
+### Minify colors
+
+Lightning CSS will minify colors to the smallest format possible without changing the color gamut. For example, named colors as well as `rgb()` and `hsl()` colors are converted to hex notation, using hex alpha notation when supported by your browser targets.
+
+```css
+.foo {
+ color: rgba(255, 255, 0, 0.8)
+}
+```
+
+minifies to:
+
+```css
+.foo{color:#ff0c}
+```
+
+Note that only colors in the RGB gamut (including HSL and HWB) are converted to hex. Colors in other color spaces such as LAB or P3 are preserved.
+
+In addition to static colors, Lightning CSS also supports many color functions such as `color-mix()` and relative colors. When all components are known, Lightning CSS precomputes the result of these functions and outputs a static color. This both reduces the size and makes the syntax compatible with more browser targets.
+
+```css
+.foo {
+ color: rgb(from rebeccapurple r calc(g * 2) b);
+ background: color-mix(in hsl, hsl(120deg 10% 20%), hsl(30deg 30% 40%));
+}
+```
+
+minifies to:
+
+```css
+.foo{color:#669;background:#545c3d}
+```
+
+Note that these conversions cannot be performed when any of the components include CSS variables.
+
+### Normalizing values
+
+Lightning CSS parses all properties and values according to the CSS specification, filling in defaults where appropriate. When minifying, it omits default values where possible since the browser will fill those in when parsing.
+
+```css
+.foo {
+ background: 0% 0% / auto repeat scroll padding-box border-box red;
+}
+```
+
+minifies to:
+
+```css
+.foo{background:red}
+```
+
+In addition to removing defaults, Lightning CSS also omits quotes, whitespace, and optional delimeters where possible. It also converts values to shorter equivalents where possible.
+
+```css
+.foo {
+ font-weight: bold;
+ background-position: center center;
+ background-image: url("logo.png");
+}
+```
+
+minifies to:
+
+```css
+.foo{background-image:url(logo.png);background-position:50%;font-weight:700}
+```
+
+### CSS grid templates
+
+Lightning CSS will minify the `grid-template-areas` property to remove unnecessary whitespace and placeholders in template strings.
+
+```css
+.foo {
+ grid-template-areas: "head head"
+ "nav main"
+ "foot ....";
+}
+```
+
+minifies to:
+
+```css
+.foo{grid-template-areas:"head head""nav main""foot."}
+```
+
+### Reduce transforms
+
+Lightning CSS will reduce CSS transform functions to shorter equivalents where possible.
+
+```css
+.foo {
+ transform: translate(0, 50px);
+}
+```
+
+minifies to:
+
+```css
+.foo{transform:translateY(50px)}
+```
+
+In addition, the `matrix()` and `matrix3d()` functions are converted to their equivalent transforms when shorter:
+
+```css
+.foo {
+ transform: matrix3d(1, 0, 0, 0, 0, 0.707106, 0.707106, 0, 0, -0.707106, 0.707106, 0, 100, 100, 10, 1);
+}
+```
+
+minifies to:
+
+```css
+.foo{transform:translate3d(100px,100px,10px)rotateX(45deg)}
+```
+
+When a matrix would be shorter, individual transform functions are converted to a single matrix instead:
+
+```css
+.foo {
+ transform: translate(100px, 200px) rotate(45deg) skew(10deg) scale(2);
+}
+```
+
+minifies to:
+
+```css
+.foo{transform:matrix(1.41421,1.41421,-1.16485,1.66358,100,200)}
+```
+
+## Unused symbols
+
+If you know that certain class names, ids, `@keyframes` rules, CSS variables, or other CSS identifiers are unused (for example as part of a larger full project analysis), you can use the `unusedSymbols` option to remove them.
+
+```js
+let { code, map } = transform({
+ // ...
+ minify: true,
+ unusedSymbols: ['foo', 'fade-in', '--color']
+});
+```
+
+With this configuration, the following CSS:
+
+```css
+:root {
+ --color: red;
+}
+
+.foo {
+ color: var(--color);
+}
+
+@keyframes fade-in {
+ from { opacity: 0 }
+ to { opacity: 1 }
+}
+
+.bar {
+ color: green;
+}
+```
+
+minifies to:
+
+```css
+.bar{color:green}
+```
diff --git a/website/pages/transforms.md b/website/pages/transforms.md
new file mode 100644
index 00000000..eb155554
--- /dev/null
+++ b/website/pages/transforms.md
@@ -0,0 +1,310 @@
+
+
+# Custom transforms
+
+The Lightning CSS visitor API can be used to implement custom transform plugins in JavaScript. It is designed to enable custom non-standard extensions to CSS, making your code easier to author while shipping standard CSS to the browser. You can implement extensions such as custom shorthand properties or additional at-rules (e.g. mixins), build time transforms (e.g. convert units, inline constants, etc.), CSS rule analysis, and much more.
+
+Custom transforms have a build time cost: it can be around 2x slower to compile with a JS visitor than without. This means visitors should generally be used to implement custom, non-standard CSS extensions. Common standard transforms such as compiling modern standard CSS features (and draft specs) for older browsers should be done in Rust as part of Lightning CSS itself. Please open an issue if there's a feature we don't handle yet.
+
+## Visitors
+
+Custom transforms are implemented by passing a `visitor` object to the Lightning CSS Node API. A visitor includes one or more functions which are called for specific value types such as `Rule`, `Property`, or `Length`. In general, you should try to be as specific as possible about the types of values you want to handle. This way, Lightning CSS needs to call into JS as infrequently as possible, with the smallest objects possible, which improves performance. See the [TypeScript definitions](https://github.com/parcel-bundler/lightningcss/blob/master/node/index.d.ts#L101-L129) for a full list of available visitor functions.
+
+Visitors can return a new value to update it. Each visitor accepts a different type of value, and usually expects the same type in return. This example multiplies all lengths by 2:
+
+```js
+import { transform } from 'lightningcss';
+
+let res = transform({
+ filename: 'test.css',
+ minify: true,
+ code: Buffer.from(`
+ .foo {
+ width: 12px;
+ }
+ `),
+ visitor: {
+ Length(length) {
+ return {
+ unit: length.unit,
+ value: length * 2
+ }
+ }
+ }
+});
+
+assert.equal(res.code.toString(), '.foo{width:24px}');
+```
+
+Some visitor functions accept an array as a return value, enabling you to replace one value with multiple, or remove a value by returning an empty array. You can also provide an object instead of a function to further reduce the number of times a visitor is called. For example, when providing a `Property` visitor, you can use an object with keys for specific property names. This improves performance by only calling your visitor function when needed.
+
+This example adds `-webkit-overflow-scrolling: touch` before any `overflow` properties.
+
+```js
+let res = transform({
+ filename: 'test.css',
+ minify: true,
+ code: Buffer.from(`
+ .foo {
+ overflow: auto;
+ }
+ `),
+ visitor: {
+ Property: {
+ overflow(property) {
+ return [{
+ property: 'custom',
+ value: {
+ name: '-webkit-overflow-scrolling',
+ value: [{
+ type: 'token',
+ value: {
+ type: 'ident',
+ value: 'touch'
+ }
+ }]
+ }
+ }, property];
+ },
+ }
+ }
+});
+
+assert.equal(res.code.toString(), '.foo{-webkit-overflow-scrolling:touch;overflow:auto}');
+```
+
+## Value types
+
+The Lightning CSS AST is very detailed – each CSS property has a specific value type with all parts fully normalized. For example, a shorthand property such as `background` includes values for all of its sub-properties such as `background-color`, `background-image`, `background-position`, etc. This makes it both easier and faster for custom transforms to correctly handle all value types without reimplementing parsing. See the [TypeScript definitions](https://github.com/parcel-bundler/lightningcss/blob/master/node/ast.d.ts) for full documentation of all values.
+
+Known property values can be either _parsed_ or _unparsed_. Parsed values are fully expanded following the CSS specification. Unparsed values could not be parsed according to the grammar, and are stored as raw CSS tokens. This may occur because the value is invalid, or because it included unknown values such as CSS variables. Each property visitor function will need to handle both types of values.
+
+```js
+transform({
+ code: Buffer.from(`
+ .foo { width: 12px }
+ .bar { width: var(--w) }
+ `),
+ visitor: {
+ Property: {
+ width(v) {
+ if (v.property === 'unparsed') {
+ // Handle unparsed value, e.g. `var(--w)`
+ } else {
+ // Handle parsed value, e.g. `12px`
+ }
+ }
+ }
+ }
+});
+```
+
+Unknown properties, including custom properties, have the property type "custom". These values are also stored as raw CSS tokens. To visit custom properties, use the `custom` visitor function, or an object to filter by name. For example, to handle a custom `size` property and expand it to `width` and `height`, the following transform might be used.
+
+```js
+let res = transform({
+ minify: true,
+ code: Buffer.from(`
+ .foo {
+ size: 12px;
+ }
+ `),
+ visitor: {
+ Property: {
+ custom: {
+ size(property) {
+ // Handle the size property when the value is a length.
+ if (property.value[0].type === 'length') {
+ let value = {
+ type: 'length-percentage',
+ value: { type: 'dimension', value: property.value[0].value }
+ };
+
+ return [
+ { property: 'width', value },
+ { property: 'height', value }
+ ];
+ }
+ }
+ }
+ }
+ }
+});
+
+assert.equal(res.code.toString(), '.foo{width:12px;height:12px}');
+```
+
+## Entry and exit visitors
+
+By default, visitors are called when traversing downward through the tree (a pre-order traversal). This means each node is visited before its children. Sometimes it is useful to process a node after its children instead (a post-order traversal). This can be done by using an `Exit` visitor function, such as `FunctionExit`.
+
+For example, if you had a function visitor to double a length argument, and a visitor to replace an environment variable with a value, you could use an exit visitor to process the function after its arguments.
+
+```js
+let res = transform({
+ filename: 'test.css',
+ minify: true,
+ code: Buffer.from(`
+ .foo {
+ padding: double(env(--branding-padding));
+ }
+ `),
+ visitor: {
+ FunctionExit: {
+ // This will run after the EnvironmentVariable visitor, below.
+ double(f) {
+ if (f.arguments[0].type === 'length') {
+ return {
+ type: 'length',
+ value: {
+ unit: f.arguments[0].value.unit,
+ value: f.arguments[0].value.value * 2
+ }
+ };
+ }
+ }
+ },
+ EnvironmentVariable: {
+ // This will run before the FunctionExit visitor, above.
+ '--branding-padding': () => ({
+ type: 'length',
+ value: {
+ unit: 'px',
+ value: 20
+ }
+ })
+ }
+ }
+});
+
+assert.equal(res.code.toString(), '.foo{padding:40px}');
+```
+
+## Composing visitors
+
+Multiple visitors can be combined into one using the `composeVisitors` function. This lets you reuse visitors between projects by publishing them as plugins. The AST is visited in a single pass, running the functions from each visitor object as if they were written together.
+
+```js
+import { transform, composeVisitors } from 'lightningcss';
+
+let environmentVisitor = {
+ EnvironmentVariable: {
+ '--branding-padding': () => ({
+ type: 'length',
+ value: {
+ unit: 'px',
+ value: 20
+ }
+ })
+ }
+};
+
+let doubleFunctionVisitor = {
+ FunctionExit: {
+ double(f) {
+ if (f.arguments[0].type === 'length') {
+ return {
+ type: 'length',
+ value: {
+ unit: f.arguments[0].value.unit,
+ value: f.arguments[0].value.value * 2
+ }
+ };
+ }
+ }
+ }
+};
+
+let res = transform({
+ filename: 'test.css',
+ minify: true,
+ code: Buffer.from(`
+ .foo {
+ padding: double(env(--branding-padding));
+ }
+ `),
+ visitor: composeVisitors([environmentVisitor, doubleFunctionVisitor])
+});
+
+assert.equal(res.code.toString(), '.foo{padding:40px}');
+```
+
+Each visitor object has the opportunity to visit every value once. If a visitor returns a new value, that value is visited by the other visitor objects but not again by the original visitor that created it. If other visitors subsequently modify the value, the previous visitors will not revisit the value. This is to avoid infinite loops.
+
+## Examples
+
+For examples of visitors that perform a variety of real world tasks, see the Lightning CSS [visitor tests](https://github.com/parcel-bundler/lightningcss/blob/master/node/test/visitor.test.mjs).
+
+## Publishing a plugin
+
+Visitor plugins can be published to npm in order to share them with others. Plugin packages simply consist of an exported visitor object, which users can compose with other plugins via the `composeVisitors` function as described above.
+
+```js
+// lightningcss-plugin-double-function
+export default {
+ FunctionExit: {
+ double(f) {
+ // ...
+ }
+ }
+};
+```
+
+Plugins can also export a function in order to accept options.
+
+```js
+// lightningcss-plugin-env
+export default (values) => ({
+ EnvironmentVariable(env) {
+ return values[env.name];
+ }
+});
+```
+
+Plugin package names should start with `lightningcss-plugin-` and be descriptive about what they do, e.g. `lightningcss-plugin-double-function`. In addition, they should include the `lightningcss-plugin` keyword in their package.json so people can find them on npm.
+
+```json
+{
+ "name": "lightningcss-plugin-double-function",
+ "keywords": ["lightningcss-plugin"],
+ "main": "plugin.mjs"
+}
+```
+
+## Using plugins
+
+To use a published visitor plugin, install the package from npm, import it, and use the `composeVisitors` function as described above.
+
+```js
+import { transform, composeVisitors } from 'lightningcss';
+import environmentVisitor from 'lightningcss-plugin-environment';
+import doubleFunctionVisitor from 'lightningcss-plugin-double-function';
+
+let res = transform({
+ filename: 'test.css',
+ minify: true,
+ code: Buffer.from(`
+ .foo {
+ padding: double(env(--branding-padding));
+ }
+ `),
+ visitor: composeVisitors([
+ environmentVisitor({
+ '--branding-padding': {
+ type: 'length',
+ value: {
+ unit: 'px',
+ value: 20
+ }
+ }
+ }),
+ doubleFunctionVisitor
+ ])
+});
+
+assert.equal(res.code.toString(), '.foo{padding:40px}');
+```
diff --git a/website/pages/transpilation.md b/website/pages/transpilation.md
new file mode 100644
index 00000000..04995775
--- /dev/null
+++ b/website/pages/transpilation.md
@@ -0,0 +1,569 @@
+
+
+# Transpilation
+
+Lightning CSS includes support for transpiling modern CSS syntax to support older browsers, including vendor prefixing and syntax lowering.
+
+## Browser targets
+
+By default Lightning CSS does not perform any transpilation of CSS syntax for older browsers. This means that if you write your code using modern syntax or without vendor prefixes, that’s what Lightning CSS will output. You can declare your app’s supported browsers using the `targets` option. When this is declared, Lightning CSS will transpile your code accordingly to ensure compatibility with your supported browsers.
+
+Targets are defined using an object that specifies the minimum version of each browser you want to support. The easiest way to build a targets object is to use [browserslist](https://browserslist.dev). This lets you use a query that automatically updates over time as new browser versions are released, market share changes, etc. The following example will return a targets object listing browsers with >= 0.25% market share.
+
+```js
+import browserslist from 'browserslist';
+import { transform, browserslistToTargets } from 'lightningcss';
+
+// Call this once per build.
+let targets = browserslistToTargets(browserslist('>= 0.25%'));
+
+// Use `targets` for each file you transform.
+let { code, map } = transform({
+ // ...
+ targets
+});
+```
+
+For the best performance, you should call browserslist once for your whole build process, and reuse the same `targets` object when calling `transform` for each file.
+
+Under the hood, `targets` are represented using an object that maps browser names to minimum versions. Version numbers are represented using a single 24-bit number, with one semver component (major, minor, patch) per byte. For example, this targets object would represent Safari 13.2.0.
+
+```js
+let targets = {
+ safari: (13 << 16) | (2 << 8)
+};
+```
+
+### CLI
+
+When using the CLI, targets can be provided by passing a [browserslist](https://browserslist.dev) query to the `--targets` option. Alternatively, if the `--browserslist` option is provided, then `lightningcss` finds browserslist configuration, selects queries by environment and loads the resulting queries as targets.
+
+Configuration discovery and targets resolution is modeled after the original `browserslist` Node package. The configuration is resolved in the following order:
+
+- If a `BROWSERSLIST` environment variable is present, then load targets from its value.
+- If a `BROWSERSLIST_CONFIG` environment variable is present, then load the browserslist configuration from the file at the provided path.
+- If none of the above apply, then find, parse and use targets from the first `browserslist`, `.browserslistrc`, or `package.json` configuration file in any parent directory.
+
+Browserslist configuration files may contain sections denoted by square brackets. Use these to specify different targets for different environments. Targets which are not placed in a section are added to `defaults` and used if no section matches the environment.
+
+```ini
+# Defaults, applied when no other section matches the provided environment.
+firefox ESR
+
+# Targets applied only to the staging environment.
+[staging]
+samsung >= 4
+```
+
+When using parsed configuration from `browserslist`, `.browserslistrc`, or `package.json` configuration files, the environment is determined by:
+
+- the `BROWSERSLIST_ENV` environment variable if present
+- the `NODE_ENV` environment variable if present
+- otherwise `"production"` is used.
+
+If no targets are found for the resulting environment, then the `defaults` configuration section is used.
+
+## Vendor prefixing
+
+Based on your configured browser targets, Lightning CSS automatically adds vendor prefixed fallbacks for many CSS features. For example, when using the [`image-set()`](https://developer.mozilla.org/en-US/docs/Web/CSS/image/image-set()) function, Lightning CSS will output a fallback `-webkit-image-set()` value as well, since Chrome does not yet support the unprefixed value.
+
+```css
+.logo {
+ background: image-set(url(logo.png) 2x, url(logo.png) 1x);
+}
+```
+
+compiles to:
+
+```css
+.logo {
+ background: -webkit-image-set(url(logo.png) 2x, url(logo.png) 1x);
+ background: image-set("logo.png" 2x, "logo.png");
+}
+```
+
+In addition, if your CSS source code (or more likely a library) includes unnecessary vendor prefixes, Lightning CSS will automatically remove them to reduce bundle sizes. For example, when compiling for modern browsers, prefixed versions of the `transition` property will be removed, since the unprefixed version is supported by all browsers.
+
+```css
+.button {
+ -webkit-transition: background 200ms;
+ -moz-transition: background 200ms;
+ transition: background 200ms;
+}
+```
+
+becomes:
+
+```css
+.button {
+ transition: background .2s;
+}
+```
+
+## Syntax lowering
+
+Lightning CSS automatically compiles many modern CSS syntax features to more compatible output that is supported in your target browsers.
+
+### Color mix
+
+The [`color-mix()`](https://drafts.csswg.org/css-color-5/#color-mix) function allows you to mix two colors by the specified amount in a certain color space. Lightning CSS will evaluate this function statically when all components are known (i.e. not variables).
+
+```css
+.foo {
+ color: color-mix(in hsl, hsl(120deg 10% 20%) 25%, hsl(30deg 30% 40%));
+}
+```
+
+compiles to:
+
+```css
+.foo {
+ color: #706a43;
+}
+```
+
+### Relative colors
+
+Relative colors allow you to modify the components of a color using math functions. In addition, you can convert colors between color spaces. Lightning CSS performs these calculations statically when all components are known (i.e. not variables).
+
+This example lightens `slateblue` by 10% in the LCH color space.
+
+```css
+.foo {
+ color: lch(from slateblue calc(l + 10%) c h);
+}
+```
+
+compiles to:
+
+```css
+.foo {
+ color: lch(54.5711% 65.7776 296.794);
+}
+```
+
+### LAB colors
+
+Lightning CSS will convert [`lab()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/lab()), [`lch()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/lch()), [`oklab()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklab), and [`oklch()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch) colors to fallback values for unsupported browsers when needed. These functions allow you to define colors in higher gamut color spaces, making it possible to use colors that cannot be represented by RGB.
+
+```css
+.foo {
+ color: lab(40% 56.6 39);
+}
+```
+
+compiles to:
+
+```css
+.foo {
+ color: #b32323;
+ color: color(display-p3 .643308 .192455 .167712);
+ color: lab(40% 56.6 39);
+}
+```
+
+As shown above, a `display-p3` fallback is included in addition to RGB when a target browser supports the P3 color space. This preserves high color gamut colors when possible.
+
+### Color function
+
+Lightning CSS converts the [`color()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color()) function to RGB when needed for compatibility with older browsers. This allows you to use predefined color spaces such as `display-p3`, `xyz`, and `a98-rgb`.
+
+```css
+.foo {
+ color: color(a98-rgb 0.44091 0.49971 0.37408);
+}
+```
+
+compiles to:
+
+```css
+.foo {
+ background-color: #6a805d;
+ background-color: color(a98-rgb .44091 .49971 .37408);
+}
+```
+
+### HWB colors
+
+Lightning CSS converts [`hwb()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hwb) colors to RGB.
+
+```css
+.foo {
+ color: hwb(194 0% 0%);
+}
+```
+
+compiles to:
+
+```css
+.foo {
+ color: #00c4ff;
+}
+```
+
+### Color notation
+
+Space separated color notation is converted to hex when needed. Hex colors with alpha are also converted to `rgba()` when unsupported by all targets.
+
+```css
+.foo {
+ color: #7bffff80;
+ background: rgb(123 255 255);
+}
+```
+
+compiles to:
+
+```css
+.foo {
+ color: rgba(123, 255, 255, .5);
+ background: #7bffff;
+}
+```
+
+### Logical properties
+
+CSS [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties) allow you to define values in terms of writing direction, so that UIs mirror in right-to-left languages. Lightning CSS will compile these to use the `:dir()` selector when unsupported. If the `:dir()` selector is unsupported, it is compiled as described [below](#%3Adir()-selector).
+
+```css
+.foo {
+ border-start-start-radius: 20px
+}
+```
+
+compiles to:
+
+```css
+.foo:dir(ltr) {
+ border-top-left-radius: 20px;
+}
+
+.foo:dir(rtl) {
+ border-top-right-radius: 20px;
+}
+```
+
+
+### :dir() selector
+
+The [`:dir()`](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir) selector matches elements based on the writing direction. Lightning CSS compiles this to use the `:lang()` selector when unsupported, which approximates this behavior as closely as possible.
+
+```css
+a:dir(rtl) {
+ color:red
+}
+```
+
+compiles to:
+
+```css
+a:lang(ae, ar, arc, bcc, bqi, ckb, dv, fa, glk, he, ku, mzn, nqo, pnb, ps, sd, ug, ur, yi) {
+ color: red;
+}
+```
+
+If multiple arguments to `:lang()` are unsupported, it is compiled as described [below](#%3Alang()-selector).
+
+### :lang() selector
+
+The [`:lang()`](https://developer.mozilla.org/en-US/docs/Web/CSS/:lang) selector matches elements based on their language. Some browsers do not support multiple arguments to this function, so Lightning CSS compiles them to use `:is()` when needed.
+
+```css
+a:lang(en, fr) {
+ color:red
+}
+```
+
+compiles to:
+
+```css
+a:is(:lang(en), :lang(fr)) {
+ color: red;
+}
+```
+
+When the `:is()` selector is unsupported, it is compiled as described [below](#%3Ais()-selector).
+
+### :is() selector
+
+The [`:is()`](https://developer.mozilla.org/en-US/docs/Web/CSS/:is) matches when one of its arguments matches. Lightning CSS falls back to the `:-webkit-any` and `:-moz-any` prefixed selectors.
+
+```css
+p:is(:first-child, .lead) {
+ margin-top: 0;
+}
+```
+
+compiles to:
+
+```css
+p:-webkit-any(:first-child, .lead) {
+ margin-top: 0;
+}
+
+p:-moz-any(:first-child, .lead) {
+ margin-top: 0;
+}
+
+p:is(:first-child, .lead) {
+ margin-top: 0;
+}
+```
+
+
+
+**Note**: The prefixed versions of these selectors do not support complex selectors (e.g. selectors with combinators). Lightning CSS will only output prefixes if the arguments are simple selectors. Complex selectors in `:is()` are not currently compiled.
+
+
+
+### :not() selector
+
+The [`:not()`](https://developer.mozilla.org/en-US/docs/Web/CSS/:not) selector can accept multiple arguments, and matches if none of the arguments match. Some older browsers only support a single argument, so Lightning CSS compiles this when needed.
+
+```css
+p:not(:first-child, .lead) {
+ margin-top: 1em;
+}
+```
+
+compiles to:
+
+```css
+p:not(:first-child):not(.lead) {
+ margin-top: 1em;
+}
+```
+
+### Math functions
+
+Lightning CSS simplifies [math functions](https://w3c.github.io/csswg-drafts/css-values/#math) including `clamp()`, `round()`, `rem()`, `mod()`, `abs()`, and `sign()`, [trigonometric functions](https://w3c.github.io/csswg-drafts/css-values/#trig-funcs) including `sin()`, `cos()`, `tan()`, `asin()`, `acos()`, `atan()`, and `atan2()`, and [exponential functions](https://w3c.github.io/csswg-drafts/css-values/#exponent-funcs) including `pow()`, `log()`, `sqrt()`, `exp()`, and `hypot()` when all arguments are known (i.e. not variables). In addition, the numeric constants `e`, `pi`, `infinity`, `-infinity`, and `NaN` are supported in all calculations.
+
+```css
+.foo {
+ width: round(calc(100px * sin(pi / 4)), 5px);
+}
+```
+
+compiles to:
+
+```css
+.foo {
+ width: 70px;
+}
+```
+
+### Media query ranges
+
+[Media query range syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#syntax_improvements_in_level_4) allows defining media queries using comparison operators to create ranges and intervals. Lightning CSS compiles this to the corresponding `min` and `max` media features when needed.
+
+```css
+@media (480px <= width <= 768px) {
+ .foo { color: red }
+}
+```
+
+compiles to:
+
+```css
+@media (min-width: 480px) and (max-width: 768px) {
+ .foo { color: red }
+}
+```
+
+### Shorthands
+
+Lightning CSS compiles the following shorthands to corresponding longhands when the shorthand is not supported in all target browsers:
+
+* Alignment shorthands: [place-items](https://developer.mozilla.org/en-US/docs/Web/CSS/place-items), [place-content](https://developer.mozilla.org/en-US/docs/Web/CSS/place-content), [place-self](https://developer.mozilla.org/en-US/docs/Web/CSS/place-self)
+* [Overflow shorthand](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) with multiple values (e.g. `overflow: hidden auto`)
+* [text-decoration](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration) with thickness, style, color, etc.
+* Two value [display](https://developer.mozilla.org/en-US/docs/Web/CSS/display) syntax (e.g. `display: inline flex`)
+
+### Double position gradients
+
+CSS gradients support using two positions in a color stop to repeat the color at two subsequent positions. When unsupported, Lightning CSS compiles it.
+
+```css
+.foo {
+ background: linear-gradient(green, red 30% 40%, pink);
+}
+```
+
+compiles to:
+
+```css
+.foo {
+ background: linear-gradient(green, red 30%, red 40%, pink);
+}
+```
+
+### system-ui font
+
+The `system-ui` font allows you to use the operating system default font. When unsupported, Lightning CSS compiles it to a font stack that works across major platforms.
+
+```css
+.foo {
+ font-family: system-ui;
+}
+```
+
+compiles to:
+
+```css
+.foo {
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue;
+}
+```
+
+## Draft syntax
+
+Lightning CSS can also be configured to compile several draft specs that are not yet available natively in any browser. Because these are drafts and the syntax can still change, they must be enabled manually in your project.
+
+### Nesting
+
+The [CSS Nesting](https://drafts.csswg.org/css-nesting/) draft spec enables style rules to be nested, with the selectors of the child rules extending the parent selector in some way. This is very commonly supported by CSS pre-processors like SASS, but with this spec, it will eventually be supported natively in browsers. Lightning CSS compiles this syntax to un-nested style rules that are supported in all browsers today.
+
+Because nesting is a draft, it is not enabled by default. To use it, enable the `nesting` option under `drafts` when calling the Lightning CSS API. When using the CLI, enable the `--nesting` flag.
+
+```js
+let { code, map } = transform({
+ // ...
+ drafts: {
+ nesting: true
+ }
+});
+```
+
+Once enabled, any CSS file in your project can use nested style rules.
+
+```css
+.foo {
+ color: blue;
+
+ .bar {
+ color: red;
+ }
+}
+```
+
+is equivalent to:
+
+```css
+.foo {
+ color: blue;
+}
+
+.foo .bar {
+ color: red;
+}
+```
+
+[Conditional rules](https://drafts.csswg.org/css-nesting/#conditionals) such as `@media` may also be nested within a style rule, without repeating the selector. For example:
+
+```css
+.foo {
+ display: grid;
+
+ @media (orientation: landscape) {
+ grid-auto-flow: column;
+ }
+}
+```
+
+is equivalent to:
+
+```css
+.foo {
+ display: grid;
+}
+
+@media (orientation: landscape) {
+ .foo {
+ grid-auto-flow: column;
+ }
+}
+```
+
+When a nested rule starts with an element selector, it may be ambiguous with a property. In these cases, the spec requires the selector be prefixed with a [nesting selector](https://drafts.csswg.org/css-nesting/#nest-selector) (`&`).
+
+```css
+.foo {
+ color: red;
+
+ & ul {
+ color: blue;
+ }
+}
+```
+
+is equivalent to:
+
+```css
+.foo {
+ color: red;
+}
+
+.foo ul {
+ color: blue;
+}
+```
+
+### Custom media queries
+
+Support for [custom media queries](https://drafts.csswg.org/mediaqueries-5/#custom-mq) is included in the Media Queries Level 5 draft spec. This allows you to define media queries that are reused in multiple places within a CSS file. Lightning CSS will perform this substitution ahead of time when this feature is enabled.
+
+For example:
+
+```css
+@custom-media --modern (color), (hover);
+
+@media (--modern) and (width > 1024px) {
+ .a { color: green; }
+}
+```
+
+is equivalent to:
+
+```css
+@media ((color) or (hover)) and (width > 1024px) {
+ .a { color: green; }
+}
+```
+
+Because custom media queries are a draft, they are not enabled by default. To use them, enable the `customMedia` option under `drafts` when calling the Lightning CSS API. When using the CLI, enable the `--custom-media` flag.
+
+```js
+let { code, map } = transform({
+ // ...
+ drafts: {
+ customMedia: true
+ }
+});
+```
+
+## Pseudo class replacement
+
+Lightning CSS supports replacing CSS pseudo classes such as `:focus-visible` with normal CSS classes that can be applied using JavaScript. This makes it possible to polyfill these pseudo classes for older browsers.
+
+```js
+let { code, map } = transform({
+ // ...
+ pseudoClasses: {
+ focusVisible: 'focus-visible'
+ }
+});
+```
+
+The above configuration will result in the `:focus-visible` pseudo class in all selectors being replaced with the `.focus-visible` class. This enables you to use a JavaScript [polyfill](https://github.com/WICG/focus-visible), which will apply the `.focus-visible` class as appropriate.
+
+The following pseudo classes may be configured as shown above:
+
+* `hover` – corresponds to the `:hover` pseudo class
+* `active` – corresponds to the `:active` pseudo class
+* `focus` – corresponds to the `:focus` pseudo class
+* `focusVisible` – corresponds to the `:focus-visible` pseudo class
+* `focusWithin` – corresponds to the `:focus-within` pseudo class
diff --git a/website/synthwave.css b/website/synthwave.css
new file mode 100644
index 00000000..04ac3fe2
--- /dev/null
+++ b/website/synthwave.css
@@ -0,0 +1,138 @@
+/*
+ * Based on Synthwave '84 Theme originally by Robb Owen [@Robb0wen] for Visual Studio Code
+ * Originally ported for PrismJS by Marc Backes [@themarcba]
+ */
+
+pre[class*="language-"] {
+ color: lab(64% 103 0);
+ text-shadow: 0 0 10px lab(64% 103 0 / .5);
+ background: rgb(255 255 255 / .05);
+ display: block;
+ padding: 20px;
+ border-radius: 8px;
+ font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+ font-size: 13px;
+ text-align: left;
+ white-space: pre-wrap;
+ word-spacing: normal;
+ word-break: normal;
+ word-wrap: normal;
+ line-height: 1.5;
+
+ -moz-tab-size: 4;
+ -o-tab-size: 4;
+ tab-size: 4;
+
+ -webkit-hyphens: none;
+ -moz-hyphens: none;
+ -ms-hyphens: none;
+ hyphens: none;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+ padding: 1em;
+ margin: .5em 0;
+ overflow: auto;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+ padding: .1em;
+ border-radius: .3em;
+ white-space: normal;
+}
+
+.token.comment,
+.token.block-comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+ color: #8e8e8e;
+ text-shadow: none;
+}
+
+.token.punctuation {
+ color: #ccc;
+}
+
+.token.tag,
+.token.attr-name,
+.token.namespace,
+.token.number,
+.token.unit,
+.token.hexcode,
+.token.deleted,
+.token.function {
+ color: lch(65% 85 35);
+ text-shadow: 0 0 10px lch(65% 85 35 / .5);
+}
+
+.token.property,
+.token.selector {
+ color: lch(85% 58 205);
+ text-shadow: 0 0 10px lch(85% 58 205 / .5);
+}
+
+.token.function-name {
+ color: #6196cc;
+}
+
+.token.boolean,
+.token.selector .token.id {
+ color: #fdfdfd;
+ text-shadow: 0 0 2px #001716, 0 0 3px #03edf975, 0 0 5px #03edf975, 0 0 8px #03edf975;
+}
+
+.token.class-name {
+ color: #fff5f6;
+ text-shadow: 0 0 2px #000, 0 0 10px #fc1f2c75, 0 0 5px #fc1f2c75, 0 0 25px #fc1f2c75;
+}
+
+.token.constant,
+.token.symbol {
+ color: lab(64% 103 0);
+ text-shadow: 0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3;
+}
+
+.token.important,
+.token.atrule,
+.token.keyword,
+.token.selector .token.class,
+.token.builtin {
+ color: #f4eee4;
+ text-shadow: 0 0 2px #393a33, 0 0 8px #f39f0575, 0 0 2px #f39f0575;
+}
+
+.token.string,
+.token.string-property,
+.token.char,
+.token.attr-value,
+.token.regex,
+.token.variable,
+.token.url {
+ color: lch(85% 82.34 80.104);
+ text-shadow: 0 0 10px lch(85% 82.34 80.104 / .5);
+}
+
+.token.operator,
+.token.entity {
+ color: #67cdcc;
+}
+
+.token.important,
+.token.bold {
+ font-weight: bold;
+}
+
+.token.italic {
+ font-style: italic;
+}
+
+.token.entity {
+ cursor: help;
+}
+
+.token.inserted {
+ color: green;
+}
diff --git a/website/transforms.html b/website/transforms.html
new file mode 100644
index 00000000..42083909
--- /dev/null
+++ b/website/transforms.html
@@ -0,0 +1 @@
+