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
withastro · Jun 22, 2022 · 3d554fd · 3d554fd
1 parent a3654a7
commit 3d554fd
Show file tree

Hide file tree

Showing 12 changed files with 565 additions and 30 deletions.
diff --git a/.changeset/empty-chicken-refuse.md b/.changeset/empty-chicken-refuse.md
@@ -0,0 +1,6 @@
+---
+'astro': patch
+'@astrojs/svelte': patch
+---
+
+Fix PostCSS config not applied to Svelte component by default
diff --git a/packages/astro/test/fixtures/postcss/package.json b/packages/astro/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/packages/astro/test/fixtures/postcss/postcss.config.cjs b/packages/astro/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/packages/astro/test/fixtures/postcss/src/components/Astro.astro b/packages/astro/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/packages/astro/test/fixtures/postcss/src/components/Solid.css b/packages/astro/test/fixtures/postcss/src/components/Solid.css
@@ -1,3 +1,5 @@
 .solid {
-  appearance: none;
+	&.nested {
+		color: red;
+	}
 }
diff --git a/packages/astro/test/fixtures/postcss/src/components/Solid.jsx b/packages/astro/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/packages/astro/test/fixtures/postcss/src/components/Svelte.svelte b/packages/astro/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/packages/astro/test/fixtures/postcss/src/components/Vue.vue b/packages/astro/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/packages/astro/test/fixtures/postcss/src/pages/index.astro b/packages/astro/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/packages/astro/test/postcss.test.js b/packages/astro/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 () => {

diff --git a/packages/integrations/svelte/src/index.ts b/packages/integrations/svelte/src/index.ts
@@ -1,6 +1,7 @@
 import type { Options } from '@sveltejs/vite-plugin-svelte';
+import type { AstroIntegration, AstroRenderer, AstroConfig } from 'astro';
+import type { UserConfig } from 'vite'
 import { svelte } from '@sveltejs/vite-plugin-svelte';
-import type { AstroIntegration, AstroRenderer } from 'astro';
 import preprocess from 'svelte-preprocess';
 
 function getRenderer(): AstroRenderer {
@@ -11,13 +12,20 @@ function getRenderer(): AstroRenderer {
 	};
 }
 
-function getViteConfiguration(isDev: boolean, options?: Options | OptionsCallback) {
-	const defaultOptions = {
+type ViteConfigurationArgs = {
+	isDev: boolean;
+	options?: Options | OptionsCallback;
+	postcssConfig: AstroConfig['style']['postcss'];
+}
+
+function getViteConfiguration({ options, postcssConfig, isDev }: ViteConfigurationArgs): UserConfig {
+	const defaultOptions: Partial<Options> = {
 		emitCss: true,
 		compilerOptions: { dev: isDev, hydratable: true },
 		preprocess: [
 			preprocess({
 				less: true,
+				postcss: postcssConfig,
 				sass: { renderSync: true },
 				scss: { renderSync: true },
 				stylus: true,
@@ -61,9 +69,15 @@ export default function (options?: Options | OptionsCallback): AstroIntegration
 		name: '@astrojs/svelte',
 		hooks: {
 			// Anything that gets returned here is merged into Astro Config
-			'astro:config:setup': ({ command, updateConfig, addRenderer }) => {
+			'astro:config:setup': ({ command, updateConfig, addRenderer, config }) => {
 				addRenderer(getRenderer());
-				updateConfig({ vite: getViteConfiguration(command === 'dev', options) });
+				updateConfig({
+					vite: getViteConfiguration({
+						options,
+						isDev: command === 'dev',
+						postcssConfig: config.style.postcss,
+					})
+				});
 			},
 		},
 	};