parcel-bundler · devongovett · Jan 4, 2023 · Dec 26, 2022 · Dec 26, 2022 · Dec 26, 2022
diff --git a/README.md b/README.md
@@ -57,190 +57,11 @@ An extremely fast CSS parser, transformer, and minifier written in Rust. Use it
   - Opt-in support for locally scoped CSS variables and other dashed identifiers.
   - `:local()` and `:global()` selectors
   - The `composes` property
+- **Custom transforms** – The Lightning CSS visitor API can be used to implement custom transform plugins.
 
 ## 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] <INPUT_FILE>`
-- 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] <INPUT_FILE>`
-- 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
 

diff --git 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/package.json b/package.json
@@ -48,34 +48,42 @@
     "@mdn/browser-compat-data": "^5.1.6",
     "@napi-rs/cli": "^2.6.2",
     "autoprefixer": "^10.4.8",
-    "caniuse-lite": "^1.0.30001373",
     "codemirror": "^6.0.1",
     "cssnano": "^5.0.8",
     "esbuild": "^0.13.10",
     "flowgen": "^1.21.0",
     "jest-diff": "^27.4.2",
     "json-schema-to-typescript": "^11.0.2",
+    "markdown-it-anchor": "^8.6.6",
+    "markdown-it-prism": "^2.3.0",
+    "markdown-it-table-of-contents": "^0.6.0",
     "napi-wasm": "^1.0.1",
     "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",
+    "posthtml-include": "^1.7.4",
+    "posthtml-markdownit": "^1.3.1",
+    "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"
   },
+  "resolutions": {
+    "lightningcss": "link:."
+  },
   "scripts": {
     "prepare": "patch-package",
     "build": "node scripts/build.js && node scripts/build-flow.js",
     "build-release": "node scripts/build.js --release && node scripts/build-flow.js",
     "prepublishOnly": "node scripts/build-flow.js",
     "wasm:build": "cargo build --target wasm32-unknown-unknown -p lightningcss_node && cp target/wasm32-unknown-unknown/debug/lightningcss_node.wasm wasm/. && node scripts/build-wasm.js",
     "wasm:build-release": "cargo build --target wasm32-unknown-unknown -p lightningcss_node --release && cp target/wasm32-unknown-unknown/release/lightningcss_node.wasm wasm/. && node scripts/build-wasm.js",
-    "website:start": "parcel website/index.html website/playground/index.html",
-    "website:build": "yarn wasm:build-release && parcel build website/index.html website/playground/index.html",
+    "website:start": "parcel 'website/*.html' website/playground/index.html",
+    "website:build": "yarn wasm:build-release && parcel build 'website/*.html' website/playground/index.html",
     "build-ast": "cargo run --example schema --features jsonschema && node scripts/build-ast.js",
     "test": "uvu node/test"
   }

diff --git 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.

diff --git a/website/.posthtmlrc b/website/.posthtmlrc
@@ -0,0 +1,28 @@
+{
+  "plugins": {
+    "posthtml-include": {},
+    "posthtml-markdownit": {
+      "markdownit": {
+        "html": true
+      },
+      "plugins": [
+        {
+          "plugin": "markdown-it-anchor"
+        },
+        {
+          "plugin": "markdown-it-table-of-contents",
+          "options": {
+            "containerHeaderHtml": "<h3>On this page</h3>",
+            "includeLevel": [
+              2,
+              3
+            ]
+          }
+        },
+        {
+          "plugin": "markdown-it-prism"
+        }
+      ]
+    }
+  }
+}
diff --git a/website/bundling.html b/website/bundling.html
@@ -0,0 +1 @@
+<include src="website/include/layout.html" locals='{"title": "Bundling", "url": "bundling.html", "page": "website/pages/bundling.md"}' />
diff --git a/website/css-modules.html b/website/css-modules.html
@@ -0,0 +1 @@
+<include src="website/include/layout.html" locals='{"title": "CSS Modules", "url": "css-modules.html", "page": "website/pages/css-modules.md"}' />
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<include src="website/include/layout.html" locals='{"title": "Bundling", "url": "bundling.html", "page": "website/pages/bundling.md"}' />