The technical principle of exploring the postcss framework in the Java library
PostCSS is a JavaScript framework for processing CSS.It uses the plug -in system to convert CSS and provides many powerful tools and libraries for automated processing CSS code.
The technical principles of postcss mainly include the following aspects:
Plug -in system: PostCSS is a modular tool. Different functions and tools can be integrated into the CSS processing process through the plug -in system.Users can choose the appropriate plug -in according to their needs to achieve flexible CSS processing.For example, the autoprefixer plug -in can automatically add the CSS prefix automatically according to the compatibility of the browser. The CSSNExt plug -in allows us to use the new CSS features that have not been fully supported by the browser.
AST (abstract grammar tree): Postcss uses AST to analyze and convey CSS.AST is a data structure that represents the source code structure. It can use a tree shape to represent the hierarchical structure of the CSS.By analyzing the CSS style table, after generating AST, and then traversing and modifying the AST can achieve various operations of CSS, such as adding, deleting, modifying the CSS rules, attributes, and selectors.
Plug -in development: Postcss provides a simple plug -in development method that allows developers to easily create new plug -ins.The plug -in can intercept the AST node in the parsing process to modify, delete or add new nodes to it.In this way, through plug -in development, we can expand the ability of PostCSS to achieve more custom CSS processing functions.
Working process: POSTCSS's workflow usually includes the following steps: First, the CSS code is converted to AST by calling the PARSE function; then, traversing AST and applying plug -in to AST is used to operate AST; and finally, by calling the Stringify function to convert AST to CSS to CSS to CSSCode.Throughout the workflow, the execution order of the plug -in is defined by the user in the configuration file.
Below is a simple example code, which demonstrates the basic usage and configuration of postcss:
1. Install postcss and required plug -in:
npm install postcss autoprefixer cssnano --save-dev
2. Create the postcss configuration file (postcss.config.js):
script
module.exports = {
plugins: [
require('autoprefixer'),
require('cssnano')
]
}
3. Use postcss to perform CSS processing in the JavaScript file:
script
const fs = require('fs');
const postcss = require('postcss');
const cssnano = require('cssnano');
const autoprefixer = require('autoprefixer');
const css = fs.readFileSync('input.css', 'utf8');
postcss([autoprefixer, cssnano])
.process(css, { from: 'input.css', to: 'output.css' })
.then(result => {
fs.writeFileSync('output.css', result.css);
if (result.map) {
fs.writeFileSync('output.css.map', result.map);
}
});
In the above code, we first introduced postcss and two plug -in required through the REQUIRE statement, namely Autoprefixer and CSSNano.We then read the contents of the INPUT.CSS file with the FS module.
Next, we called the PostCSS function to create a postcss processor and passed the Autoprefixer and CSSNano plug -in.Then, we use the process function to pass the contents of INPUT.CSS to the processor, and specify the from and to parameters to define the path of the input and output file.
Finally, the result returned by the process processing processor by calling the then function, and using the WriteFileSync function of the FS module to write the result to the output.css file.
In summary, PostCSS is a powerful CSS processing framework. It provides developers with flexible CSS processing solutions through technical principles such as plug -in systems, AST, and plug -in development.By using PostCSS, we can realize automated and customized CSS processing, improve work efficiency, and improve the experience of maintaining the CSS code.
