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

README.md

@@ -10,14 +10,6 @@ npm install astro
 
 TODO: astro boilerplate
 
-### 💧 Partial Hydration
-
-By default, Astro outputs zero client-side JS. If you'd like to include an interactive component in the client output, you may use any of the following techniques.
-
-- `MyComponent:load` will render `MyComponent` on page load
-- `MyComponent:idle` will use `requestIdleCallback` to render `MyComponent` as soon as main thread is free
-- `MyComponent:visible` will use an `IntersectionObserver` to render `MyComponent` when the element enters the viewport
-
 ## 🧞 Development
 
 Add a `dev` npm script to your `/package.json` file:
@@ -36,6 +28,53 @@ Then run:
 npm run dev
 ```
 
+### 💧 Partial Hydration
+
+By default, Astro outputs zero client-side JS. If you'd like to include an interactive component in the client output, you may use any of the following techniques.
+
+- `MyComponent:load` will render `MyComponent` on page load
+- `MyComponent:idle` will use `requestIdleCallback` to render `MyComponent` as soon as main thread is free
+- `MyComponent:visible` will use an `IntersectionObserver` to render `MyComponent` when the element enters the viewport
+
+### 💅 Styling
+
+If you‘ve used [Svelte][svelte]’s styles before, Astro works almost the same way. In any `.astro` file, start writing styles in a `<style>` tag like so:
+
+```astro
+<style>
+.scoped {
+ font-weight: bold;
+}
+</style>
+
+<div class="scoped">I’m a scoped style</div>
+```
+
+#### Sass
+
+Astro also supports [Sass][sass] out-of-the-box; no configuration needed:
+
+```astro
+<style lang="scss">
+@use "../tokens" as *;
+
+.title {
+ color: $color.gray;
+}
+</style>
+
+<h1 class="title">Title</h1>
+```
+
+Supports:
+
+- `lang="scss"`: load as the `.scss` extension
+- `lang="sass"`: load as the `.sass` extension (no brackets; indent-style)
+
+### Autoprefixer
+
+We also automatically add browser prefixes using [Autoprefixer][autoprefixer]. By default, Astro loads the default values, but you may also specify your own by placing a [Browserslist][browserslist] file in your project root.
+
 ## 🚀 Build & Deployment
 
 Add a `build` npm script to your `/package.json` file:
@@ -56,3 +95,8 @@ npm run build
 ```
 
 Now upload the contents of `/_site_` to your favorite static site host.
+
+[autoprefixer]: https://github.com/postcss/autoprefixer
+[browserslist]: https://github.com/browserslist/browserslist
+[sass]: https://sass-lang.com/
+[svelte]: https://svelte.dev

examples/snowpack/astro/components/Nav.astro

@@ -27,7 +27,7 @@ export let version: string = '3.1.2';
  color: $white;
  background-color: $dark-blue;
 
- body.is-nav-open & {
+ :global(body.is-nav-open) & {
  height: $nav-height * 2;
  }
 

package.json

@@ -56,7 +56,6 @@
  "micromark-extension-gfm": "^0.3.3",
  "node-fetch": "^2.6.1",
  "postcss": "^8.2.8",
- "postcss-modules": "^4.0.0",
  "react": "^17.0.1",
  "react-dom": "^17.0.1",
  "rollup": "^2.43.1",

src/compiler/optimize/postcss-scoped-styles/index.ts

@@ -0,0 +1,79 @@
+import { Plugin } from 'postcss';
+
+interface AstroScopedOptions {
+ className: string;
+}
+
+interface Selector {
+ start: number;
+ end: number;
+ value: string;
+}
+
+const CSS_SEPARATORS = new Set([' ', ',', '+', '>', '~']);
+
+/**
+ * Scope Selectors
+ * Given a selector string (`.btn>span,.nav>span`), add an additional CSS class to every selector (`.btn.myClass>span.myClass,.nav.myClass>span.myClass`)
+ * @param {string} selector The minified selector string to parse. Cannot contain arbitrary whitespace (other than child selector syntax).
+ * @param {string} className The CSS class to apply.
+ */
+export function scopeSelectors(selector: string, className: string) {
+ const c = className.replace(/^\.?/, '.'); // make sure class always has leading '.'
+ const selectors: Selector[] = [];
+ let ss = selector; // final output
+
+ // Pass 1: parse selector string; extract top-level selectors
+ let start = 0;
+ let lastValue = '';
+ for (let n = 0; n < ss.length; n++) {
+ const isEnd = n === selector.length - 1;
+ if (isEnd || CSS_SEPARATORS.has(selector[n])) {
+ lastValue = selector.substring(start, isEnd ? undefined : n);
+ if (!lastValue) continue;
+ selectors.push({ start, end: isEnd ? n + 1 : n, value: lastValue });
+ start = n + 1;
+ }
+ }
+
+ // Pass 2: starting from end, transform selectors w/ scoped class
+ for (let i = selectors.length - 1; i >= 0; i--) {
+ const { start, end, value } = selectors[i];
+ const head = ss.substring(0, start);
+ const tail = ss.substring(end);
+
+ // replace '*' with className
+ if (value === '*') {
+ ss = head + c + tail;
+ continue;
+ }
+
+ // leave :global() alone!
+ if (value.startsWith(':global(')) {
+ ss = head + ss.substring(start, end).replace(':global(', '').replace(')', '') + tail;
+ continue;
+ }
+
+ // scope everything else
+ let newSelector = ss.substring(start, end);
+ const pseudoIndex = newSelector.indexOf(':');
+ if (pseudoIndex > 0) {
+ // if there‘s a pseudoclass (:focus)
+ ss = head + newSelector.substring(start, pseudoIndex) + c + newSelector.substr(pseudoIndex) + tail;
+ } else {
+ ss = head + newSelector + c + tail;
+ }
+ }
+
+ return ss;
+}
+
+/** PostCSS Scope plugin */
+export default function astroScopedStyles(options: AstroScopedOptions): Plugin {
+ return {
+ postcssPlugin: '@astro/postcss-scoped-styles',
+ Rule(rule) {
+ rule.selector = scopeSelectors(rule.selector, options.className);
+ },
+ };
+}