Skip to content

Commit

Permalink
Fix: pass Astro config postcss to Svelte preprocess (#3685)
Browse files Browse the repository at this point in the history
* fix: pass Astro config postcss to Svelte preprocess

* test: preset env for nested styles

* chore: changeset
  • Loading branch information
bholmesdev authored Jun 22, 2022
1 parent a3654a7 commit 3d554fd
Show file tree
Hide file tree
Showing 12 changed files with 565 additions and 30 deletions.
6 changes: 6 additions & 0 deletions .changeset/empty-chicken-refuse.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'astro': patch
'@astrojs/svelte': patch
---

Fix PostCSS config not applied to Svelte component by default
3 changes: 3 additions & 0 deletions packages/astro/test/fixtures/postcss/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,8 @@
"astro": "workspace:*",
"autoprefixer": "^10.4.7",
"postcss": "^8.4.14"
},
"devDependencies": {
"postcss-preset-env": "^7.7.1"
}
}
15 changes: 10 additions & 5 deletions packages/astro/test/fixtures/postcss/postcss.config.cjs
Original file line number Diff line number Diff line change
@@ -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 } }),
]
}
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
.solid {
appearance: none;
&.nested {
color: red;
}
}
4 changes: 2 additions & 2 deletions packages/astro/test/fixtures/postcss/src/components/Solid.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import './Solid.css';

export default function Counter() {
return (
<div class="solid">
Solid
<div class="solid nested">
Solid
</div>
);
}
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
<style>
.svelte {
appearance: none;
&.nested {
color: red;
}
}
</style>

<div class="svelte">
Svelte
<div class="svelte nested">
Svelte
</div>
8 changes: 5 additions & 3 deletions packages/astro/test/fixtures/postcss/src/components/Vue.vue
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
<style>
.vue {
appearance: none;
&.nested {
color: red;
}
}
</style>

<template>
<div class="vue">
Vue
<div class="vue nested">
Vue
</div>
</template>

6 changes: 4 additions & 2 deletions packages/astro/test/fixtures/postcss/src/pages/index.astro
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand Down
11 changes: 6 additions & 5 deletions packages/astro/test/postcss.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down
24 changes: 19 additions & 5 deletions packages/integrations/svelte/src/index.ts
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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,
Expand Down Expand Up @@ -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,
})
});
},
},
};
Expand Down
Loading

0 comments on commit 3d554fd

Please sign in to comment.