From f716555275c15d2eda43d9b3e9aa24728b462539 Mon Sep 17 00:00:00 2001
From: Tim Neutkens <tim@timneutkens.nl>
Date: Wed, 10 Apr 2024 14:52:01 +0200
Subject: [PATCH] Update Turbopack CSS docs

---
 docs/pages/pack/docs/features/css.mdx | 60 +++++++++++++++------------
 1 file changed, 33 insertions(+), 27 deletions(-)

diff --git a/docs/pages/pack/docs/features/css.mdx b/docs/pages/pack/docs/features/css.mdx
index cde15f58e544c..74236d7d8e498 100644
--- a/docs/pages/pack/docs/features/css.mdx
+++ b/docs/pages/pack/docs/features/css.mdx
@@ -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
@@ -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