feat: bump postcss-nesting v12 to support latest CSS nesting syntax (#…

…4684)

.changeset/chatty-needles-speak.md

@@ -0,0 +1,8 @@
+---
+'@modern-js/builder-shared': patch
+'@modern-js/module-tools': patch
+---
+
+feat: bump postcss-nesting v12 to support latest CSS nesting syntax
+
+feat: 升级 postcss-nesting v12，支持最新的 CSS nesting 语法

packages/builder/builder-shared/compiled/postcss-nesting/package.json

@@ -1 +1 @@
-{"name":"postcss-nesting","author":"Jonathan Neal <[email protected]>","version":"10.1.4","funding":{"type":"opencollective","url":"https://opencollective.com/csstools"},"license":"CC0-1.0","types":"index.d.ts"}
+{"name":"postcss-nesting","version":"12.0.1","funding":[{"type":"github","url":"https://github.com/sponsors/csstools"},{"type":"opencollective","url":"https://opencollective.com/csstools"}],"license":"MIT-0","types":"index.d.ts"}

packages/document/builder-doc/docs/en/config/tools/postcss.md

@@ -5,16 +5,18 @@
 const defaultOptions = {
   postcssOptions: {
     plugins: [
+      // The following plugins are enabled by default
+      require('postcss-nesting'),
+      require('postcss-media-minmax'),
       require('postcss-flexbugs-fixes'),
+      require('autoprefixer')({
+        flexbox: 'no-2009',
+      }),
+      // The following plugins are only enabled when compatibility with legacy browsers is required
       require('postcss-custom-properties'),
       require('postcss-initial'),
       require('postcss-page-break'),
       require('postcss-font-variant'),
-      require('postcss-media-minmax'),
-      require('postcss-nesting'),
-      require('autoprefixer')({
-        flexbox: 'no-2009',
-      }),
     ],
     // CSS Source Map enabled by default in development environment
     sourceMap: isDev,

packages/document/builder-doc/docs/zh/config/tools/postcss.md

@@ -5,16 +5,18 @@
 const defaultOptions = {
   postcssOptions: {
     plugins: [
+      // 以下插件默认启用
+      require('postcss-nesting'),
+      require('postcss-media-minmax'),
       require('postcss-flexbugs-fixes'),
+      require('autoprefixer')({
+        flexbox: 'no-2009',
+      }),
+      // 以下插件仅在需要兼容低版本浏览器时启用
       require('postcss-custom-properties'),
       require('postcss-initial'),
       require('postcss-page-break'),
       require('postcss-font-variant'),
-      require('postcss-media-minmax'),
-      require('postcss-nesting'),
-      require('autoprefixer')({
-        flexbox: 'no-2009',
-      }),
     ],
     // 默认在开发环境下启用 CSS 的 Source Map
     sourceMap: isDev,

packages/solutions/module-tools/compiled/postcss-nesting/package.json

@@ -1 +1 @@
-{"name":"postcss-nesting","author":"Jonathan Neal <[email protected]>","version":"10.1.4","funding":{"type":"opencollective","url":"https://opencollective.com/csstools"},"license":"CC0-1.0","types":"index.d.ts"}
+{"name":"postcss-nesting","version":"12.0.1","funding":[{"type":"github","url":"https://github.com/sponsors/csstools"},{"type":"opencollective","url":"https://opencollective.com/csstools"}],"license":"MIT-0","types":"index.d.ts"}

scripts/prebundle/package.json

@@ -110,7 +110,7 @@
     "postcss-initial": "4.0.1",
     "postcss-loader": "7.0.2",
     "postcss-media-minmax": "5.0.0",
-    "postcss-nesting": "10.1.4",
+    "postcss-nesting": "12.0.1",
     "postcss-page-break": "3.0.4",
     "postcss-pxtorem": "6.0.0",
     "postcss-value-parser": "4.2.0",

tests/e2e/builder/cases/css/css-nesting/index.test.ts

@@ -0,0 +1,18 @@
+import path from 'path';
+import { expect, test } from '@modern-js/e2e/playwright';
+import { build } from '@scripts/shared';
+
+test('should compile CSS nesting correctly', async () => {
+  const builder = await build({
+    cwd: __dirname,
+    entry: { index: path.resolve(__dirname, './src/index.js') },
+  });
+  const files = await builder.unwrapOutputJSON();
+
+  const content =
+    files[Object.keys(files).find(file => file.endsWith('.css'))!];
+
+  expect(content).toEqual(
+    '.card h1,.card h2,h3 .card{color:red}.card :is(h1){color:blue}.card .foo{font-size:12px}.card .bar{font-size:14px}.card.baz{font-size:16px}.demo:hover{color:green}.demo :hover{color:cyan}.demo .lg .circle,.demo .lg .triangle{opacity:.25}',
+  );
+});

tests/e2e/builder/cases/css/css-nesting/src/a.css

@@ -0,0 +1,48 @@
+.card {
+  h1 {
+    color: red;
+  }
+
+  & h2 {
+    color: red;
+  }
+
+  h3 & {
+    color: red;
+  }
+
+  :is(h1) {
+    color: blue;
+  }
+
+  .foo {
+    font-size: 12px;
+  }
+
+  & .bar {
+    font-size: 14px;
+  }
+
+  &.baz {
+    font-size: 16px;
+  }
+}
+
+.demo {
+  &:hover {
+    color: green;
+  }
+
+  :hover {
+    color: cyan;
+  }
+}
+
+.demo {
+  .lg {
+    .triangle,
+    .circle {
+      opacity: 0.25;
+    }
+  }
+}

tests/e2e/builder/cases/css/css-nesting/src/index.js

@@ -0,0 +1 @@
+import './a.css';