Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Turbopack CSS docs #7925

Merged
merged 1 commit into from
Apr 10, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
Loading