PostCSS 让js可以处理css

PostCSS GitHub 中文readme

PostCSS 是 CSS 语法转换的工具
但不严格遵循css规范，只要符合css语法规则就可以被处理。（只做语法解析，不做词法解析）
这也让提前实现新提案成为可能。

使用方法

webpack 中使用 postcss-loader

// module.rules
[
  ···
  {
    test: /\.css$/,
    exclude: /node_modules/,
    use: [
      ···
      {
        loader: 'postcss-loader' // 将 css 转化为 抽象语法树 ，方便后续插件处理
      }
    ]
  }
]

在 配置文件 postcss.config.js 中注册插件

module.exports = {
  plugins: [
    require('autoprefixer'),
    ···
  ]
}

vite 中内置了 postcss

// vite.config.js
import autoprefixer from "autoprefixer"
···
export default defineConfig({
···
  css: {
    postcss: {
      plugins: [autoprefixer], //进行注册
    },
  },
})

.browserslistrc 文件设置目标兼容浏览器

命令行方法

postcss-cli

postcss --use autoprefixer -c options.json -o main.css css/*.css

postcss-js

主流插件

解决全局 CSS 的问题

postcss-use 允许你在 CSS 里明确地设置 PostCSS 插件，并且只在当前文件执行它们。
postcss-modules 和 react-css-modules 可以自动以组件为单位隔绝 CSS 选择器。
postcss-autoreset 是全局样式重置的又一个选择，它更适用于分离的组件。
postcss-initial 添加了 all: initial 的支持，重置了所有继承的样式。
cq-prolyfill 添加了容器查询的支持，允许添加响应于父元素宽度的样式.

提前使用先进的 CSS 特性

autoprefixer 添加了 vendor 浏览器前缀，它使用 Can I Use 上面的数据。
postcss-preset-env 允许你使用未来的 CSS 特性。

更佳的 CSS 可读性

postcss-sorting 给规则的内容以及@规则排序。
postcss-utilities 囊括了最常用的简写方式和书写帮助。
short 添加并拓展了大量的缩写属性。

图片和字体

postcss-assets 可以插入图片尺寸和内联文件。
postcss-sprites 能生成雪碧图。
font-magician 生成所有在 CSS 里需要的 @font-face 规则。
postcss-inline-svg 允许你内联 SVG 并定制它的样式。
postcss-write-svg 允许你在 CSS 里写简单的 SVG。

提示器（Linters）

stylelint 是一个模块化的样式提示器。
stylefmt 是一个能根据 stylelint 规则自动优化 CSS 格式的工具。
doiuse 提示 CSS 的浏览器支持性，使用的数据来自于 Can I Use。
colorguard 帮助你保持一个始终如一的调色板。

其它

postcss-rtl 在单个 CSS 文件里组合了两个方向（左到右，右到左）的样式。
cssnano 是一个模块化的 CSS 压缩器。
lost 是一个功能强大的 calc() 栅格系统。
rtlcss 镜像翻转 CSS 样式，适用于 right-to-left 的应用场景。

语法支持

PostCSS 可以转化样式到任意语法，不仅仅是 CSS。 如果还没有支持你最喜欢的语法，你可以编写一个解释器以及（或者）一个 stringifier 来拓展 PostCSS。

sugarss 是一个以缩进为基础的语法，类似于 Sass 和 Stylus。
postcss-syntax 通过文件扩展名自动切换语法。
postcss-html 解析类 HTML 文件里