开源工具，Github开源项目排行

搜索 TinyTools

PostCSS是一款使用javascript插件转换样式的工具

文档演示 Github仓库 Gitee仓库

PostCSS

PostCSS 是一款使用 JS 插件转换样式的工具。这些插件可以对 CSS 进行 lint 处理，支持变量和混合宏，转换未来的 CSS 语法、内联图片等等。

PostCSS 已被 Wikipedia、Twitter、阿里巴巴和 JetBrains 等行业领导者广泛使用。Autoprefixer 和 Stylelint PostCSS 插件是最受欢迎的 CSS 工具之一。

插件

PostCSS 获取 CSS 文件并提供 API 来分析和修改其规则（通过将其转换为抽象语法树）。然后，插件可以使用此 API 执行许多有用的操作，例如，自动查找错误或插入供应商前缀。

目前，PostCSS 拥有超过 200 个插件。您可以在插件列表中找到所有插件。以下是我们最喜欢的插件列表——它们完美地展示了如何在 PostCSS 上构建插件。

如果您有任何新想法，PostCSS 插件开发非常简单。
插件列表：https://github.com/postcss/postcss/blob/main/docs/plugins.md

解决全局 CSS 问题

立即使用未来的 CSS

更佳的 CSS 可读性

图片和字体

代码检查器

  • stylelint 是一个模块化样式表代码检查器。
  • stylefmt 是一个根据 stylelint 规则自动格式化 CSS 的工具。
  • doiuse 使用来自 Can I Use 的数据，检查 CSS 是否支持浏览器。
  • colorguard 帮助您保持一致的调色板。

其他

  • cssnano 是一个模块化的 CSS 压缩工具。
  • lost 是一个功能丰富的 calc() 网格系统。
  • rtlcss 为从右到左的语言环境镜像样式。

语法

PostCSS 可以转换任何语法的样式，而不仅仅是 CSS。如果您喜欢的语法尚未支持，您可以编写解析器和/或字符串生成器来扩展 PostCSS。

  • sugarss 是一种基于缩进的语法，类似于 Sass 或 Stylus。
  • postcss-syntax 根据文件扩展名自动切换语法。
  • postcss-html 解析类 HTML 文件中 <style> 标签中的样式。
  • postcss-markdown 解析 Markdown 文件代码块中的样式。
  • postcss-styled-syntax 解析 CSS-in-JS 模板字面量中的样式，
    类似于 styled-components。
  • postcss-jsx 解析源文件模板/对象字面量中的 CSS。
  • postcss-styled 解析源文件模板字面量中的 CSS。
  • postcss-scss 允许您使用 SCSS
    （但不将 SCSS 编译为 CSS）。
  • postcss-sass 允许您使用 Sass
    （但不会将 Sass 编译为 CSS）。
  • postcss-less 允许您使用 Less
    （但不会将 LESS 编译为 CSS）。
  • postcss-less-engine 允许您使用 Less
    （并且会使用真正的 Less.js 求值将 LESS 编译为 CSS）。
  • postcss-js 允许您使用 JS 编写样式或转换
    React 内联样式、Radium 或 JSS。
  • postcss-safe-parser 查找并修复 CSS 语法错误。
  • midas 将 CSS 字符串转换为高亮显示的 HTML。

文章

更多文章和视频，请访问 awesome-postcss 列表。

书籍

使用方法

只需两步即可开始使用 PostCSS：

  1. 为您的构建工具查找并添加 PostCSS 扩展。
  2. [选择插件] 并将其添加到您的 PostCSS 流程中。

[选择插件]：https://postcss.org/docs/postcss-plugins

CSS-in-JS

将 PostCSS 与 CSS-in-JS 结合使用的最佳方法是 [astroturf]。将其加载器添加到您的 webpack.config.js 中：

js 复制代码 
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'postcss-loader'],
      },
      {
        test: /\.jsx?$/,
        use: ['babel-loader', 'astroturf/loader'],
      }
    ]
  }
}

Then create postcss.config.js:

js 复制代码 
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: [
    require('autoprefixer'),
    require('postcss-nested')
  ]
}

module.exports = config

Parcel

Parcel 内置了 PostCSS 支持。它已经使用了 Autoprefixer和 cssnano。如果您想更改插件，请在项目根目录中创建 postcss.config.js：

js 复制代码 
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: [
    require('autoprefixer'),
    require('postcss-nested')
  ]
}

module.exports = config

Parcel 甚至会自动为您安装这些插件。

请注意 版本 1 中的几个问题。请注意，版本 2 可能会通过 问题 #2157 解决这些问题。

Webpack

Use postcss-loader in webpack.config.js:

js 复制代码 
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
            }
          },
          {
            loader: 'postcss-loader'
          }
        ]
      }
    ]
  }
}

Then create postcss.config.js:

js 复制代码 
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: [
    require('autoprefixer'),
    require('postcss-nested')
  ]
}

module.exports = config

Gulp

Use gulp-postcss and gulp-sourcemaps.

js 复制代码 
gulp.task('css', () => {
  const postcss    = require('gulp-postcss')
  const sourcemaps = require('gulp-sourcemaps')

  return gulp.src('src/**/*.css')
    .pipe( sourcemaps.init() )
    .pipe( postcss([ require('autoprefixer'), require('postcss-nested') ]) )
    .pipe( sourcemaps.write('.') )
    .pipe( gulp.dest('build/') )
})

npm Scripts

要从命令行界面或 npm Scripts 使用 PostCSS，
可以使用 postcss-cli。

sh 复制代码 
postcss --use autoprefixer -o main.css css/*.css

浏览器

如果您想在浏览器中编译 CSS 字符串（例如，在 CodePen 等实时编辑工具中），只需使用 Browserify 或 webpack。它们会将 PostCSS 和插件文件打包成一个文件。

要将 PostCSS 插件应用于 React 内联样式、JSS、Radium以及其他 CSS-in-JS，您可以使用 postcss-js 并转换样式对象。

js 复制代码 
const postcss  = require('postcss-js')
const prefixer = postcss.sync([ require('autoprefixer') ])

prefixer({ display: 'flex' }) //=> { display: ['-webkit-box', '-webkit-flex', '-ms-flexbox', 'flex'] }

Runners

JS API

对于其他环境，您可以使用 JS API：

js 复制代码 
const autoprefixer = require('autoprefixer')
const postcss = require('postcss')
const postcssNested = require('postcss-nested')
const fs = require('fs')

fs.readFile('src/app.css', (err, css) => {
  postcss([autoprefixer, postcssNested])
    .process(css, { from: 'src/app.css', to: 'dest/app.css' })
    .then(result => {
      fs.writeFile('dest/app.css', result.css, () => true)
      if ( result.map ) {
        fs.writeFile('dest/app.css.map', result.map.toString(), () => true)
      }
    })
})

有关 JS API 的更多详细信息，请参阅 PostCSS API 文档。
所有 PostCSS 运行器都应遵循 PostCSS 运行器指南。

选项

大多数 PostCSS 运行器接受两个参数：

  • 插件数组。
  • 选项对象。

常用选项：

  • syntax：提供语法解析器和字符串生成器的对象。
  • parser：特殊的语法解析器（例如，SCSS）。
  • stringifier：特殊的语法输出生成器（例如，Midas）。
  • map：源映射选项。
  • from：输入文件名（大多数运行器会自动设置）。
  • to：输出文件名（大多数运行器会自动设置）。

将警告视为错误

在某些情况下，将 PostCSS 或其插件发出的任何警告视为构建失败可能会有所帮助。这可以确保不会遗漏任何警告，并有助于避免错误。虽然没有启用将警告视为错误的选项，但可以通过在 PostCSS plugins 的末尾添加 postcss-fail-on-warn 插件轻松实现：

js 复制代码 
module.exports = {
plugins: [
require('autoprefixer'),
require('postcss-fail-on-warn')
]
}

编辑器和 IDE 集成

VS Code

Sublime Text

Vim

WebStorm

要在 WebStorm 和其他 JetBrains IDE 中获得 PostCSS 支持，您需要安装此插件。

安全联系人

如需报告安全漏洞，请使用 Tidelift 安全联系人。
Tidelift 将协调修复和披露工作。

企业版

作为 Tidelift 订阅的一部分提供。postcss 和其他数千个软件包的维护者正在与 Tidelift 合作，为您构建应用程序所需的开源依赖项提供商业支持和维护。节省时间、降低风险、并改善代码健康状况，同时支付您所使用的依赖项的维护者费用。了解更多。

关于项目

PostCSS 是一款使用 JS 插件转换样式的工具。这些插件可以检查 CSS、支持变量和混合宏、转换未来的 CSS 语法、内联图像等等。PostCSS 被 Wikipedia、Twitter、阿里巴巴和 JetBrains 等行业领导者所使用。
MIT
Typescript
28,889
1583
501
2013-09-25
2025-09-15

增长趋势 - stars