Skip to content

Commit

Permalink
Update Turbopack CSS docs (#7925)
Browse files Browse the repository at this point in the history
### Description

Updates the Turbopack CSS documentation to reflect reality.

<!--
  ✍️ Write a short summary of your work.
  If necessary, include relevant screenshots.
-->

### Testing Instructions

<!--
  Give a quick description of steps to test your changes.
-->
  • Loading branch information
timneutkens authored Apr 10, 2024
1 parent d6f9950 commit ba01e39
Showing 1 changed file with 33 additions and 27 deletions.
60 changes: 33 additions & 27 deletions docs/pages/pack/docs/features/css.mdx
Original file line number Diff line number Diff line change
@@ -1,55 +1,53 @@
import { Callout } from '../../../../components/Callout';

# CSS

CSS bundling is handled by SWC, using a Rust crate called `swc_css`. We haven't yet documented `swc_css` separately, but it's integrated into Turbopack and supports several CSS features:
CSS parsing and transformation is handled by [Lightning CSS](https://lightningcss.dev/).

## Global CSS

Importing CSS into global scope is supported **out-of-the-box** in Turbopack.
Importing CSS into global scope is built-in in Turbopack.

```ts
import './globals.css';
import "./globals.css";
```

## CSS Modules

Turbopack handles CSS Modules out-of-the-box. Any file with a `.module.css` extension will be considered a CSS module, and you can import it into a JavaScript or TypeScript file:
Turbopack handles CSS Modules. Any file with a `.module.css` extension will be considered a CSS module, and you can import it into a JavaScript or TypeScript file:

```tsx Component.tsx
import cssExports from './phone.module.css'
import cssExports from "./phone.module.css";
```

This follows the same rules set out by [Next.js](https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css) - letting you easily distinguish between global and scoped CSS.

## `postcss-nested`
## CSS nesting

Turbopack handles [`postcss-nested`](https://www.npmjs.com/package/postcss-nested) syntax out-of-the-box. This useful library lets you nest CSS declarations inside each other:
Turbopack handles [CSS Nesting](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting) syntax. This is [officially part of the CSS specification](https://www.w3.org/TR/css-nesting-1/) and lets you nest CSS declarations inside each other:

```css phone.css
.phone {
&_title {
width: 500px;
@media (max-width: 500px) {
width: auto;
}
body.is_dark & {
color: white;
}
.title {
width: 500px;
@media (max-width: 500px) {
width: auto;
}
img {
display: block;
body.is_dark & {
color: white;
}
}
img {
display: block;
}
}
```

## `@import` syntax

Using the CSS `@import` syntax to import other CSS files works **out-of-the-box**. This gives you the ability to combine several CSS files together into a single module:
Using the CSS `@import` syntax to import other CSS files is supported. This gives you the ability to combine several CSS files together into a single module:

```css filename="globals.css"
@import './modal.css';
@import './dark.css';
@import "./modal.css";
@import "./dark.css";
```

## PostCSS
Expand All @@ -64,16 +62,24 @@ When Turbopack finds a `postcss.config.js` file, it will automatically process y
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
autoprefixer: {},
},
};
```

## SCSS and LESS
## Sass and SCSS and LESS

`.scss` and `.sass` files let you utilize the [Sass](https://sass-lang.com/) language.

Sass is currently supported when using Next.js with Turbopack.

This is likely to be available via plugins/loaders in the future when using Turbopack directly.

## Less

`.scss` and `.less` files let you utilize SCSS and LESS - languages which enhance CSS in various ways. These languages **don't currently work** out-of-the-box with Turbopack.
`.less` files let you utilize the [Less](https://less-lang.com/) language.

These are likely to be available via plugins in the future.
This is likely to be available via plugins/loaders in the future.

## Tailwind CSS

Expand Down

0 comments on commit ba01e39

Please sign in to comment.