目录
CSS 界的 Babel，能够转译 CSS 代码，通过一些列插件增强浏览器兼容性，并让开发者提前用上新特性
| 插件或库 | 说明 | 网址 |
|---|---|---|
| postcss | Transforming styles with JS plugins | 官网、github |
| postcss-cli | CLI for postcss | github |
| postcss.parts | A searchable catalog of PostCSS plugins | 官网 |
| browserslist | The config to share target browsers and Node.js versions between different front-end tools. | github |
| autoprefixer | Parse CSS and add vendor prefixes to rules by Can I Use | github |
| postcss-preset-env | convert modern CSS into something most browsers can understand | github |
| stylelint | A mighty, modern linter that helps you avoid errors and enforce conventions in your styles. | 官网、github |
测试环境
node -v
v16.14.0
使用 postcss
安装
pnpm i -D postcss postcss-cli
package.json
{
"type": "module",
"devDependencies": {
"postcss": "^8.4.16",
"postcss-cli": "^10.0.0"
}
}
运行命令
npx postcss style.css -o dist.css
输入 style.css
.box {
box-sizing: border-box;
}
输出 dist.css
.box {
box-sizing: border-box;
}
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSIsImZpbGUiOiJkaXN0LmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5ib3gge1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xufVxuIl19 */
使用插件 autoprefixer
安装
pnpm i -D autoprefixer
npx postcss style.css -o dist.css -u autoprefixer
运行完命令发现，并没有什么改变，原因是css语法已经兼容了默认指定浏览器的版本，并不需要额外的处理
调试模式
npx autoprefixer --info
设置要兼容的浏览器版本
package.json
{
"browserslist": [
"cover 99.5%"
]
}
不输出sourcemaps
npx postcss style.css -o dist.css -u autoprefixer --no-map
输出，可以看到已经增加了浏览器前缀
.box {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
配置文件 postcss.config.js
postcss.config.js
import autoprefixer from "autoprefixer";
export default {
map: false,
plugins: [autoprefixer],
};
使用了配置文件后，可以简化命令行
npx postcss style.css -o dist.css
使用插件 postcss-preset-env
安装
pnpm i -D postcss-preset-env
配置文件 postcss.config.js
import autoprefixer from "autoprefixer";
import postcssPresetEnv from "postcss-preset-env";
export default {
map: false,
plugins: [
autoprefixer,
postcssPresetEnv({
stage: 0,
}),
],
};
关于stage:
| 阶段 | 名称 | 说明 |
|---|---|---|
| Stage 0 | 脑袋风暴阶段 | 高度不稳定，可能会发生变化。 |
| Stage 1 | 实验阶段 | 也非常不稳定，可能会发生变化，但是该提案已得到 W3C 成员的认可。 |
| Stage 2 | 承认阶段 | 高度不稳定并且可能会发生变化，但是正在积极研究中。 |
| Stage3 | 拥抱阶段 | 稳定且变化不大，此功能可能会成为标准。 |
| Stage4 | 标准阶段 | 最终的解决方案，所有主流浏览器都支持。 |
输入 style.css
.box {
box-sizing: border-box;
&:hover{
color: #ffffff;
}
}
输出 dist.css
.box {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.box:hover{
color: #ffffff;
}
使用 stylelint
pnpm install --save-dev stylelint stylelint-config-standard
配置文件 stylelint.config.cjs
module.exports = {
extends: ["stylelint-config-standard"],
};
$ npx stylelint style.css
style.css
4:9 ✖ Expected single space before "{" block-opening-brace-space-before
5:12 ✖ Expected "#ffffff" to be "#fff" color-hex-length
2 problems (2 errors, 0 warnings)
修复问题
.box {
box-sizing: border-box;
&:hover{
/* color: #ffffff; */
color: #fff;
}
}
$ npx stylelint style.css
style.css
4:9 ✖ Expected single space before "{" block-opening-brace-space-before
1 problem (1 error, 0 warnings)
关闭冲突规则
pnpm i -D stylelint-config-prettier
stylelint.config.cjs
module.exports = {
extends: ["stylelint-config-standard", "stylelint-config-prettier"],
};
使用插件 stylelint
postcss.config.js
import stylelint from "stylelint";
export default {
plugins: [
stylelint({
fix: true
}),
],
};
使用插件 postcss-pxtorem
package.json 增加脚本
{
"scripts": {
"build": "postcss style.css -o dist.css"
}
}
安装
pnpm i -D postcss-pxtorem
配置 postcss.config.js
import pxtorem from "postcss-pxtorem";
export default {
plugins: [
pxtorem
],
};
font-size: 15px;
// 输出
font-size: 0.9375rem;
完整配置
$ tree -I node_modules
.
├── package.json
├── pnpm-lock.yaml
├── postcss.config.js
├── src
│ └── style.css
└── stylelint.config.cjs
package.json
{
"type": "module",
"scripts": {
"build": "postcss src/**/*.css --dir dist",
"dev": "postcss src/**/*.css --dir dist --watch"
},
"devDependencies": {
"autoprefixer": "^10.4.8",
"postcss": "^8.4.16",
"postcss-cli": "^10.0.0",
"postcss-preset-env": "^7.7.2",
"postcss-pxtorem": "^6.0.0",
"stylelint": "^14.10.0",
"stylelint-config-prettier": "^9.0.3",
"stylelint-config-standard": "^27.0.0"
},
"browserslist": [
"cover 99.5%"
]
}
postcss.config.js
import autoprefixer from "autoprefixer";
import stylelint from "stylelint";
import postcssPresetEnv from "postcss-preset-env";
import pxtorem from "postcss-pxtorem";
export default {
// 不生成 sourcemaps
map: false,
plugins: [
// 语法校验
stylelint({
fix: true, // 自动修复
}),
// 自动添加浏览器前缀
autoprefixer,
// 使用新语法
postcssPresetEnv({
stage: 0,
}),
// 单位转换：px->rem
pxtorem,
],
};
stylelint.config.cjs
module.exports = {
extends: ["stylelint-config-standard", "stylelint-config-prettier"],
};