You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+2-181Lines changed: 2 additions & 181 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -57,190 +57,11 @@ An extremely fast CSS parser, transformer, and minifier written in Rust. Use it
57
57
- Opt-in support for locally scoped CSS variables and other dashed identifiers.
58
58
-`:local()` and `:global()` selectors
59
59
- The `composes` property
60
+
-**Custom transforms** – The Lightning CSS visitor API can be used to implement custom transform plugins.
60
61
61
62
## Documentation
62
63
63
-
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.
64
-
65
-
### From Node
66
-
67
-
See the [TypeScript definitions](https://github.com/parcel-bundler/lightningcss/blob/master/node/index.d.ts) for full API docs.
68
-
69
-
Here is a simple example that compiles the input CSS for Safari 13.2, and minifies the output.
70
-
71
-
```js
72
-
constcss=require('lightningcss');
73
-
74
-
let {code, map} =css.transform({
75
-
filename:'style.css',
76
-
code:Buffer.from('.foo { color: red }'),
77
-
minify:true,
78
-
sourceMap:true,
79
-
targets: {
80
-
// Semver versions are represented using a single 24-bit number, with one component per byte.
81
-
// e.g. to represent 13.2.0, the following could be used.
82
-
safari: (13<<16) | (2<<8)
83
-
}
84
-
});
85
-
```
86
-
87
-
You can also convert the results of running `browserslist` into targets which can be passed to Lightning CSS:
88
-
89
-
```js
90
-
constbrowserslist=require('browserslist');
91
-
constcss=require('lightningcss');
92
-
93
-
let targets =css.browserslistToTargets(browserslist('>= 0.25%'));
94
-
```
95
-
96
-
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.
97
-
98
-
```js
99
-
let {code, map} =css.bundle({
100
-
filename:'style.css',
101
-
minify:true
102
-
});
103
-
```
104
-
105
-
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.
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.
123
-
124
-
### From Rust
125
-
126
-
See the Rust API docs on [docs.rs](https://docs.rs/lightningcss).
127
-
128
-
### With Parcel
129
-
130
-
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.
131
-
132
-
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.
133
-
134
-
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.
135
-
136
-
```json
137
-
{
138
-
"@parcel/transformer-css": {
139
-
"cssModules": true,
140
-
"drafts": {
141
-
"nesting": true,
142
-
"customMedia": true
143
-
},
144
-
"pseudoClasses": {
145
-
"focusVisible": "focus-ring"
146
-
}
147
-
}
148
-
}
149
-
```
150
-
151
-
See the [Parcel docs](https://parceljs.org/languages/css) for more details.
152
-
153
-
### From Deno or in browser
154
-
155
-
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.
code:newTextEncoder().encode('.foo { color: red }'),
165
-
minify:true,
166
-
});
167
-
168
-
console.log(newTextDecoder().decode(code));
169
-
```
170
-
171
-
### With webpack
172
-
173
-
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).
174
-
175
-
### From the CLI
176
-
177
-
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.
178
-
179
-
To use the CLI, install the `lightningcss-cli` package with an npm compatible package manager:
180
-
181
-
```shell
182
-
npm install lightningcss-cli
183
-
```
184
-
185
-
Then, you can run the `lightningcss` command via `npx`, `yarn`, or by setting up a script in your package.json.
- If none of the above apply, then find, parse and use targets from the first `browserslist`, `.browserslistrc`
215
-
or `package.json` configuration file in any parent directory.
216
-
217
-
Browserslist configuration files may contain sections denoted by angular brackets `[]`.
218
-
Use these to specify different targets for different environments.
219
-
Targets which are not placed in a section are added to `defaults` and used if no section matches the environment.
220
-
221
-
_Example:_
222
-
223
-
```
224
-
# Defaults, applied when no other section matches the provided environment.
225
-
firefox ESR
226
-
227
-
[staging]
228
-
# Targets applied only to the staging environment.
229
-
samsung >= 4
230
-
```
231
-
232
-
When using parsed configuration from `browserslist`, `.browserslistrc` or `package.json` configuration files,
233
-
the environment determined by
234
-
235
-
- the `BROWSERSLIST_ENV` environment variable if present,
236
-
- otherwise the `NODE_ENV` environment variable if present,
237
-
- otherwise `production` is used.
238
-
239
-
If no targets are found for the resulting environment, then the `defaults` configuration section is used.
240
-
241
-
### Error recovery
242
-
243
-
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.
64
+
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.
Copy file name to clipboardExpand all lines: node/ast.d.ts
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -6857,7 +6857,7 @@ export type DefaultAtRule = null;
6857
6857
*
6858
6858
* // Serialize it to a string. let res = stylesheet.to_css(PrinterOptions::default()).unwrap(); assert_eq!(res.code, ".foo, .bar {\n color: red;\n}\n"); ```
6859
6859
*/
6860
-
exportinterfaceStyleSheetParser{
6860
+
exportinterfaceStyleSheet{
6861
6861
/**
6862
6862
* A list of top-level rules within the style sheet.
0 commit comments