removed nesting plugin

lumeland · May 9, 2024 · cc4b6a4 · cc4b6a4
1 parent e096e36
commit cc4b6a4
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 17 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -22,6 +22,9 @@ Go to the `v1` branch to see the changelog of Lume 1.
 ### Deprecated
 - `liquid` plugin. It never worked well with `search.pages()` [#600].
 
+### Deleted
+- PostCSS plugin: Don't use nesting plugin by default since CSS nesting feature works across the latest devices and browser versions.
+
 ### Fixed
 - Updated dependencies: `unocss`, `liquid`, `postcss-nesting`, `terser`, `xml`, `react`, `std`, `sass`, `preact`, `esbuild`, `svgo`, `cms`, `sheetjs`.
 - FFF plugin: fix `getGitDate` priority [#603].

diff --git a/deps/postcss.ts b/deps/postcss.ts
@@ -1,4 +1,3 @@
 export { default as postcss } from "npm:postcss@8.4.38";
 export { default as postcssImport } from "npm:postcss-import@16.1.0";
-export { default as postcssNesting } from "npm:postcss-nesting@12.1.2";
 export { default as autoprefixer } from "npm:autoprefixer@10.4.19";
diff --git a/plugins/postcss.ts b/plugins/postcss.ts
@@ -1,9 +1,4 @@
-import {
-  autoprefixer,
-  postcss,
-  postcssImport,
-  postcssNesting,
-} from "../deps/postcss.ts";
+import { autoprefixer, postcss, postcssImport } from "../deps/postcss.ts";
 import { merge } from "../core/utils/object.ts";
 import { concurrent } from "../core/utils/concurrent.ts";
 import { resolveInclude } from "../core/utils/path.ts";
@@ -26,7 +21,7 @@ export interface Options {
 
   /**
    * Plugins to use by postcss
-   * @default `[postcssNesting(), autoprefixer()]`
+   * @default `[autoprefixer()]`
    */
   plugins?: unknown[];
 
@@ -45,7 +40,6 @@ export const defaults: Options = {
 };
 
 const defaultPlugins = [
-  postcssNesting(),
   autoprefixer(),
 ];
 

diff --git a/tests/__snapshots__/postcss.test.ts.snap b/tests/__snapshots__/postcss.test.ts.snap
@@ -137,14 +137,14 @@ snapshot[`postcss plugin 3`] = `
 
 .text {
   font-family: var(--font-family);
-}
 
-.text p {
+  & p {
     color: var(--color);
     box-shadow: 0 0 0.5em var(--background);
     -webkit-backdrop-filter: blur(2px);
             backdrop-filter: blur(2px);
   }
+}
 ",
     data: {
       basename: "index.min",
@@ -174,13 +174,14 @@ snapshot[`postcss plugin 3`] = `
   {
     content: ".text {
   font-family: var(--font-family);
-}
-.text p {
+
+  & p {
     color: var(--color);
     box-shadow: 0 0 0.5em var(--background);
     -webkit-backdrop-filter: blur(2px);
             backdrop-filter: blur(2px);
   }
+}
 ",
     data: {
       basename: "text",
@@ -373,13 +374,14 @@ snapshot[`postcss plugin without includes 3`] = `
   {
     content: ".text {
   font-family: var(--font-family);
-}
-.text p {
+
+  & p {
     color: var(--color);
     box-shadow: 0 0 0.5em var(--background);
     -webkit-backdrop-filter: blur(2px);
             backdrop-filter: blur(2px);
   }
+}
 ",
     data: {
       basename: "text",
@@ -541,7 +543,7 @@ snapshot[`postcss plugin with hooks 2`] = `[]`;
 snapshot[`postcss plugin with hooks 3`] = `
 [
   {
-    content: ".foo{color:red}::root{--color:#333;--background:#fff;--font-family:sans-serif}.text{font-family:var(--font-family)}.text p{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);box-shadow:0 0 .5em var(--background);color:var(--color)}",
+    content: ".foo{color:red}::root{--color:#333;--background:#fff;--font-family:sans-serif}.text{font-family:var(--font-family);& p{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);box-shadow:0 0 .5em var(--background);color:var(--color)}}",
     data: {
       basename: "index.min",
       content: '@import "variables.css";
@@ -568,7 +570,7 @@ snapshot[`postcss plugin with hooks 3`] = `
     },
   },
   {
-    content: ".text{font-family:var(--font-family)}.text p{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);box-shadow:0 0 .5em var(--background);color:var(--color)}",
+    content: ".text{font-family:var(--font-family);& p{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);box-shadow:0 0 .5em var(--background);color:var(--color)}}",
     data: {
       basename: "text",
       content: ".text {