# How Astro Handles CSS Processing: Scoped Styles and Vite Integration > Discover how Astro processes CSS with Vite integration for scoped styles. Learn about style extraction, Vite's pipeline, and global CSS compatibility. - Repository: [Astro/astro](https://github.com/withastro/astro) - Tags: internals - Published: 2026-03-06 --- **Astro processes CSS by extracting ` ``` The compiler transforms this into HTML where the `h1` receives a data attribute and the selector is rewritten: ```html

Hello Astro

``` The component's root element receives the `data-astro-hash` attribute at runtime, ensuring styles do not leak to child or parent components. ## Using Vite CSS Preprocessors with Scoped Styles Astro supports Vite plugins for css preprocessing on scoped styles. When you specify a language attribute like `lang="scss"`, the extracted style text is fed through Vite's CSS loaders before the hash is applied. ```astro --- // src/components/Button.astro --- ``` According to the `withastro/astro` source code, this means you get all the usual Vite transforms while keeping the hash-based scoping intact. ## CSS Modules Integration Astro supports CSS Modules via the `module` attribute (` ``` The `styles.card` reference resolves to a generated class name like `card_xyz123`, providing local scope through Vite's CSS Modules implementation rather than Astro's hash-based scoping. ## Global Styles and the `:global` Selector You can opt-out of scoping using the `:global` pseudo-selector or by importing global CSS files. The `:global` selector is left unchanged during the hash rewrite, allowing those rules to apply site-wide. ```astro --- // src/layouts/BaseLayout.astro --- ``` This approach ensures that specific rules within a component's style block apply globally while other rules remain scoped. ## SSR and Lazy Loading Optimizations During server-side rendering, Astro prevents flash of unstyled content (FOUC) by inlining scoped CSS directly into the HTML document's ``. The server implementation in [`packages/astro/src/runtime/server/render/template.ts`](https://github.com/withastro/astro/blob/main/packages/astro/src/runtime/server/render/template.ts) builds a list of collected scoped styles per request and concatenates them into the rendered markup. For lazy-loaded components, Astro treats scoped CSS as part of the component's JavaScript chunk. When a component is rendered dynamically via `import()`, Vite code-splits the CSS alongside the component, and [`packages/astro/src/runtime/client/index.ts`](https://github.com/withastro/astro/blob/main/packages/astro/src/runtime/client/index.ts) ensures the styles are applied client-side when the chunk loads. ```astro --- // src/pages/blog.astro const Comments = lazy(() => import('../components/Comments.astro')); ---

…

``` This integration allows scoped styles to load on-demand without blocking the initial render. ## Summary - **Scoped styles** are automatic in `.astro` components, using hash-based selector rewriting via [`packages/astro/src/compiler/css.ts`](https://github.com/withastro/astro/blob/main/packages/astro/src/compiler/css.ts). - **Vite integration** passes all extracted CSS through Vite's loaders, supporting Sass, Less, Tailwind, and PostCSS through [`packages/astro/src/integrations/vite-plugin-astro.ts`](https://github.com/withastro/astro/blob/main/packages/astro/src/integrations/vite-plugin-astro.ts). - **CSS Modules** are available via `