diff options
Diffstat (limited to 'packages')
10 files changed, 62 insertions, 29 deletions
diff --git a/packages/astro/test/fixtures/postcss/package.json b/packages/astro/test/fixtures/postcss/package.json index ff4f0e14d..417914c12 100644 --- 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 index 019f40040..7ed7dd7e2 100644 --- 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 index c85cd0415..5563e4778 100644 --- 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 index 9c4272b56..6d06e4d89 100644 --- 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 index 9f172eb3b..63ee46a52 100644 --- 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 index 0b55ab627..031146443 100644 --- 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 index 20b928e08..103eda0aa 100644 --- 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 index 2f73d045b..c239cff64 100644 --- 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 index d5360ba1d..1cf06bee1 100644 --- 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 index 340e2def0..268d5a590 100644 --- 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, + }) + }); }, }, }; |