The principle of

Each PostCSS plug-in is a NodeJS module

Right now there are over 200 plug-ins, but not enough

The main function

  • Parsing CSS into aN AST that JavaScript can manipulate;
  • Call the plug-in to process the AST and get the results

Support for variables and mixins, browser-specific declaration prefixes,

Or transpile style rules using future CSS specifications into formats supported by the current CSS specification

Common PostCSS plug-ins

1. postcss-reporter

The PostCSS reporter is a PostCSS plug-in for console.log() processing of messages (warnings, etc.) registered by its other PostCSS plug-ins. As far as PostCSS 4.1 is concerned, a single PostCSS process can learn from what it uses

2. Autoprefixer

#content {
 display: flex;
}
Copy the code

To:

#content {
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
}
Copy the code

3. cssnext

Allow developers to use new features in future CSS versions in current projects (like converting ES6/7/8 to ES5)

  • Custom properties and variables
  • I can write variables
  • Nested style rules
.message {
 font-weight: normal;
 & .header {
   font-weight: bold;
 }
  @nest .body & {
   color: black; } // Use cssNext to convert to:.message {
 font-weight: normal
}
 
.message .header {
 font-weight: bold;
}
 
.body .message {
 color: black; } // Modularize CSS modules: global.title {font size:20px;
}
 
.content {
 font-weight: bold; } // change to:.title {
 font-size: 20px;
}
 
._content_6xmce_5 {
 font-weight: bold;
}
Copy the code

PostCSS cannot simply be classified as a CSS preprocessing or post-processing tool. PostCSS can perform a wide range of tasks, including both pre-processing and post-processing in the traditional sense.

What does CSS currently look like in the project

At present, we are all SASS + PostCSS development mode, in fact, I think it is good, learn from each other, of course, PostCSS platform can be done, but the current transition period, so better, more engineering. There are also methods that are purely PostCSS.

reference

  • Oliver segmentfault.com/a/119000000…