This is the 23rd day of my participation in the August More Text Challenge.More challenges in August

In the last article we looked at the PostCSS-loader, which uses postCSS in webpack and automatically prefixes CSS with the help of the Autoprefixer plug-in. However, you’ll find that many scaffolds use autoprefixer less for configuring automatic browser prefixes and more for another plugin — postCSS-preset -env, which is preset.

Postcss-preset -env postCSs-preset -env

PostCSS Preset Env lets you convert modern CSS into something most browsers can understand, determining the polyfills you need based on your targeted browsers or runtime environments.

The PostCSS Preset Env can turn modern CSS into something that most browsers can understand and determine the desired polyfills depending on the target browser or runtime environment.

Note: Modern CSS refers to modern CSS features, which are supported by some browsers and not by others. And polyfill, we’ll talk about that later when we talk about Babel.

1. postcss-preset-env

  • In fact, in configurationpostcss-loaderWe do not need to use the config plug-inautoprefixer.
  • We can use another plugin:postcss-preset-env
    • postcss-preset-envIs also apostcssThe plug-in;
    • It can help us bring something modernCSSFeatures that most browsers recognizeCSSAnd will add the required ones depending on the target browser or runtime environmentpolyfill;
    • Also included will automatically help us addautoprefixer(So it’s kind of built inautoprefixer);

What are the features of modern CSS? Let’s take an 8-bit hexadecimal color code as an example.

In general, the hexadecimal color code we use is six-digit (# followed by a six-digit hexadecimal number, such as #123456), with the first and second digits representing R (red), the third and fourth digits representing G (green), and the fifth and sixth digits representing B (blue). But there is actually an 8-bit hexadecimal color code (e.g. #12345678) with the last two digits representing a (alpha transparency). Will the last two digits be valid? The answer is that some browsers will work and some won’t, depending on how well the browser can parse an 8-bit hexadecimal color code.

/ SRC/CSS /index.css and change the color property in the index.css file as follows:

.content {
  color: # 12345678;
}
Copy the code

Then run the NPM run build command to re-compile the code and open the browser to see the result:

As you can see, font colors have indeed changed in the current version of Google Chrome, and as you can see from the Elements TAB on the console, the browser still interprets the color value as an 8-bit hexadecimal color code. This means that the value of an 8-bit hexadecimal color code is packaged as we write it, and is used by the browser as well. There is a problem with this. The current version of Google Chrome will recognize this style correctly, but some browsers may not support this 8-bit hexadecimal color code, which may result in an error or no effect at all.

So, hopefully, when we use modern CSS features like 8-bit hexadecimal color code in our projects, PostCSS will help us convert it to a format that most browsers can recognize (such as the 8-bit hexadecimal color code converted to RGBA () format here).

Can the Autoprefixer we used help us achieve this effect? The answer is no, because as we’ve seen, the Autoprefixer plug-in can only help us add browser prefixes, not modern CSS features. At this point, we can use the postCSS-Preset -env plugin to transform modern CSS features.

To use postCSS-PRESET -env, we need to install it first, as it is also a standalone plugin, using the following installation command:

npm install postcss-preset-env -D
Copy the code

1.1 directly inwebpackConfigured in the configuration filepostcssOptions

Install postcssoptions. plugins: introduce postCSs-preset -env (preset) :

use: [
  // Notice the execution order (bottom up, right to left, back to front)
  'style-loader'.'css-loader',
  {
    loader: 'postcss-loader'.options: {
      postcssOptions: {
        plugins: [
          require('autoprefixer'),
          require('postcss-preset-env']}}}],Copy the code

Let’s run NPM run build again and see what happens:

As can be seen, webPack-compiled CSS color styles are transformed using postCSS-preset -env, 8-bit hexadecimal color codes are converted to RGBA () values, which are supported by most browsers.

Therefore, postCSS-Preset -env is more likely to be used in development than autoprefixer in order to use modern CSS features.

In addition, since postCSs-preset -env already includes autoprefixer (i.e. the former has already done what the latter wants to do), we just use postCSs-preset -env, No need to add Autoprefixer (with or without Autoprefixer). So the configuration file can be simplified as follows:

use: [
  // Notice the execution order (bottom up, right to left, back to front)
  'style-loader'.'css-loader',
  {
    loader: 'postcss-loader'.options: {
      postcssOptions: {
        plugins: [
          require('postcss-preset-env']}}}],Copy the code

After using postCSS-preset -env only, run the NPM run build command to verify this and the result is as follows:

As you can see, the conversion of color styles and formatting and the addition of browser prefixes are fine.

That’s all about the postCSS-preset -env plugin, which can be used only for prefixes and modern CSS features in the future. This is why a lot of scaffolding uses this plugin instead of Autoprefixer (postCSS-Preset -env already includes Autoprefixer).

Two equivalent ways of writing it

It should be added that the following two statements are equivalent when configuring plug-ins:

plugins: [
  require('postcss-preset-env')]Copy the code
plugins: [
  'postcss-preset-env'
]
Copy the code

The second version uses the string form directly, which is automatically converted to require in the first version. ‘postCSS-preset -env’ is equivalent to short for require(‘ postCSs-preset -env’).

However, not all plug-ins can be abbreviated as above, autoprefixer, postCSS-preset -env can be abbreviated because they don’t need to pass any parameters, and if some plug-ins need to pass parameters when called (such as require(‘ ABC ‘)({}), Please refer to the official documentation of the plugin for details about how to pass the parameter.

1.2 Using the Configuration FilepostcssOptions

Now, let’s consider another question: how do we configure PostCSS to work with multiple file formats? For example, we also want PostCSS to handle less files as well. Does that mean that the rule object that matches the LESS file should also be configured with the rule object that matches the CSS file? Configure it as follows:

For less files, we first use less-loader to convert less files into CSS files, then we can use postCSS to further process THE CSS, and then use CSS-loader to parse and load the CSS code. Finally, use style-loader to insert the parsed CSS code into the page.

You might notice that if you do this, the configuration of postCSS in the rule object matching the CSS file is the same as the configuration of PostCSS in the rule object matching the less file. Is it possible to separate this configuration information? The answer is yes.

If we want to do a separate extraction of the postCSS-loader configuration, we can do this:

Replace all UseEntry objects corresponding to postCSs-loader with postCSs-loader strings, and create a postcss.config.js file in the root directory of the project (note: Postcss.config. js: postcss.config.js: postcss.config.js: postcss.config.js: postcss.config.js: postcss.config.js: postcss.config.js: postcss.config.js: postcss.config.js: postcss.config.js: postcss.config.js: postcss.config.js: postcss.config.js: postcss.config.js: postcss.config.js: postcss.config.js: postcss.config.js: postcss.config.

module.exports = {
  plugins: [
    require('postcss-preset-env')]}Copy the code

Replace the UseEntry object corresponding to postCSS-loader with the string postCSs-loader in the webpack configuration file. Add the postcssOptions from the options property of the UseEntry object to the postcss.config.js file (of course, The require(‘ postCSS-preset -env’) in the code block above can also be abbreviated to ‘postCSs-preset -env’).

Ok, now that we’ve separated postcssOptions into a configuration file, we just need to put postCSS-loader in the webPack configuration file, so the code is much cleaner.

NPM run build = NPM run build = NPM run build = NPM run build

Js require(‘ postCSs-config. js) and run NPM run build to compile, many of the effects (8-bit hexadecimal color coding, prefixes) are lost:

As you can see, the configuration we wrote in postcss.config.js works.

PostcssOptions can be configured in a webPack configuration file or in a separate configuration file.

To sum up, this paper mainly talks about the following points:

  • postcss-preset-envPlug-in andautoprefixerPlug-in differences;
  • In using certainpostcssPlugins can also pass strings directly;
  • Can bepostcssOptionsDo extract the content and configure it into a separatepostcssConfiguration file.

supplement

Q: Does postCSs-preset -env depend on autoprefixer?

  • You can go topostcss-preset-envCorresponding to the package underpackage.jsonView in filepostcss-preset-envIs there any dependenceautoprefixer:

As can be seen, postCSs-preset -env is dependent on Autoprefixer. So autoprefixer will be installed automatically when postCSS-Preset -env is installed, even if autoprefixer has not been installed previously.