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 @@ -
- Astro +
+ Astro
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 ( -
- Solid +
+ Solid
); } 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 @@ -
- Svelte +
+ Svelte
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 @@ 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'; -
+
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 () => {