You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

lightningcss-cli

Package Overview
Dependencies
Maintainers
1
Versions
37
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

lightningcss-cli - npm Package Compare versions

Comparing version

1.17.1
to
1.18.0

21

package.json
{
"name": "lightningcss-cli",
"version": "1.17.1",
"version": "1.18.0",
"license": "MPL-2.0",

@@ -28,2 +28,5 @@ "description": "A CSS parser, transformer, and minifier written in Rust",

},
"resolutions": {
"lightningcss": "link:."
},
"scripts": {

@@ -33,10 +36,10 @@ "postinstall": "node postinstall.js"

"optionalDependencies": {
"lightningcss-cli-darwin-x64": "1.17.1",
"lightningcss-cli-linux-x64-gnu": "1.17.1",
"lightningcss-cli-win32-x64-msvc": "1.17.1",
"lightningcss-cli-darwin-arm64": "1.17.1",
"lightningcss-cli-linux-arm64-gnu": "1.17.1",
"lightningcss-cli-linux-arm-gnueabihf": "1.17.1",
"lightningcss-cli-linux-arm64-musl": "1.17.1",
"lightningcss-cli-linux-x64-musl": "1.17.1"
"lightningcss-cli-darwin-x64": "1.18.0",
"lightningcss-cli-linux-x64-gnu": "1.18.0",
"lightningcss-cli-win32-x64-msvc": "1.18.0",
"lightningcss-cli-darwin-arm64": "1.18.0",
"lightningcss-cli-linux-arm64-gnu": "1.18.0",
"lightningcss-cli-linux-arm-gnueabihf": "1.18.0",
"lightningcss-cli-linux-arm64-musl": "1.18.0",
"lightningcss-cli-linux-x64-musl": "1.18.0"
},

@@ -43,0 +46,0 @@ "bin": {

183

README.md

@@ -60,187 +60,8 @@ # ⚡️ Lightning CSS

- 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.
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.
### 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.
## Benchmarks

@@ -247,0 +68,0 @@