[next] Add CSS preprocessing #1589

drwpow · 2021-10-18T23:50:29Z

Changes

Improves Astro styling support by tapping into Vite’s pipeline.

This PR adds support for preprocessing by passing to Vite (Sass, Stylus, Less). However, some post-merge exploration will be needed for Tailwind

This PR doesn’t propose an RFC, because it doesn’t expose any user-facing APIs or require any additional config. If anything, it just lets users use styling tools as they would in Vite, which already has plenty of documentation and support.

Testing

Some tests were enabled where possible

Docs

Docs updated!

changeset-bot · 2021-10-18T23:50:31Z

🦋 Changeset detected

Latest commit: 46d6831

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
astro	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

drwpow · 2021-10-18T23:52:02Z

docs/src/pages/guides/styling.md


-To create global styles, add a `:global()` wrapper around a selector (the same as if you were using [CSS Modules][css-modules]).
+By default, all Astro component styles are **scoped**, meaning they only apply to the current component. This can be very easy to work with, as you only have to worry about what’s in your current document at any given time.


PTAL at style changes. Because I had to update quite a bit here, I wanted to take a pass and clarify the basic “how to“ section.

drwpow · 2021-10-18T23:53:21Z

examples/with-tailwindcss/astro.config.mjs

@@ -8,10 +8,6 @@

 // @ts-check
 export default /** @type {import('astro').AstroUserConfig} */ ({
-  // Enable Tailwind by telling Astro where your Tailwind config file lives.
-  devOptions: {
-    tailwindConfig: './tailwind.config.js',


Remove tailwindConfig option as it’s no-longer needed

drwpow · 2021-10-18T23:56:31Z

packages/astro/src/vite-plugin-astro/styles.ts

+      const { start, end, contents, attrs } = style;
+      const lang = (attrs.lang || '').toLowerCase(); // don’t be case-sensitive
+      if (!SUPPORTED_PREPROCESSORS.has(lang)) return undefined; // only preprocess the above
+      const result = await viteCSSTransform(contents, filePath.replace(/\.astro$/, `.${lang}`));


How this plugin works is it passes the contents of any <style> tags in .astro files to Vite’s internal CSS handler. So we would no longer manage any styling dependencies like we were doing, such as Sass and PostCSS!

so clever! Love unifying everything into the Vite pipeline

packages/astro/src/vite-plugin-astro/styles.ts

matthewp · 2021-10-19T00:28:04Z

packages/astro/src/@types/astro-core.ts

@@ -80,8 +80,6 @@ export interface AstroUserConfig {
    hostname?: string;
    /** The port to run the dev server on. */
    port?: number;
-    /** Path to tailwind.config.js, if used */
-    tailwindConfig?: string;


Why is this removed?

tailwindConfig is passed directly to Snowpack. It was a bit of a hack to support Tailwind projects properly, as we just did an existence check in Snowpack to toggle a few features on/off.

Thus, not needed for Vite 😉

Ok, as long as we are preserving automatic Tailwind support, that's what was unclear to me

Yeah as the PR description says, some post-merge work will be needed to fully integrate with Tailwind

natemoo-re

Concept looks good, agree that we should pass the preprocess function to WASM is possible (see withastro/compiler#69)

Had a few notes about the docs

docs/src/pages/guides/styling.md

natemoo-re · 2021-10-19T20:14:44Z

docs/src/pages/guides/styling.md


-Astro also supports [Sass][sass] out-of-the-box. To enable for each framework:
+- **Sass**: Run `npm install -D sass` and use `<style lang="scss">` or `<style lang="sass">` (indented) in `.astro` files


Is this going to be a painful change? I know folks liked that Sass came out of the box.

Yeah, we should continue to include this out of the box. 1.0 we can revisit all of these things.

Maybe this is the right time to discuss? I think this is much closer to how I'd like Sass support to work, where it's not default on for everyone but is still very easy to opt into. As long as there's a clear error message if you don't have this package installed, I don't think that this completely breaks our "Sass support out of the box" story.

Obviously if this was a zero-dep package this would matter less, but there's a real cost to including by default for everyone: https://npm.anvaka.com/#/view/2d/node-sass

The only pain is npm install sass; everything else happens automatically. It’s really just a side-effect of depending on Vite. So for Sass users, they have to have that devDep installed. But this also lets us get Stylus & Less for free.

Also if you don’t have it installed, there’s a friendly “install this” error. IMO this is better, because now the user gets to update Sass (and get features/bugfixes when they need them)

natemoo-re

LGTM!

* Add concept for style support in Astro * Update style preprocessor to use new compiler * fix: massage preprocessStyle type * fix: @astrojs/compiler types Co-authored-by: Nate Moore <nate@skypack.dev>

* make astro-root uids unique * Move Astro to Vite * Update tests * More test improvements * fred fixes * Update compiler, improve tests * Fix runtime, improve code frame * Add Markdown support * Tycho fixes * Fred fixes part 2 * Throw Error for WIP Features * Improve testing suite * Allow users to pass config to Vite * Fix npm install (#1407) * Automate publish on merge (#1408) * Add NPM_TOKEN to publish script (#1409) * Create .npmrc * Clean up astro deps (#1411) * Use new renderers (#1412) * feat: update compiler (#1421) * Try mocha/chai test runners (#1418) * Try mocha/chai test runners * Disable failing smoke test for now Will revert when next can build docs * Enable mocha in parallel mode * Remove warning * Update docs * Fix Windows bug * Fix internal imports * Fix styles * Fix CI release on merge to next (#1427) * Fix logger locale parsing (#1439) * fix(logger): locale parsing * Fixed issue of compiler crash when "c" locale was encountered * Return default locale if parsed locale is less than 2 chars long * chore: add changeset * Apply changes from #1387 * Add back in support for children (#1486) * Add back in support for children * Be more careful * Enables most slot tests (#1494) * Enables most slot tests * Use spreadAttributes * Add hydration to Solid renderer (#1479) (#1495) * feat: add hydration to Solid renderer * fix: intersection observer, move script to the end Co-authored-by: Ryan Carniato <ryansolid@gmail.com> * [next] support Astro.slots API (#1516) * [next] Support for custom elements (#1528) * [next] Support for custom elements * Fix eslint errors * eslint again * [next] Fix Astro.fetchContent (#1480) * fix Astro.fetchContent * fix(fetchContent): cast type Co-authored-by: Nate Moore <nate@skypack.dev> * Move hydration to the compiler (#1547) * Move hydration to the compiler * Move extracting url, export to util fn * Brings back astro-dynamic tests (#1548) * Implements top-level Astro + Astro.resolve (#1556) * Implements top-level Astro + Astro.resolve * Fix linting * [next] Update renderers (#1509) * chore: update vite * fix(renderers): point renderers to resolved server/client entrypoints * Chore: Enable more tests with new compiler changes (#1558) * [Next] `fetch` support (#1563) * fix: polyfill fetch in every ssr scenario * test(fetch): update fetch tests * docs: update data fetching guide to remove caveats about `fetch` and isomorphic usage * refactor: update regex for clarity * Restructure (#1569) * Upgrade to @astrojs/compiler 0.2.0 (#1584) * Use Vite fork (#1585) * Use Vite fork * Fix linting * Move Vite to vendor/ and add a license * Fix linting * Include the dist folder * Update files config * Markdown compilation (#1593) * Markdown compilation * remove debugger * Gets lit hydration working (#1595) * Gets Astro.fetchContent compilation to work (#1596) * Gets Astro.fetchContent compilation to work This fixes Astro.fetchContent so that we handle esbuild transforming the name of the nested Astro call. * Remove debugging * Update the tests * Remove another debugger * Update Vite to latest (#1597) * Add Prism syntax highlighting (#1598) * Scoped styles with markdown (#1599) * Bugfix: fix getStaticPaths() cache miss (#1602) * Fix build order (#1609) * Bugfix: restore build to get all paths earlier, when build. Same as main. * Also re-add timings * [next] blog example fully working (#1610) * Add environment variables docs (Closes #873) (#1587) * Added environment variables docs (Closes #873) * Fixed prefix * Remove numbered comments (#1611) * Chore: remove numbered comments * Clean up block comments * comment style fixes (#1614) * [next] Upgrade compiler (#1619) * [next] Upgrade compiler * Upgrade to latest compiler * Fix the path to global css * Removed debugger * feat: add fragment support to vite-plugin-astro (#1600) * [next] fix `.tsx` handling (#1620) * fix: support tsx in JSX plugin * fix: preserve JSX via esbuild, only use Babel for JSX compilation * fix: handle upcoming Vite API for `ssr` flag * [next] Add CSS preprocessing (#1589) * Add concept for style support in Astro * Update style preprocessor to use new compiler * fix: massage preprocessStyle type * fix: @astrojs/compiler types Co-authored-by: Nate Moore <nate@skypack.dev> * fix issues in blog-multiple-authors (#1621) * Move Sass to deps (#1622) * Update renderer API for Vite (#1623) * Update renderer API for Vite * Fix lit-element tests * Clean up comments * Throw friendly error if renderer provides viteConfig in a bad format * Fix changesets (#1628) * Remove cheerio scanning from build stats (#1629) * Minor change to jsxTransformOptions, update Renderer API docs (#1630) * [next] docs example fully working (#1627) * [next] docs example fully working * Upgrade compiler to unlock docs * Add `class:list` directive (#1612) * Add support for class:list directive The `class:list` directive serializes an expression of css class names. For React components, `className:list` is also supported. * Remove `className` support and React tests * Add tests for the absence of omitted classes * fix: `define:vars` scoping for styles (#1632) * feat: fix Debug component (#1633) * [next] Fix `<Markdown>` component (#1631) * fix: cleanup issues with <Markdown> component * fix: fix `content` usage with Markdown * [next] Fix `<Code>` component (#1635) * fix: enable Code component * test: update expect to chai format * Fixes solid (#1634) * Fixes solid * Rename the test * Rebase with next * Skip solid test for now * Add support for markdown plugins (#1650) * Fix broken next release (#1652) * Prevent passing to Svelte components * Prevent passing class to Vue components * Add CSS injection, fix portfolio example (#1648) * Fix portfolio example * Add .pcss extension * Update load ssr opts * Update packages/astro/src/runtime/server/index.ts Co-authored-by: Jonathan Neal <jonathantneal@hotmail.com> Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com> Co-authored-by: Jonathan Neal <jonathantneal@hotmail.com> * Fixes external HMR (#1654) * Upgrade compiler version (#1655) Fixes docs and blog examples * Resolve renderers relative to the projectRoot (#1659) * Template fixes (#1656) * fix: dedupe hashes for identical islands (#1660) * fix: scope `define:vars` to `:root` for `<style global>` (#1663) * chore: update compiler to latest (#1664) * [next] fix island hydration inside of `<Markdown>` (#1665) * fix: create rehype plugin to smooth over island hydration bugs * refactor: remove debug code * chore: explain need for `rehypeIslands` * Bugfix: renderer-lit missing files on npm (#1669) * Force Vite to rebuild dependencies (#1670) * [next] Add `preact/compat` renderer (#1668) * feat: add preact/compat entry for `@astrojs/renderer-preact` * Update index.js * Bugfix: plugin-astro-fetch tries to append node-fetch to node-fetch (#1671) * Fix Vite race condition (#1674) * Fix with-nanostore deps (#1675) Adds missing Solid renderer * [next] Fix `resolveDependency` on Windows (#1666) * fix: Windows issue with resolveDependency util * chore: add comment * Update CONTRIBUTING.md (#1677) * Prevent scanning a user's deps (#1678) * Prevent scanning a user's deps * Remove unused things * remove unused util * Adding a changeset for the remark plugin * Config changes needed for stater template (#1680) This does 2 things: 1. Adds prismjs as a dep. 2. Adds shiki as an external. * Next bugs (#1681) * fix(#1679): hoisted <script> rendering * fix(#1679): do not print global for styles, but do for scripts * fix: update ObjectSet implementation * fix: dedupe elements in sets * [next] update compiler (#1683) * chore: update compiler * chore: update compiler (again) * Fix Astro HMR bottleneck (#1684) * Bugfix: JSX renderers can be declared in any order (#1686) * chore: update compiler (#1690) * Exclude lit-server from being optimized (#1691) This should get the lit example working from `npm`. * fix: exclude all renderer server entrypoints (#1692) * chore: update compiler (#1705) * fix: do not crash when Markdown has no content (#1702) * feat: improve support for third-party React packages (#1701) * Remove prism warning when no language is provided (#1703) * Remove prism warning when no language is provided * Add the plaintext language instead * retry deploy * chore: enter prerelease mode under `next` (#1707) * Updates to the changesets (#1708) * Updates to the changesets * Adds a changeset for astro-prism Co-authored-by: Fred K. Schott <fkschott@gmail.com> Co-authored-by: Nate Moore <nate@skypack.dev> Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com> Co-authored-by: Pranav Karawale <52596591+obnoxiousnerd@users.noreply.github.com> Co-authored-by: Matthew Phillips <matthew@skypack.dev> Co-authored-by: Matthew Phillips <matthew@matthewphillips.info> Co-authored-by: Ryan Carniato <ryansolid@gmail.com> Co-authored-by: AsyncBanana <58297401+AsyncBanana@users.noreply.github.com> Co-authored-by: Jonathan Neal <jonathantneal@hotmail.com>

* make astro-root uids unique * Move Astro to Vite * Update tests * More test improvements * fred fixes * Update compiler, improve tests * Fix runtime, improve code frame * Add Markdown support * Tycho fixes * Fred fixes part 2 * Throw Error for WIP Features * Improve testing suite * Allow users to pass config to Vite * Fix npm install (withastro#1407) * Automate publish on merge (withastro#1408) * Add NPM_TOKEN to publish script (withastro#1409) * Create .npmrc * Clean up astro deps (withastro#1411) * Use new renderers (withastro#1412) * feat: update compiler (withastro#1421) * Try mocha/chai test runners (withastro#1418) * Try mocha/chai test runners * Disable failing smoke test for now Will revert when next can build docs * Enable mocha in parallel mode * Remove warning * Update docs * Fix Windows bug * Fix internal imports * Fix styles * Fix CI release on merge to next (withastro#1427) * Fix logger locale parsing (withastro#1439) * fix(logger): locale parsing * Fixed issue of compiler crash when "c" locale was encountered * Return default locale if parsed locale is less than 2 chars long * chore: add changeset * Apply changes from withastro#1387 * Add back in support for children (withastro#1486) * Add back in support for children * Be more careful * Enables most slot tests (withastro#1494) * Enables most slot tests * Use spreadAttributes * Add hydration to Solid renderer (withastro#1479) (withastro#1495) * feat: add hydration to Solid renderer * fix: intersection observer, move script to the end Co-authored-by: Ryan Carniato <ryansolid@gmail.com> * [next] support Astro.slots API (withastro#1516) * [next] Support for custom elements (withastro#1528) * [next] Support for custom elements * Fix eslint errors * eslint again * [next] Fix Astro.fetchContent (withastro#1480) * fix Astro.fetchContent * fix(fetchContent): cast type Co-authored-by: Nate Moore <nate@skypack.dev> * Move hydration to the compiler (withastro#1547) * Move hydration to the compiler * Move extracting url, export to util fn * Brings back astro-dynamic tests (withastro#1548) * Implements top-level Astro + Astro.resolve (withastro#1556) * Implements top-level Astro + Astro.resolve * Fix linting * [next] Update renderers (withastro#1509) * chore: update vite * fix(renderers): point renderers to resolved server/client entrypoints * Chore: Enable more tests with new compiler changes (withastro#1558) * [Next] `fetch` support (withastro#1563) * fix: polyfill fetch in every ssr scenario * test(fetch): update fetch tests * docs: update data fetching guide to remove caveats about `fetch` and isomorphic usage * refactor: update regex for clarity * Restructure (withastro#1569) * Upgrade to @astrojs/compiler 0.2.0 (withastro#1584) * Use Vite fork (withastro#1585) * Use Vite fork * Fix linting * Move Vite to vendor/ and add a license * Fix linting * Include the dist folder * Update files config * Markdown compilation (withastro#1593) * Markdown compilation * remove debugger * Gets lit hydration working (withastro#1595) * Gets Astro.fetchContent compilation to work (withastro#1596) * Gets Astro.fetchContent compilation to work This fixes Astro.fetchContent so that we handle esbuild transforming the name of the nested Astro call. * Remove debugging * Update the tests * Remove another debugger * Update Vite to latest (withastro#1597) * Add Prism syntax highlighting (withastro#1598) * Scoped styles with markdown (withastro#1599) * Bugfix: fix getStaticPaths() cache miss (withastro#1602) * Fix build order (withastro#1609) * Bugfix: restore build to get all paths earlier, when build. Same as main. * Also re-add timings * [next] blog example fully working (withastro#1610) * Add environment variables docs (Closes withastro#873) (withastro#1587) * Added environment variables docs (Closes withastro#873) * Fixed prefix * Remove numbered comments (withastro#1611) * Chore: remove numbered comments * Clean up block comments * comment style fixes (withastro#1614) * [next] Upgrade compiler (withastro#1619) * [next] Upgrade compiler * Upgrade to latest compiler * Fix the path to global css * Removed debugger * feat: add fragment support to vite-plugin-astro (withastro#1600) * [next] fix `.tsx` handling (withastro#1620) * fix: support tsx in JSX plugin * fix: preserve JSX via esbuild, only use Babel for JSX compilation * fix: handle upcoming Vite API for `ssr` flag * [next] Add CSS preprocessing (withastro#1589) * Add concept for style support in Astro * Update style preprocessor to use new compiler * fix: massage preprocessStyle type * fix: @astrojs/compiler types Co-authored-by: Nate Moore <nate@skypack.dev> * fix issues in blog-multiple-authors (withastro#1621) * Move Sass to deps (withastro#1622) * Update renderer API for Vite (withastro#1623) * Update renderer API for Vite * Fix lit-element tests * Clean up comments * Throw friendly error if renderer provides viteConfig in a bad format * Fix changesets (withastro#1628) * Remove cheerio scanning from build stats (withastro#1629) * Minor change to jsxTransformOptions, update Renderer API docs (withastro#1630) * [next] docs example fully working (withastro#1627) * [next] docs example fully working * Upgrade compiler to unlock docs * Add `class:list` directive (withastro#1612) * Add support for class:list directive The `class:list` directive serializes an expression of css class names. For React components, `className:list` is also supported. * Remove `className` support and React tests * Add tests for the absence of omitted classes * fix: `define:vars` scoping for styles (withastro#1632) * feat: fix Debug component (withastro#1633) * [next] Fix `<Markdown>` component (withastro#1631) * fix: cleanup issues with <Markdown> component * fix: fix `content` usage with Markdown * [next] Fix `<Code>` component (withastro#1635) * fix: enable Code component * test: update expect to chai format * Fixes solid (withastro#1634) * Fixes solid * Rename the test * Rebase with next * Skip solid test for now * Add support for markdown plugins (withastro#1650) * Fix broken next release (withastro#1652) * Prevent passing to Svelte components * Prevent passing class to Vue components * Add CSS injection, fix portfolio example (withastro#1648) * Fix portfolio example * Add .pcss extension * Update load ssr opts * Update packages/astro/src/runtime/server/index.ts Co-authored-by: Jonathan Neal <jonathantneal@hotmail.com> Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com> Co-authored-by: Jonathan Neal <jonathantneal@hotmail.com> * Fixes external HMR (withastro#1654) * Upgrade compiler version (withastro#1655) Fixes docs and blog examples * Resolve renderers relative to the projectRoot (withastro#1659) * Template fixes (withastro#1656) * fix: dedupe hashes for identical islands (withastro#1660) * fix: scope `define:vars` to `:root` for `<style global>` (withastro#1663) * chore: update compiler to latest (withastro#1664) * [next] fix island hydration inside of `<Markdown>` (withastro#1665) * fix: create rehype plugin to smooth over island hydration bugs * refactor: remove debug code * chore: explain need for `rehypeIslands` * Bugfix: renderer-lit missing files on npm (withastro#1669) * Force Vite to rebuild dependencies (withastro#1670) * [next] Add `preact/compat` renderer (withastro#1668) * feat: add preact/compat entry for `@astrojs/renderer-preact` * Update index.js * Bugfix: plugin-astro-fetch tries to append node-fetch to node-fetch (withastro#1671) * Fix Vite race condition (withastro#1674) * Fix with-nanostore deps (withastro#1675) Adds missing Solid renderer * [next] Fix `resolveDependency` on Windows (withastro#1666) * fix: Windows issue with resolveDependency util * chore: add comment * Update CONTRIBUTING.md (withastro#1677) * Prevent scanning a user's deps (withastro#1678) * Prevent scanning a user's deps * Remove unused things * remove unused util * Adding a changeset for the remark plugin * Config changes needed for stater template (withastro#1680) This does 2 things: 1. Adds prismjs as a dep. 2. Adds shiki as an external. * Next bugs (withastro#1681) * fix(withastro#1679): hoisted <script> rendering * fix(withastro#1679): do not print global for styles, but do for scripts * fix: update ObjectSet implementation * fix: dedupe elements in sets * [next] update compiler (withastro#1683) * chore: update compiler * chore: update compiler (again) * Fix Astro HMR bottleneck (withastro#1684) * Bugfix: JSX renderers can be declared in any order (withastro#1686) * chore: update compiler (withastro#1690) * Exclude lit-server from being optimized (withastro#1691) This should get the lit example working from `npm`. * fix: exclude all renderer server entrypoints (withastro#1692) * chore: update compiler (withastro#1705) * fix: do not crash when Markdown has no content (withastro#1702) * feat: improve support for third-party React packages (withastro#1701) * Remove prism warning when no language is provided (withastro#1703) * Remove prism warning when no language is provided * Add the plaintext language instead * retry deploy * chore: enter prerelease mode under `next` (withastro#1707) * Updates to the changesets (withastro#1708) * Updates to the changesets * Adds a changeset for astro-prism Co-authored-by: Fred K. Schott <fkschott@gmail.com> Co-authored-by: Nate Moore <nate@skypack.dev> Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com> Co-authored-by: Pranav Karawale <52596591+obnoxiousnerd@users.noreply.github.com> Co-authored-by: Matthew Phillips <matthew@skypack.dev> Co-authored-by: Matthew Phillips <matthew@matthewphillips.info> Co-authored-by: Ryan Carniato <ryansolid@gmail.com> Co-authored-by: AsyncBanana <58297401+AsyncBanana@users.noreply.github.com> Co-authored-by: Jonathan Neal <jonathantneal@hotmail.com>

drwpow requested a review from a team as a code owner October 18, 2021 23:50

drwpow commented Oct 18, 2021

View reviewed changes

drwpow force-pushed the styles-concept branch from 64ef201 to 892f276 Compare October 18, 2021 23:52

drwpow commented Oct 18, 2021

View reviewed changes

drwpow force-pushed the styles-concept branch 3 times, most recently from 3ebdaaa to fcc7ab5 Compare October 18, 2021 23:55

drwpow commented Oct 18, 2021

View reviewed changes

packages/astro/src/vite-plugin-astro/styles.ts Outdated Show resolved Hide resolved

matthewp reviewed Oct 19, 2021

View reviewed changes

drwpow force-pushed the styles-concept branch 2 times, most recently from c060258 to a5bce40 Compare October 19, 2021 18:50

natemoo-re reviewed Oct 19, 2021

View reviewed changes

drwpow force-pushed the styles-concept branch 4 times, most recently from b396dc9 to 5d1a1f1 Compare October 20, 2021 23:13

drwpow added 2 commits October 21, 2021 11:52

Add concept for style support in Astro

f0408b4

Update style preprocessor to use new compiler

ab34c9b

natemoo-re force-pushed the styles-concept branch from 5d1a1f1 to ab34c9b Compare October 21, 2021 18:53

natemoo-re mentioned this pull request Oct 21, 2021

🚀 Astro Next (0.21.0) #1406

Merged

80 tasks

Nate Moore added 2 commits October 21, 2021 13:29

fix: massage preprocessStyle type

96111b4

fix: @astrojs/compiler types

46d6831

natemoo-re approved these changes Oct 21, 2021

View reviewed changes

natemoo-re merged commit c90bc7f into next Oct 21, 2021

natemoo-re deleted the styles-concept branch October 21, 2021 20:41

drwpow mentioned this pull request Oct 21, 2021

Chore: Move Sass to deps #1622

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[next] Add CSS preprocessing #1589

[next] Add CSS preprocessing #1589

drwpow commented Oct 18, 2021 •

edited

Loading

changeset-bot bot commented Oct 18, 2021 •

edited

Loading

drwpow Oct 18, 2021

drwpow Oct 18, 2021

drwpow Oct 18, 2021

FredKSchott Oct 20, 2021

matthewp Oct 19, 2021

natemoo-re Oct 19, 2021

matthewp Oct 19, 2021

drwpow Oct 19, 2021

natemoo-re left a comment

natemoo-re Oct 19, 2021

matthewp Oct 20, 2021

FredKSchott Oct 20, 2021 •

edited

Loading

drwpow Oct 20, 2021

drwpow Oct 20, 2021

natemoo-re left a comment


		To create global styles, add a `:global()` wrapper around a selector (the same as if you were using [CSS Modules][css-modules]).
		By default, all Astro component styles are scoped, meaning they only apply to the current component. This can be very easy to work with, as you only have to worry about what’s in your current document at any given time.


		Astro also supports [Sass][sass] out-of-the-box. To enable for each framework:
		- Sass: Run `npm install -D sass` and use `<style lang="scss">` or `<style lang="sass">` (indented) in `.astro` files

[next] Add CSS preprocessing #1589

[next] Add CSS preprocessing #1589

Conversation

drwpow commented Oct 18, 2021 • edited Loading

Changes

Testing

Docs

changeset-bot bot commented Oct 18, 2021 • edited Loading

🦋 Changeset detected

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

natemoo-re left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

FredKSchott Oct 20, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

natemoo-re left a comment

Choose a reason for hiding this comment

drwpow commented Oct 18, 2021 •

edited

Loading

changeset-bot bot commented Oct 18, 2021 •

edited

Loading

FredKSchott Oct 20, 2021 •

edited

Loading