diff options
| author |  Drew Powers <1369770+drwpow@users.noreply.github.com>
| 2021-03-30 10:11:21 -0600 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2021-03-30 10:11:21 -0600 |
| commit | ee6ef81cf38acc357141143319addf39a99d3e19 (patch) | |
| tree | 1fd6032709f74253dcb5a30630da70d2e4373a40 /test | |
| parent | d267fa461b73586118437e190b92b9956f9add73 (diff) | |
| download | astro-ee6ef81cf38acc357141143319addf39a99d3e19.tar.gz astro-ee6ef81cf38acc357141143319addf39a99d3e19.tar.zst astro-ee6ef81cf38acc357141143319addf39a99d3e19.zip | |
Convert CSS Modules to scoped styles (#38)
* Convert CSS Modules to scoped styles
* Update README
* Move class scoping into HTML walker
* Fix SSR styles test
* Fix mustache tags
* Update PostCSS plugin name
* Add JSDoc comment
* Update test
Diffstat (limited to '')
| -rw-r--r-- | test/astro-scoped-styles.test.js | 28 | ||||
| -rw-r--r-- | test/astro-styles-ssr.test.js | 20 | ||||
| -rw-r--r-- | test/fixtures/astro-styles-ssr/astro/pages/index.astro | 9 |
3 files changed, 56 insertions, 1 deletions
diff --git a/test/astro-scoped-styles.test.js b/test/astro-scoped-styles.test.js new file mode 100644 index 000000000..d6ae7a02e --- /dev/null +++ b/test/astro-scoped-styles.test.js @@ -0,0 +1,28 @@ +import { suite } from 'uvu'; +import * as assert from 'uvu/assert'; +import { scopeSelectors } from '../lib/compiler/optimize/postcss-scoped-styles/index.js'; + +const ScopedStyles = suite('Astro PostCSS Scoped Styles Plugin'); + +const className = '.astro-abcd1234'; + +// Note: assume all selectors have no unnecessary spaces (i.e. must be minified) +const tests = { + '.class': `.class${className}`, + h1: `h1${className}`, + '.nav h1': `.nav${className} h1${className}`, + '.class+.class': `.class${className}+.class${className}`, + '.class~:global(a)': `.class${className}~a`, + '.class *': `.class${className} ${className}`, + '.class>*': `.class${className}>${className}`, + '.class :global(*)': `.class${className} *`, + '.class:not(.is-active)': `.class${className}:not(.is-active)`, // Note: the :not() selector can NOT contain multiple classes, so this is correct; if this causes issues for some people then it‘s worth a discussion +}; + +ScopedStyles('Scopes correctly', () => { + for (const [given, expected] of Object.entries(tests)) { + assert.equal(scopeSelectors(given, className), expected); + } +}); + +ScopedStyles.run(); diff --git a/test/astro-styles-ssr.test.js b/test/astro-styles-ssr.test.js index 9145e65a9..9ee67f69b 100644 --- a/test/astro-styles-ssr.test.js +++ b/test/astro-styles-ssr.test.js @@ -47,4 +47,24 @@ StylesSSR('Has correct CSS classes', async () => { } }); +StylesSSR('CSS Module support in .astro', async () => { + const result = await runtime.load('/'); + const $ = doc(result.contents); + + let scopedClass; + + // test 1: <style> tag in <head> is transformed + const css = $('style') + .html() + .replace(/\.astro-[A-Za-z0-9-]+/, (match) => { + scopedClass = match; + return match; + }); // remove class hash (should be deterministic / the same every time, but even still don‘t cause this test to flake) + assert.equal(css, `.wrapper${scopedClass}{margin-left:auto;margin-right:auto;max-width:1200px}`); + + // test 2: element received .astro-XXXXXX class (this selector will succeed if transformed correctly) + const wrapper = $(`.wrapper${scopedClass}`); + assert.equal(wrapper.length, 1); +}); + StylesSSR.run(); diff --git a/test/fixtures/astro-styles-ssr/astro/pages/index.astro b/test/fixtures/astro-styles-ssr/astro/pages/index.astro index 30591da72..7333fac21 100644 --- a/test/fixtures/astro-styles-ssr/astro/pages/index.astro +++ b/test/fixtures/astro-styles-ssr/astro/pages/index.astro @@ -7,9 +7,16 @@ import SvelteScoped from '../components/SvelteScoped.svelte'; <html> <head> <meta charset="UTF-8" /> + <style lang="scss"> + .wrapper { + margin-left: auto; + margin-right: auto; + max-width: 1200px; + } + </style> </head> <body> - <div> + <div class="wrapper"> <ReactCSS /> <VueCSS /> <SvelteScoped /> |