文档

@parcel/css 可以从 Parcel 使用，作为一个独立的 JavaScript 或 Rust 库，使用独立的 CLI，或者作为任何其他工具的插件。

从 Node

查看完整的 API 文档的 TypeScript 定义。

以下是一个简单示例，编译输入 CSS 以支持 Safari 13.2，并最小化输出。

const css = require('@parcel/css');

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)
  }
});

您还可以将 browserslist 运行的结果转换为可以传递给 @parcel/css 的目标。

const browserslist = require('browserslist');
const css = require('@parcel/css');

let targets = css.browserslistToTargets(browserslist('>= 0.25%'));

还可以通过使用 bundle API 来进行打包。该 API 处理 @import 规则并将它们内联。此 API 需要文件系统访问权限，因此它不接受 API 中的 code。

let {code, map} = css.bundle({
  filename: 'style.css',
  minify: true
});

从 Rust

查看 docs.rs 上的 Rust API 文档。

使用 Parcel

Parcel 将 @parcel/css 作为默认的 CSS 转换器。您还应该在 package.json 中添加一个 browserslist 属性，该属性定义了您的 CSS 将为哪些浏览器编译。

虽然 Parcel CSS 处理了最常见的 PostCSS 插件，如 autoprefixer、postcss-preset-env 和 CSS 模块，但您可能仍然需要 PostCSS 来处理更定制的插件，如 TailwindCSS。如果是这样，您的 PostCSS 配置将自动获取。您可以从 PostCSS 配置中删除上述插件，它们将由 Parcel CSS 处理。

您还可以在项目的根目录中的 package.json 中配置 Parcel CSS。目前支持三种选项：drafts，可以用来启用 CSS 嵌套和自定义媒体查询，pseudoClasses，允许用可以由 JavaScript 应用（例如 polyfills）的正常类替换一些伪类，如 :focus-visible，以及 cssModules，它全局启用 CSS 模块，而不仅仅是文件以 .module.css 结尾，或者接受一个选项对象。

{
  "@parcel/transformer-css": {
    "cssModules": true,
    "drafts": {
      "nesting": true,
      "customMedia": true
    },
    "pseudoClasses": {
      "focusVisible": "focus-ring"
    }
  }
}

查看 Parcel 文档 了解更多详情。

从 Deno 或浏览器

@parcel/css-wasm 包可以在 Deno 或浏览器中使用。它使用 Parcel CSS 的 WebAssembly 版本。使用 TextEncoder 和 TextDecoder 将代码从字符串转换为类型数组并将其转换回字符串。

import init, {transform} from 'https://unpkg.com/@parcel/css-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));

使用 webpack

css-minimizer-webpack-plugin 内置了对 @parcel/css 的支持。在您的项目中安装 @parcel/css，并根据文档配置插件 此处。

从 CLI

Parcel CSS 包含一个独立的 CLI 工具，可以用来编译、压缩和打包 CSS 文件。当您只需要编译 CSS 而不需要更高级的构建工具功能（如代码拆分和多语言支持）时，可以使用它。

要使用 CLI，请使用与 npm 兼容的包管理器安装 @parcel/css-cli 包。

npm install @parcel/css-cli

然后，您可以通过 npx、yarn 或在 package.json 中设置脚本来运行 parcel-css 命令。

{
  "scripts": {
    "build": "parcel-css --minify --nesting --bundle --targets '>= 0.25%' --sourcemap input.css -o output.css"
  }
}

要查看所有可用选项，请使用 --help 参数。

npx parcel-css --help

错误恢复

默认情况下，Parcel CSS 是严格的，解析无效规则或声明时会报错。然而，有时您可能会遇到无法轻松修改的第三方库，这些库无意中包含无效语法或 IE 特定修复。在这种情况下，您可以通过启用 errorRecovery 选项（或 --error-recovery CLI 标志）来跳过无效的规则和声明，在输出中省略它们，并生成警告而不是错误。如果可能的话，还应提交问题或 PR 来修复库中的问题。

基准测试

$ node bench.js bootstrap-4.css 
cssnano: 544.809ms
159636 bytes

esbuild: 17.199ms
160332 bytes

parcel-css: 4.16ms
143091 bytes


$ node bench.js animate.css
cssnano: 283.105ms
71723 bytes

esbuild: 11.858ms
72183 bytes

parcel-css: 1.973ms
23666 bytes


$ node bench.js tailwind.css 
cssnano: 2.198s
1925626 bytes

esbuild: 107.668ms
1961642 bytes

parcel-css: 43.368ms
1824130 bytes

要比较更多工具和输入的更多基准测试，请参阅 此处。请注意，一些显示的工具执行了不安全的优化，这可能会更改原始 CSS 的行为以有利于更小的文件大小。Parcel CSS 不会这样做 - 输出的 CSS 应始终与输入行为一致。在比较工具之间的文件大小时，请记住这一点。