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

1 files changed, 28 insertions, 0 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();