PostCSS

最新推荐文章于 2024-04-22 19:07:12 发布
最新推荐文章于 2024-04-22 19:07:12 发布
阅读量970 收藏 3
点赞数
文章标签： postcss css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mr_far/article/details/120333390
版权

PostCSS

背景

在项目开发过程中，我们使用 rem 作为单位进行 CSS 样式开发。虽然 rem 用于适配各种型号的浏览器十分方便，但是它也有明显的缺点：

  1. 在把设计图上的尺寸转换为 rem 时，我们需要自己进行计算，或者给开发工具安装插件，让开发工具来帮我们进行计算。
    在这里插入图片描述

  2. 在修改和维护已经开发完成的代码时，面对如下代码：

    .container {
	width: 2.66667rem;
	height: 1.6rem;
}

    我们很难直观地知道这个 CSS 样式设置的尺寸具体是多少。

那么有没有什么办法，能够让开发人员不用进行计算，只需要按照设计图上的尺寸写 px ，最终在浏览器渲染时，得到的是 rem 呢？

有！使用 PostCSS 。

1. 什么是 PostCSS ？

我们所说的 PostCSS 其实是由两部分组成的：PostCSS 工具和 PostCSS 插件。

PostCSS 工具有三个功能：

  • 把 CSS 代码解析为抽象语法树 AST 。

  • 提供对 AST 进行操作的 API。

  • 把 AST 转换回 CSS 。

PostCSS 插件负责调用 API 来改变 AST 。

工具和插件协同工作，实现了对 CSS 代码的转换。

PostCSS 工作原理，如下图所示：
在这里插入图片描述

红色的 Parser 和 Stringifier 是 PostCSS 工具的解析器和字符串化工具，负责 CSS 代码和 AST 之间的转换工作。

黑色的 Plugin 1 和 Plugin 2 是 PostCSS 插件，负责从 old AST 到 new AST 的改变。

2. PostCSS 有什么用 ？

PostCSS 可以将 对开发人员友好的 CSS 代码转换为 对浏览器友好的 CSS 代码。

1. 提前使用先进的 CSS 特性。

CSS3 的新特性需要加入浏览器的私有前缀，才能被特定浏览器识别。例如：

.animate {
	transform: rotate(180deg);
  -ms-transform: rotate(180deg); /* IE 9 */
  -moz-transform: rotate(180deg); /* Firefox */
  -webkit-transform: rotate(180deg); /* Safari & Chrome */
  -o-transform: rotate(180deg); /* Opera */
}

每次遇到这样的属性，我们都要写一大段，非常麻烦。

使用 autoprefixer 插件，开发时只需要编写：

/* CSS input */
.animate {
	tranform: rotate(180deg);
}

/* CSS output */
.animate {
	transform: rotate(180deg);
  -ms-transform: rotate(180deg); /* IE 9 */
  -moz-transform: rotate(180deg); /* Firefox */
  -webkit-transform: rotate(180deg); /* Safari & Chrome */
  -o-transform: rotate(180deg); /* Opera */
}

PostCSS 会帮我们为属性加上针对不同浏览器的私有前缀。

2. 解决全局 CSS 问题。

项目的不同模块之间， CSS 选择器难免会出现命名冲突的情况，这会造成样式污染。~~~~

postcss-modules 插件，可以自动以组件为单位隔绝 CSS 选择器。

/* CSS input */
.name {
	color: gray;
}

/* CSS output */
.Logo__name__SVK0g {
  color: gray;
}

Vue 中，在 <style> 标签上加入 scoped 来隔绝组件之间的 CSS 样式，就是通过 PostCSS 来实现的。感兴趣的同学可以到 Vue Loader 官网 了解一下。

3. 避免 CSS 代码中的错误。

stylelint 插件，可以检测错误的 CSS 代码，并给予开发人员提示。 stylefmt 插件，可以根据 stylelint 规则自动优化 CSS 的格式。

/* CSS input */
a {
  color: #d3;
}

# console output
app.css
2:10 Invalid hex color

是不是很像 eslint ？

4. 其他

除了上面三种主要的功能， PostCSS 还可以把 CSS 代码转换成任意我们期望的形式，只要我们为它提供对应的插件。比如我们在背景中谈到的把 px 转换成 rem :

/* CSS input */
.container {
  width: 200px;
  height: 120px;
}

/* CSS output */
.container {
	width: 2.66667rem;
	height: 1.6rem;
}

还可以转换 @font-face 代码：

/* CSS input */
body {
   font-family: "Alice";
}

/* CSS output */
@font-face {
   font-family: "Alice";
   font-style: normal;
   font-weight: 400;
   src: local("Alice"), local("Alice-Regular"),
        url("http://fonts.gstatic.com/s/alice/v7/sZyKh5NKrCk1xkCk_F1S8A.eot?#") format("eot"),
        url("http://fonts.gstatic.com/s/alice/v7/l5RFQT5MQiajQkFxjDLySg.woff2") format("woff2"),
        url("http://fonts.gstatic.com/s/alice/v7/_H4kMcdhHr0B8RDaQcqpTA.woff")  format("woff"),
        url("http://fonts.gstatic.com/s/alice/v7/acf9XsUhgp1k2j79ATk2cw.ttf")   format("truetype")
}

以及转换资源路径：

/* CSS input */
body {
  background: url('foobar.jpg');
  background: url('icons/baz.png');
}

/* CSS output */
body {
  background: url('http://example.com/images/foobar.jpg');
  background: url('http://example.com/images/baz.png');
}

PostCSS 和不同的插件结合使用，可以成为 CSS 预处理器、后处理器、代码优化工具，或者其他任何工具。

非常灵活。

我们还可以根据需求，开发属于自己的 PostCSS 插件。

3. 怎么使用 PostCSS ？

PostCSS 官方提供了很多种使用方式，而我们最常见的方式是在 Webpack 中用于处理 CSS。

  1. 安装 postcss 和 postcss-loader 。

    $ npm i -D postcss postcss-loader

  2. 在 webpack.config.js 文件中加入配置：

    module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [
                    'autoprefixer',
                    {
                      // 其他选项
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};

  3. 也可以使用 PostCSS 的配置文件：

    // postcss.config.js
module.exports = {
  plugins: [
    [
      'autoprefixer',
      {
        // 其他选项
      },
    ],
  ],
};

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader', 'postcss-loader'],
      },
    ],
  },
};

  4. 这样 webpack 运行时就会使用 PostCSS 来处理 CSS 文件了。

4. PostCSS 原理

用 node 读取 CSS 文件内容，把内容交给 PostCSS ：

// node 的 fs 模块读取文件后，再传给 PostCSS
const css = fs.readFileSync("./index.css");
postcss([autoprefixer]).process(css);
1. 解析 CSS

在接到 CSS 代码之后，我们先把它以字符串格式存储起来：

this.css = css.toString();

然后我们需要对字符串进行扫描，把字符串解析成 token 格式：

// token
[
  'word', // 类型
  '.className', // 匹配的内容
  1, // 起始位置
  10 // 结束位置
]

  • 为什么要解析成 token 格式呢？

    因为字符串格式的数据操作起来麻烦而且效率低下，而 token 格式对计算机来说易于理解和操作。

  • 怎么才能解析成 token 格式呢？

    如果你对编译原理有所了解，那么就会知道，这个解析的过程被称为词法分析。

    词法分析：从左向右逐行扫描源程序的字符，识别出各个单词，确定单词的类型。将识别出的单词转换成统一的词法单元 token 。

那么如何进行词法分析呢？

假设有这样一段 CSS 代码，我们来对它进行词法分析：

.my-font { 
  color: #FFF; 
	font-size: 12px;
}

那么我们首先需要定义一些变量，用来存储扫描时的数据：

class Tokenizer {
  constructor(css) {
    this.css = css.toString(); // 输入的 css 代码
    this.length = css.length; // 字符串长度
    this.pos = 0; // 储存当前位置
    this.next; // 储存下一个位置
    this.code = ""; // 当前字符的 charCode
    this.currentToken; // 当前 token
    this.tokens = []; // 结果 tokens
  }
}

还需要声明一些变量，用来判断符号类型：

const NEWLINE = '\n'.charCodeAt(0); // 换行符
const SPACE = ' '.charCodeAt(0); // 空格
const TAB = '\t'.charCodeAt(0); // 制表符

const OPEN_CURLY = '{'.charCodeAt(0); // 左大括号
const CLOSE_CURLY = '}'.charCodeAt(0); // 右大括号

const SEMICOLON = ';'.charCodeAt(0); // 分号
const COLON = ':'.charCodeAt(0); // 冒号

以及查找符号的正则表达式：

const RE_WORD_END = /[\t\n\f\r !"#'():;@[\\\]{}]|\/(?=\*)/g;

接下来，我们再规定几种 token 的类型：

space 空格、换行符、制表符
word 单词
string 字符串
brackets 括号 
; 分号
: 冒号

然后我们需要对 CSS 代码从左向右逐个字符进行扫描，一旦发现满足某一种 token 类型，那就把这段字符串截取，存储到 token 中，如下图所示：

Tokenizer

我们定义一个方法 nextToken 来实现识别 token 的功能：

nextToken() {
  if (this.pos >= this.length) return; // 如果指针位置超过文件长度，终止扫描
    
  this.code = this.css.charCodeAt(this.pos); // 当前字符
  // 识别不同类型的 token
  switch (this.code) {
    // 当前字符是空格、换行符、制表符时，存入类型为 space 的 token 中
    // 如果是连续的空格、换行符、制表符的情况，会一并截取，存入一个 token 中
    case NEWLINE:
    case SPACE:
    case TAB: {
      this.next = this.pos;
        
      do {
        this.next += 1;
        this.code = this.css.charCodeAt(this.next);
      } while (
        this.code === SPACE ||
        this.code === NEWLINE ||
        this.code === TAB
      )
  
      this.currentToken = ['space', this.css.slice(this.pos, this.next)];
      this.pos = this.next - 1;
      break;
    }
      
    // 当前字符如果是大括号，存入类型为 { 或者 } 的 token 中
    case OPEN_CURLY:
    case CLOSE_CURLY: {
      let controlChar = String.fromCharCode(this.code);
      this.currentToken = [controlChar, controlChar, this.pos];
      break;
    }
      
    default: {
      // 从当前位置到下一个符号之间的内容，存入类型为 word 的 token
      RE_WORD_END.lastIndex = this.pos + 1;
      RE_WORD_END.test(this.css);
        
      if (RE_WORD_END.lastIndex === 0) {
        this.next = this.css.length - 1
      } else {
        this.next = RE_WORD_END.lastIndex - 2
      }
  
      this.currentToken = ['word', this.css.slice(this.pos, this.next + 1), this.pos, this.next];
      this.pos = this.next;
        
      break;
      }
    }

    this.pos ++
    return this.currentToken
  }
}

最后定义一个 getTokens 方法，让它循环调用 nextToken 方法，直到文件结尾：

// 使用 while 循环，逐个获取 token ，然后保存到 tokens 中，直到文件结尾
getTokens() {
  let token;

  while (!this.endOfFile()) {
    this.nextToken();
    this.tokens.push(this.currentToken);
  }

  return this.tokens;
}

// 判断是否扫描到文件的结尾
endOfFile() {
  return this.pos >= this.length;
}

调用 getTokens 方法，我们就会得到 token 格式的数据：

[
  [ 'word', '.my-font', 0, 7 ],
  [ 'space', ' ' ],
  [ '{', '{', 9 ],
  [ 'space', ' \n  ' ],
  [ 'word', 'color', 14, 18 ],
  [ 'word', ':', 19, 19 ],
  [ 'space', ' ' ],
  [ 'word', '#FFF', 21, 24 ],
  [ 'word', ';', 25, 25 ],
  [ 'space', ' \n\t' ],
  [ 'word', 'font-size', 29, 37 ],
  [ 'word', ':', 38, 38 ],
  [ 'space', ' ' ],
  [ 'word', '12px', 40, 43 ],
  [ 'word', ';', 44, 44 ],
  [ 'space', '\n' ],
  [ '}', '}', 46 ],
  [ 'space', '\n' ]
]
2. 生成 AST

AST 是由一个个节点 Node 组成的树形数据结构：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qCDxo0vh-1646982702883)(./images/AST.png)]

在得到 token 格式的数据后，PostCSS 根据不同的 token 的类型，进行不同的处理，生成不同的 Node 节点。

parse() {
  let token;
  
  // 逐个获取 token
  while (!this.tokenizer.endOfFile()) {
    token = this.tokenizer.nextToken();
		
    // 不同的 token 类型，使用不同的处理方式。
    switch (token[0]) {			
      // 评论类型的 token , 生成 commet 节点
      case 'comment':
        this.comment(token);
        break;
			
      // @类型的 token , 生成 atrule 节点
      case 'at-word':
        this.atrule(token);
        break;
        
      // ...

      default:
        // rule 和 decl 节点，在 other 方法里生成
        this.other(token);
        break;
    }
  }
  
  this.endFile();
}

PostCSS 把节点分为 5 种类型：AtRule, Comment, Declaration, Root, Rule ，每种节点存储了详细的描述信息。以Rule 节点为例：

Rule {
  raws: { before: '', between: ' ', semicolon: true, after: ' ' }, // 符号信息
  type: 'rule', // 节点类型
  nodes: [ [Declaration] ], // 子节点列表
  parent: Root { // 父节点信息
  	raws: [Object],
    type: 'root',
    nodes: [Circular *1],
    source: [Object],
    [Symbol(isClean)]: false,
    [Symbol(my)]: true
	},
  source: { start: [Object], input: [Input], end: [Object] }, // 源代码信息
  selector: '.className', // 选择器
  [Symbol(isClean)]: false,
  [Symbol(my)]: true
}

并且 PostCSS 提供了操作 AST 的 API ，例如：walkRules 、 insertBefore 、 removeChild 等，详细文档可以查看： PostCSS API 文档

3. 调用插件

得到了完整的 AST 之后，PostCSS 会把它交给插件来处理：

// 用 parser 把 css 解析成 AST ，保存到 root
let root = parser(css, opts)

// 实例化一个 Result ，用来保存结果
this.result = new Result(processor, root, opts)

// 遍历插件列表
for(let i = 0; i < this.plugins.length; i ++) {
  let plugin = this.plugins[i]
  let promise = this.runOnRoot(plugin);
}

// 把 AST 交给插件处理
runOnRoot(plugin) {
  return plugin(this.result.root, this.result)
}

插件内部利用 API 对 AST 进行操作，我们以 postcss-pxtorem 为例：

css => {
  // 遍历 AST 的所有属性节点 decl
  css.walkDecls((decl, i) => {
    // 属性值中没有 px 的不处理
    if (decl.value.indexOf("px") === -1) return;
    
    // 有 px 的，把属性值换算为 rem 
    const value = decl.value.replace(pxRegex, pxReplace);
		decl.value = value;
  });
}
4. 字符串化

在插件处理完 AST 之后，PostCSS 使用 Stringifier 把 AST 转换回字符串：

// 注释节点，会在两端拼接 /* */
comment(node) {
  let left = this.raw(node, 'left', 'commentLeft')
  let right = this.raw(node, 'right', 'commentRight')
  this.builder('/*' + left + node.text + right + '*/', node)
}

// at选择器会在前面拼接@
atrule(name, semicolon) {
  let name = "@" + node.name;
  // ...
}

// 属性节点会根据情况在末尾拼接 ; 和 !important
decl(node, semicolon) {
  let between = this.raw(node, 'between', 'colon')
  let string = node.prop + between + this.rawValue(node, 'value')

  if (node.important) {
    string += node.raws.important || ' !important'
  }

  if (semicolon) string += ';'
  this.builder(string, node)
}

最后我们再把字符串写入一个 CSS 文件，就得到了新的 CSS 代码。

fs.writeFile("dest/app.css", result.css);
疯狂的小发
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
postcss-modules：PostCSS插件，可在所有地方使用CSS模块
02-22
postcss模块 一个插件，可在任何地方使用。 不仅在客户端。 这是什么？ 例如，您具有以下CSS： /* styles.css */ : global . page { padding : 20 px ; } . title { composes : title from "./mixins.css" ; color : green; } . article { font-size : 16 px ; } /* mixins.css */ . title { color : black; font-size : 40 px ; } . title : hover { color : red; } 转换后，它将变为： . _title_116zl_1 { color : black; font-size : 40 px ; } . _title
postcss-windicss:Windi CSS的PostCSS集成
04-01
postcss-windicss :test_tube: 过期的。 :warning: 不鼓励使用此软件包，因为PostCSS的API存在一些限制。 将我们用于每个专用框架/构建工具，以获取最佳的开发经验和性能。 该插件应该是使用Windi CSS的最后选择...
什么是postcss？如何使用postcss?
stay hungry, stay foolish
11-24 5705
方式2：使用“browserslist”键在 package.json 文件中配置Browserslist。postcss是一个JavaScript 工具，可以用来。方式1：创建postcss.config.js文件，配置。postcss可以使用不同插件实现自动添加。后面添加 -w ， 可以实时监听。-moz-： 火狐浏览器私有属性。-o-：Opera浏览器私有属性。-ms-：IE浏览器私有属性。
还记得PostCSS吗，看这一篇文章就够了！！！
徐磊
03-29 1107
由于项目中的使用，又想深入了解，想着写一篇博客，以此监督自我学习 ~那么首先，让我们带着几个问题来了解一下，PostCSS。
一文搞懂什么是 PostCSS
weixin_64051447的博客
03-29 2807
PostCSS 本身是一个功能比较单一的工具。它提供了一种方式用 JavaScript 代码来处理 CSS。它负责把 CSS 代码解析成抽象语法树结构（Abstract Syntax Tree，AST），再交由插件来进行处理。插件基于 CSS 代码的 AST 所能进行的操作是多种多样的，比如可以支持变量和混入（mixin），增加浏览器相关的声明前缀，或是把使用将来的 CSS 规范的样式规则转译（transpile）成当前的 CSS 规范支持的格式。
PostCSS分享
qq_28992047的博客
06-13 4082
postcss的起源与分析
postcss-assets:PostCSS的资产经理
04-22
PostCSS Assets是CSS的资产管理器。 它将样式表与环境变化隔离开，获取图像大小并内联文件。目录完整的选项列表 安装npm install postcss-assets --save-dev 用法 Gulp PostCSS gulp . task ( 'assets' , function ...
PostCSS技术概述
04-22
讲解分为8章： 01 PostCSS简介 02 PostCSS的安装与使用 03 PostCSS的核心概念 04 插件与使用方式 05 自动添加前缀 06 代码压缩与优化 07 兼容性和社区支持 08 实际应用场景
rollup-plugin-postcss:PostCSS汇总插件
04-18
PostCSS汇总插件 它能做什么 使用PostCSS插件转换导入CSS文件 连接并提取处理后的样式 特征 源图支持 仅在配置请求时生成并保存源映射 生成可追溯到原始导入文件的正确源映射文件 使源相对于cwd 安装 npm install @...
postcss-selector-namespace:使用postcss命名CSS选择器
05-13
postcss-选择器命名空间 安装 $ npm install postcss-selector-namespace 用法 var postcss = require ( 'postcss' ) var selectorNamespace = require ( 'postcss-selector-namespace' ) var output = postcss ( ) ...
postcss安装和使用（详细）
热门推荐
m0_65450343的博客
05-06 1万+
postcss简介 PostCSS 本身是一个功能比较单一的工具。它提供了一种方式用JavaScript代码来处理CSS。利用PostCSS可以实现一些工程化的操作，如：自动添加浏览器前缀，代码合并，代码压缩等。官方网址：PostCSS - 是一个用 JavaScript 工具和插件来转换 CSS 代码的工具 | PostCSS 中文网https://www.postcss.com.cn/： 目录 1,安装postcss： 2,下载autoprefixer插件，并创建postcss.config
postcss详解以及常用方法
qq_41867900的博客
05-16 1045
其实，Autoprefixer 正是 postcss 众多插件中的一款，postcss 提供的简洁明了API，并且文档十分详细，这为其生态建设提供了有力的支撑。预处理指的是通过特殊的规则，将非 css 文本格式最终生成 css 文件，而 postcss 则是对 CSS 进行处理，最终生成CSS。postcss 既不是 预处理器也不是 后处理器，其功能比较广泛，而且重要的一点是，postcss可以和less/sass结合使用。使用下个版本的css语法【关于语法另一篇文章会单独讲】前缀补全，全自动的。
postcss_PostCSS简介
culi4814的博客
08-15 567
postcssMost developers who spend their time working with CSS are familiar with preprocessors such Less, Sass, and Stylus. These tools have become a vital part of the web development ecosystem. Writing...
postcss简介
追风Programer的博客
01-22 3436
前言 css预处理器在目前的开发中是很受欢迎的，但是它们也有一些缺点。在今天的介绍中，我们将探讨postcss的优势以及它是如何工作的，还有其一些丰富而且实用的插件。 css预处理器的价值和局限性 大多数CSS开发人员都非常熟悉css预处理器，像sass、less、stylus等，以及伴随着这些预处理器出现的一些概念，比如file partials, nesting, variables 和 mixins等。随着css的发展，预处理器的一些功能正在渐渐的被原生css所实现，但是还有大量非常实用的功能对于开发
学习 PostCSS 以及使用
LizequaNNN的博客
10-27 2881
PostCSS 是一个使用 JavaScript 工具和插件转换 CSS 代码的工具，它的主要功能其实是可以利用 JavaScript 去处理一些原生的 CSS 或者预处理器（Less、Sass）处理不了的工作。
PostCSS概述
最新发布
weixin_47336109的博客
04-22 854
PostCSS，顾名思义，是处理CSS的“后处理器”。它本身并不具备CSS预处理器（如Sass、Less）那样的变量、嵌套、混合等功能，但它却提供了一个强大的平台，允许开发者通过插件来扩展CSS的功能。PostCSS的核心原理在于其独特的转换流程。它首先将CSS代码解析成抽象语法树（AST），然后允许开发者通过插件对AST进行修改和转换，最后再将修改后的AST重新生成CSS代码。这种机制使得PostCSS能够支持各种复杂的CSS转换操作，从而实现更高级的CSS功能。
PostCSS插件以及其作用
dongshuaiqi的博客
06-09 1697
postCSS 一些插件以及作用
PostCSS使用教程
09-12
PostCSS 是一个用 JavaScript 编写的工具，是一个 CSS 处理器，可以帮助你在编写 CSS 时自动处理一些重复的任务和浏览器兼容性问题。它可以通过插件来扩展功能，并且非常灵活。 以下是使用 PostCSS 的基本步骤： 1...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值