ee6ef81cf3
* 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
28 lines
1.1 KiB
JavaScript
28 lines
1.1 KiB
JavaScript
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();
|