PostCSS

PostCSS 是一个用 JavaScript 工具和插件转换 CSS 代码的工具。Modern.js 内置 PostCSS，并集成 Autoprefixer 等常用的 PostCSS 插件，能够满足大多数项目的样式开发需求。

默认情况下，Modern.js 会对 CSS 进行以下编译和转换：

1. Autoprefixer 根据需要支持的浏览器范围，会自动为 CSS 规则添加需要的浏览器厂商前缀。Modern.js 默认支持的浏览器范围为：['> 0.01%', 'not dead', 'not op_mini all']。

   注意

   • 【支持的浏览器范围为：> 0.01%】是指浏览器市场份额大于 0.01%。
   • not dead 是指不包含官方不再支持的浏览器和过去24个月没有更新的浏览器。
   • not op_mini all 是指不包含 Opera Mini。

   补充信息

   如果需要修改默认浏览器支持范围，可以在项目的 package.json 文件中配置 browserslist，设置规则参考 Browserslist 的使用，下面是一个示例：

   package.json

   {
     "browserslist": [
       "last 1 version",
       "> 1%",
       "IE 10"
     ]
   }

2. 提供 CSS custom properties 支持，可以在 CSS 中定义和使用自定义变量，如：

   :root {
     --main-bg-color: pink;
   }
   
   body {
     background-color: var(--main-bg-color);
   }

3. 提供 CSS Nesting 支持，可以在 CSS 中使用嵌套写法，如：

   table.colortable td {
     text-align: center;
   }
   table.colortable td.c {
     text-transform: uppercase;
   }

   也可以改写成 CSS 嵌套写法：

   table.colortable {
     & td {
       text-align: center;
       &.c { text-transform: uppercase }
     }
   }

4. 修复已知的 Flexbugs 。

5. 对以下 CSS 特性提供兼容：

   • initial 属性值
   • break- 属性
   • font-variant
   • Media Query Ranges

   当需要修改 PostCSS 配置时，可以通过底层配置 tools.postcss 来实现，下面是一个示例：

modern.config.js

export default defineConfig({
  tools: {
    postcss: {
      plugins: ['autoprefixer', ('postcss-flexbugs-fixes': {})],
    },
  },
});