Fix: pass Astro config postcss to Svelte preprocess (withastro#3685)

* fix: pass Astro config postcss to Svelte preprocess * test: preset env for nested styles * chore: changeset
SiriousHunter · Jun 22, 2022 · 3b9b3b6 · 3b9b3b6
1 parent cec8c0d
commit 3b9b3b6
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 24 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 () => {