postcss

[xlearns]

Postcss 是一个使用js插件来转换样式的工具，Postcss 的插件会检查你的css。【Postcss 是一个插件工具】

j基于Postcss得插件

• autoprefixe 添加 vendor 浏览器的前缀 【vue-cli 在项目创建的时候已经默认配置了 autoprefixer 这个插件了】
• postcss-px-to-viewport 自动转换 px 来进行不用屏幕不同宽度大小的适配的

Postcss原理

• 我们在构建项目的时候，通过webpack会把css文件的内容传送给postcss-loader， postcss-loader会解析postcss.config中的插件传输给 Postcss，Postcss 会解析传入的css，将其转换为一个AST，然后通过各种不同的插件来对这个AST进行操作，最终序列化新的 css，最后将结果返回到 postcss-loader，进行 webpack 下一个 loader 的操作

  module.exports = {
  plugins: {
  tailwindcss: {},
  autoprefixer: {},
  },
  }

autoprefixer 原理

• autoprefixer 会获取我们在 Postcss 中配置的需要支持的浏览器版本。我们的 css 文件里的内容已经被 Postcss 转换成 AST ，相应的就可以拿到属性名和属性值。在 autoprefixer 里面有很多属性的 hook ，当 AST 中有hooks 中的属性时，就会进到该属性的处理中，就会进行上面代码展示的进行属性名和属性值的转换，比如为该属性加上浏览器前缀。（应对不同浏览器厂商所支持的不同，只能进行很多的特判来进行兼容，可见 css 历史包袱有多重）。

  class DisplayFlex extends Value {
  constructor (name, prefixes) {
  super(name, prefixes)
  if (name === 'display-flex') {
    this.name = 'flex'
  }
  }
  ...
  prefixed (prefix) {
  let spec, value
      ;[spec, prefix] = flexSpec(prefix)
      // spec 为年份版本 prefix为浏览器前缀
  if (spec === 2009) {
    if (this.name === 'flex') {
      value = 'box'
    } else {
      value = 'inline-box'
    }
  } else if (spec === 2012) {
    if (this.name === 'flex') {
      value = 'flexbox'
    } else {
      value = 'inline-flexbox'
    }
  } else if (spec === 'final') {
    value = this.name
  }
  
  return prefix + value
  }
  ...
  }