diff --git a/website/pages/bundling.md b/website/pages/bundling.md new file mode 100644 index 00000000..0f4e5248 --- /dev/null +++ b/website/pages/bundling.md @@ -0,0 +1,150 @@ +[[toc]] + +# Bundling + +Lightning CSS supports bundling dependencies referenced by CSS `@import` rules into a single output file. When calling the Lightning CSS API, use the `bundle` or `bundleAsync` function instead of `transform`. When using the CLI, enable the `--bundle` flag. + +This API requires filesystem access, so it does not accept `code` directly via the API. Instead, the `filename` option is used to read the entry file directly. + +```js +import { bundle } from 'lightningcss'; + +let { code, map } = bundle({ + filename: 'style.css', + minify: true +}); +``` + +## Dependencies + +CSS files can contain dependencies referenced by `@import` syntax, as well as references to classes in other files via [CSS modules](css-modules.html). + +### @import + +The [`@import`](https://developer.mozilla.org/en-US/docs/Web/CSS/@import) at-rule can be used to inline another CSS file into the same CSS bundle as the containing file. This means that at runtime a separate network request will not be needed to load the dependency. Referenced files should be relative to the containing CSS file. + +```css +@import 'other.css'; +``` + +`@import` rules must appear before all other rules in a stylesheet except `@charset` and `@layer` statement rules. Later import rules will cause an error to be emitted. + +### CSS modules + +Dependencies are also bundled when referencing another file via [CSS modules composition](css-modules.html#dependencies) or [external variables](css-modules.html#local-css-variables). See the linked CSS modules documentation for more details. + +## Conditional imports + +The `@import` rule can be conditional by appending a media query or `supports()` query. Lightning CSS will preserve this behavior by wrapping the inlined rules in `@media` and `@supports` rules as needed. + +```css +/* a.css */ +@import "b.css" print; +@import "c.css" supports(display: grid); + +.a { color: red } +``` + +```css +/* b.css */ +.b { color: green } +``` + +```css +/* c.css */ +.c { display: grid } +``` + +compiles to: + +```css +@media print { + .b { color: green } +} + +@supports (display: grid) { + .c { display: grid } +} + +.a { color: red } +``` + +

+ +**Note**: There are currently two cases where combining conditional rules is unsupported: + +1. Importing the same CSS file with only a media query, and again with only a supports query. This would require duplicating all rules in the file. +2. Importing a file with a negated media type (e.g. `not print`) within another file with a negated media type. + +

+ +## Cascade layers + +Imported CSS rules can also be placed into a CSS cascade layer, allowing you to control the order they apply. Nested imports will be placed into nested layers. + +```css +/* a.css */ +@import "b.css" layer(foo); +.a { color: red } +``` + +```css +/* b.css */ +@import "c.css" layer(bar); +.b { color: green } +``` + +```css +/* c.css */ +.c { color: green } +``` + +compiles to: + +```css +@layer foo.bar { + .c { color: green } +} + +@layer foo { + .b { color: green } +} + +.a { color: red } +``` + +

+ +**Note**: There are two unsupported layer combinations that will currently emit a compiler error: + +1. Importing the same CSS file with different layer names. This would require duplicating all imported rules multiple times. +2. Nested anonymous layers. + +

+ +## Bundling order + +When `@import` rules are processed in browsers, if the same file appears more than once, the _last_ instance applies. This is the opposite from behavior in other languages like JavaScript. Lightning CSS folllows this behavior when bundling so that the output behaves the same as if it were not bundled. + +## Custom resolvers + +The `bundleAsync` API is an asynchronous version of `bundle`, which also accepts a custom `resolver` object. This allows you to provide custom JavaScript functions for resolving `@import` specifiers to file paths, and reading files from the file system (or another source). The `read` and `resolve` functions are both optional, and may either return a string synchronously, or a Promise for asynchronous resolution. + +```js +import { bundleAsync } from 'lightningcss'; + +let { code, map } = await bundleAsync({ + filename: 'style.css', + minify: true, + resolver: { + read(filePath) { + return fs.readFileSync(filePath, 'utf8'); + }, + resolve(specifier, from) { + return path.resolve(path.dirname(from), specifier); + } + } +}); +``` + +Note that using a custom resolver can slow down bundling significantly, especially when reading files asynchronously. Use `readFileSync` rather than `readFile` if possible for better performance, or omit either of the methods if you don't need to override the default behavior. diff --git a/website/pages/css-modules.md b/website/pages/css-modules.md new file mode 100644 index 00000000..367e14c8 --- /dev/null +++ b/website/pages/css-modules.md @@ -0,0 +1,257 @@ +[[toc]] + +# CSS modules + +By default, CSS identifiers are global. If two files define the same class names, ids, custom properties, `@keyframes`, etc., they will potentially clash and overwrite each other. To solve this, Lightning CSS supports [CSS modules](https://github.com/css-modules/css-modules). + +CSS modules treat the classes defined in each file as unique. Each class name or identifier is renamed to include a unique hash, and a mapping is exported to JavaScript to allow referencing them. + +To enable CSS modules, provide the `cssModules` option when calling the Lightning CSS API. When using the CLI, enable the `--css-modules` flag. + +```js +import { transform } from 'lightningcss'; + +let { code, map, exports } = transform({ + // ... + cssModules: true, + code: Buffer.from(` + .logo { + background: skyblue; + } + `) +}); +``` + +This returns an `exports` object in addition to the compiled code and source map. Each property in the `exports` object maps from the original name in the source CSS to the compiled (i.e. hashed) name. You can use this mapping in your JavaScript or template files to reference the compiled classes and identifiers. + +The exports object for the above example might look like this: + +```js +{ + logo: { + name: '8h19c6_logo', + isReferenced: false, + composes: [] + } +} +``` + +## Class composition + +Style rules in CSS modules can reference other classes with the `composes` property. This causes the referenced class to be applied whenever the composed class is used, effectively providing a form of style mixins. + +```css +.bg-indigo { + background: indigo; +} + +.indigo-white { + composes: bg-indigo; + color: white; +} +``` + +In the above example, whenever the `indigo-white` class is applied, the `bg-indigo` class will be applied as well. This is indicated in the `exports` object returned by Lightning CSS as follows: + +```js +{ + 'bg-indigo': { + name: '8h19c6_bg-indigo', + isReferenced: true, + composes: [] + }, + 'indigo-white': { + name: '8h19c6_indigo-white', + isReferenced: false, + composes: [{ + type: 'local', + name: '8h19c6_bg-indigo' + }] + } +} +``` + +Multiple classes can be composed at once by separating them with spaces. + +```css +.logo { + composes: bg-indigo padding-large; +} +``` + +### Dependencies + +You can also reference class names defined in a different CSS file using the `from` keyword: + +```css +.logo { + composes: bg-indigo from "./colors.module.css"; +} +``` + +This outputs an exports object with the dependency information. It is the caller's responsibility to resolve this dependency and apply the target class name when using the `transform` API. When using the `bundle` API, this is handled automatically. + +```js +{ + logo: { + name: '8h19c6_logo', + isReferenced: false, + composes: [{ + type: 'dependency', + name: 'bg-indigo', + specifier: './colors.module.css' + }] + } +} +``` + +### Global composition + +Global (i.e. non-hashed) classes can also be composed using the `global` keyword: + +```css +.search { + composes: search-widget from global; +} +``` + +## Global exceptions + +Within a CSS module, all class and id selectors are local by default. You can also opt out of this behavior for a single selector using the `:global` pseudo class. + +```css +.foo :global(.bar) { + color: red; +} + +.foo .bar { + color: green; +} +``` + +compiles to: + +```css +.EgL3uq_foo .bar { + color: red; +} + +.EgL3uq_foo .EgL3uq_bar { + color: #ff0; +} +``` + +## Local CSS variables + +By default, class names, id selectors, and the names of `@keyframes`, `@counter-style`, and CSS grid lines and areas are scoped to the module they are defined in. Scoping for CSS variables and other [``](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..ed352a66 --- /dev/null +++ b/website/pages/docs.md @@ -0,0 +1,141 @@ +[[toc]] + +# Getting Started + +Lightning 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. + +## From Node + +See the [TypeScript definitions](https://github.com/parcel-bundler/lightningcss/blob/master/node/index.d.ts) for full API docs. + +Here is a simple example that compiles the input CSS for Safari 13.2, and minifies the output. + +```js +import { transform } from 'lightningcss'; + +let { code, map } = transform({ + filename: 'style.css', + code: Buffer.from('.foo { color: red }'), + minify: true, + sourceMap: true, + targets: { + // Semver versions are represented using a single 24-bit number, with one component per byte. + // e.g. to represent 13.2.0, the following could be used. + safari: (13 << 16) | (2 << 8) + } +}); +``` + +You can also convert the results of running `browserslist` into targets which can be passed to Lightning CSS: + +```js +import browserslist from 'browserslist'; +import { browserslistToTargets } from 'lightningcss'; + +let targets = browserslistToTargets(browserslist('>= 0.25%')); +``` + +Bundling is also possible by using the `bundle` API. This processes `@import` rules and inlines them. This API requires filesystem access, so it does not accept `code` directly via the API. + +```js +let {code, map} = css.bundle({ + filename: 'style.css', + minify: true +}); +``` + +The `bundleAsync` API is an asynchronous version of `bundle`, which also accepts a custom `resolver` object. This allows you to provide custom JavaScript functions for resolving `@import` specifiers to file paths, and reading files from the file system (or another source). The `read` and `resolve` functions are both optional, and may either return a string synchronously, or a Promise for asynchronous resolution. + +```js +let {code, map} = await css.bundleAsync({ + filename: 'style.css', + minify: true, + resolver: { + read(filePath) { + return fs.readFileSync(filePath, 'utf8'); + }, + resolve(specifier, from) { + return path.resolve(path.dirname(from), specifier); + } + } +}); +``` + +Note that using a custom resolver can slow down bundling significantly, especially when reading files asynchronously. Use `readFileSync` rather than `readFile` if possible for better performance, or omit either of the methods if you don't need to override the default behavior. + +## From Rust + +See the Rust API docs on [docs.rs](https://docs.rs/lightningcss). + +## With Parcel + +Parcel 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`, which can be used to enable CSS nesting and custom media queries, `pseudoClasses`, which allows replacing some pseudo classes like `:focus-visible` with normal classes that can be applied via JavaScript (e.g. polyfills), and `cssModules`, 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)); +``` + +## With webpack + +css-minimizer-webpack-plugin has builtin support for Lightning CSS. Install Lightning CSS in your project, and configure the plugin as documented [in its README](https://github.com/webpack-contrib/css-minimizer-webpack-plugin#using-custom-minifier-lightningcss-previously-parcelcss). + +## 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 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 --nesting --bundle --targets '>= 0.25%' --sourcemap input.css -o output.css" + } +} +``` + +To see all of the available options, use the `--help` argument: + +```shell +npx lightningcss --help +``` diff --git a/website/pages/transforms.md b/website/pages/transforms.md new file mode 100644 index 00000000..aba5822d --- /dev/null +++ b/website/pages/transforms.md @@ -0,0 +1,302 @@ +[[toc]] + +# 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. + +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. + +## 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..6f9e6d53 --- /dev/null +++ b/website/pages/transpilation.md @@ -0,0 +1,251 @@ +[[toc]] + +# 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) +}; +``` + +## 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. + +The following features are supported: + +* [Color Level 5](https://drafts.csswg.org/css-color-5/) + - [`color-mix()`](https://drafts.csswg.org/css-color-5/#color-mix) function + - Relative color syntax, e.g. `lab(from purple calc(l * .8) a b)` +* [Color Level 4](https://drafts.csswg.org/css-color-4/) + - [`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()`, and `oklch()` colors + - [`color()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color()) function supporting predefined color spaces such as `display-p3` and `xyz` + - [`hwb()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hwb()) function + - Space separated components in `rgb()` and `hsl()` functions + - Hex colors with alpha, e.g. `#rgba` and `#rrggbbaa` +* [Logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties), e.g. `margin-inline-start` +* [Media query range syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#syntax_improvements_in_level_4), e.g. `@media (width <= 100px)` or `@media (100px < width < 500px)` +* Selectors + - `:not` and `:lang` with multiple arguments + - `:dir` + - `:is` +* `clamp()`, `round()`, `rem()`, `mod()`, `abs()`, and `sign()` [math functions](https://w3c.github.io/csswg-drafts/css-values/#math) +* `sin()`, `cos()`, `tan()`, `asin()`, `acos()`, `atan()`, and `atan2()` [trigonometric functions](https://w3c.github.io/csswg-drafts/css-values/#trig-funcs) +* `pow()`, `log()`, `sqrt()`, `exp()`, and `hypot()` [exponential functions](https://w3c.github.io/csswg-drafts/css-values/#exponent-funcs) +* [Double position gradient stops](https://css-tricks.com/while-you-werent-looking-css-gradients-got-better/) (e.g. `red 40% 80%`) +* Two-value [`overflow`](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) shorthand +* Multi-value [`display`](https://developer.mozilla.org/en-US/docs/Web/CSS/display) property (e.g. `inline flex`) +* Alignment shorthands, e.g. [`place-items`](https://developer.mozilla.org/en-US/docs/Web/CSS/place-items) and [`place-content`](https://developer.mozilla.org/en-US/docs/Web/CSS/place-content) +* `system-ui` font family fallbacks + +## 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..f02310d5 --- /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 { + color: lch(85% 82.34 80.104); + text-shadow: 0 0 10px lch(85% 82.34 80.104 / .5); +} + +.token.operator, +.token.entity, +.token.url { + 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..f9185983 --- /dev/null +++ b/website/transforms.html @@ -0,0 +1,39 @@ + + + + + + Custom Transforms – Lightning CSS + + + + + + + + + + + + + + + + +

+ + Lightning CSS +

Playground • Rust docs • npm • GitHub

+ +

+ + + + diff --git a/website/transpilation.html b/website/transpilation.html new file mode 100644 index 00000000..eeface44 --- /dev/null +++ b/website/transpilation.html @@ -0,0 +1,39 @@ + + + + + + Transpilation – Lightning CSS + + + + + + + + + + + + + + + + +

+ + Lightning CSS +

Playground • Rust docs • npm • GitHub

+ +

+ + + + diff --git a/yarn.lock b/yarn.lock index 11f32149..eecf68de 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1413,6 +1413,20 @@ domelementtype@^2.0.1, domelementtype@^2.2.0: resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.2.0.tgz#9a0b6c2782ed6a1c7323d42267183df9bd8b1d57" integrity sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A== +domhandler@^3.3.0: + version "3.3.0" + resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-3.3.0.tgz#6db7ea46e4617eb15cf875df68b2b8524ce0037a" + integrity sha512-J1C5rIANUbuYK+FuFL98650rihynUOEzRLxW+90bKZRWB6A1X1Tf82GxR1qAWLyfNPRvjqfip3Q5tdYlmAa9lA== + dependencies: + domelementtype "^2.0.1" + +domhandler@^4.0.0: + version "4.3.1" + resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.3.1.tgz#8d792033416f59d68bc03a5aa7b018c1ca89279c" + integrity sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ== + dependencies: + domelementtype "^2.2.0" + domhandler@^4.2.0, domhandler@^4.2.2: version "4.2.2" resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.2.2.tgz#e825d721d19a86b8c201a35264e226c678ee755f" @@ -1420,7 +1434,7 @@ domhandler@^4.2.0, domhandler@^4.2.2: dependencies: domelementtype "^2.2.0" -domutils@^2.6.0, domutils@^2.8.0: +domutils@^2.4.2, domutils@^2.5.2, domutils@^2.6.0, domutils@^2.8.0: version "2.8.0" resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135" integrity sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A== @@ -1466,6 +1480,11 @@ entities@^3.0.1: resolved "https://registry.yarnpkg.com/entities/-/entities-3.0.1.tgz#2b887ca62585e96db3903482d336c1006c3001d4" integrity sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q== +entities@~2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/entities/-/entities-2.1.0.tgz#992d3129cf7df6870b96c57858c249a120f8b8b5" + integrity sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w== + error-ex@^1.3.1: version "1.3.2" resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf" @@ -1973,6 +1992,26 @@ htmlnano@^2.0.0: posthtml "^0.16.5" timsort "^0.3.0" +htmlparser2@^5.0.1: + version "5.0.1" + resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-5.0.1.tgz#7daa6fc3e35d6107ac95a4fc08781f091664f6e7" + integrity sha512-vKZZra6CSe9qsJzh0BjBGXo8dvzNsq/oGvsjfRdOrrryfeD9UOBEEQdeoqCRmKZchF5h2zOBMQ6YuQ0uRUmdbQ== + dependencies: + domelementtype "^2.0.1" + domhandler "^3.3.0" + domutils "^2.4.2" + entities "^2.0.0" + +htmlparser2@^6.0.0: + version "6.1.0" + resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-6.1.0.tgz#c4d762b6c3371a05dbe65e94ae43a9f845fb8fb7" + integrity sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A== + dependencies: + domelementtype "^2.0.1" + domhandler "^4.0.0" + domutils "^2.5.2" + entities "^2.0.0" + htmlparser2@^7.1.1: version "7.1.2" resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-7.1.2.tgz#587923d38f03bc89e03076e00cba2c7473f37f7c" @@ -2306,6 +2345,13 @@ lines-and-columns@^1.1.6: resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00" integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA= +linkify-it@^3.0.1: + version "3.0.3" + resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-3.0.3.tgz#a98baf44ce45a550efb4d49c769d07524cc2fa2e" + integrity sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ== + dependencies: + uc.micro "^1.0.1" + lmdb@2.5.2: version "2.5.2" resolved "https://registry.yarnpkg.com/lmdb/-/lmdb-2.5.2.tgz#37e28a9fb43405f4dc48c44cec0e13a14c4a6ff1" @@ -2360,11 +2406,44 @@ lru-queue@^0.1.0: dependencies: es5-ext "~0.10.2" +markdown-it-anchor@^8.6.6: + version "8.6.6" + resolved "https://registry.yarnpkg.com/markdown-it-anchor/-/markdown-it-anchor-8.6.6.tgz#4a12e358c9c2167ee28cb7a5f10e29d6f1ffd7ca" + integrity sha512-jRW30YGywD2ESXDc+l17AiritL0uVaSnWsb26f+68qaW9zgbIIr1f4v2Nsvc0+s0Z2N3uX6t/yAw7BwCQ1wMsA== + +markdown-it-prism@^2.3.0: + version "2.3.0" + resolved "https://registry.yarnpkg.com/markdown-it-prism/-/markdown-it-prism-2.3.0.tgz#8b3ca2105e665ca20f62b2dc2b81f9393660a5af" + integrity sha512-ePtHY80gZyeje4bn3R3SL0jpd1C9HFaYffJW2Ma0YD+tspqa2v9TuVwUyFwboFu4jnFNcO8oPQROgbcYJbmBvw== + dependencies: + prismjs "1.29.0" + +markdown-it-table-of-contents@^0.6.0: + version "0.6.0" + resolved "https://registry.yarnpkg.com/markdown-it-table-of-contents/-/markdown-it-table-of-contents-0.6.0.tgz#7c9e8d619fb12f88c9fb05a7b32b2fe932b9c541" + integrity sha512-jHvEjZVEibyW97zEYg19mZCIXO16lHbvRaPDkEuOfMPBmzlI7cYczMZLMfUvwkhdOVQpIxu3gx6mgaw46KsNsQ== + +markdown-it@^12.0.2: + version "12.3.2" + resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-12.3.2.tgz#bf92ac92283fe983fe4de8ff8abfb5ad72cd0c90" + integrity sha512-TchMembfxfNVpHkbtriWltGWc+m3xszaRD0CZup7GFFhzIgQqxIfn3eGj1yZpfuflzPvfkt611B2Q/Bsk1YnGg== + dependencies: + argparse "^2.0.1" + entities "~2.1.0" + linkify-it "^3.0.1" + mdurl "^1.0.1" + uc.micro "^1.0.5" + mdn-data@2.0.14: version "2.0.14" resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50" integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow== +mdurl@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e" + integrity sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g== + memoizee@^0.4.15: version "0.4.15" resolved "https://registry.yarnpkg.com/memoizee/-/memoizee-0.4.15.tgz#e6f3d2da863f318d02225391829a6c5956555b72" @@ -2405,6 +2484,11 @@ mimic-response@^3.1.0: resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-3.1.0.tgz#2d1d59af9c1b129815accc2c46a022a5ce1fa3c9" integrity sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ== +min-indent@^1.0.0: + version "1.0.1" + resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869" + integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg== + minimatch@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083" @@ -2987,6 +3071,17 @@ postcss@^8.3.11: picocolors "^1.0.0" source-map-js "^0.6.2" +posthtml-markdownit@^1.3.1: + version "1.3.1" + resolved "https://registry.yarnpkg.com/posthtml-markdownit/-/posthtml-markdownit-1.3.1.tgz#7ba3d5aa92ebbe2e06002909b55faaf7c889f4d5" + integrity sha512-ohva3TR6zD+k+yRirsvC5tYvSNs6FyZ4rD5WdS2rXA7ZP8z5XXispGJPuGKFt4L7pS4eBmB5oROoggG/pwatuA== + dependencies: + markdown-it "^12.0.2" + min-indent "^1.0.0" + posthtml "^0.15.0" + posthtml-parser "^0.6.0" + posthtml-render "^1.4.0" + posthtml-parser@^0.10.0, posthtml-parser@^0.10.1: version "0.10.1" resolved "https://registry.yarnpkg.com/posthtml-parser/-/posthtml-parser-0.10.1.tgz#63c41931a9339cc2c32aba14f06286d98f107abf" @@ -2994,6 +3089,32 @@ posthtml-parser@^0.10.0, posthtml-parser@^0.10.1: dependencies: htmlparser2 "^7.1.1" +posthtml-parser@^0.6.0: + version "0.6.0" + resolved "https://registry.yarnpkg.com/posthtml-parser/-/posthtml-parser-0.6.0.tgz#52488cdb4fa591c3102de73197c471859ee0be63" + integrity sha512-5ffwKQNgtVHdhZniWxu+1ryvaZv5l25HPLUV6W5xy5nYVWMXtvjtwRnbSpfbKFvbyl7XI+d4AqkjmonkREqnXA== + dependencies: + htmlparser2 "^5.0.1" + +posthtml-parser@^0.7.2: + version "0.7.2" + resolved "https://registry.yarnpkg.com/posthtml-parser/-/posthtml-parser-0.7.2.tgz#3fba3375544d824bb1c8504f0d69f6e0b95774db" + integrity sha512-LjEEG/3fNcWZtBfsOE3Gbyg1Li4CmsZRkH1UmbMR7nKdMXVMYI3B4/ZMiCpaq8aI1Aym4FRMMW9SAOLSwOnNsQ== + dependencies: + htmlparser2 "^6.0.0" + +posthtml-prism@^1.0.4: + version "1.0.4" + resolved "https://registry.yarnpkg.com/posthtml-prism/-/posthtml-prism-1.0.4.tgz#303e82c0adae11642de9046b519760ca212e781b" + integrity sha512-f/hk5b72NeAtipHduosv+xgr1OvHv+Oj3VFQ3d9uf8nIqxpapDb2HkGP3Q67QvKIyZbztTWLr1W7fHxNb0qpQA== + dependencies: + prismjs "^1.19.0" + +posthtml-render@^1.3.1, posthtml-render@^1.4.0: + version "1.4.0" + resolved "https://registry.yarnpkg.com/posthtml-render/-/posthtml-render-1.4.0.tgz#40114070c45881cacb93347dae3eff53afbcff13" + integrity sha512-W1779iVHGfq0Fvh2PROhCe2QhB8mEErgqzo1wpIt36tCgChafP+hbXIhLDOM8ePJrZcFs0vkNEtdibEWVqChqw== + posthtml-render@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/posthtml-render/-/posthtml-render-3.0.0.tgz#97be44931496f495b4f07b99e903cc70ad6a3205" @@ -3001,6 +3122,14 @@ posthtml-render@^3.0.0: dependencies: is-json "^2.0.1" +posthtml@^0.15.0: + version "0.15.2" + resolved "https://registry.yarnpkg.com/posthtml/-/posthtml-0.15.2.tgz#739cf0d3ffec70868b87121dc7393478e1898c9c" + integrity sha512-YugEJ5ze/0DLRIVBjCpDwANWL4pPj1kHJ/2llY8xuInr0nbkon3qTiMPe5LQa+cCwNjxS7nAZZTp+1M+6mT4Zg== + dependencies: + posthtml-parser "^0.7.2" + posthtml-render "^1.3.1" + posthtml@^0.16.4, posthtml@^0.16.5: version "0.16.5" resolved "https://registry.yarnpkg.com/posthtml/-/posthtml-0.16.5.tgz#d32f5cf32436516d49e0884b2367d0a1424136f6" @@ -3047,6 +3176,11 @@ pretty-format@^27.4.2: ansi-styles "^5.0.0" react-is "^17.0.1" +prismjs@1.29.0, prismjs@^1.19.0: + version "1.29.0" + resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12" + integrity sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q== + process@^0.11.10: version "0.11.10" resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182" @@ -3508,6 +3642,11 @@ typescript@~4.4.4: resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.4.4.tgz#2cd01a1a1f160704d3101fd5a58ff0f9fcb8030c" integrity sha512-DqGhF5IKoBl8WNf8C1gu8q0xZSInh9j1kJJMqT3a94w1JzVaBU4EXOSMrz9yDqMT0xt3selp83fuFMQ0uzv6qA== +uc.micro@^1.0.1, uc.micro@^1.0.5: + version "1.0.6" + resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac" + integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA== + unbox-primitive@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e" From e863fd83073037a9045756b2346350ef5296d784 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Mon, 26 Dec 2022 01:15:18 -0500 Subject: [PATCH 02/15] Improve styling --- website/.posthtmlrc | 1 + website/bundling.html | 12 +++++- website/css-modules.html | 12 +++++- website/docs.css | 79 +++++++++++++++++++++++++++------- website/docs.html | 12 +++++- website/index.html | 2 +- website/pages/bundling.md | 4 ++ website/pages/css-modules.md | 4 ++ website/pages/docs.md | 4 ++ website/pages/transforms.md | 4 ++ website/pages/transpilation.md | 4 ++ website/transforms.html | 12 +++++- website/transpilation.html | 12 +++++- 13 files changed, 140 insertions(+), 22 deletions(-) diff --git a/website/.posthtmlrc b/website/.posthtmlrc index 1f9b5055..568855f7 100644 --- a/website/.posthtmlrc +++ b/website/.posthtmlrc @@ -11,6 +11,7 @@ { "plugin": "markdown-it-table-of-contents", "options": { + "containerHeaderHtml": "

diff --git a/website/docs.css b/website/docs.css index 72721288..8101b0f8 100644 --- a/website/docs.css +++ b/website/docs.css @@ -23,12 +23,14 @@ html { header { max-width: 800px; + width: 100%; margin: 0 auto; padding: 50px 0; font-size: 16px; background: radial-gradient(closest-side, lch(80% 82.34 80.104 / .25), transparent); display: grid; column-gap: 30px; + grid-area: header; grid-template-areas: "logo header" "logo subheader" ". links"; @@ -70,6 +72,10 @@ h1, h2, h3 { letter-spacing: -0.02em; } +h1 { + margin-top: 0; +} + header p { grid-area: links; margin: 0; @@ -125,28 +131,61 @@ header a:hover { body { --body-padding: 20px; padding: 0 var(--body-padding); - margin: 0; + margin: 0 auto; + width: fit-content; + display: grid; + grid-template-columns: 180px 1fr; + gap: 40px; + grid-template-areas: "header header" + "nav main" + "footer footer"; } main { max-width: 800px; - padding: 0 220px; - padding-right: min(calc((100vw - var(--body-padding) * 2 - 800px) / 2), 220px); - margin: 0 auto; + padding-right: 240px; + grid-area: main; + position: relative; } p, li { line-height: 1.5em; } +p:empty { + display: none; +} + a { color: lch(85% 58 205); } -nav, .table-of-contents { +nav { + grid-area: nav; + text-align: end; + padding-right: 20px; + border-right: 1px solid lch(90% 50.34 80.104 / .1); + height: fit-content; + position: sticky; + top: 40px; +} + +nav h3, +.table-of-contents h3 { + margin-top: 0; +} + +main > aside { position: sticky; top: 40px; - width: 100%; +} + +.table-of-contents { + position: absolute; + left: 100%; + margin-left: 40px; + border-left: 1px solid lch(90% 50.34 80.104 / .1); + padding-left: 20px; } .table-of-contents ul, @@ -158,20 +197,12 @@ nav ul { .table-of-contents > ul { margin: 0; padding: 0; - position: absolute; - right: -240px; width: 180px; - border-left: 1px solid lch(90% 50.34 80.104 / .1); - padding-left: 20px; } nav > ul { margin: 0; padding: 0; - position: absolute; - transform: translateX(calc(-100% - 40px)); - border-right: 1px solid lch(90% 50.34 80.104 / .1); - padding-right: 20px; } .table-of-contents li, @@ -194,7 +225,7 @@ nav a[aria-current] { text-shadow: 0 0 5px var(--gold-text); } -@media (width < 800px) { +@media (width < 1040px) { .table-of-contents { display: none; } @@ -204,6 +235,21 @@ nav a[aria-current] { } } +@media (width < 600px) { + body { + grid-template-areas: "header" "nav" "main" "footer"; + grid-template-columns: 1fr; + } + + nav { + text-align: start; + border-right: none; + border-bottom: 1px solid lch(90% 50.34 80.104 / .1); + padding-bottom: 20px; + position: static; + } +} + .warning { border: 4px solid lch(70% 82.34 80.104); background: lch(80% 82.34 80.104 / .15); @@ -232,5 +278,6 @@ footer { font-size: 12px; color: #666; text-align: center; - padding: 40px 0 20px 0; + padding-bottom: 20px; + grid-area: footer; } diff --git a/website/docs.html b/website/docs.html index 018ec711..bc76bda2 100644 --- a/website/docs.html +++ b/website/docs.html @@ -26,8 +26,18 @@ Lightning CSS -

Playground • Rust docs • npm • GitHub

Playground • Docs • Rust docs • npm • GitHub

diff --git a/website/index.html b/website/index.html index cb8d26b5..3083ed4d 100644 --- a/website/index.html +++ b/website/index.html @@ -28,7 +28,7 @@

Lightning CSS

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

Playground • Docs • Rust docs • npm • GitHub

diff --git a/website/pages/bundling.md b/website/pages/bundling.md index 0f4e5248..0e7a989f 100644 --- a/website/pages/bundling.md +++ b/website/pages/bundling.md @@ -1,5 +1,9 @@ + + # Bundling Lightning CSS supports bundling dependencies referenced by CSS `@import` rules into a single output file. When calling the Lightning CSS API, use the `bundle` or `bundleAsync` function instead of `transform`. When using the CLI, enable the `--bundle` flag. diff --git a/website/pages/css-modules.md b/website/pages/css-modules.md index 367e14c8..d66016c3 100644 --- a/website/pages/css-modules.md +++ b/website/pages/css-modules.md @@ -1,5 +1,9 @@ + + # CSS modules By default, CSS identifiers are global. If two files define the same class names, ids, custom properties, `@keyframes`, etc., they will potentially clash and overwrite each other. To solve this, Lightning CSS supports [CSS modules](https://github.com/css-modules/css-modules). diff --git a/website/pages/docs.md b/website/pages/docs.md index ed352a66..20b0f444 100644 --- a/website/pages/docs.md +++ b/website/pages/docs.md @@ -1,5 +1,9 @@ + + # Getting Started Lightning 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. diff --git a/website/pages/transforms.md b/website/pages/transforms.md index aba5822d..de6277ad 100644 --- a/website/pages/transforms.md +++ b/website/pages/transforms.md @@ -1,5 +1,9 @@ + + # 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. diff --git a/website/pages/transpilation.md b/website/pages/transpilation.md index 6f9e6d53..a2d8c701 100644 --- a/website/pages/transpilation.md +++ b/website/pages/transpilation.md @@ -1,5 +1,9 @@ + + # Transpilation Lightning CSS includes support for transpiling modern CSS syntax to support older browsers, including vendor prefixing and syntax lowering. diff --git a/website/transforms.html b/website/transforms.html index f9185983..4970a115 100644 --- a/website/transforms.html +++ b/website/transforms.html @@ -26,8 +26,18 @@ Lightning CSS -

Playground • Rust docs • npm • GitHub

Playground • Docs • Rust docs • npm • GitHub

diff --git a/website/transpilation.html b/website/transpilation.html index eeface44..4e8af90a 100644 --- a/website/transpilation.html +++ b/website/transpilation.html @@ -26,8 +26,18 @@ Lightning CSS -

Playground • Rust docs • npm • GitHub

Playground • Docs • Rust docs • npm • GitHub

From 0f1193696815577930a970f48778483d0603c668 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Mon, 26 Dec 2022 10:18:52 -0500 Subject: [PATCH 03/15] Use IntersectionObserver --- package.json | 6 +- website/docs.css | 7 +- website/docs.js | 42 +- yarn.lock | 1078 +++++++++++++++++++++------------------------- 4 files changed, 523 insertions(+), 610 deletions(-) diff --git a/package.json b/package.json index 2f377aaa..056591a3 100644 --- a/package.json +++ b/package.json @@ -53,7 +53,7 @@ "markdown-it-prism": "^2.3.0", "markdown-it-table-of-contents": "^0.6.0", "node-fetch": "^3.1.0", - "parcel": "^2.7.0", + "parcel": "^2.8.2", "patch-package": "^6.5.0", "path-browserify": "^1.0.1", "postcss": "^8.3.11", @@ -61,7 +61,7 @@ "posthtml-prism": "^1.0.4", "process": "^0.11.10", "puppeteer": "^12.0.1", - "sharp": "^0.29.1", + "sharp": "^0.31.1", "util": "^0.12.4", "uvu": "^0.5.6" }, @@ -79,4 +79,4 @@ "build-ast": "cargo run --example schema --features jsonschema && node scripts/build-ast.js", "test": "uvu node/test" } -} +} \ No newline at end of file diff --git a/website/docs.css b/website/docs.css index 8101b0f8..0e3a4fe5 100644 --- a/website/docs.css +++ b/website/docs.css @@ -215,6 +215,8 @@ nav li { nav a { color: lch(90% 50.34 80.104); text-decoration: none; + font-family: urbane-rounded; + font-size: 14px; } .table-of-contents a:hover, @@ -222,7 +224,10 @@ nav a { nav a:hover, nav a[aria-current] { color: var(--gold-text); - text-shadow: 0 0 5px var(--gold-text); +} + +a[aria-current] { + text-decoration: underline; } @media (width < 1040px) { diff --git a/website/docs.js b/website/docs.js index cff0abcb..802d17da 100644 --- a/website/docs.js +++ b/website/docs.js @@ -1,26 +1,38 @@ // Mark the current section in the table of contents with aria-current when scrolled into view. let tocLinks = document.querySelectorAll('.table-of-contents a'); -let headers = []; +let headers = new Map(); for (let link of tocLinks) { let headerId = link.hash.slice(1); let header = document.getElementById(headerId); - headers.push({ link, header }); + headers.set(header, link); } -function updateToc() { - for (let header of headers) { - if ((header.header.offsetTop + header.header.getBoundingClientRect().height) > document.documentElement.scrollTop) { - let currentSelection = document.querySelector('.table-of-contents a[aria-current]'); - if (currentSelection) { - currentSelection.removeAttribute('aria-current'); - } - header.link.setAttribute('aria-current', 'location'); - break; +let intersectingHeaders = new Set(); +let observer = new IntersectionObserver(entries => { + for (let entry of entries) { + if (entry.isIntersecting) { + intersectingHeaders.add(entry.target); + } else { + intersectingHeaders.delete(entry.target); } } -} -updateToc(); -document.addEventListener('scroll', () => { - requestAnimationFrame(updateToc); + if (intersectingHeaders.size > 0) { + let current = document.querySelector('.table-of-contents a[aria-current]'); + if (current) { + current.removeAttribute('aria-current'); + } + let first; + for (let [header, link] of headers) { + if (intersectingHeaders.has(header)) { + first = link; + break; + } + } + first.setAttribute('aria-current', 'location'); + } }); + +for (let header of headers.keys()) { + observer.observe(header); +} diff --git a/yarn.lock b/yarn.lock index eecf68de..c9e6b4f3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -161,117 +161,97 @@ resolved "https://registry.yarnpkg.com/@napi-rs/cli/-/cli-2.6.2.tgz#9b6e3e8649c93d138cd8df8072cea8ddcf2ac6e6" integrity sha512-EmH+DQDEBUIoqMim0cc+X96ImtcIZLFjgW5WWORpzYnA9Ug7zNPO7jCLMhIQRd/p5AdWaXrT4SVXc/aip09rKQ== -"@nodelib/fs.scandir@2.1.5": - version "2.1.5" - resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5" - integrity sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g== - dependencies: - "@nodelib/fs.stat" "2.0.5" - run-parallel "^1.1.9" - -"@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2": - version "2.0.5" - resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz#5bd262af94e9d25bd1e71b05deed44876a222e8b" - integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A== - -"@nodelib/fs.walk@^1.2.3": - version "1.2.8" - resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz#e95737e8bb6746ddedf69c556953494f196fe69a" - integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg== - dependencies: - "@nodelib/fs.scandir" "2.1.5" - fastq "^1.6.0" - -"@parcel/bundler-default@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/bundler-default/-/bundler-default-2.7.0.tgz#17d94be7185f29773aa21454063cbba3cdc03d49" - integrity sha512-PU5MtWWhc+dYI9x8mguYnm9yiG6TkI7niRpxgJgtqAyGHuEyNXVBQQ0X+qyOF4D9LdankBf8uNN18g31IET2Zg== - dependencies: - "@parcel/diagnostic" "2.7.0" - "@parcel/hash" "2.7.0" - "@parcel/plugin" "2.7.0" - "@parcel/utils" "2.7.0" +"@parcel/bundler-default@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/bundler-default/-/bundler-default-2.8.2.tgz#7340866cd612aece575489d16bf97325fd699b7f" + integrity sha512-/7ao0vc/v8WGHZaS1SyS5R8wzqmmXEr9mhIIB2cbLQ4LA2WUtKsYcvZ2gjJuiAAN1CHC6GxqwYjIJScQCk/QXg== + dependencies: + "@parcel/diagnostic" "2.8.2" + "@parcel/graph" "2.8.2" + "@parcel/hash" "2.8.2" + "@parcel/plugin" "2.8.2" + "@parcel/utils" "2.8.2" nullthrows "^1.1.1" -"@parcel/cache@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/cache/-/cache-2.7.0.tgz#cc4b99685c7ff0fc20fbc321f4b6850d6e0c6811" - integrity sha512-JlXNoZXcWzLKdDlfeF3dIj5Vtel5T9vtdBN72PJ+cjC4qNHk4Uwvc5sfOBELuibGN0bVu2bwY9nUgSwCiB1iIA== +"@parcel/cache@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/cache/-/cache-2.8.2.tgz#64ab1a4ecc20033b7d20a72ddd8898fea035e553" + integrity sha512-kiyoOgh1RXp5qp+wlb8Pi/Z7o9D82Oj5RlHnKSAauyR7jgnI8Vq8JTeBmlLqrf+kHxcDcp2p86hidSeANhlQNg== dependencies: - "@parcel/fs" "2.7.0" - "@parcel/logger" "2.7.0" - "@parcel/utils" "2.7.0" + "@parcel/fs" "2.8.2" + "@parcel/logger" "2.8.2" + "@parcel/utils" "2.8.2" lmdb "2.5.2" -"@parcel/codeframe@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/codeframe/-/codeframe-2.7.0.tgz#b6e4ad6100938edbed1b6c72b37f609e1abaf931" - integrity sha512-UTKx0jejJmmO1dwTHSJuRgrO8N6PMlkxRT6sew8N6NC3Bgv6pu0EbO+RtlWt/jCvzcdLOPdIoTzj4MMZvgcMYg== +"@parcel/codeframe@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/codeframe/-/codeframe-2.8.2.tgz#a170050404792acb6d9beac931b5ece25e3fc0b9" + integrity sha512-U2GT9gq1Zs3Gr83j8JIs10bLbGOHFl57Y8D57nrdR05F4iilV/UR6K7jkhdoiFc9WiHh3ewvrko5+pSdAVFPgQ== dependencies: chalk "^4.1.0" -"@parcel/compressor-raw@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/compressor-raw/-/compressor-raw-2.7.0.tgz#3f8677e6371ef099cd9e4bd2a899884dc8eb571b" - integrity sha512-SCXwnOOQT6EmpusBsYWNQ/RFri+2JnKuE0gMSf2dROl2xbererX45FYzeDplWALCKAdjMNDpFwU+FyMYoVZSCQ== - dependencies: - "@parcel/plugin" "2.7.0" - -"@parcel/config-default@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/config-default/-/config-default-2.7.0.tgz#2f6cec9c185b89e40f343549295cad21295621a8" - integrity sha512-ZzsLr97AYrz8c9k6qn3DlqPzifi3vbP7q3ynUrAFxmt0L4+K0H9N508ZkORYmCgaFjLIQ8Y3eWpwCJ0AewPNIg== - dependencies: - "@parcel/bundler-default" "2.7.0" - "@parcel/compressor-raw" "2.7.0" - "@parcel/namer-default" "2.7.0" - "@parcel/optimizer-css" "2.7.0" - "@parcel/optimizer-htmlnano" "2.7.0" - "@parcel/optimizer-image" "2.7.0" - "@parcel/optimizer-svgo" "2.7.0" - "@parcel/optimizer-terser" "2.7.0" - "@parcel/packager-css" "2.7.0" - "@parcel/packager-html" "2.7.0" - "@parcel/packager-js" "2.7.0" - "@parcel/packager-raw" "2.7.0" - "@parcel/packager-svg" "2.7.0" - "@parcel/reporter-dev-server" "2.7.0" - "@parcel/resolver-default" "2.7.0" - "@parcel/runtime-browser-hmr" "2.7.0" - "@parcel/runtime-js" "2.7.0" - "@parcel/runtime-react-refresh" "2.7.0" - "@parcel/runtime-service-worker" "2.7.0" - "@parcel/transformer-babel" "2.7.0" - "@parcel/transformer-css" "2.7.0" - "@parcel/transformer-html" "2.7.0" - "@parcel/transformer-image" "2.7.0" - "@parcel/transformer-js" "2.7.0" - "@parcel/transformer-json" "2.7.0" - "@parcel/transformer-postcss" "2.7.0" - "@parcel/transformer-posthtml" "2.7.0" - "@parcel/transformer-raw" "2.7.0" - "@parcel/transformer-react-refresh-wrap" "2.7.0" - "@parcel/transformer-svg" "2.7.0" - -"@parcel/core@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/core/-/core-2.7.0.tgz#3310f48230bd618735f199f159f37e6b45ed2710" - integrity sha512-7yKZUdh314Q/kU/9+27ZYTfcnXS6VYHuG+iiUlIohnvUUybxLqVJhdMU9Q+z2QcPka1IdJWz4K4Xx0y6/4goyg== +"@parcel/compressor-raw@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/compressor-raw/-/compressor-raw-2.8.2.tgz#8b21b958416185a55ecd301ddf92ba6aded8c082" + integrity sha512-EFPTer/P+3axifH6LtYHS3E6ABgdZnjZomJZ/Nl19lypZh/NgZzmMZlINlEVqyYhCggoKfXzgeTgkIHPN2d5Vw== + dependencies: + "@parcel/plugin" "2.8.2" + +"@parcel/config-default@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/config-default/-/config-default-2.8.2.tgz#2f96207f84bdd155cf4bfd02f10519b2ec33449a" + integrity sha512-1ELJAHx37fKSZZkYKWy6UdcuLRv5vrZJc89tVS6eRvvMt+udbIoSgIUzPXu7XemkcchF7Tryw3u2pRyxyLyL3w== + dependencies: + "@parcel/bundler-default" "2.8.2" + "@parcel/compressor-raw" "2.8.2" + "@parcel/namer-default" "2.8.2" + "@parcel/optimizer-css" "2.8.2" + "@parcel/optimizer-htmlnano" "2.8.2" + "@parcel/optimizer-image" "2.8.2" + "@parcel/optimizer-svgo" "2.8.2" + "@parcel/optimizer-terser" "2.8.2" + "@parcel/packager-css" "2.8.2" + "@parcel/packager-html" "2.8.2" + "@parcel/packager-js" "2.8.2" + "@parcel/packager-raw" "2.8.2" + "@parcel/packager-svg" "2.8.2" + "@parcel/reporter-dev-server" "2.8.2" + "@parcel/resolver-default" "2.8.2" + "@parcel/runtime-browser-hmr" "2.8.2" + "@parcel/runtime-js" "2.8.2" + "@parcel/runtime-react-refresh" "2.8.2" + "@parcel/runtime-service-worker" "2.8.2" + "@parcel/transformer-babel" "2.8.2" + "@parcel/transformer-css" "2.8.2" + "@parcel/transformer-html" "2.8.2" + "@parcel/transformer-image" "2.8.2" + "@parcel/transformer-js" "2.8.2" + "@parcel/transformer-json" "2.8.2" + "@parcel/transformer-postcss" "2.8.2" + "@parcel/transformer-posthtml" "2.8.2" + "@parcel/transformer-raw" "2.8.2" + "@parcel/transformer-react-refresh-wrap" "2.8.2" + "@parcel/transformer-svg" "2.8.2" + +"@parcel/core@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/core/-/core-2.8.2.tgz#9ee5a0b18337885dc0893958f9e4190cb599200a" + integrity sha512-ZGuq6p+Lzx6fgufaVsuOBwgpU3hgskTvIDIMdIDi9gOZyhGPK7U2srXdX+VYUL5ZSGbX04/P6QlB9FMAXK+nEg== dependencies: "@mischnic/json-sourcemap" "^0.1.0" - "@parcel/cache" "2.7.0" - "@parcel/diagnostic" "2.7.0" - "@parcel/events" "2.7.0" - "@parcel/fs" "2.7.0" - "@parcel/graph" "2.7.0" - "@parcel/hash" "2.7.0" - "@parcel/logger" "2.7.0" - "@parcel/package-manager" "2.7.0" - "@parcel/plugin" "2.7.0" - "@parcel/source-map" "^2.0.0" - "@parcel/types" "2.7.0" - "@parcel/utils" "2.7.0" - "@parcel/workers" "2.7.0" + "@parcel/cache" "2.8.2" + "@parcel/diagnostic" "2.8.2" + "@parcel/events" "2.8.2" + "@parcel/fs" "2.8.2" + "@parcel/graph" "2.8.2" + "@parcel/hash" "2.8.2" + "@parcel/logger" "2.8.2" + "@parcel/package-manager" "2.8.2" + "@parcel/plugin" "2.8.2" + "@parcel/source-map" "^2.1.1" + "@parcel/types" "2.8.2" + "@parcel/utils" "2.8.2" + "@parcel/workers" "2.8.2" abortcontroller-polyfill "^1.1.9" base-x "^3.0.8" browserslist "^4.6.6" @@ -283,525 +263,467 @@ nullthrows "^1.1.1" semver "^5.7.1" -"@parcel/css-darwin-arm64@1.13.1": - version "1.13.1" - resolved "https://registry.yarnpkg.com/@parcel/css-darwin-arm64/-/css-darwin-arm64-1.13.1.tgz#b857c162c5750b3417079ad5a6fead15427444d0" - integrity sha512-46LVidYcao8zurVPOZ4ZWJQ/50o4N+Z0K4CRmCCqWE+5gIWlx+md+W0h8XQTRb/GQ3j3+mlZvYCQxHpKy5M1lA== - -"@parcel/css-darwin-x64@1.13.1": - version "1.13.1" - resolved "https://registry.yarnpkg.com/@parcel/css-darwin-x64/-/css-darwin-x64-1.13.1.tgz#be7e73a61fcace9a78e3664a0ca8845e69747f96" - integrity sha512-vX1/Ut06UL5MQzWr5fPg51n6NYrzfjW9A+jXH3KeBloWtX+NllhLilmtcO4X1y/ZqaFjqHWpk4yrNVdtk1r4zA== - -"@parcel/css-linux-arm-gnueabihf@1.13.1": - version "1.13.1" - resolved "https://registry.yarnpkg.com/@parcel/css-linux-arm-gnueabihf/-/css-linux-arm-gnueabihf-1.13.1.tgz#bae1e86f9cb03646b48cf4604dded78a7757922f" - integrity sha512-qxQKUeXLHqehLmuJODQ7GNp0Syj2Kl35X4YvXGoPOI7Eq/y2ny3G5NCKUWkGDwOasIP3hKvVVfJRJv9fLJWnDQ== - -"@parcel/css-linux-arm64-gnu@1.13.1": - version "1.13.1" - resolved "https://registry.yarnpkg.com/@parcel/css-linux-arm64-gnu/-/css-linux-arm64-gnu-1.13.1.tgz#fa4c43564b6bfc5434ab779cbef58de7b1228994" - integrity sha512-FxnOONVo8WBW58uzjqv/mwSBDgGMp1qxK+fovjqLPCP3zcNgxkUG0l6ElWpqtiWWH3mTMzSHe+7hSaeVov12yQ== - -"@parcel/css-linux-arm64-musl@1.13.1": - version "1.13.1" - resolved "https://registry.yarnpkg.com/@parcel/css-linux-arm64-musl/-/css-linux-arm64-musl-1.13.1.tgz#17c1c1bb085d95a983cab0299312be9bc7ceae4d" - integrity sha512-6RDhL36HBAtt1mHa/y+34fHRImEJT/rd9hy1Z2qz117WUgzpZ3m4tFw33VrG7MKACugs9C2zG1MdVfy1Rz5+Uw== - -"@parcel/css-linux-x64-gnu@1.13.1": - version "1.13.1" - resolved "https://registry.yarnpkg.com/@parcel/css-linux-x64-gnu/-/css-linux-x64-gnu-1.13.1.tgz#f363d661961ccee3f88fb94dac372de5e1f97fe0" - integrity sha512-4VsduFKs35J1I3iQJuBCTp66K5mLh8nrtfXzkBDgP9tc6cLqw9PFodby9NhW9SJSn0ZVdrciIXW0C8Lp3Ev+bw== - -"@parcel/css-linux-x64-musl@1.13.1": - version "1.13.1" - resolved "https://registry.yarnpkg.com/@parcel/css-linux-x64-musl/-/css-linux-x64-musl-1.13.1.tgz#b29b660b9b39c9810d6dc351b77f925f6d5171cf" - integrity sha512-Ws34m9fW/0UuNTkC359nbnURzvSbCsstRG6QQ3UxdeNJ+crrgEsmvHPcN3WiIz/P2seP1Hu6GobKQAnOy6g3HA== - -"@parcel/css-win32-x64-msvc@1.13.1": - version "1.13.1" - resolved "https://registry.yarnpkg.com/@parcel/css-win32-x64-msvc/-/css-win32-x64-msvc-1.13.1.tgz#55c572528100ef91dd60db655b367dc648c0c99c" - integrity sha512-4yPYFQqUW4ZepIWa8rWiXnSDU6Nki2H9PB1NfTvr7IjN3WsNFrrVZFKsTg/KU2euYnasBXSZ+CMTUutvLZoVaA== - -"@parcel/css@^1.12.2": - version "1.13.1" - resolved "https://registry.yarnpkg.com/@parcel/css/-/css-1.13.1.tgz#67e3acd3a328e65ddaa8fdb31ae7a47c4a7ee6c9" - integrity sha512-pDv+1tPCk2ggGZ1Msl4r+lq7dPKjUBpZXJf/DMydTnYPxupwAjtmlmOd67CF3QHVLyKYB+viU4g5M8pVXCbaeA== - dependencies: - detect-libc "^1.0.3" - optionalDependencies: - "@parcel/css-darwin-arm64" "1.13.1" - "@parcel/css-darwin-x64" "1.13.1" - "@parcel/css-linux-arm-gnueabihf" "1.13.1" - "@parcel/css-linux-arm64-gnu" "1.13.1" - "@parcel/css-linux-arm64-musl" "1.13.1" - "@parcel/css-linux-x64-gnu" "1.13.1" - "@parcel/css-linux-x64-musl" "1.13.1" - "@parcel/css-win32-x64-msvc" "1.13.1" - -"@parcel/diagnostic@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/diagnostic/-/diagnostic-2.7.0.tgz#cf2596a20ce9277334616e12bbdac98490189e99" - integrity sha512-pdq/cTwVoL0n8yuDCRXFRSQHVWdmmIXPt3R3iT4KtYDYvOrMT2dLPT79IMqQkhYPANW8GuL15n/WxRngfRdkug== +"@parcel/diagnostic@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/diagnostic/-/diagnostic-2.8.2.tgz#7a6ca8c537cd59570ebc44615e1637cfd9675698" + integrity sha512-tGSMwM2rSYLjJW0fCd9gb3tNjfCX/83PZ10/5u2E33UZVkk8OIHsQmsrtq2H2g4oQL3rFxkfEx6nGPDGHwlx7A== dependencies: "@mischnic/json-sourcemap" "^0.1.0" nullthrows "^1.1.1" -"@parcel/events@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/events/-/events-2.7.0.tgz#b6db8464d45626686134d412d3a36d024ffb1482" - integrity sha512-kQDwMKgZ1U4M/G17qeDYF6bW5kybluN6ajYPc7mZcrWg+trEI/oXi81GMFaMX0BSUhwhbiN5+/Vb2wiG/Sn6ig== +"@parcel/events@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/events/-/events-2.8.2.tgz#9ef8d93f1a41369ac1685a1e2bbef7b76390259c" + integrity sha512-o5etrsKm16y8iRPnjtEBNy4lD0WAigD66yt/RZl9Rx0vPVDly/63Rr9+BrXWVW7bJ7x0S0VVpWW4j3f/qZOsXg== -"@parcel/fs-search@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/fs-search/-/fs-search-2.7.0.tgz#15e658006039ddc7b92528df5266ee2b9c47b6a4" - integrity sha512-K1Hv25bnRpwQVA15RvcRuB8ZhfclnCHA8N8L6w7Ul1ncSJDxCIkIAc5hAubYNNYW3kWjCC2SOaEgFKnbvMllEQ== +"@parcel/fs-search@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/fs-search/-/fs-search-2.8.2.tgz#6d68fedac193ef1ab28d3bf4cb69a4c03f44b9a8" + integrity sha512-ovQnupRm/MoE/tbgH0Ivknk0QYenXAewjcog+T5umDmUlTmnIRZjURrgDf5Xtw8T/CD5Xv+HmIXpJ9Ez/LzJpw== dependencies: detect-libc "^1.0.3" -"@parcel/fs@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/fs/-/fs-2.7.0.tgz#c9a0c60bdbef7101ff47f2db6b23814c3db06007" - integrity sha512-PU5fo4Hh8y03LZgemgVREttc0wyHQUNmsJCybxTB7EjJie2CqJRumo+DFppArlvdchLwJdc9em03yQV/GNWrEg== +"@parcel/fs@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/fs/-/fs-2.8.2.tgz#380b76962f908cafec1fda6d4bb6ccda450325ab" + integrity sha512-aN8znbMndSqn1xwZEmMblzqmJsxcExv2jKLl/a9RUHAP7LaPYcPZIykDL3YwGCiKTCzjmRpXnNoyosjFFeBaHA== dependencies: - "@parcel/fs-search" "2.7.0" - "@parcel/types" "2.7.0" - "@parcel/utils" "2.7.0" - "@parcel/watcher" "^2.0.0" - "@parcel/workers" "2.7.0" + "@parcel/fs-search" "2.8.2" + "@parcel/types" "2.8.2" + "@parcel/utils" "2.8.2" + "@parcel/watcher" "^2.0.7" + "@parcel/workers" "2.8.2" -"@parcel/graph@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/graph/-/graph-2.7.0.tgz#2ae326c62764aaa53324b89d9c83ec0bc6ad55bf" - integrity sha512-Q6E94GS6q45PtsZh+m+gvFRp/N1Qopxhu2sxjcWsGs5iBd6IWn2oYLWOH5iVzEjWuYpW2HkB08lH6J50O63uOA== +"@parcel/graph@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/graph/-/graph-2.8.2.tgz#f5bb5664f50f6dcb435beb75d0e663879fce890d" + integrity sha512-SLEvBQBgfkXgU4EBu30+CNanpuKjcNuEv/x8SwobCF0i3Rk+QKbe7T36bNR7727mao++2Ha69q93Dd9dTPw0kQ== dependencies: - "@parcel/utils" "2.7.0" nullthrows "^1.1.1" -"@parcel/hash@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/hash/-/hash-2.7.0.tgz#8825cff69a0bc4816737415e6e2aa29e8671c0b1" - integrity sha512-k6bSKnIlPJMPU3yjQzfgfvF9zuJZGOAlJgzpL4BbWvdbE8BTdjzLcFn0Ujrtud94EgIkiXd22sC2HpCUWoHGdA== +"@parcel/hash@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/hash/-/hash-2.8.2.tgz#f621431391cf873139125bacd4617c493c737cd7" + integrity sha512-NBnP8Hu0xvAqAfZXRaMM66i8nJyxpKS86BbhwkbgTGbwO1OY87GERliHeREJfcER0E0ZzwNow7MNR8ZDm6IvJQ== dependencies: detect-libc "^1.0.3" xxhash-wasm "^0.4.2" -"@parcel/logger@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/logger/-/logger-2.7.0.tgz#1aa1de0458bdd613714ce4031134d92135aec590" - integrity sha512-qjMY/bYo38+o+OiIrTRldU9CwL1E7J72t+xkTP8QIcUxLWz5LYR0YbynZUVulmBSfqsykjjxCy4a+8siVr+lPw== +"@parcel/logger@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/logger/-/logger-2.8.2.tgz#21df19cf2a084d247199b71a01511560a7ba98fc" + integrity sha512-zlhK6QHxfFJMlVJxxcCw0xxBDrYPFPOhMxSD6p6b0z9Yct1l3NdpmfabgjKX8wnZmHokFsil6daleM+M80n2Ew== dependencies: - "@parcel/diagnostic" "2.7.0" - "@parcel/events" "2.7.0" + "@parcel/diagnostic" "2.8.2" + "@parcel/events" "2.8.2" -"@parcel/markdown-ansi@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/markdown-ansi/-/markdown-ansi-2.7.0.tgz#4ba70e3661ce06cd8fd2eb3f7b84028853a586e4" - integrity sha512-ipOX0D6FVZFEXeb/z8MnTMq2RQEIuaILY90olVIuHEFLHHfOPEn+RK3u13HA1ChF5/9E3cMD79tu6x9JL9Kqag== +"@parcel/markdown-ansi@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/markdown-ansi/-/markdown-ansi-2.8.2.tgz#cb453c70de9c1ea85e2650fb46abbdf2ccbafa9e" + integrity sha512-5y29TXgRgG0ybuXaDsDk4Aofg/nDUeAAyVl9/toYCDDhxpQV4yZt8WNPu4PaNYKGLuNgXwsmz+ryZQHGmfbAIQ== dependencies: chalk "^4.1.0" -"@parcel/namer-default@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/namer-default/-/namer-default-2.7.0.tgz#e008097586016f16509834db11985dcc772c314c" - integrity sha512-lIKMdsmi//7fepecNDYmJYzBlL91HifPsX03lJCdu1dC6q5fBs+gG0XjKKG7yPnSCw1qH/4m7drzt9+dRZYAHQ== +"@parcel/namer-default@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/namer-default/-/namer-default-2.8.2.tgz#4106cffaa48359ce1ad4e504497a6d7d8db7935e" + integrity sha512-sMLW/bDWXA6IE7TQKOsBnA5agZGNvZ9qIXKZEUTsTloUjMdAWI8NYA1s0i9HovnGxI5uGlgevrftK4S5V4AdkA== dependencies: - "@parcel/diagnostic" "2.7.0" - "@parcel/plugin" "2.7.0" + "@parcel/diagnostic" "2.8.2" + "@parcel/plugin" "2.8.2" nullthrows "^1.1.1" -"@parcel/node-resolver-core@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/node-resolver-core/-/node-resolver-core-2.7.0.tgz#468074aa58a2f0026a492607153079ebb16308e3" - integrity sha512-5UJQHalqMxdhJIs2hhqQzFfQpF7+NAowsRq064lYtiRvcD8wMr3OOQ9wd1iazGpFSl4JKdT7BwDU9/miDJmanQ== +"@parcel/node-resolver-core@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/node-resolver-core/-/node-resolver-core-2.8.2.tgz#5113e476367aa9e48a021d13624e0d5ca68cb42f" + integrity sha512-D/NJEz/h/C3RmUOWSTg0cLwG3uRVHY9PL+3YGO/c8tKu8PlS2j55XtntdiVfwkK+P6avLCnrJnv/gwTa79dOPw== dependencies: - "@parcel/diagnostic" "2.7.0" - "@parcel/utils" "2.7.0" + "@parcel/diagnostic" "2.8.2" + "@parcel/utils" "2.8.2" nullthrows "^1.1.1" semver "^5.7.1" -"@parcel/optimizer-css@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/optimizer-css/-/optimizer-css-2.7.0.tgz#460cde19b9ee61efed577473cb0822796b6e8b1a" - integrity sha512-IfnOMACqhcAclKyOW9X9JpsknB6OShk9OVvb8EvbDTKHJhQHNNmzE88OkSI/pS3ZVZP9Zj+nWcVHguV+kvDeiQ== - dependencies: - "@parcel/css" "^1.12.2" - "@parcel/diagnostic" "2.7.0" - "@parcel/plugin" "2.7.0" - "@parcel/source-map" "^2.0.0" - "@parcel/utils" "2.7.0" +"@parcel/optimizer-css@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/optimizer-css/-/optimizer-css-2.8.2.tgz#3d3be3303db776cc9acbcc82d9e0a8b6d67cde5c" + integrity sha512-pQEuKhk0PJuYI3hrXlf4gpuuPy+MZUDzC44ulQM7kVcVJ0OofuJQQeHfTLE+v5wClFDd29ZQZ7RsLP5RyUQ+Lg== + dependencies: + "@parcel/diagnostic" "2.8.2" + "@parcel/plugin" "2.8.2" + "@parcel/source-map" "^2.1.1" + "@parcel/utils" "2.8.2" browserslist "^4.6.6" + lightningcss "^1.16.1" nullthrows "^1.1.1" -"@parcel/optimizer-htmlnano@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/optimizer-htmlnano/-/optimizer-htmlnano-2.7.0.tgz#d2e843b539a430fcca723f08efcee26f98b3d40b" - integrity sha512-5QrGdWS5Hi4VXE3nQNrGqugmSXt68YIsWwKRAdarOxzyULSJS3gbCiQOXqIPRJobfZjnSIcdtkyxSiCUe1inIA== +"@parcel/optimizer-htmlnano@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/optimizer-htmlnano/-/optimizer-htmlnano-2.8.2.tgz#988c3bf6a7ca513ab8d0a3e41bbe1204eb27187c" + integrity sha512-4+3wi+Yi+hsf5/LolX59JXFe/7bLpI6NetUBgtoxOVm/EzFg1NGSNOcrthzEcgGj6+MMSdzBAxRTPObAfDxJCA== dependencies: - "@parcel/plugin" "2.7.0" + "@parcel/plugin" "2.8.2" htmlnano "^2.0.0" nullthrows "^1.1.1" posthtml "^0.16.5" svgo "^2.4.0" -"@parcel/optimizer-image@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/optimizer-image/-/optimizer-image-2.7.0.tgz#180d7709e6268e0634967eb265bf901aba2471ce" - integrity sha512-EnaXz5UjR67FUu0BEcqZTT9LsbB/iFAkkghCotbnbOuC5QQsloq6tw54TKU3y+R3qsjgUoMtGxPcGfVoXxZXYw== +"@parcel/optimizer-image@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/optimizer-image/-/optimizer-image-2.8.2.tgz#5d44a0b658db5a0ab7749edbe29ce118d5e09011" + integrity sha512-/ICYG0smbMkli+su4m/ENQPxQDCPYYTJTjseKwl+t1vyj6wqNF99mNI4c0RE2TIPuDneGwSz7PlHhC2JmdgxfQ== dependencies: - "@parcel/diagnostic" "2.7.0" - "@parcel/plugin" "2.7.0" - "@parcel/utils" "2.7.0" - "@parcel/workers" "2.7.0" + "@parcel/diagnostic" "2.8.2" + "@parcel/plugin" "2.8.2" + "@parcel/utils" "2.8.2" + "@parcel/workers" "2.8.2" detect-libc "^1.0.3" -"@parcel/optimizer-svgo@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/optimizer-svgo/-/optimizer-svgo-2.7.0.tgz#9b4ab38a9d3c99504cf399a5c7709e5d2a615e71" - integrity sha512-IO1JV4NpfP3V7FrhsqCcV8pDQIHraFi1/ZvEJyssITxjH49Im/txKlwMiQuZZryAPn8Xb8g395Muawuk6AK6sg== +"@parcel/optimizer-svgo@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/optimizer-svgo/-/optimizer-svgo-2.8.2.tgz#057c245900640b9e4f0f6f1a96d7ae6b4185ce17" + integrity sha512-nFWyM+CBtgBixqknpbN4R92v8PK7Gjlrsb8vxN/IIr/3Pjk+DfoT51DnynhU7AixvDylYkgjjqrQ7uFYYl0OKA== dependencies: - "@parcel/diagnostic" "2.7.0" - "@parcel/plugin" "2.7.0" - "@parcel/utils" "2.7.0" + "@parcel/diagnostic" "2.8.2" + "@parcel/plugin" "2.8.2" + "@parcel/utils" "2.8.2" svgo "^2.4.0" -"@parcel/optimizer-terser@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/optimizer-terser/-/optimizer-terser-2.7.0.tgz#b9ef408f45714952d1502940b6a63e5ebd3f0940" - integrity sha512-07VZjIO8xsl2/WmS/qHI8lI/cpu47iS9eRpqwfZEEsdk1cfz50jhWkmFudHBxiHGMfcZ//1+DdaPg9RDBWZtZA== +"@parcel/optimizer-terser@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/optimizer-terser/-/optimizer-terser-2.8.2.tgz#9126bf66bc4d88fe5b2325eafd6fcbc431e5a284" + integrity sha512-jFAOh9WaO6oNc8B9qDsCWzNkH7nYlpvaPn0w3ZzpMDi0HWD+w+xgO737rWLJWZapqUDSOs0Q/hDFEZ82/z0yxA== dependencies: - "@parcel/diagnostic" "2.7.0" - "@parcel/plugin" "2.7.0" - "@parcel/source-map" "^2.0.0" - "@parcel/utils" "2.7.0" + "@parcel/diagnostic" "2.8.2" + "@parcel/plugin" "2.8.2" + "@parcel/source-map" "^2.1.1" + "@parcel/utils" "2.8.2" nullthrows "^1.1.1" terser "^5.2.0" -"@parcel/package-manager@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/package-manager/-/package-manager-2.7.0.tgz#5de1bf5c94d95330e98dffb2a66c22d1f20c4c8a" - integrity sha512-wmfSX1mRrTi8MeA4KrnPk/x7zGUsILCQmTo6lA4gygzAxDbM1pGuyFN8/Kt0y0SFO2lbljARtD/4an5qdotH+Q== - dependencies: - "@parcel/diagnostic" "2.7.0" - "@parcel/fs" "2.7.0" - "@parcel/logger" "2.7.0" - "@parcel/types" "2.7.0" - "@parcel/utils" "2.7.0" - "@parcel/workers" "2.7.0" +"@parcel/package-manager@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/package-manager/-/package-manager-2.8.2.tgz#fd7886bb4f828929ffed93cfc345cf160b540d4c" + integrity sha512-hx4Imi0yhsSS0aNZkEANPYNNKqBuR63EUNWSxMyHh4ZOvbHoOXnMn1ySGdx6v0oi9HvKymNsLMQ1T5CuI4l4Bw== + dependencies: + "@parcel/diagnostic" "2.8.2" + "@parcel/fs" "2.8.2" + "@parcel/logger" "2.8.2" + "@parcel/types" "2.8.2" + "@parcel/utils" "2.8.2" + "@parcel/workers" "2.8.2" semver "^5.7.1" -"@parcel/packager-css@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/packager-css/-/packager-css-2.7.0.tgz#060af8b96e5ad53620b4021610364804e26d69b2" - integrity sha512-44nzZwu+ssGuiFmYM6cf/Y4iChiUZ4DUzzpegnGlhXtKJKe4NHntxThJynuRZWKN2AAf48avApDpimg2jW0KDw== +"@parcel/packager-css@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/packager-css/-/packager-css-2.8.2.tgz#f7a07aa9625edbaf0c5c07ee8b5be77ab64cc0d7" + integrity sha512-l2fR5qr1moUWLOqQZPxtH6DBKbaKcxzEPAmQ+f15dHt8eQxU15MyQ4DHX41b5B7HwaumgCqe0NkuTF3DedpJKg== dependencies: - "@parcel/plugin" "2.7.0" - "@parcel/source-map" "^2.0.0" - "@parcel/utils" "2.7.0" + "@parcel/plugin" "2.8.2" + "@parcel/source-map" "^2.1.1" + "@parcel/utils" "2.8.2" nullthrows "^1.1.1" -"@parcel/packager-html@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/packager-html/-/packager-html-2.7.0.tgz#4f86698d05f5ec5c3ebc8b46102a6ae42c58a24a" - integrity sha512-Zgqd7sdcY/UnR370GR0q2ilmEohUDXsO8A1F28QCJzIsR1iCB6KRUT74+pawfQ1IhXZLaaFLLYe0UWcfm0JeXg== +"@parcel/packager-html@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/packager-html/-/packager-html-2.8.2.tgz#17b47368aebf675c906d036b4ac245ceab39102a" + integrity sha512-/oiTsKZ5OyF9OwAVGHANNuW2TB3k3cVub1QfttSKJgG3sAhrOifb1dP8zBHMxvUrB0CJdYhGlgi1Jth9kjACCg== dependencies: - "@parcel/plugin" "2.7.0" - "@parcel/types" "2.7.0" - "@parcel/utils" "2.7.0" + "@parcel/plugin" "2.8.2" + "@parcel/types" "2.8.2" + "@parcel/utils" "2.8.2" nullthrows "^1.1.1" posthtml "^0.16.5" -"@parcel/packager-js@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/packager-js/-/packager-js-2.7.0.tgz#e694cc731d75697e63d3d4be0bdbbe4a2ae8f1fc" - integrity sha512-wTRdM81PgRVDzWGXdWmqLwguWnTYWzhEDdjXpW2n8uMOu/CjHhMtogk65aaYk3GOnq6OBL/NsrmBiV/zKPj1vA== - dependencies: - "@parcel/diagnostic" "2.7.0" - "@parcel/hash" "2.7.0" - "@parcel/plugin" "2.7.0" - "@parcel/source-map" "^2.0.0" - "@parcel/utils" "2.7.0" +"@parcel/packager-js@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/packager-js/-/packager-js-2.8.2.tgz#5378107d81847c654f1c3534b4638470a21c4419" + integrity sha512-48LtHP4lJn8J1aBeD4Ix/YjsRxrBUkzbx7czdUeRh2PlCqY4wwIhciVlEFipj/ANr3ieSX44lXyVPk/ttnSdrw== + dependencies: + "@parcel/diagnostic" "2.8.2" + "@parcel/hash" "2.8.2" + "@parcel/plugin" "2.8.2" + "@parcel/source-map" "^2.1.1" + "@parcel/utils" "2.8.2" globals "^13.2.0" nullthrows "^1.1.1" -"@parcel/packager-raw@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/packager-raw/-/packager-raw-2.7.0.tgz#5b68de05c19bbcf438f40b4ae9f45411ba9739bd" - integrity sha512-jg2Zp8dI5VpIQlaeahXDCfrPN9m/DKht1NkR9P2CylMAwqCcc1Xc1RRiF0wfwcPZpPMpq1265n+4qnB7rjGBlA== +"@parcel/packager-raw@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/packager-raw/-/packager-raw-2.8.2.tgz#380b91e52f37f41686370bb8ea9ffa9583f380a9" + integrity sha512-dGonfFptNV1lgqKaD17ecXBUyIfoG6cJI1cCE1sSoYCEt7r+Rq56X/Gq8oiA3+jjMC7QTls+SmFeMZh26fl77Q== dependencies: - "@parcel/plugin" "2.7.0" + "@parcel/plugin" "2.8.2" -"@parcel/packager-svg@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/packager-svg/-/packager-svg-2.7.0.tgz#e7e96503c86815eca285b9cc8908105075d9ab38" - integrity sha512-EmJg3HpD6/xxKBjir/CdCKJZwI24iVfBuxRS9LUp3xHAIebOzVh1z6IN+i2Di5+NyRwfOFaLliL4uMa1zwbyCA== +"@parcel/packager-svg@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/packager-svg/-/packager-svg-2.8.2.tgz#bf002babdb061f045bf98736b08f4b8d6cc17ecf" + integrity sha512-k7LymTJ4XQA+UcPwFYqJfWs5/Awa4GirNxRWfiFflLqH3F1XvMiKSCIQXmrDM6IaeIqqDDsu6+P5U6YDAzzM3A== dependencies: - "@parcel/plugin" "2.7.0" - "@parcel/types" "2.7.0" - "@parcel/utils" "2.7.0" + "@parcel/plugin" "2.8.2" + "@parcel/types" "2.8.2" + "@parcel/utils" "2.8.2" posthtml "^0.16.4" -"@parcel/plugin@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/plugin/-/plugin-2.7.0.tgz#0211281025d02afbc5a23fba237b7aae02e34e51" - integrity sha512-qqgx+nnMn6/0lRc4lKbLGmhNtBiT93S2gFNB4Eb4Pfz/SxVYoW+fmml+KdfOSiZffWOAH5L6NwhyD7N8aSikzw== +"@parcel/plugin@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/plugin/-/plugin-2.8.2.tgz#f8d147cf32e52f7feff245d64d640890a18a6fd9" + integrity sha512-YG7TWfKsoNm72jbz3b3TLec0qJHVkuAWSzGzowdIhX37cP1kRfp6BU2VcH+qYPP/KYJLzhcZa9n3by147mGcxw== dependencies: - "@parcel/types" "2.7.0" + "@parcel/types" "2.8.2" -"@parcel/reporter-cli@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/reporter-cli/-/reporter-cli-2.7.0.tgz#86499624e258034001b64c10b14e23ae4b92f44b" - integrity sha512-80gEODg8cnAmnxGVuaSVDo8JJ54P9AA2bHwSs1cIkHWlJ3BjDQb83H31bBHncJ5Kn5kQ/j+7WjlqHpTCiOR9PA== +"@parcel/reporter-cli@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/reporter-cli/-/reporter-cli-2.8.2.tgz#bfd63b8bfb0bd72e483f4de496af6dc8e819a97e" + integrity sha512-OIRlBqpKqPpMWRHATT8az8fUAqfceLWlWqgX/CW5cG1i6gefbBWFq2qYxDVBEk1bPDLIUCtqNLhfO8hLyweMjA== dependencies: - "@parcel/plugin" "2.7.0" - "@parcel/types" "2.7.0" - "@parcel/utils" "2.7.0" + "@parcel/plugin" "2.8.2" + "@parcel/types" "2.8.2" + "@parcel/utils" "2.8.2" chalk "^4.1.0" term-size "^2.2.1" -"@parcel/reporter-dev-server@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/reporter-dev-server/-/reporter-dev-server-2.7.0.tgz#9bd3d10f745e0cbc9ab983ec046953c2c564dcb2" - integrity sha512-ySuou5addK8fGue8aXzo536BaEjMujDrEc1xkp4TasInXHVcA98b+SYX5NAZTGob5CxKvZQ5ylhg77zW30B+iA== +"@parcel/reporter-dev-server@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/reporter-dev-server/-/reporter-dev-server-2.8.2.tgz#f822e694ba9cbfce52ee2b4157b186819c48ce40" + integrity sha512-A16pAQSAT8Yilo1yCPZcrtWbRhwyiMopEz0mOyGobA1ZDy6B3j4zjobIWzdPQCSIY7+v44vtWMDGbdGrxt6M1Q== dependencies: - "@parcel/plugin" "2.7.0" - "@parcel/utils" "2.7.0" + "@parcel/plugin" "2.8.2" + "@parcel/utils" "2.8.2" -"@parcel/resolver-default@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/resolver-default/-/resolver-default-2.7.0.tgz#648a257b81abe2eda09700d8f36348a88ea0442e" - integrity sha512-v8TvWsbLK7/q7n4gv6OrYNbW18xUx4zKbVMGZb1u4yMhzEH4HFr1D9OeoTq3jk+ximAigds8B6triQbL5exF7A== +"@parcel/resolver-default@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/resolver-default/-/resolver-default-2.8.2.tgz#8a3e9721c82951700e3cc974c2a482f1d52a44e0" + integrity sha512-mlowJMjFjyps9my8wd13kgeExJ5EgkPAuIxRSSWW+GPR7N3uA5DBJ+SB/CzdhCkPrXR6kwVWxNkkOch38pzOQQ== dependencies: - "@parcel/node-resolver-core" "2.7.0" - "@parcel/plugin" "2.7.0" + "@parcel/node-resolver-core" "2.8.2" + "@parcel/plugin" "2.8.2" -"@parcel/runtime-browser-hmr@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/runtime-browser-hmr/-/runtime-browser-hmr-2.7.0.tgz#aed79b96c0d97021f56f2b7e35bc2d4f70869e26" - integrity sha512-PLbMLdclQeYsi2LkilZVGFV1n3y55G1jaBvby4ekedUZjMw3SWdMY2tDxgSDdFWfLCnYHJXdGUQSzGGi1kPzjA== +"@parcel/runtime-browser-hmr@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/runtime-browser-hmr/-/runtime-browser-hmr-2.8.2.tgz#b927aeba5bf76ec43731caf9c11cd09f504304e1" + integrity sha512-VRM8mxakMglqRB0f5eAuwCigjJ5vlaJMwHy+JuzOsn/yVSELOb+6psRKl2B9hhxp9sJPt4IU6KDdH2IOrgx87Q== dependencies: - "@parcel/plugin" "2.7.0" - "@parcel/utils" "2.7.0" + "@parcel/plugin" "2.8.2" + "@parcel/utils" "2.8.2" -"@parcel/runtime-js@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/runtime-js/-/runtime-js-2.7.0.tgz#63dd744e96c3554ac86778ffce1c8055e7653fce" - integrity sha512-9/YUZTBNrSN2H6rbz/o1EOM0O7I3ZR/x9IDzxjJBD6Mi+0uCgCD02aedare/SNr1qgnbZZWmhpOzC+YgREcfLA== +"@parcel/runtime-js@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/runtime-js/-/runtime-js-2.8.2.tgz#f5a221df97c35c5660d2d9e3f5da607ba24e5276" + integrity sha512-Vk3Gywn2M9qP5X4lF6tu8QXP4xNI90UOSOhKHQ9W5pCu+zvD0Gdvu7qwQPFuFjIAq08xU7+PvZzGnlnM+8NyRw== dependencies: - "@parcel/plugin" "2.7.0" - "@parcel/utils" "2.7.0" + "@parcel/plugin" "2.8.2" + "@parcel/utils" "2.8.2" nullthrows "^1.1.1" -"@parcel/runtime-react-refresh@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/runtime-react-refresh/-/runtime-react-refresh-2.7.0.tgz#c56b847ef1144264e918339381e040ffe811efc5" - integrity sha512-vDKO0rWqRzEpmvoZ4kkYUiSsTxT5NnH904BFPFxKI0wJCl6yEmPuEifmATo73OuYhP6jIP3Qfl1R4TtiDFPJ1Q== +"@parcel/runtime-react-refresh@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/runtime-react-refresh/-/runtime-react-refresh-2.8.2.tgz#107eed92bc5b3ac30ddeb45489b7813720c415e6" + integrity sha512-JjaMvBVx6v0zB1KHa7AopciIsl3FpjUMttr2tb6L7lzocti2muQGE6GBfinXOmD5oERwCf8HwGJ8SNFcIF0rKA== dependencies: - "@parcel/plugin" "2.7.0" - "@parcel/utils" "2.7.0" + "@parcel/plugin" "2.8.2" + "@parcel/utils" "2.8.2" react-error-overlay "6.0.9" react-refresh "^0.9.0" -"@parcel/runtime-service-worker@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/runtime-service-worker/-/runtime-service-worker-2.7.0.tgz#352c3722ec635eee2898d9698541e3c1f53e8906" - integrity sha512-uD2pAV0yV6+e7JaWH4KVPbG+zRCrxr/OACyS9tIh+Q/R1vRmh8zGM3yhdrcoiZ7tFOnM72vd6xY11eTrUsSVig== +"@parcel/runtime-service-worker@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/runtime-service-worker/-/runtime-service-worker-2.8.2.tgz#f8d2d5665cdb49a423efdf4079f436d3598e5775" + integrity sha512-KSxbOKV8nuH5JjFvcUlCtBYnVVlmxreXpMxRUPphPwJnyxRGA4E0jofbQxWY5KPgp7x/ZnZU/nyzCvqURH3kHA== dependencies: - "@parcel/plugin" "2.7.0" - "@parcel/utils" "2.7.0" + "@parcel/plugin" "2.8.2" + "@parcel/utils" "2.8.2" nullthrows "^1.1.1" -"@parcel/source-map@^2.0.0": - version "2.0.0" - resolved "https://registry.yarnpkg.com/@parcel/source-map/-/source-map-2.0.0.tgz#41cf004109bbf277ceaf096a58838ff6a59af774" - integrity sha512-njoUJpj2646NebfHp5zKJeYD1KwhsfQIoU9TnCTHmF9fGOaPbClmeq12G6/4ZqGASftRq+YhhukFBi/ncWKGvw== +"@parcel/source-map@^2.1.1": + version "2.1.1" + resolved "https://registry.yarnpkg.com/@parcel/source-map/-/source-map-2.1.1.tgz#fb193b82dba6dd62cc7a76b326f57bb35000a782" + integrity sha512-Ejx1P/mj+kMjQb8/y5XxDUn4reGdr+WyKYloBljpppUy8gs42T+BNoEOuRYqDVdgPc6NxduzIDoJS9pOFfV5Ew== dependencies: detect-libc "^1.0.3" - globby "^11.0.3" -"@parcel/transformer-babel@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/transformer-babel/-/transformer-babel-2.7.0.tgz#eae98d50a99cd722c3146cd57c479bfb86f537b2" - integrity sha512-7iklDXXnKH1530+QbI+e4kIJ+Q1puA1ulRS10db3aUJMj5GnvXGDFwhSZ7+T1ps66QHO7cVO29VlbqiRDarH1Q== +"@parcel/transformer-babel@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/transformer-babel/-/transformer-babel-2.8.2.tgz#277416b6bb4e691869e3c7f9dff0abeec4462841" + integrity sha512-oL2BpvrPMwFiU9jUZ9UYGD1gRgvq9jLsOq+/PJl4GvPbOBVedIBE2nbHP/mYuWRpRnTTTiJQ/ItyOS0R2VQl7A== dependencies: - "@parcel/diagnostic" "2.7.0" - "@parcel/plugin" "2.7.0" - "@parcel/source-map" "^2.0.0" - "@parcel/utils" "2.7.0" + "@parcel/diagnostic" "2.8.2" + "@parcel/plugin" "2.8.2" + "@parcel/source-map" "^2.1.1" + "@parcel/utils" "2.8.2" browserslist "^4.6.6" json5 "^2.2.0" nullthrows "^1.1.1" semver "^5.7.0" -"@parcel/transformer-css@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/transformer-css/-/transformer-css-2.7.0.tgz#d0879ec04191e5ba3eadb6fc06b7ec0db3f5c3f6" - integrity sha512-J4EpWK9spQpXyNCmKK8Xnane0xW/1B/EAmfp7Fiv7g+5yUjY4ODf4KUugvE+Eb2gekPkhOKNHermO2KrX0/PFA== - dependencies: - "@parcel/css" "^1.12.2" - "@parcel/diagnostic" "2.7.0" - "@parcel/plugin" "2.7.0" - "@parcel/source-map" "^2.0.0" - "@parcel/utils" "2.7.0" +"@parcel/transformer-css@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/transformer-css/-/transformer-css-2.8.2.tgz#c00b48657a7fe35701686972f68633c72259cf87" + integrity sha512-q8UDlX/TTCbuFBMU45q12/p92JNIz8MHkkH104dWDzXbRtvMKMg8jgNmr8S2bouZjtXMsSb2c54EO88DSM9G4A== + dependencies: + "@parcel/diagnostic" "2.8.2" + "@parcel/plugin" "2.8.2" + "@parcel/source-map" "^2.1.1" + "@parcel/utils" "2.8.2" browserslist "^4.6.6" + lightningcss "^1.16.1" nullthrows "^1.1.1" -"@parcel/transformer-html@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/transformer-html/-/transformer-html-2.7.0.tgz#5397a924fea683ef2c345f36f99f67f0181d6967" - integrity sha512-wYJl5rn81W+Rlk9oQwDJcjoVsWVDKyeri84FzmlGXOsg0EYgnqOiG+3MDM8GeZjfuGe5fuoum4eqZeS0WdUHXw== +"@parcel/transformer-html@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/transformer-html/-/transformer-html-2.8.2.tgz#1d37fd56cde779d8a6f2074dfa55d051a17a27a4" + integrity sha512-QDgDw6+DAcllaRQiRteMX0VgPIsxRUTXFS8jcXhbGio41LbUkLcT09M04L/cfJAAzvIKhXqiOxfNnyajTvCPDQ== dependencies: - "@parcel/diagnostic" "2.7.0" - "@parcel/hash" "2.7.0" - "@parcel/plugin" "2.7.0" + "@parcel/diagnostic" "2.8.2" + "@parcel/hash" "2.8.2" + "@parcel/plugin" "2.8.2" nullthrows "^1.1.1" posthtml "^0.16.5" posthtml-parser "^0.10.1" posthtml-render "^3.0.0" semver "^5.7.1" -"@parcel/transformer-image@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/transformer-image/-/transformer-image-2.7.0.tgz#e569ffc426c6060bc4dcccc0347c526930abfba4" - integrity sha512-mhi9/R5/ULhCkL2COVIKhNFoLDiZwQgprdaTJr5fnODggVxEX5o7ebFV6KNLMTEkwZUJWoB1hL0ziI0++DtoFA== +"@parcel/transformer-image@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/transformer-image/-/transformer-image-2.8.2.tgz#3072081c21a1de9a1c3a5c0fed7d5def65f1338d" + integrity sha512-B/D9v/BVyN5jxoi+wHPbIRfMIylmC6adp8GP+BtChjbuRjukgGT8RlAVz4vDm1l0bboeyPL2IuoWRQgXKGuPVg== dependencies: - "@parcel/plugin" "2.7.0" - "@parcel/utils" "2.7.0" - "@parcel/workers" "2.7.0" + "@parcel/plugin" "2.8.2" + "@parcel/utils" "2.8.2" + "@parcel/workers" "2.8.2" nullthrows "^1.1.1" -"@parcel/transformer-js@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/transformer-js/-/transformer-js-2.7.0.tgz#1e69295a11bf70d880cdd3846cf89016a74aac50" - integrity sha512-mzerR+D4rDomUSIk5RSTa2w+DXBdXUeQrpDO74WCDdpDi1lIl8ppFpqtmU7O6y6p8QsgkmS9b0g/vhcry6CJTA== - dependencies: - "@parcel/diagnostic" "2.7.0" - "@parcel/plugin" "2.7.0" - "@parcel/source-map" "^2.0.0" - "@parcel/utils" "2.7.0" - "@parcel/workers" "2.7.0" - "@swc/helpers" "^0.4.2" +"@parcel/transformer-js@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/transformer-js/-/transformer-js-2.8.2.tgz#cb7b954836011656f1807b2da1900377ebd16df6" + integrity sha512-mLksi6gu/20JdCFDNPl7Y0HTwJOAvf2ybC2HaJcy69PJCeUrrstgiFTjsCwv1eKcesgEHi9kKX+sMHVAH3B/dA== + dependencies: + "@parcel/diagnostic" "2.8.2" + "@parcel/plugin" "2.8.2" + "@parcel/source-map" "^2.1.1" + "@parcel/utils" "2.8.2" + "@parcel/workers" "2.8.2" + "@swc/helpers" "^0.4.12" browserslist "^4.6.6" detect-libc "^1.0.3" nullthrows "^1.1.1" regenerator-runtime "^0.13.7" semver "^5.7.1" -"@parcel/transformer-json@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/transformer-json/-/transformer-json-2.7.0.tgz#c203f74cd445ce93eb833dd88be8127d1eadc6c3" - integrity sha512-RQjuxBpYOch+kr4a0zi77KJtOLTPYRM7iq4NN80zKnA0r0dwDUCxZBtaj2l0O0o3R4MMJnm+ncP+cB7XR7dZYA== +"@parcel/transformer-json@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/transformer-json/-/transformer-json-2.8.2.tgz#f184290c35ded6124fdd222e40e1c27e9e2726b6" + integrity sha512-eZuaY5tMxcMDJwpHJbPVTgSaBIO4mamwAa3VulN9kRRaf29nc+Q0iM7zMFVHWFQAi/mZZ194IIQXbDX3r6oSSQ== dependencies: - "@parcel/plugin" "2.7.0" + "@parcel/plugin" "2.8.2" json5 "^2.2.0" -"@parcel/transformer-postcss@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/transformer-postcss/-/transformer-postcss-2.7.0.tgz#66be4469ae9186c89638ff67ec5808139caaeb8e" - integrity sha512-b6RskXBWf0MjpC9qjR2dQ1ZdRnlOiKYseG5CEovWCqM218RtdydFKz7jS+5Gxkb6qBtOG7zGPONXdPe+gTILcA== +"@parcel/transformer-postcss@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/transformer-postcss/-/transformer-postcss-2.8.2.tgz#ca1db56e639a6fcef134128cf8c172999c21bc10" + integrity sha512-0Vb4T2e0QinNDps1/PxYsZwEzWieVxoW++AAUD3gzg0MfSyRc72MPc27CLOnziiRDyOUl+62gqpnNzq9xaKExA== dependencies: - "@parcel/diagnostic" "2.7.0" - "@parcel/hash" "2.7.0" - "@parcel/plugin" "2.7.0" - "@parcel/utils" "2.7.0" + "@parcel/diagnostic" "2.8.2" + "@parcel/hash" "2.8.2" + "@parcel/plugin" "2.8.2" + "@parcel/utils" "2.8.2" clone "^2.1.1" nullthrows "^1.1.1" postcss-value-parser "^4.2.0" semver "^5.7.1" -"@parcel/transformer-posthtml@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/transformer-posthtml/-/transformer-posthtml-2.7.0.tgz#67d5761b895574edb771f7ab1b24ec80775f58bd" - integrity sha512-cP8YOiSynWJ1ycmBlhnnHeuQb2cwmklZ+BNyLUktj5p78kDy2de7VjX+dRNRHoW4H9OgEcSF4UEfDVVz5RYIhw== +"@parcel/transformer-posthtml@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/transformer-posthtml/-/transformer-posthtml-2.8.2.tgz#efcb8554211facbc70cc9e53c125d5ae31b26bff" + integrity sha512-Ub7o6QlH7+xHHHdhvR7MxTqjyLVqeJopPSzy4yP+Bd72tWVjaVm7f76SUl+p7VjhLTMkmczr9OxG3k0SFHEbGw== dependencies: - "@parcel/plugin" "2.7.0" - "@parcel/utils" "2.7.0" + "@parcel/plugin" "2.8.2" + "@parcel/utils" "2.8.2" nullthrows "^1.1.1" posthtml "^0.16.5" posthtml-parser "^0.10.1" posthtml-render "^3.0.0" semver "^5.7.1" -"@parcel/transformer-raw@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/transformer-raw/-/transformer-raw-2.7.0.tgz#d6d8b94d1b33efc3dbf748ec1954c8917a2e1566" - integrity sha512-sDnItWCFSDez0izK1i5cgv+kXzZTbcJh4rNpVIgmE1kBLvAz608sqgcCkavb2wVJIvLesxYM+5G4p1CwkDlZ1g== +"@parcel/transformer-raw@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/transformer-raw/-/transformer-raw-2.8.2.tgz#f463f2bb3c43059c0881381fb1d0453dbf8133aa" + integrity sha512-xSzyZtrfisbx0R7xkuFJ/FksKyWaUFN18F9/0bLF8wo5LrOTQoYQatjun7/Rbq5mELBK/0ZPp7uJ02OqLRd2mA== dependencies: - "@parcel/plugin" "2.7.0" + "@parcel/plugin" "2.8.2" -"@parcel/transformer-react-refresh-wrap@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/transformer-react-refresh-wrap/-/transformer-react-refresh-wrap-2.7.0.tgz#e206b529d4a3444e14ba329d3323c5be3ded25d2" - integrity sha512-1vRmIJzyBA1nIiXTAU6tZExq2FvJj/2F0ft6KDw8GYPv0KjmdiPo/PmaZ7JeSVOM6SdXQIQCbTmp1vkMP7DtkA== +"@parcel/transformer-react-refresh-wrap@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/transformer-react-refresh-wrap/-/transformer-react-refresh-wrap-2.8.2.tgz#26cde09bcef82ac6b2a2e1ce89172f8f622aef7b" + integrity sha512-UXBILYFXaj5zh1DzoYXoS3Wuq1+6WjoRQaFTUA5xrF3pjJb6LAXxWru3R20zR5INHIZXPxdQJB0b+epnmyjK4w== dependencies: - "@parcel/plugin" "2.7.0" - "@parcel/utils" "2.7.0" + "@parcel/plugin" "2.8.2" + "@parcel/utils" "2.8.2" react-refresh "^0.9.0" -"@parcel/transformer-svg@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/transformer-svg/-/transformer-svg-2.7.0.tgz#c2a7d10bdbc6aeb2ae7ef85db5b583574807071c" - integrity sha512-ioER37zceuuE+K6ZrnjCyMUWEnv+63hIAFResc1OXxRhyt+7kzMz9ZqK0Mt6QMLwl1dxhkLmrU41n9IxzKZuSQ== +"@parcel/transformer-svg@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/transformer-svg/-/transformer-svg-2.8.2.tgz#850fef81cd9822f111c123b4b0c1024b3d58bcc3" + integrity sha512-FyliRrNHOF6tGzwHSzA2CTbkq3iMvS27eozf1kFj6gbO8gfJ5HXYoppQrTb237YZ/WXCHqe/3HVmGyJDZiLr+Q== dependencies: - "@parcel/diagnostic" "2.7.0" - "@parcel/hash" "2.7.0" - "@parcel/plugin" "2.7.0" + "@parcel/diagnostic" "2.8.2" + "@parcel/hash" "2.8.2" + "@parcel/plugin" "2.8.2" nullthrows "^1.1.1" posthtml "^0.16.5" posthtml-parser "^0.10.1" posthtml-render "^3.0.0" semver "^5.7.1" -"@parcel/types@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/types/-/types-2.7.0.tgz#c89e95964339324c1931ef7a17906a72291d6b73" - integrity sha512-+dhXVUnseTCpJvBTGMp0V6X13z6O/A/+CUtwEpMGZ8XSmZ4Gk44GvaTiBOp0bJpWG4fvCKp+UmC8PYbrDiiziw== - dependencies: - "@parcel/cache" "2.7.0" - "@parcel/diagnostic" "2.7.0" - "@parcel/fs" "2.7.0" - "@parcel/package-manager" "2.7.0" - "@parcel/source-map" "^2.0.0" - "@parcel/workers" "2.7.0" +"@parcel/types@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/types/-/types-2.8.2.tgz#1a2cc2ec20a52f42dabd9260dbb912b927e2d75d" + integrity sha512-HAYhokWxM10raIhqaYj9VR9eAvJ+xP2sNfQ1IcQybHpq3qblcBe/4jDeuUpwIyKeQ4gorp7xY+q8KDoR20j43w== + dependencies: + "@parcel/cache" "2.8.2" + "@parcel/diagnostic" "2.8.2" + "@parcel/fs" "2.8.2" + "@parcel/package-manager" "2.8.2" + "@parcel/source-map" "^2.1.1" + "@parcel/workers" "2.8.2" utility-types "^3.10.0" -"@parcel/utils@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/utils/-/utils-2.7.0.tgz#f795d0f43efdd449ab0bbfac3632cd7f3ec0e4dd" - integrity sha512-jNZ5bIGg1r1RDRKi562o4kuVwnz+XJ2Ie3b0Zwrqwvgfj6AbRFIKzDd+h85dWWmcDYzKUbHp11u6VJl1u8Vapg== - dependencies: - "@parcel/codeframe" "2.7.0" - "@parcel/diagnostic" "2.7.0" - "@parcel/hash" "2.7.0" - "@parcel/logger" "2.7.0" - "@parcel/markdown-ansi" "2.7.0" - "@parcel/source-map" "^2.0.0" +"@parcel/utils@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/utils/-/utils-2.8.2.tgz#7e917d2ebd5326e12e878858a416e50706bc804d" + integrity sha512-Ufax7wZxC9FNsUpR0EU7Z22LEY/q9jjsDTwswctCdfpWb7TE/NudOfM9myycfRvwBVEYN50lPbkt1QltEVnXQQ== + dependencies: + "@parcel/codeframe" "2.8.2" + "@parcel/diagnostic" "2.8.2" + "@parcel/hash" "2.8.2" + "@parcel/logger" "2.8.2" + "@parcel/markdown-ansi" "2.8.2" + "@parcel/source-map" "^2.1.1" chalk "^4.1.0" -"@parcel/watcher@^2.0.0": - version "2.0.1" - resolved "https://registry.yarnpkg.com/@parcel/watcher/-/watcher-2.0.1.tgz#ec4bb6c43d9588a1ffd3d2abe6df5b501463c62d" - integrity sha512-XegFF4L8sFn1RzU5KKOZxXUuzgOSwd6+X2ez3Cy6MVhYMbiLZ1moceMTqDhuT3N8DNbdumK3zP1wojsIsnX40w== +"@parcel/watcher@^2.0.7": + version "2.0.7" + resolved "https://registry.yarnpkg.com/@parcel/watcher/-/watcher-2.0.7.tgz#c95fe1370e8c6237cb9729c9c075264acc7e21a5" + integrity sha512-gc3hoS6e+2XdIQ4HHljDB1l0Yx2EWh/sBBtCEFNKGSMlwASWeAQsOY/fPbxOBcZ/pg0jBh4Ga+4xHlZc4faAEQ== dependencies: node-addon-api "^3.2.1" node-gyp-build "^4.3.0" -"@parcel/workers@2.7.0": - version "2.7.0" - resolved "https://registry.yarnpkg.com/@parcel/workers/-/workers-2.7.0.tgz#d74955d361337127227912a5ab26cb3079ebfc78" - integrity sha512-99VfaOX+89+RaoTSyH9ZQtkMBFZBFMvJmVJ/GeJT6QCd2wtKBStTHlaSnQOkLD/iRjJCNwV2xpZmm8YkTwV+hg== +"@parcel/workers@2.8.2": + version "2.8.2" + resolved "https://registry.yarnpkg.com/@parcel/workers/-/workers-2.8.2.tgz#7d170bd153e35ebd7fb59f239930bd5669babe7d" + integrity sha512-Eg6CofIrJSNBa2fjXwvnzVLPKwR/6fkfQTFAm3Jl+4JYLVknBtTSFzQNp/Fa+HUEG889H9ucTk2CBi/fVPBAFw== dependencies: - "@parcel/diagnostic" "2.7.0" - "@parcel/logger" "2.7.0" - "@parcel/types" "2.7.0" - "@parcel/utils" "2.7.0" + "@parcel/diagnostic" "2.8.2" + "@parcel/logger" "2.8.2" + "@parcel/types" "2.8.2" + "@parcel/utils" "2.8.2" chrome-trace-event "^1.0.2" nullthrows "^1.1.1" -"@swc/helpers@^0.4.2": - version "0.4.11" - resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.4.11.tgz#db23a376761b3d31c26502122f349a21b592c8de" - integrity sha512-rEUrBSGIoSFuYxwBYtlUFMlE2CwGhmW+w9355/5oduSw8e5h2+Tj4UrAGNNgP9915++wj5vkQo0UuOBqOAq4nw== +"@swc/helpers@^0.4.12": + version "0.4.14" + resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.4.14.tgz#1352ac6d95e3617ccb7c1498ff019654f1e12a74" + integrity sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw== dependencies: tslib "^2.4.0" @@ -942,11 +864,6 @@ argparse@^2.0.1: resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38" integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q== -array-union@^2.1.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d" - integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw== - autoprefixer@^10.4.8: version "10.4.8" resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.8.tgz#92c7a0199e1cfb2ad5d9427bd585a3d75895b9e5" @@ -1003,7 +920,7 @@ brace-expansion@^1.1.7: balanced-match "^1.0.0" concat-map "0.0.1" -braces@^3.0.1, braces@^3.0.2: +braces@^3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107" integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A== @@ -1162,7 +1079,7 @@ color-string@^1.9.0: color-name "^1.0.0" simple-swizzle "^0.2.2" -color@^4.0.1: +color@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/color/-/color-4.2.3.tgz#d781ecb5e57224ee43ea9627560107c0e0c6463a" integrity sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A== @@ -1372,7 +1289,7 @@ detect-libc@^1.0.3: resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b" integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups= -detect-libc@^2.0.0: +detect-libc@^2.0.0, detect-libc@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.0.1.tgz#e1897aa88fa6ad197862937fbc0441ef352ee0cd" integrity sha512-463v3ZeIrcWtdgIg6vI6XUncguvr2TnGl4SzDXinkt9mSLpBJKXT3mW6xT3VQdDN11+WVs29pgvivTc4Lp8v+w== @@ -1392,13 +1309,6 @@ diff@^5.0.0: resolved "https://registry.yarnpkg.com/diff/-/diff-5.1.0.tgz#bc52d298c5ea8df9194800224445ed43ffc87e40" integrity sha512-D+mk+qE8VC/PAUrlAU34N+VfXev0ghe5ywmpqrawphmVZc1bEfn56uo9qpyGp1p4xpzOHkSW4ztBd6L7Xx4ACw== -dir-glob@^3.0.1: - version "3.0.1" - resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f" - integrity sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA== - dependencies: - path-type "^4.0.0" - dom-serializer@^1.0.1: version "1.3.2" resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.3.2.tgz#6206437d32ceefaec7161803230c7a20bc1b4d91" @@ -1715,24 +1625,6 @@ extract-zip@2.0.1: optionalDependencies: "@types/yauzl" "^2.9.1" -fast-glob@^3.1.1: - version "3.2.7" - resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.7.tgz#fd6cb7a2d7e9aa7a7846111e85a196d6b2f766a1" - integrity sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q== - dependencies: - "@nodelib/fs.stat" "^2.0.2" - "@nodelib/fs.walk" "^1.2.3" - glob-parent "^5.1.2" - merge2 "^1.3.0" - micromatch "^4.0.4" - -fastq@^1.6.0: - version "1.13.0" - resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.13.0.tgz#616760f88a7526bdfc596b7cab8c18938c36b98c" - integrity sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw== - dependencies: - reusify "^1.0.4" - fd-slicer@~1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.1.0.tgz#25c7c89cb1f9077f8891bbe61d8f390eae256f1e" @@ -1880,13 +1772,6 @@ github-from-package@0.0.0: resolved "https://registry.yarnpkg.com/github-from-package/-/github-from-package-0.0.0.tgz#97fb5d96bfde8973313f20e8288ef9a167fa64ce" integrity sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw== -glob-parent@^5.1.2: - version "5.1.2" - resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4" - integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow== - dependencies: - is-glob "^4.0.1" - glob-promise@^4.2.2: version "4.2.2" resolved "https://registry.yarnpkg.com/glob-promise/-/glob-promise-4.2.2.tgz#15f44bcba0e14219cd93af36da6bb905ff007877" @@ -1925,18 +1810,6 @@ globals@^13.2.0: dependencies: type-fest "^0.20.2" -globby@^11.0.3: - version "11.0.4" - resolved "https://registry.yarnpkg.com/globby/-/globby-11.0.4.tgz#2cbaff77c2f2a62e71e9b2813a67b97a3a3001a5" - integrity sha512-9O4MVG9ioZJ08ffbcyVYyLOJLk5JQ688pJ4eMGLpdWLHq/Wr1D9BlriLQyL0E+jbkuePVZXYFj47QM/v093wHg== - dependencies: - array-union "^2.1.0" - dir-glob "^3.0.1" - fast-glob "^3.1.1" - ignore "^5.1.4" - merge2 "^1.3.0" - slash "^3.0.0" - graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6: version "4.2.10" resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c" @@ -2035,11 +1908,6 @@ ieee754@^1.1.13: resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352" integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA== -ignore@^5.1.4: - version "5.1.9" - resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.9.tgz#9ec1a5cbe8e1446ec60d4420060d43aa6e7382fb" - integrity sha512-2zeMQpbKz5dhZ9IwL0gbxSW5w0NK/MSAMtNuhgIHEPmaU3vPdKPL0UdvUCXs5SS4JAwsBxysK5sFMW8ocFiVjQ== - import-fresh@^3.2.1: version "3.3.0" resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b" @@ -2161,7 +2029,7 @@ is-generator-function@^1.0.7: dependencies: has-tostringtag "^1.0.0" -is-glob@^4.0.1, is-glob@^4.0.3: +is-glob@^4.0.3: version "4.0.3" resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084" integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg== @@ -2335,6 +2203,62 @@ kleur@^4.0.3: resolved "https://registry.yarnpkg.com/kleur/-/kleur-4.1.5.tgz#95106101795f7050c6c650f350c683febddb1780" integrity sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ== +lightningcss-darwin-arm64@1.17.1: + version "1.17.1" + resolved "https://registry.yarnpkg.com/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.17.1.tgz#d0384a47f19f1a02c29074930a23e5888e76b11a" + integrity sha512-YTAHEy4XlzI3sMbUVjbPi9P7+N7lGcgl2JhCZhiQdRAEKnZLQch8kb5601sgESxdGXjgei7JZFqi/vVEk81wYg== + +lightningcss-darwin-x64@1.17.1: + version "1.17.1" + resolved "https://registry.yarnpkg.com/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.17.1.tgz#7fa5853f71eb8698b511dbad43305666e0e0d871" + integrity sha512-UhXPUS2+yTTf5sXwUV0+8QY2x0bPGLgC/uhcknWSQMqWn1zGty4fFvH04D7f7ij0ujwSuN+Q0HtU7lgmMrPz0A== + +lightningcss-linux-arm-gnueabihf@1.17.1: + version "1.17.1" + resolved "https://registry.yarnpkg.com/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.17.1.tgz#9ba7ffd5be686210b88ec28bb495bf9593698678" + integrity sha512-alUZumuznB6K/9yZ0zuZkODXUm8uRnvs9t0CL46CXN16Y2h4gOx5ahUCMlelUb7inZEsgJIoepgLsJzBUrSsBw== + +lightningcss-linux-arm64-gnu@1.17.1: + version "1.17.1" + resolved "https://registry.yarnpkg.com/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.17.1.tgz#aeee6b5ed613198aab978c878f26110d6e8e70d2" + integrity sha512-/1XaH2cOjDt+ivmgfmVFUYCA0MtfNWwtC4P8qVi53zEQ7P8euyyZ1ynykZOyKXW9Q0DzrwcLTh6+hxVLcbtGBg== + +lightningcss-linux-arm64-musl@1.17.1: + version "1.17.1" + resolved "https://registry.yarnpkg.com/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.17.1.tgz#14e46b8d2f50e83a710c62432e447bd9f0c328a5" + integrity sha512-/IgE7lYWFHCCQFTMIwtt+fXLcVOha8rcrNze1JYGPWNorO6NBc6MJo5u5cwn5qMMSz9fZCCDIlBBU4mGwjQszQ== + +lightningcss-linux-x64-gnu@1.17.1: + version "1.17.1" + resolved "https://registry.yarnpkg.com/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.17.1.tgz#17b8abb73d7b32338d5b248ac12325f506964e69" + integrity sha512-OyE802IAp4DB9vZrHlOyWunbHLM9dN08tJIKN/HhzzLKIHizubOWX6NMzUXMZLsaUrYwVAHHdyEA+712p8mMzA== + +lightningcss-linux-x64-musl@1.17.1: + version "1.17.1" + resolved "https://registry.yarnpkg.com/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.17.1.tgz#78765c58c111af43e7d311afa4713348ce9b2766" + integrity sha512-ydwGgV3Usba5P53RAOqCA9MsRsbb8jFIEVhf7/BXFjpKNoIQyijVTXhwIgQr/oGwUNOHfgQ3F8ruiUjX/p2YKw== + +lightningcss-win32-x64-msvc@1.17.1: + version "1.17.1" + resolved "https://registry.yarnpkg.com/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.17.1.tgz#be3c5e1f026c4fc6b58f969917970450634285a1" + integrity sha512-Ngqtx9NazaiAOk71XWwSsqgAuwYF+8PO6UYsoU7hAukdrSS98kwaBMEDw1igeIiZy1XD/4kh5KVnkjNf7ZOxVQ== + +lightningcss@^1.16.1: + version "1.17.1" + resolved "https://registry.yarnpkg.com/lightningcss/-/lightningcss-1.17.1.tgz#cce53acf117a6f9494bc77e8ac6550286d621243" + integrity sha512-DwwM/YYqGwLLP3he41wzDXT/m+8jdEZ80i9ViQNLRgyhey3Vm6N7XHn+4o3PY6wSnVT23WLuaROIpbpIVTNOjg== + dependencies: + detect-libc "^1.0.3" + optionalDependencies: + lightningcss-darwin-arm64 "1.17.1" + lightningcss-darwin-x64 "1.17.1" + lightningcss-linux-arm-gnueabihf "1.17.1" + lightningcss-linux-arm64-gnu "1.17.1" + lightningcss-linux-arm64-musl "1.17.1" + lightningcss-linux-x64-gnu "1.17.1" + lightningcss-linux-x64-musl "1.17.1" + lightningcss-win32-x64-msvc "1.17.1" + lilconfig@^2.0.3: version "2.0.3" resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.3.tgz#68f3005e921dafbd2a2afb48379986aa6d2579fd" @@ -2458,11 +2382,6 @@ memoizee@^0.4.15: next-tick "^1.1.0" timers-ext "^0.1.7" -merge2@^1.3.0: - version "1.4.1" - resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae" - integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg== - micromatch@^4.0.2: version "4.0.5" resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6" @@ -2471,14 +2390,6 @@ micromatch@^4.0.2: braces "^3.0.2" picomatch "^2.3.1" -micromatch@^4.0.4: - version "4.0.4" - resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.4.tgz#896d519dfe9db25fce94ceb7a500919bf881ebf9" - integrity sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg== - dependencies: - braces "^3.0.1" - picomatch "^2.2.3" - mimic-response@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-3.1.0.tgz#2d1d59af9c1b129815accc2c46a022a5ce1fa3c9" @@ -2595,11 +2506,16 @@ node-addon-api@^3.2.1: resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-3.2.1.tgz#81325e0a2117789c0128dab65e7e38f07ceba161" integrity sha512-mmcei9JghVNDYydghQmeDX8KoAm0FAiYyIcUt/N4nhyAipB17pllZQDOJD2fotxABnt4Mdz+dKTO7eftLg4d0A== -node-addon-api@^4.2.0, node-addon-api@^4.3.0: +node-addon-api@^4.3.0: version "4.3.0" resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-4.3.0.tgz#52a1a0b475193e0928e98e0426a0d1254782b77f" integrity sha512-73sE9+3UaLYYFmDsFZnqCInzPyh3MqIwZO9cw58yIqAZhONrrabrYyYe3TuIqtIiOuTXVhsGau8hcrhhwSsDIQ== +node-addon-api@^5.0.0: + version "5.0.0" + resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-5.0.0.tgz#7d7e6f9ef89043befdb20c1989c905ebde18c501" + integrity sha512-CvkDw2OEnme7ybCykJpVcKH+uAOLV2qLqiyla128dN9TkEWfrYmxG6C2boDe5KcNQqZF3orkqzGgOMvZ/JNekA== + node-fetch@2.6.5: version "2.6.5" resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.5.tgz#42735537d7f080a7e5f78b6c549b7146be1742fd" @@ -2727,21 +2643,21 @@ p-try@^2.0.0: resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6" integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ== -parcel@^2.7.0: - version "2.7.0" - resolved "https://registry.yarnpkg.com/parcel/-/parcel-2.7.0.tgz#41fdd3e5c7144d4cf7f1fa3ab8d0ea0d47d31f77" - integrity sha512-pRYwnivwtNP0tip8xYSo4zCB0XhLt7/gJzP1p8OovCqkmFjG9VG+GW9TcAKqMIo0ovEa9tT+/s6gY1Qy+BONGQ== - dependencies: - "@parcel/config-default" "2.7.0" - "@parcel/core" "2.7.0" - "@parcel/diagnostic" "2.7.0" - "@parcel/events" "2.7.0" - "@parcel/fs" "2.7.0" - "@parcel/logger" "2.7.0" - "@parcel/package-manager" "2.7.0" - "@parcel/reporter-cli" "2.7.0" - "@parcel/reporter-dev-server" "2.7.0" - "@parcel/utils" "2.7.0" +parcel@^2.8.2: + version "2.8.2" + resolved "https://registry.yarnpkg.com/parcel/-/parcel-2.8.2.tgz#6539c0a435b14e5829d09254b0394dcfbc0b0ba5" + integrity sha512-XMVf3Ip9Iokv0FC3ulN/B0cb5O21qaw0RhUPz7zULQlY794ZpFP9mNtN7HvCVEgjl5/q2sYMcTA8l+5QJ2zZ/Q== + dependencies: + "@parcel/config-default" "2.8.2" + "@parcel/core" "2.8.2" + "@parcel/diagnostic" "2.8.2" + "@parcel/events" "2.8.2" + "@parcel/fs" "2.8.2" + "@parcel/logger" "2.8.2" + "@parcel/package-manager" "2.8.2" + "@parcel/reporter-cli" "2.8.2" + "@parcel/reporter-dev-server" "2.8.2" + "@parcel/utils" "2.8.2" chalk "^4.1.0" commander "^7.0.0" get-port "^4.2.0" @@ -2824,11 +2740,6 @@ picocolors@^1.0.0: resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c" integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ== -picomatch@^2.2.3: - version "2.3.0" - resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972" - integrity sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw== - picomatch@^2.3.1: version "2.3.1" resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42" @@ -3138,7 +3049,7 @@ posthtml@^0.16.4, posthtml@^0.16.5: posthtml-parser "^0.10.0" posthtml-render "^3.0.0" -prebuild-install@^7.0.0: +prebuild-install@^7.1.1: version "7.1.1" resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-7.1.1.tgz#de97d5b34a70a0c81334fd24641f2a1702352e45" integrity sha512-jAXscXWMcCK8GgCoHOfIr0ODh5ai8mj63L2nWrjuAgXE6tDyYGnx4/8o/rCgU+B4JSyZBKbeZqzhtwtC3ovxjw== @@ -3222,11 +3133,6 @@ puppeteer@^12.0.1: unbzip2-stream "1.4.3" ws "8.2.3" -queue-microtask@^1.2.2: - version "1.2.3" - resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243" - integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A== - rc@^1.2.7: version "1.2.8" resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed" @@ -3296,11 +3202,6 @@ resolve@^1.1.6: path-parse "^1.0.7" supports-preserve-symlinks-flag "^1.0.0" -reusify@^1.0.4: - version "1.0.4" - resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76" - integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw== - rimraf@3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a" @@ -3315,13 +3216,6 @@ rimraf@^2.6.3: dependencies: glob "^7.1.3" -run-parallel@^1.1.9: - version "1.2.0" - resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee" - integrity sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA== - dependencies: - queue-microtask "^1.2.2" - sade@^1.7.3: version "1.8.1" resolved "https://registry.yarnpkg.com/sade/-/sade-1.8.1.tgz#0a78e81d658d394887be57d2a409bf703a3b2701" @@ -3346,17 +3240,24 @@ semver@^7.3.5: dependencies: lru-cache "^6.0.0" -sharp@^0.29.1: - version "0.29.3" - resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.29.3.tgz#0da183d626094c974516a48fab9b3e4ba92eb5c2" - integrity sha512-fKWUuOw77E4nhpyzCCJR1ayrttHoFHBT2U/kR/qEMRhvPEcluG4BKj324+SCO1e84+knXHwhJ1HHJGnUt4ElGA== +semver@^7.3.8: + version "7.3.8" + resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.8.tgz#07a78feafb3f7b32347d725e33de7e2a2df67798" + integrity sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A== dependencies: - color "^4.0.1" - detect-libc "^1.0.3" - node-addon-api "^4.2.0" - prebuild-install "^7.0.0" - semver "^7.3.5" - simple-get "^4.0.0" + lru-cache "^6.0.0" + +sharp@^0.31.1: + version "0.31.3" + resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.31.3.tgz#60227edc5c2be90e7378a210466c99aefcf32688" + integrity sha512-XcR4+FCLBFKw1bdB+GEhnUNXNXvnt0tDo4WsBsraKymuo/IAuPuCBVAL2wIkUw2r/dwFW5Q5+g66Kwl2dgDFVg== + dependencies: + color "^4.2.3" + detect-libc "^2.0.1" + node-addon-api "^5.0.0" + prebuild-install "^7.1.1" + semver "^7.3.8" + simple-get "^4.0.1" tar-fs "^2.1.1" tunnel-agent "^0.6.0" @@ -3395,7 +3296,7 @@ simple-concat@^1.0.0: resolved "https://registry.yarnpkg.com/simple-concat/-/simple-concat-1.0.1.tgz#f46976082ba35c2263f1c8ab5edfe26c41c9552f" integrity sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q== -simple-get@^4.0.0: +simple-get@^4.0.0, simple-get@^4.0.1: version "4.0.1" resolved "https://registry.yarnpkg.com/simple-get/-/simple-get-4.0.1.tgz#4a39db549287c979d352112fa03fd99fd6bc3543" integrity sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA== @@ -3416,11 +3317,6 @@ slash@^2.0.0: resolved "https://registry.yarnpkg.com/slash/-/slash-2.0.0.tgz#de552851a1759df3a8f206535442f5ec4ddeab44" integrity sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A== -slash@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634" - integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q== - source-map-js@^0.6.2: version "0.6.2" resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e" From 176a7e4dacb872f62fbf811bffa0ad4cdee324c1 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Mon, 26 Dec 2022 11:53:02 -0500 Subject: [PATCH 04/15] More docs --- website/pages/docs.md | 120 ++++++++++++++++++++------------- website/pages/transpilation.md | 29 ++++++++ 2 files changed, 102 insertions(+), 47 deletions(-) diff --git a/website/pages/docs.md b/website/pages/docs.md index 20b0f444..0392658e 100644 --- a/website/pages/docs.md +++ b/website/pages/docs.md @@ -6,13 +6,17 @@ # Getting Started -Lightning 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. +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 -See the [TypeScript definitions](https://github.com/parcel-bundler/lightningcss/blob/master/node/index.d.ts) for full API docs. +First, install Lightning CSS using a package manager such as npm or Yarn. -Here is a simple example that compiles the input CSS for Safari 13.2, and minifies the output. +```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'; @@ -21,51 +25,15 @@ let { code, map } = transform({ filename: 'style.css', code: Buffer.from('.foo { color: red }'), minify: true, - sourceMap: true, - targets: { - // Semver versions are represented using a single 24-bit number, with one component per byte. - // e.g. to represent 13.2.0, the following could be used. - safari: (13 << 16) | (2 << 8) - } + sourceMap: true }); ``` -You can also convert the results of running `browserslist` into targets which can be passed to Lightning CSS: - -```js -import browserslist from 'browserslist'; -import { browserslistToTargets } from 'lightningcss'; - -let targets = browserslistToTargets(browserslist('>= 0.25%')); -``` - -Bundling is also possible by using the `bundle` API. This processes `@import` rules and inlines them. This API requires filesystem access, so it does not accept `code` directly via the API. - -```js -let {code, map} = css.bundle({ - filename: 'style.css', - minify: 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. -The `bundleAsync` API is an asynchronous version of `bundle`, which also accepts a custom `resolver` object. This allows you to provide custom JavaScript functions for resolving `@import` specifiers to file paths, and reading files from the file system (or another source). The `read` and `resolve` functions are both optional, and may either return a string synchronously, or a Promise for asynchronous resolution. +You can also use the `bundle` API to process `@import` rules and inline them. See [Bundling](bundling.html) for details. -```js -let {code, map} = await css.bundleAsync({ - filename: 'style.css', - minify: true, - resolver: { - read(filePath) { - return fs.readFileSync(filePath, 'utf8'); - }, - resolve(specifier, from) { - return path.resolve(path.dirname(from), specifier); - } - } -}); -``` - -Note that using a custom resolver can slow down bundling significantly, especially when reading files asynchronously. Use `readFileSync` rather than `readFile` if possible for better performance, or omit either of the methods if you don't need to override the default behavior. +The [TypeScript definitions](https://github.com/parcel-bundler/lightningcss/blob/master/node/index.d.ts) also include documentation for all API options. ## From Rust @@ -77,7 +45,7 @@ Parcel includes Lightning CSS as the default CSS transformer. You should also ad 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`, which can be used to enable CSS nesting and custom media queries, `pseudoClasses`, which allows replacing some pseudo classes like `:focus-visible` with normal classes that can be applied via JavaScript (e.g. polyfills), and `cssModules`, which enables CSS modules globally rather than only for files ending in `.module.css`, or accepts an options object. +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`, which enables CSS modules globally rather than only for files ending in `.module.css`, or accepts an options object. ```json { @@ -101,7 +69,7 @@ See the [Parcel docs](https://parceljs.org/languages/css) for more details. 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'; +import init, { transform } from 'https://unpkg.com/lightningcss-wasm'; await init(); @@ -116,7 +84,61 @@ console.log(new TextDecoder().decode(code)); ## With webpack -css-minimizer-webpack-plugin has builtin support for Lightning CSS. Install Lightning CSS in your project, and configure the plugin as documented [in its README](https://github.com/webpack-contrib/css-minimizer-webpack-plugin#using-custom-minifier-lightningcss-previously-parcelcss). +[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 @@ -125,7 +147,7 @@ Lightning CSS includes a standalone CLI that can be used to compile, minify, and To use the CLI, install the `lightningcss-cli` package with an npm compatible package manager: ```shell -npm install lightningcss-cli +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. @@ -143,3 +165,7 @@ 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. diff --git a/website/pages/transpilation.md b/website/pages/transpilation.md index a2d8c701..4fe51c65 100644 --- a/website/pages/transpilation.md +++ b/website/pages/transpilation.md @@ -38,6 +38,35 @@ let targets = { }; ``` +### 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. From 93a4b65ca688dbb939f989d93cc926e86d4ec5fd Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Mon, 26 Dec 2022 14:29:06 -0500 Subject: [PATCH 05/15] Add minification docs --- package.json | 3 +- website/.posthtmlrc | 1 + website/bundling.html | 50 +----- website/css-modules.html | 50 +----- website/docs.html | 50 +----- website/include/layout.html | 51 ++++++ website/minification.html | 1 + website/pages/docs.md | 4 +- website/pages/minification.md | 284 ++++++++++++++++++++++++++++++++++ website/transforms.html | 50 +----- website/transpilation.html | 50 +----- yarn.lock | 44 ++++++ 12 files changed, 391 insertions(+), 247 deletions(-) create mode 100644 website/include/layout.html create mode 100644 website/minification.html create mode 100644 website/pages/minification.md diff --git a/package.json b/package.json index 056591a3..333afbc2 100644 --- a/package.json +++ b/package.json @@ -57,6 +57,7 @@ "patch-package": "^6.5.0", "path-browserify": "^1.0.1", "postcss": "^8.3.11", + "posthtml-include": "^1.7.4", "posthtml-markdownit": "^1.3.1", "posthtml-prism": "^1.0.4", "process": "^0.11.10", @@ -79,4 +80,4 @@ "build-ast": "cargo run --example schema --features jsonschema && node scripts/build-ast.js", "test": "uvu node/test" } -} \ No newline at end of file +} diff --git a/website/.posthtmlrc b/website/.posthtmlrc index 568855f7..def9e84b 100644 --- a/website/.posthtmlrc +++ b/website/.posthtmlrc @@ -1,5 +1,6 @@ { "plugins": { + "posthtml-include": {}, "posthtml-markdownit": { "markdownit": { "html": true diff --git a/website/bundling.html b/website/bundling.html index d1ff7cb6..67be3901 100644 --- a/website/bundling.html +++ b/website/bundling.html @@ -1,49 +1 @@ - - - - - - Bundling – Lightning CSS - - - - - - - - - - - - - - - - -

- - Lightning CSS -

Playground • Docs • Rust docs • npm • GitHub

- -

- - - - + diff --git a/website/css-modules.html b/website/css-modules.html index 5da15f2a..b9b53a8c 100644 --- a/website/css-modules.html +++ b/website/css-modules.html @@ -1,49 +1 @@ - - - - - - CSS Modules – Lightning CSS - - - - - - - - - - - - - - - - -

- - Lightning CSS -

Playground • Docs • Rust docs • npm • GitHub

- -

- - - - + diff --git a/website/docs.html b/website/docs.html index bc76bda2..f6d60f40 100644 --- a/website/docs.html +++ b/website/docs.html @@ -1,49 +1 @@ - - - - - - Custom Transforms – Lightning CSS - - - - - - - - - - - - - - - - -

- - Lightning CSS -

Playground • Docs • Rust docs • npm • GitHub

- -

- - - - + diff --git a/website/include/layout.html b/website/include/layout.html new file mode 100644 index 00000000..acb1c7af --- /dev/null +++ b/website/include/layout.html @@ -0,0 +1,51 @@ + + + + + + {{ title }} – Lightning CSS + + + + + + + + + + + + + + + + +

+ + Lightning CSS +

Playground • Docs • Rust docs • npm • GitHub

+ +

+ + + + 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 @@ + diff --git a/website/pages/docs.md b/website/pages/docs.md index 0392658e..7d258d49 100644 --- a/website/pages/docs.md +++ b/website/pages/docs.md @@ -82,6 +82,8 @@ let {code, map} = transform({ 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: @@ -155,7 +157,7 @@ Then, you can run the `lightningcss` command via `npx`, `yarn`, or by setting up ```json { "scripts": { - "build": "lightningcss --minify --nesting --bundle --targets '>= 0.25%' --sourcemap input.css -o output.css" + "build": "lightningcss --minify --bundle --targets '>= 0.25%' input.css -o output.css" } } ``` 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/transforms.html b/website/transforms.html index 4970a115..42083909 100644 --- a/website/transforms.html +++ b/website/transforms.html @@ -1,49 +1 @@ - - - - - - Custom Transforms – Lightning CSS - - - - - - - - - - - - - - - - -

- - Lightning CSS -

Playground • Docs • Rust docs • npm • GitHub

- -

- - - - + diff --git a/website/transpilation.html b/website/transpilation.html index 4e8af90a..64ec9c63 100644 --- a/website/transpilation.html +++ b/website/transpilation.html @@ -1,49 +1 @@ - - - - - - Transpilation – Lightning CSS - - - - - - - - - - - - - - - - -

- - Lightning CSS -

Playground • Docs • Rust docs • npm • GitHub

- -

- - - - + diff --git a/yarn.lock b/yarn.lock index c9e6b4f3..0368d115 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1625,6 +1625,11 @@ extract-zip@2.0.1: optionalDependencies: "@types/yauzl" "^2.9.1" +fclone@^1.0.11: + version "1.0.11" + resolved "https://registry.yarnpkg.com/fclone/-/fclone-1.0.11.tgz#10e85da38bfea7fc599341c296ee1d77266ee640" + integrity sha512-GDqVQezKzRABdeqflsgMr7ktzgF9CyS+p2oe0jJqUY6izSSbhPIQJDpoU4PtGcD7VPM9xh/dVrTu6z1nwgmEGw== + fd-slicer@~1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.1.0.tgz#25c7c89cb1f9077f8891bbe61d8f390eae256f1e" @@ -2982,6 +2987,25 @@ postcss@^8.3.11: picocolors "^1.0.0" source-map-js "^0.6.2" +posthtml-expressions@^1.7.1: + version "1.11.0" + resolved "https://registry.yarnpkg.com/posthtml-expressions/-/posthtml-expressions-1.11.0.tgz#bac30b0fb1c87b25be39cf1a085332e38d7327e6" + integrity sha512-Un7J/UugURkoxCuFJ+1UwzmXe19hPrfUBOYgrjf2ipkCyghSh8L3ldwKttgjs8GI+4aPPUFThAted0J2tpORnA== + dependencies: + fclone "^1.0.11" + posthtml-match-helper "^1.0.1" + posthtml-parser "^0.10.0" + posthtml-render "^3.0.0" + +posthtml-include@^1.7.4: + version "1.7.4" + resolved "https://registry.yarnpkg.com/posthtml-include/-/posthtml-include-1.7.4.tgz#45e7abd18395ce5a6e8af9dc5c5390f85cf6171c" + integrity sha512-GO5QzHiM6/fXq8DxLoLN+jEW4sH/6nuGF9z+NJmP1qi1A3J2zCC7WwXrEwaPL3T8LrH+FL4IedK+mIJHbn5ZEA== + dependencies: + posthtml "^0.16.6" + posthtml-expressions "^1.7.1" + posthtml-parser "^0.11.0" + posthtml-markdownit@^1.3.1: version "1.3.1" resolved "https://registry.yarnpkg.com/posthtml-markdownit/-/posthtml-markdownit-1.3.1.tgz#7ba3d5aa92ebbe2e06002909b55faaf7c889f4d5" @@ -2993,6 +3017,11 @@ posthtml-markdownit@^1.3.1: posthtml-parser "^0.6.0" posthtml-render "^1.4.0" +posthtml-match-helper@^1.0.1: + version "1.0.3" + resolved "https://registry.yarnpkg.com/posthtml-match-helper/-/posthtml-match-helper-1.0.3.tgz#9308f0bdc66398735f7117441feca64f131956d5" + integrity sha512-aeRAPvok2Fs6uzSm85665jdAk5UOd8US2QCkWtGU6yLPlKSwzWTSgZZuABc3UeNy3K1lVk/HV9bRkWJYN05Ymw== + posthtml-parser@^0.10.0, posthtml-parser@^0.10.1: version "0.10.1" resolved "https://registry.yarnpkg.com/posthtml-parser/-/posthtml-parser-0.10.1.tgz#63c41931a9339cc2c32aba14f06286d98f107abf" @@ -3000,6 +3029,13 @@ posthtml-parser@^0.10.0, posthtml-parser@^0.10.1: dependencies: htmlparser2 "^7.1.1" +posthtml-parser@^0.11.0: + version "0.11.0" + resolved "https://registry.yarnpkg.com/posthtml-parser/-/posthtml-parser-0.11.0.tgz#25d1c7bf811ea83559bc4c21c189a29747a24b7a" + integrity sha512-QecJtfLekJbWVo/dMAA+OSwY79wpRmbqS5TeXvXSX+f0c6pW4/SE6inzZ2qkU7oAMCPqIDkZDvd/bQsSFUnKyw== + dependencies: + htmlparser2 "^7.1.1" + posthtml-parser@^0.6.0: version "0.6.0" resolved "https://registry.yarnpkg.com/posthtml-parser/-/posthtml-parser-0.6.0.tgz#52488cdb4fa591c3102de73197c471859ee0be63" @@ -3049,6 +3085,14 @@ posthtml@^0.16.4, posthtml@^0.16.5: posthtml-parser "^0.10.0" posthtml-render "^3.0.0" +posthtml@^0.16.6: + version "0.16.6" + resolved "https://registry.yarnpkg.com/posthtml/-/posthtml-0.16.6.tgz#e2fc407f67a64d2fa3567afe770409ffdadafe59" + integrity sha512-JcEmHlyLK/o0uGAlj65vgg+7LIms0xKXe60lcDOTU7oVX/3LuEuLwrQpW3VJ7de5TaFKiW4kWkaIpJL42FEgxQ== + dependencies: + posthtml-parser "^0.11.0" + posthtml-render "^3.0.0" + prebuild-install@^7.1.1: version "7.1.1" resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-7.1.1.tgz#de97d5b34a70a0c81334fd24641f2a1702352e45" From 1f51b2a87de4b8b7073aec9170f7c5dec3a357d0 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Mon, 26 Dec 2022 17:30:48 -0500 Subject: [PATCH 06/15] Add descriptions of features supported by syntax lowering --- website/pages/transpilation.md | 335 ++++++++++++++++++++++++++++++--- 1 file changed, 310 insertions(+), 25 deletions(-) diff --git a/website/pages/transpilation.md b/website/pages/transpilation.md index 4fe51c65..04995775 100644 --- a/website/pages/transpilation.md +++ b/website/pages/transpilation.md @@ -108,31 +108,316 @@ becomes: Lightning CSS automatically compiles many modern CSS syntax features to more compatible output that is supported in your target browsers. -The following features are supported: - -* [Color Level 5](https://drafts.csswg.org/css-color-5/) - - [`color-mix()`](https://drafts.csswg.org/css-color-5/#color-mix) function - - Relative color syntax, e.g. `lab(from purple calc(l * .8) a b)` -* [Color Level 4](https://drafts.csswg.org/css-color-4/) - - [`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()`, and `oklch()` colors - - [`color()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color()) function supporting predefined color spaces such as `display-p3` and `xyz` - - [`hwb()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hwb()) function - - Space separated components in `rgb()` and `hsl()` functions - - Hex colors with alpha, e.g. `#rgba` and `#rrggbbaa` -* [Logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties), e.g. `margin-inline-start` -* [Media query range syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#syntax_improvements_in_level_4), e.g. `@media (width <= 100px)` or `@media (100px < width < 500px)` -* Selectors - - `:not` and `:lang` with multiple arguments - - `:dir` - - `:is` -* `clamp()`, `round()`, `rem()`, `mod()`, `abs()`, and `sign()` [math functions](https://w3c.github.io/csswg-drafts/css-values/#math) -* `sin()`, `cos()`, `tan()`, `asin()`, `acos()`, `atan()`, and `atan2()` [trigonometric functions](https://w3c.github.io/csswg-drafts/css-values/#trig-funcs) -* `pow()`, `log()`, `sqrt()`, `exp()`, and `hypot()` [exponential functions](https://w3c.github.io/csswg-drafts/css-values/#exponent-funcs) -* [Double position gradient stops](https://css-tricks.com/while-you-werent-looking-css-gradients-got-better/) (e.g. `red 40% 80%`) -* Two-value [`overflow`](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) shorthand -* Multi-value [`display`](https://developer.mozilla.org/en-US/docs/Web/CSS/display) property (e.g. `inline flex`) -* Alignment shorthands, e.g. [`place-items`](https://developer.mozilla.org/en-US/docs/Web/CSS/place-items) and [`place-content`](https://developer.mozilla.org/en-US/docs/Web/CSS/place-content) -* `system-ui` font family fallbacks +### 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 From 092547726ef1ed705a55dc38b8d5618ff569d751 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Mon, 26 Dec 2022 18:16:38 -0500 Subject: [PATCH 07/15] Improve scrolling --- website/docs.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/website/docs.css b/website/docs.css index 0e3a4fe5..d2a4bc48 100644 --- a/website/docs.css +++ b/website/docs.css @@ -186,6 +186,8 @@ main > aside { margin-left: 40px; border-left: 1px solid lch(90% 50.34 80.104 / .1); padding-left: 20px; + overflow: auto; + max-height: calc(100vh - 80px); } .table-of-contents ul, From 70f9c2a15111cb895dbc47d6eb31c8670dd52a7c Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Mon, 26 Dec 2022 18:16:43 -0500 Subject: [PATCH 08/15] Source maps docs --- website/pages/docs.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/website/pages/docs.md b/website/pages/docs.md index 7d258d49..30d8e722 100644 --- a/website/pages/docs.md +++ b/website/pages/docs.md @@ -171,3 +171,11 @@ 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. From bf98a1902675765d73c0e3dec0f9f8644de83317 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Mon, 26 Dec 2022 18:18:47 -0500 Subject: [PATCH 09/15] Add links to docs to homepage --- website/include/layout.html | 2 +- website/index.html | 34 ++++++++++++++++++++++++++++++++++ 2 files changed, 35 insertions(+), 1 deletion(-) diff --git a/website/include/layout.html b/website/include/layout.html index acb1c7af..8172c877 100644 --- a/website/include/layout.html +++ b/website/include/layout.html @@ -36,7 +36,7 @@

Docs

diff --git a/website/index.html b/website/index.html index 3083ed4d..fb42639d 100644 --- a/website/index.html +++ b/website/index.html @@ -35,6 +35,7 @@

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

Light speed

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.

Get started →

Build time

@@ -86,6 +87,7 @@

Live in the future

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.

Learn more →

Target Browsers

last 2 versions

@@ -107,6 +109,7 @@

Live in the future

Crush it!

Lightning 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.

Details →

Output size

@@ -144,6 +147,7 @@

Crush it!

CSS modules

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.

Documentation →

.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.
+          Custom transforms →


         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;

From 1d23e8bc6e82e148960a4b2e56c55eb00738c28c Mon Sep 17 00:00:00 2001
From: Devon Govett 
Date: Mon, 26 Dec 2022 19:19:47 -0500
Subject: [PATCH 10/15] minor updates

---
 website/pages/bundling.md   | 23 +++++++++++++++++++++++
 website/pages/docs.md       | 10 ++++------
 website/pages/transforms.md |  4 ++++
 website/synthwave.css       |  6 +++---
 4 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/website/pages/bundling.md b/website/pages/bundling.md
index 0e7a989f..2a259316 100644
--- a/website/pages/bundling.md
+++ b/website/pages/bundling.md
@@ -130,6 +130,29 @@ compiles to:
 
 When `@import` rules are processed in browsers, if the same file appears more than once, the _last_ instance applies. This is the opposite from behavior in other languages like JavaScript. Lightning CSS folllows this behavior when bundling so that the output behaves the same as if it were not bundled.
 
+```css
+/* index.css */
+@import "a.css";
+@import "b.css";
+@import "a.css";
+```
+
+```css
+/* a.css */
+body { background: green }
+```
+
+```css
+/* b.css */
+body { background: red }
+```
+
+compiles to:
+
+```css
+body { background: green }
+```
+
 ## Custom resolvers
 
 The `bundleAsync` API is an asynchronous version of `bundle`, which also accepts a custom `resolver` object. This allows you to provide custom JavaScript functions for resolving `@import` specifiers to file paths, and reading files from the file system (or another source). The `read` and `resolve` functions are both optional, and may either return a string synchronously, or a Promise for asynchronous resolution.
diff --git a/website/pages/docs.md b/website/pages/docs.md
index 30d8e722..e24b64f7 100644
--- a/website/pages/docs.md
+++ b/website/pages/docs.md
@@ -29,23 +29,21 @@ let { code, map } = transform({
 });
 ```
 
-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.
+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
 
-See the Rust API docs on [docs.rs](https://docs.rs/lightningcss).
+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 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.
+[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`, which enables CSS modules globally rather than only for files ending in `.module.css`, or accepts an options object.
+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
 {
diff --git a/website/pages/transforms.md b/website/pages/transforms.md
index de6277ad..aeb0e043 100644
--- a/website/pages/transforms.md
+++ b/website/pages/transforms.md
@@ -235,6 +235,10 @@ 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.
diff --git a/website/synthwave.css b/website/synthwave.css
index f02310d5..04ac3fe2 100644
--- a/website/synthwave.css
+++ b/website/synthwave.css
@@ -109,14 +109,14 @@ pre[class*="language-"] {
 .token.char,
 .token.attr-value,
 .token.regex,
-.token.variable {
+.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,
-.token.url {
+.token.entity {
   color: #67cdcc;
 }
 

From d81b1e28eb3ae106c2a39ee5e9e464392ab3456e Mon Sep 17 00:00:00 2001
From: Devon Govett 
Date: Mon, 26 Dec 2022 19:30:24 -0500
Subject: [PATCH 11/15] Move docs out of the readme

---
 README.md | 182 +-----------------------------------------------------
 1 file changed, 1 insertion(+), 181 deletions(-)

diff --git a/README.md b/README.md
index 09b9979f..8cdd2dcd 100644
--- a/README.md
+++ b/README.md
@@ -61,187 +61,7 @@ An extremely fast CSS parser, transformer, and minifier written in Rust. Use it
 
 ## Documentation
 
-Lightning 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.
-
-### From Node
-
-See the [TypeScript definitions](https://github.com/parcel-bundler/lightningcss/blob/master/node/index.d.ts) for full API docs.
-
-Here is a simple example that compiles the input CSS for Safari 13.2, and minifies the output.
-
-```js
-const css = require('lightningcss');
-
-let {code, map} = css.transform({
-  filename: 'style.css',
-  code: Buffer.from('.foo { color: red }'),
-  minify: true,
-  sourceMap: true,
-  targets: {
-    // Semver versions are represented using a single 24-bit number, with one component per byte.
-    // e.g. to represent 13.2.0, the following could be used.
-    safari: (13 << 16) | (2 << 8)
-  }
-});
-```
-
-You can also convert the results of running `browserslist` into targets which can be passed to Lightning CSS:
-
-```js
-const browserslist = require('browserslist');
-const css = require('lightningcss');
-
-let targets = css.browserslistToTargets(browserslist('>= 0.25%'));
-```
-
-Bundling is also possible by using the `bundle` API. This processes `@import` rules and inlines them. This API requires filesystem access, so it does not accept `code` directly via the API.
-
-```js
-let {code, map} = css.bundle({
-  filename: 'style.css',
-  minify: true
-});
-```
-
-The `bundleAsync` API is an asynchronous version of `bundle`, which also accepts a custom `resolver` object. This allows you to provide custom JavaScript functions for resolving `@import` specifiers to file paths, and reading files from the file system (or another source). The `read` and `resolve` functions are both optional, and may either return a string synchronously, or a Promise for asynchronous resolution.
-
-```js
-let {code, map} = await css.bundleAsync({
-  filename: 'style.css',
-  minify: true,
-  resolver: {
-    read(filePath) {
-      return fs.readFileSync(filePath, 'utf8');
-    },
-    resolve(specifier, from) {
-      return path.resolve(path.dirname(from), specifier);
-    }
-  }
-});
-```
-
-Note that using a custom resolver can slow down bundling significantly, especially when reading files asynchronously. Use `readFileSync` rather than `readFile` if possible for better performance, or omit either of the methods if you don't need to override the default behavior.
-
-### From Rust
-
-See the Rust API docs on [docs.rs](https://docs.rs/lightningcss).
-
-### With Parcel
-
-Parcel 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`, which can be used to enable CSS nesting and custom media queries, `pseudoClasses`, which allows replacing some pseudo classes like `:focus-visible` with normal classes that can be applied via JavaScript (e.g. polyfills), and `cssModules`, 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));
-```
-
-### With webpack
-
-css-minimizer-webpack-plugin has builtin support for Lightning CSS. Install Lightning CSS in your project, and configure the plugin as documented [in its README](https://github.com/webpack-contrib/css-minimizer-webpack-plugin#using-custom-minifier-lightningcss-previously-parcelcss).
-
-### 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 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 --nesting --bundle --targets '>= 0.25%' --sourcemap input.css -o output.css"
-  }
-}
-```
-
-To see all of the available options, use the `--help` argument:
-
-```shell
-npx lightningcss --help
-```
-
-#### Browserslist configuration
-
-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` nodeJS package.
-The configuration is resolved in the following order:
-
-- If a `BROWSERSLIST` environment variable is present, then load targets from its value. This is analog to the `--targets` CLI option.
-  _Example:_ `BROWSERSLIST="firefox ESR" lightningcss [OPTIONS] `
-- If a `BROWSERSLIST_CONFIG` environment variable is present, then resolve the file at the provided path.
-  Then parse and use targets from `package.json` or any browserslist configuration file pointed to by the environment variable.
-  _Example:_ `BROWSERSLIST_CONFIG="../config/browserslist" lightningcss [OPTIONS] `
-- 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 angular 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.
-
-_Example:_
-
-```
-# Defaults, applied when no other section matches the provided environment.
-firefox ESR
-
-[staging]
-# Targets applied only to the staging environment.
-samsung >= 4
-```
-
-When using parsed configuration from `browserslist`, `.browserslistrc` or `package.json` configuration files,
-the environment determined by
-
-- the `BROWSERSLIST_ENV` environment variable if present,
-- otherwise 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.
-
-### 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.
+Lightning 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.
 
 ## Benchmarks
 

From 3fb82ee463bb22aec2e2f728f7a5b08f67a4da4c Mon Sep 17 00:00:00 2001
From: Devon Govett 
Date: Mon, 26 Dec 2022 19:42:30 -0500
Subject: [PATCH 12/15] Update terser

---
 yarn.lock | 59 ++++++++++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 50 insertions(+), 9 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 0368d115..2d533a75 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -65,6 +65,46 @@
     "@types/yargs" "^16.0.0"
     chalk "^4.0.0"
 
+"@jridgewell/gen-mapping@^0.3.0":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz#c1aedc61e853f2bb9f5dfe6d4442d3b565b253b9"
+  integrity sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==
+  dependencies:
+    "@jridgewell/set-array" "^1.0.1"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+    "@jridgewell/trace-mapping" "^0.3.9"
+
+"@jridgewell/resolve-uri@3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz#2203b118c157721addfe69d47b70465463066d78"
+  integrity sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==
+
+"@jridgewell/set-array@^1.0.1":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72"
+  integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==
+
+"@jridgewell/source-map@^0.3.2":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/source-map/-/source-map-0.3.2.tgz#f45351aaed4527a298512ec72f81040c998580fb"
+  integrity sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.0"
+    "@jridgewell/trace-mapping" "^0.3.9"
+
+"@jridgewell/sourcemap-codec@1.4.14", "@jridgewell/sourcemap-codec@^1.4.10":
+  version "1.4.14"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"
+  integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
+
+"@jridgewell/trace-mapping@^0.3.9":
+  version "0.3.17"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz#793041277af9073b0951a7fe0f0d8c4c98c36985"
+  integrity sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==
+  dependencies:
+    "@jridgewell/resolve-uri" "3.1.0"
+    "@jridgewell/sourcemap-codec" "1.4.14"
+
 "@jsdevtools/ono@^7.1.3":
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/@jsdevtools/ono/-/ono-7.1.3.tgz#9df03bbd7c696a5c58885c34aa06da41c8543796"
@@ -818,6 +858,11 @@ abortcontroller-polyfill@^1.1.9:
   resolved "https://registry.yarnpkg.com/abortcontroller-polyfill/-/abortcontroller-polyfill-1.7.3.tgz#1b5b487bd6436b5b764fd52a612509702c3144b5"
   integrity sha512-zetDJxd89y3X99Kvo4qFx8GKlt6GsvN3UcRZHwU6iFA/0KiOmhkTVhe8oRoTBiTVPZu09x3vCra47+w8Yz1+2Q==
 
+acorn@^8.5.0:
+  version "8.8.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.1.tgz#0a3f9cbecc4ec3bea6f0a80b66ae8dd2da250b73"
+  integrity sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==
+
 agent-base@6:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
@@ -3379,11 +3424,6 @@ source-map@^0.6.0, source-map@^0.6.1:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
-source-map@~0.7.2:
-  version "0.7.3"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
-  integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
-
 stable@^0.1.8:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
@@ -3486,12 +3526,13 @@ term-size@^2.2.1:
   integrity sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==
 
 terser@^5.2.0:
-  version "5.9.0"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-5.9.0.tgz#47d6e629a522963240f2b55fcaa3c99083d2c351"
-  integrity sha512-h5hxa23sCdpzcye/7b8YqbE5OwKca/ni0RQz1uRX3tGh8haaGHqcuSqbGRybuAKNdntZ0mDgFNXPJ48xQ2RXKQ==
+  version "5.16.1"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.16.1.tgz#5af3bc3d0f24241c7fb2024199d5c461a1075880"
+  integrity sha512-xvQfyfA1ayT0qdK47zskQgRZeWLoOQ8JQ6mIgRGVNwZKdQMU+5FkCBjmv4QjcrTzyZquRw2FVtlJSRUmMKQslw==
   dependencies:
+    "@jridgewell/source-map" "^0.3.2"
+    acorn "^8.5.0"
     commander "^2.20.0"
-    source-map "~0.7.2"
     source-map-support "~0.5.20"
 
 thenify-all@^1.0.0:

From 84e1788c22848e3170d65eb92dfab63e0da3a5c5 Mon Sep 17 00:00:00 2001
From: Devon Govett 
Date: Mon, 26 Dec 2022 20:01:57 -0500
Subject: [PATCH 13/15] Use local lightningcss in parcel

---
 package.json |   5 +-
 yarn.lock    | 171 +++++----------------------------------------------
 2 files changed, 19 insertions(+), 157 deletions(-)

diff --git a/package.json b/package.json
index 333afbc2..bca78890 100644
--- a/package.json
+++ b/package.json
@@ -66,6 +66,9 @@
     "util": "^0.12.4",
     "uvu": "^0.5.6"
   },
+  "resolutions": {
+    "lightningcss": "link:."
+  },
   "scripts": {
     "prepare": "patch-package",
     "build": "node scripts/build.js && node scripts/build-flow.js",
@@ -80,4 +83,4 @@
     "build-ast": "cargo run --example schema --features jsonschema && node scripts/build-ast.js",
     "test": "uvu node/test"
   }
-}
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 2d533a75..99e03d26 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,39 +2,18 @@
 # yarn lockfile v1
 
 
-"@babel/code-frame@^7.0.0":
-  version "7.16.0"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.16.0.tgz#0dfc80309beec8411e65e706461c408b0bb9b431"
-  integrity sha512-IF4EOMEV+bfYwOmNxGzSnjR2EmQod7f1UXOpZM3l4i4o4QNwzjtJAu/HxdjHq0aYBvdqMuQEY1eg0nqW9ZPORA==
-  dependencies:
-    "@babel/highlight" "^7.16.0"
-
-"@babel/code-frame@^7.16.7":
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.16.7":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.18.6.tgz#3b25d38c89600baa2dcc219edfa88a74eb2c427a"
   integrity sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==
   dependencies:
     "@babel/highlight" "^7.18.6"
 
-"@babel/helper-validator-identifier@^7.15.7":
-  version "7.15.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz#220df993bfe904a4a6b02ab4f3385a5ebf6e2389"
-  integrity sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w==
-
 "@babel/helper-validator-identifier@^7.18.6":
   version "7.19.1"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz#7eea834cf32901ffdc1a7ee555e2f9c27e249ca2"
   integrity sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==
 
-"@babel/highlight@^7.16.0":
-  version "7.16.0"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.16.0.tgz#6ceb32b2ca4b8f5f361fb7fd821e3fddf4a1725a"
-  integrity sha512-t8MH41kUQylBtu2+4IQA3atqevA2lRgqA2wyVB/YiWmsDSuylZZuXOUy9ric30hfzauEFfdsuk/eXTRrGrfd0g==
-  dependencies:
-    "@babel/helper-validator-identifier" "^7.15.7"
-    chalk "^2.0.0"
-    js-tokens "^4.0.0"
-
 "@babel/highlight@^7.16.7", "@babel/highlight@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.18.6.tgz#81158601e93e2563795adcbfbdf5d64be3f2ecdf"
@@ -972,18 +951,7 @@ braces@^3.0.2:
   dependencies:
     fill-range "^7.0.1"
 
-browserslist@^4.0.0, browserslist@^4.16.0, browserslist@^4.16.6, browserslist@^4.6.6:
-  version "4.20.2"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.20.2.tgz#567b41508757ecd904dab4d1c646c612cd3d4f88"
-  integrity sha512-CQOBCqp/9pDvDbx3xfMi+86pr4KXIf2FDkTTdeuYw8OxS9t898LA1Khq57gtufFILXpfgsSx5woNgsBgvGjpsA==
-  dependencies:
-    caniuse-lite "^1.0.30001317"
-    electron-to-chromium "^1.4.84"
-    escalade "^3.1.1"
-    node-releases "^2.0.2"
-    picocolors "^1.0.0"
-
-browserslist@^4.21.3:
+browserslist@^4.0.0, browserslist@^4.16.0, browserslist@^4.16.6, browserslist@^4.21.3, browserslist@^4.6.6:
   version "4.21.3"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.3.tgz#5df277694eb3c48bc5c4b05af3e8b7e09c5a6d1a"
   integrity sha512-898rgRXLAyRkM1GryrrBHGkqA5hlpkV5MhtZwg9QXeiyLUYs2k00Un05aX5l2/yJIOObYKOpS2JNo8nJDE7fWQ==
@@ -1039,7 +1007,7 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001317, caniuse-lite@^1.0.30001370, caniuse-lite@^1.0.30001373:
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001370, caniuse-lite@^1.0.30001373:
   version "1.0.30001439"
   resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001439.tgz"
   integrity sha512-1MgUzEkoMO6gKfXflStpYgZDlFM7M/ck/bgfVCACO5vnAf0fXoNVHdWtqGU+MYca+4bL9Z5bpOVmR33cWW9G2A==
@@ -1375,20 +1343,13 @@ domhandler@^3.3.0:
   dependencies:
     domelementtype "^2.0.1"
 
-domhandler@^4.0.0:
+domhandler@^4.0.0, domhandler@^4.2.0, domhandler@^4.2.2:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.3.1.tgz#8d792033416f59d68bc03a5aa7b018c1ca89279c"
   integrity sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==
   dependencies:
     domelementtype "^2.2.0"
 
-domhandler@^4.2.0, domhandler@^4.2.2:
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.2.2.tgz#e825d721d19a86b8c201a35264e226c678ee755f"
-  integrity sha512-PzE9aBMsdZO8TK4BnuJwH0QT41wgMbRzuZrHUcpYncEjmQazq8QEaBWgLG7ZyC/DAZKEgglpIA6j4Qn/HmxS3w==
-  dependencies:
-    domelementtype "^2.2.0"
-
 domutils@^2.4.2, domutils@^2.5.2, domutils@^2.6.0, domutils@^2.8.0:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
@@ -1413,11 +1374,6 @@ electron-to-chromium@^1.4.202:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.206.tgz#580ff85b54d7ec0c05f20b1e37ea0becdd7b0ee4"
   integrity sha512-h+Fadt1gIaQ06JaIiyqPsBjJ08fV5Q7md+V8bUvQW/9OvXfL2LRICTz2EcnnCP7QzrFTS6/27MRV6Bl9Yn97zA==
 
-electron-to-chromium@^1.4.84:
-  version "1.4.88"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.88.tgz#ebe6a2573b563680c7a7bf3a51b9e465c9c501db"
-  integrity sha512-oA7mzccefkvTNi9u7DXmT0LqvhnOiN2BhSrKerta7HeUC1cLoIwtbf2wL+Ah2ozh5KQd3/1njrGrwDBXx6d14Q==
-
 end-of-stream@^1.1.0, end-of-stream@^1.4.1:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
@@ -1829,7 +1785,7 @@ glob-promise@^4.2.2:
   dependencies:
     "@types/glob" "^7.1.3"
 
-glob@^7.0.0, glob@^7.1.6:
+glob@^7.0.0, glob@^7.1.3, glob@^7.1.6:
   version "7.2.3"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
   integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
@@ -1841,18 +1797,6 @@ glob@^7.0.0, glob@^7.1.6:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@^7.1.3:
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.0.tgz#d15535af7732e02e948f4c41628bd910293f6023"
-  integrity sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==
-  dependencies:
-    fs.realpath "^1.0.0"
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "^3.0.4"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
-
 globals@^13.2.0:
   version "13.12.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-13.12.0.tgz#4d733760304230a0082ed96e21e5c565f898089e"
@@ -2253,61 +2197,13 @@ kleur@^4.0.3:
   resolved "https://registry.yarnpkg.com/kleur/-/kleur-4.1.5.tgz#95106101795f7050c6c650f350c683febddb1780"
   integrity sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==
 
-lightningcss-darwin-arm64@1.17.1:
-  version "1.17.1"
-  resolved "https://registry.yarnpkg.com/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.17.1.tgz#d0384a47f19f1a02c29074930a23e5888e76b11a"
-  integrity sha512-YTAHEy4XlzI3sMbUVjbPi9P7+N7lGcgl2JhCZhiQdRAEKnZLQch8kb5601sgESxdGXjgei7JZFqi/vVEk81wYg==
-
-lightningcss-darwin-x64@1.17.1:
-  version "1.17.1"
-  resolved "https://registry.yarnpkg.com/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.17.1.tgz#7fa5853f71eb8698b511dbad43305666e0e0d871"
-  integrity sha512-UhXPUS2+yTTf5sXwUV0+8QY2x0bPGLgC/uhcknWSQMqWn1zGty4fFvH04D7f7ij0ujwSuN+Q0HtU7lgmMrPz0A==
-
-lightningcss-linux-arm-gnueabihf@1.17.1:
-  version "1.17.1"
-  resolved "https://registry.yarnpkg.com/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.17.1.tgz#9ba7ffd5be686210b88ec28bb495bf9593698678"
-  integrity sha512-alUZumuznB6K/9yZ0zuZkODXUm8uRnvs9t0CL46CXN16Y2h4gOx5ahUCMlelUb7inZEsgJIoepgLsJzBUrSsBw==
-
-lightningcss-linux-arm64-gnu@1.17.1:
-  version "1.17.1"
-  resolved "https://registry.yarnpkg.com/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.17.1.tgz#aeee6b5ed613198aab978c878f26110d6e8e70d2"
-  integrity sha512-/1XaH2cOjDt+ivmgfmVFUYCA0MtfNWwtC4P8qVi53zEQ7P8euyyZ1ynykZOyKXW9Q0DzrwcLTh6+hxVLcbtGBg==
-
-lightningcss-linux-arm64-musl@1.17.1:
-  version "1.17.1"
-  resolved "https://registry.yarnpkg.com/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.17.1.tgz#14e46b8d2f50e83a710c62432e447bd9f0c328a5"
-  integrity sha512-/IgE7lYWFHCCQFTMIwtt+fXLcVOha8rcrNze1JYGPWNorO6NBc6MJo5u5cwn5qMMSz9fZCCDIlBBU4mGwjQszQ==
-
-lightningcss-linux-x64-gnu@1.17.1:
-  version "1.17.1"
-  resolved "https://registry.yarnpkg.com/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.17.1.tgz#17b8abb73d7b32338d5b248ac12325f506964e69"
-  integrity sha512-OyE802IAp4DB9vZrHlOyWunbHLM9dN08tJIKN/HhzzLKIHizubOWX6NMzUXMZLsaUrYwVAHHdyEA+712p8mMzA==
-
-lightningcss-linux-x64-musl@1.17.1:
-  version "1.17.1"
-  resolved "https://registry.yarnpkg.com/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.17.1.tgz#78765c58c111af43e7d311afa4713348ce9b2766"
-  integrity sha512-ydwGgV3Usba5P53RAOqCA9MsRsbb8jFIEVhf7/BXFjpKNoIQyijVTXhwIgQr/oGwUNOHfgQ3F8ruiUjX/p2YKw==
-
-lightningcss-win32-x64-msvc@1.17.1:
-  version "1.17.1"
-  resolved "https://registry.yarnpkg.com/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.17.1.tgz#be3c5e1f026c4fc6b58f969917970450634285a1"
-  integrity sha512-Ngqtx9NazaiAOk71XWwSsqgAuwYF+8PO6UYsoU7hAukdrSS98kwaBMEDw1igeIiZy1XD/4kh5KVnkjNf7ZOxVQ==
-
 lightningcss@^1.16.1:
-  version "1.17.1"
-  resolved "https://registry.yarnpkg.com/lightningcss/-/lightningcss-1.17.1.tgz#cce53acf117a6f9494bc77e8ac6550286d621243"
-  integrity sha512-DwwM/YYqGwLLP3he41wzDXT/m+8jdEZ80i9ViQNLRgyhey3Vm6N7XHn+4o3PY6wSnVT23WLuaROIpbpIVTNOjg==
-  dependencies:
-    detect-libc "^1.0.3"
-  optionalDependencies:
-    lightningcss-darwin-arm64 "1.17.1"
-    lightningcss-darwin-x64 "1.17.1"
-    lightningcss-linux-arm-gnueabihf "1.17.1"
-    lightningcss-linux-arm64-gnu "1.17.1"
-    lightningcss-linux-arm64-musl "1.17.1"
-    lightningcss-linux-x64-gnu "1.17.1"
-    lightningcss-linux-x64-musl "1.17.1"
-    lightningcss-win32-x64-msvc "1.17.1"
+  version "0.0.0"
+  uid ""
+
+"lightningcss@link:.":
+  version "0.0.0"
+  uid ""
 
 lilconfig@^2.0.3:
   version "2.0.3"
@@ -2450,13 +2346,6 @@ min-indent@^1.0.0:
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
   integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
 
-minimatch@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
-  integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
-  dependencies:
-    brace-expansion "^1.1.7"
-
 minimatch@^3.1.1:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
@@ -2464,12 +2353,7 @@ minimatch@^3.1.1:
   dependencies:
     brace-expansion "^1.1.7"
 
-minimist@^1.2.0, minimist@^1.2.3:
-  version "1.2.6"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
-  integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
-
-minimist@^1.2.6:
+minimist@^1.2.0, minimist@^1.2.3, minimist@^1.2.6:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.7.tgz#daa1c4d91f507390437c6a8bc01078e7000c4d18"
   integrity sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==
@@ -2592,11 +2476,6 @@ node-gyp-build@^4.3.0:
   resolved "https://registry.yarnpkg.com/node-gyp-build/-/node-gyp-build-4.3.0.tgz#9f256b03e5826150be39c764bf51e993946d71a3"
   integrity sha512-iWjXZvmboq0ja1pUGULQBexmxq8CV4xBhX7VDOTbL7ZR4FOowwY/VOtRxBN/yKxmdGoIp4j5ysNT4u3S2pDQ3Q==
 
-node-releases@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.2.tgz#7139fe71e2f4f11b47d4d2986aaf8c48699e0c01"
-  integrity sha512-XxYDdcQ6eKqp/YjI+tb2C5WM2LgjnZrfYg4vgQt49EK268b6gYCHsBLrK2qvJo4FmCtqmKezb0WZFK4fkrZNsg==
-
 node-releases@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.6.tgz#8a7088c63a55e493845683ebf3c828d8c51c5503"
@@ -3122,15 +3001,7 @@ posthtml@^0.15.0:
     posthtml-parser "^0.7.2"
     posthtml-render "^1.3.1"
 
-posthtml@^0.16.4, posthtml@^0.16.5:
-  version "0.16.5"
-  resolved "https://registry.yarnpkg.com/posthtml/-/posthtml-0.16.5.tgz#d32f5cf32436516d49e0884b2367d0a1424136f6"
-  integrity sha512-1qOuPsywVlvymhTFIBniDXwUDwvlDri5KUQuBqjmCc8Jj4b/HDSVWU//P6rTWke5rzrk+vj7mms2w8e1vD0nnw==
-  dependencies:
-    posthtml-parser "^0.10.0"
-    posthtml-render "^3.0.0"
-
-posthtml@^0.16.6:
+posthtml@^0.16.4, posthtml@^0.16.5, posthtml@^0.16.6:
   version "0.16.6"
   resolved "https://registry.yarnpkg.com/posthtml/-/posthtml-0.16.6.tgz#e2fc407f67a64d2fa3567afe770409ffdadafe59"
   integrity sha512-JcEmHlyLK/o0uGAlj65vgg+7LIms0xKXe60lcDOTU7oVX/3LuEuLwrQpW3VJ7de5TaFKiW4kWkaIpJL42FEgxQ==
@@ -3156,16 +3027,11 @@ prebuild-install@^7.1.1:
     tar-fs "^2.0.0"
     tunnel-agent "^0.6.0"
 
-prettier@^2.5.1:
+prettier@^2.5.1, prettier@^2.6.2:
   version "2.8.1"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.1.tgz#4e1fd11c34e2421bc1da9aea9bd8127cd0a35efc"
   integrity sha512-lqGoSJBQNJidqCHE80vqZJHWHRFoNYsSpP9AjFhlhi9ODCJA541svILes/+/1GM3VaL/abZi7cpFzOpdR9UPKg==
 
-prettier@^2.6.2:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.0.tgz#c7df58393c9ba77d6fba3921ae01faf994fb9dc9"
-  integrity sha512-9Lmg8hTFZKG0Asr/kW9Bp8tJjRVluO8EJQVfY2T7FMw9T5jy4I/Uvx0Rca/XWf50QQ1/SS48+6IJWnrb+2yemA==
-
 pretty-format@^27.4.2:
   version "27.4.2"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.4.2.tgz#e4ce92ad66c3888423d332b40477c87d1dac1fb8"
@@ -3322,14 +3188,7 @@ semver@^5.5.0, semver@^5.6.0, semver@^5.7.0, semver@^5.7.1:
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
 
-semver@^7.3.5:
-  version "7.3.7"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.7.tgz#12c5b649afdbf9049707796e22a4028814ce523f"
-  integrity sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==
-  dependencies:
-    lru-cache "^6.0.0"
-
-semver@^7.3.8:
+semver@^7.3.5, semver@^7.3.8:
   version "7.3.8"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.8.tgz#07a78feafb3f7b32347d725e33de7e2a2df67798"
   integrity sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==

From 32593165dcb0134db5920ca6c7f0bed863a137dc Mon Sep 17 00:00:00 2001
From: Devon Govett 
Date: Mon, 2 Jan 2023 10:13:27 -0500
Subject: [PATCH 14/15] Rename StyleSheet in ast

---
 node/ast.d.ts     | 2 +-
 src/stylesheet.rs | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/node/ast.d.ts b/node/ast.d.ts
index eecaac3e..f3121024 100644
--- a/node/ast.d.ts
+++ b/node/ast.d.ts
@@ -6857,7 +6857,7 @@ export type DefaultAtRule = null;
  *
  * // Serialize it to a string. let res = stylesheet.to_css(PrinterOptions::default()).unwrap(); assert_eq!(res.code, ".foo, .bar {\n  color: red;\n}\n"); ```
  */
-export interface StyleSheetParser {
+export interface StyleSheet {
   /**
    * A list of top-level rules within the style sheet.
    */
diff --git a/src/stylesheet.rs b/src/stylesheet.rs
index 7b34809a..25e410e2 100644
--- a/src/stylesheet.rs
+++ b/src/stylesheet.rs
@@ -68,7 +68,10 @@ pub use crate::printer::PseudoClasses;
 #[cfg_attr(
   feature = "jsonschema",
   derive(schemars::JsonSchema),
-  schemars(bound = "T: schemars::JsonSchema, T::AtRule: schemars::JsonSchema")
+  schemars(
+    rename = "StyleSheet",
+    bound = "T: schemars::JsonSchema, T::AtRule: schemars::JsonSchema"
+  )
 )]
 pub struct StyleSheet<'i, 'o, T: AtRuleParser<'i> = DefaultAtRuleParser> {
   /// A list of top-level rules within the style sheet.

From fa1c1b780a50ce556f8bdd63b690f73650332823 Mon Sep 17 00:00:00 2001
From: Devon Govett 
Date: Wed, 4 Jan 2023 00:43:01 -0500
Subject: [PATCH 15/15] Add link to ts definitions

---
 website/pages/transforms.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/pages/transforms.md b/website/pages/transforms.md
index aeb0e043..eb155554 100644
--- a/website/pages/transforms.md
+++ b/website/pages/transforms.md
@@ -12,7 +12,7 @@ Custom transforms have a build time cost: it can be around 2x slower to compile
 
 ## 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.
+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:

Lightning CSS

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

On this page

Lightning CSS

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

Docs

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

Light speed

Live in the future

Target Browsers

Live in the future

Crush it!

Crush it!

CSS modules

CSS modules

Browser grade

Browser grade

Browser grade

Browser grade

Browser grade

Browser grade