From 3b9b3b67a48e44ba11e3ef396cafaaeab1a296c1 Mon Sep 17 00:00:00 2001
From: Ben Holmes <hey@bholmes.dev>
Date: Wed, 22 Jun 2022 19:52:32 -0400
Subject: [PATCH] Fix: pass Astro config postcss to Svelte preprocess (#3685)

* fix: pass Astro config postcss to Svelte preprocess

* test: preset env for nested styles

* chore: changeset
---
 test/fixtures/postcss/package.json                |  3 +++
 test/fixtures/postcss/postcss.config.cjs          | 15 ++++++++++-----
 test/fixtures/postcss/src/components/Astro.astro  |  8 +++++---
 test/fixtures/postcss/src/components/Solid.css    |  4 +++-
 test/fixtures/postcss/src/components/Solid.jsx    |  4 ++--
 .../fixtures/postcss/src/components/Svelte.svelte |  8 +++++---
 test/fixtures/postcss/src/components/Vue.vue      |  8 +++++---
 test/fixtures/postcss/src/pages/index.astro       |  6 ++++--
 test/postcss.test.js                              | 11 ++++++-----
 9 files changed, 43 insertions(+), 24 deletions(-)

diff --git a/test/fixtures/postcss/package.json b/test/fixtures/postcss/package.json
index ff4f0e14d6ae..417914c1225c 100644
--- a/test/fixtures/postcss/package.json
+++ b/test/fixtures/postcss/package.json
@@ -9,5 +9,8 @@
     "astro": "workspace:*",
     "autoprefixer": "^10.4.7",
     "postcss": "^8.4.14"
+  },
+  "devDependencies": {
+    "postcss-preset-env": "^7.7.1"
   }
 }
diff --git a/test/fixtures/postcss/postcss.config.cjs b/test/fixtures/postcss/postcss.config.cjs
index 019f40040028..7ed7dd7e2dd9 100644
--- a/test/fixtures/postcss/postcss.config.cjs
+++ b/test/fixtures/postcss/postcss.config.cjs
@@ -1,7 +1,12 @@
+const postcssPresetEnv = require('postcss-preset-env')
+const autoPrefixer = require('autoprefixer')
+
 module.exports = {
-  plugins: {
-    autoprefixer: {
+  plugins: [
+		// included to ensure public/ CSS resources are NOT transformed
+		autoPrefixer({
       overrideBrowserslist: ['> 0.1%', 'IE 11'] // enforce `appearance: none;` is prefixed with -webkit and -moz
-    }
-  }
-};
+    }),
+    postcssPresetEnv({ features: { 'nesting-rules': true } }),
+  ]
+}
diff --git a/test/fixtures/postcss/src/components/Astro.astro b/test/fixtures/postcss/src/components/Astro.astro
index c85cd0415db6..5563e477865d 100644
--- a/test/fixtures/postcss/src/components/Astro.astro
+++ b/test/fixtures/postcss/src/components/Astro.astro
@@ -1,9 +1,11 @@
 <style>
 .astro-component {
-  appearance: none;
+  &.nested {
+		color: red;
+	}
 }
 </style>
 
-<div class="astro-component">
-  Astro
+<div class="astro-component nested">
+	Astro
 </div>
diff --git a/test/fixtures/postcss/src/components/Solid.css b/test/fixtures/postcss/src/components/Solid.css
index 9c4272b56c3b..6d06e4d89148 100644
--- a/test/fixtures/postcss/src/components/Solid.css
+++ b/test/fixtures/postcss/src/components/Solid.css
@@ -1,3 +1,5 @@
 .solid {
-  appearance: none;
+	&.nested {
+		color: red;
+	}
 }
diff --git a/test/fixtures/postcss/src/components/Solid.jsx b/test/fixtures/postcss/src/components/Solid.jsx
index 9f172eb3b676..63ee46a522e6 100644
--- a/test/fixtures/postcss/src/components/Solid.jsx
+++ b/test/fixtures/postcss/src/components/Solid.jsx
@@ -3,8 +3,8 @@ import './Solid.css';
 
 export default function Counter() {
   return (
-    <div class="solid">
-      Solid
+    <div class="solid nested">
+			Solid
     </div>
   );
 }
diff --git a/test/fixtures/postcss/src/components/Svelte.svelte b/test/fixtures/postcss/src/components/Svelte.svelte
index 0b55ab627542..031146443958 100644
--- a/test/fixtures/postcss/src/components/Svelte.svelte
+++ b/test/fixtures/postcss/src/components/Svelte.svelte
@@ -1,9 +1,11 @@
 <style>
 .svelte {
-  appearance: none;
+	&.nested {
+		color: red;
+	}
 }
 </style>
 
-<div class="svelte">
-  Svelte
+<div class="svelte nested">
+	Svelte
 </div>
diff --git a/test/fixtures/postcss/src/components/Vue.vue b/test/fixtures/postcss/src/components/Vue.vue
index 20b928e0857b..103eda0aaa5f 100644
--- a/test/fixtures/postcss/src/components/Vue.vue
+++ b/test/fixtures/postcss/src/components/Vue.vue
@@ -1,12 +1,14 @@
 <style>
 .vue {
-  appearance: none;
+	&.nested {
+		color: red;
+	}
 }
 </style>
 
 <template>
-  <div class="vue">
-    Vue
+  <div class="vue nested">
+		Vue
   </div>
 </template>
 
diff --git a/test/fixtures/postcss/src/pages/index.astro b/test/fixtures/postcss/src/pages/index.astro
index 2f73d045b058..c239cff64320 100644
--- a/test/fixtures/postcss/src/pages/index.astro
+++ b/test/fixtures/postcss/src/pages/index.astro
@@ -12,13 +12,15 @@ import Vue from '../components/Vue.vue';
 	</style>
   <style>
     .astro-page {
-      appearance: none;
+			&.nested {
+				color: red;
+			}
     }
   </style>
 </head>
 
 <body>
-  <div class="astro-page">
+  <div class="astro-page nested">
     <AstroComponent />
     <JSX />
     <Svelte />
diff --git a/test/postcss.test.js b/test/postcss.test.js
index d5360ba1db16..1cf06bee1029 100644
--- a/test/postcss.test.js
+++ b/test/postcss.test.js
@@ -23,24 +23,25 @@ describe('PostCSS', () => {
 			.replace('/n', '');
 	});
 
+	/** All test cases check whether nested styles (i.e. &.nested {}) are correctly transformed */
 	it('works in Astro page styles', () => {
-		expect(bundledCSS).to.match(new RegExp(`.astro-page.astro-[^{]+${PREFIXED_CSS}`));
+		expect(bundledCSS).to.match(new RegExp(`\.astro-page(\.(\w|-)*)*\.nested`));
 	});
 
 	it('works in Astro component styles', () => {
-		expect(bundledCSS).to.match(new RegExp(`.astro-component.astro-[^{]+${PREFIXED_CSS}`));
+		expect(bundledCSS).to.match(new RegExp(`\.astro-component(\.(\w|-)*)*\.nested`));
 	});
 
 	it('works in JSX', () => {
-		expect(bundledCSS).to.match(new RegExp(`.solid[^{]*${PREFIXED_CSS}`));
+		expect(bundledCSS).to.match(new RegExp(`\.solid(\.(\w|-)*)*\.nested`));
 	});
 
 	it('works in Vue', () => {
-		expect(bundledCSS).to.match(new RegExp(`.vue[^{]*${PREFIXED_CSS}`));
+		expect(bundledCSS).to.match(new RegExp(`\.vue(\.(\w|-)*)*\.nested`));
 	});
 
 	it('works in Svelte', () => {
-		expect(bundledCSS).to.match(new RegExp(`.svelte.s[^{]+${PREFIXED_CSS}`));
+		expect(bundledCSS).to.match(new RegExp(`\.svelte(\.(\w|-)*)*\.nested`));
 	});
 
 	it('ignores CSS in public/', async () => {