You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Enable support for [CSS Modules](https://github.com/css-modules/css-modules), [Vanilla Extract](http://vanilla-extract.style) and CSS side-effect imports
9
+
10
+
These CSS bundling features were previously only available via `future.unstable_cssModules`, `future.unstable_vanillaExtract` and `future.unstable_cssSideEffectImports` options in `remix.config.js`, but they have now been stabilized.
11
+
12
+
**CSS Bundle Setup**
13
+
14
+
In order to use these features, you first need to set up CSS bundling in your project. First install the `@remix-run/css-bundle` package.
15
+
16
+
```sh
17
+
npm i @remix-run/css-bundle
18
+
```
19
+
20
+
Then return the exported `cssBundleHref` as a stylesheet link descriptor from the `links` function at the root of your app.
21
+
22
+
```tsx
23
+
importtype { LinksFunction } from"@remix-run/node"; // or cloudflare/deno
To use [CSS Modules](https://github.com/css-modules/css-modules), you can opt in via the `.module.css` file name convention. For example:
39
+
40
+
```css
41
+
.root {
42
+
border: solid1px;
43
+
background: white;
44
+
color: #454545;
45
+
}
46
+
```
47
+
48
+
```tsx
49
+
importstylesfrom"./styles.module.css";
50
+
51
+
exportconst Button =React.forwardRef(
52
+
({ children, ...props }, ref) => {
53
+
return (
54
+
<button
55
+
{...props}
56
+
ref={ref}
57
+
className={styles.root}
58
+
/>
59
+
);
60
+
}
61
+
);
62
+
Button.displayName="Button";
63
+
```
64
+
65
+
**Vanilla Extract**
66
+
67
+
To use [Vanilla Extract](http://vanilla-extract.style), first install its `css` package as a dev dependency.
68
+
69
+
```sh
70
+
npm install -D @vanilla-extract/css
71
+
```
72
+
73
+
You can then opt in via the `.css.ts`/`.css.js` file name convention. For example:
74
+
75
+
```ts
76
+
import { style } from"@vanilla-extract/css";
77
+
78
+
exportconst root =style({
79
+
border: "solid 1px",
80
+
background: "white",
81
+
color: "#454545",
82
+
});
83
+
```
84
+
85
+
```tsx
86
+
import*asstylesfrom"./styles.css"; // Note that `.ts` is omitted here
87
+
88
+
exportconst Button =React.forwardRef(
89
+
({ children, ...props }, ref) => {
90
+
return (
91
+
<button
92
+
{...props}
93
+
ref={ref}
94
+
className={styles.root}
95
+
/>
96
+
);
97
+
}
98
+
);
99
+
Button.displayName="Button";
100
+
```
101
+
102
+
**CSS Side-Effect Imports**
103
+
104
+
Any CSS files that are imported as side-effects (e.g. `import "./styles.css"`) will be automatically included in the CSS bundle.
105
+
106
+
Since JavaScript runtimes don't support importing CSS in this way, you'll also need to add any packages using CSS side-effect imports to the [`serverDependenciesToBundle`](https://remix.run/docs/en/main/file-conventions/remix-config#serverdependenciestobundle) option in your `remix.config.js` file. This ensures that any CSS imports are compiled out of your code before running it on the server. For example, to use [React Spectrum](https://react-spectrum.adobe.com/react-spectrum/index.html):
Copy file name to clipboardexpand all lines: docs/guides/styling.md
+6-53
Original file line number
Diff line number
Diff line change
@@ -671,8 +671,6 @@ NOTE: You may run into hydration warnings when using Styled Components. Hopefull
671
671
672
672
## CSS Bundling
673
673
674
-
<docs-warning>CSS-bundling features are unstable and currently only available behind feature flags. We're confident in the use cases they solve, but the API and implementation may change in the future.</docs-warning>
675
-
676
674
<docs-warning>When using CSS-bundling features, you should avoid using `export*` due to an [issue with esbuild's CSS tree shaking][esbuild-css-tree-shaking-issue].</docs-warning>
677
675
678
676
Many common approaches to CSS within the React community are only possible when bundling CSS, meaning that the CSS files you write during development are collected into a separate bundle as part of the build process.
@@ -707,23 +705,9 @@ With this link tag inserted into the page, you're now ready to start using the v
707
705
708
706
### CSS Modules
709
707
710
-
<docs-warning>This feature is unstable and currently only available behind a feature flag. We're confident in the use cases it solves but the API and implementation may change in the future.</docs-warning>
711
-
712
-
First, ensure you've set up [CSS bundling][css-bundling] in your application.
713
-
714
-
Then, to enable [CSS Modules], set the `future.unstable_cssModules` feature flag in `remix.config.js`.
715
-
716
-
```js filename=remix.config.js
717
-
/**@type{import('@remix-run/dev').AppConfig}*/
718
-
module.exports= {
719
-
future: {
720
-
unstable_cssModules:true,
721
-
},
722
-
// ...
723
-
};
724
-
```
708
+
To use the built-in CSS Modules support, first ensure you've set up [CSS bundling][css-bundling] in your application.
725
709
726
-
With this feature flag enabled, you can now opt into CSS Modules via the `.module.css` file name convention. For example:
710
+
You can then opt into [CSS Modules] via the `.module.css` file name convention. For example:
<docs-warning>This feature is unstable and currently only available behind a feature flag. We're confident in the use cases it solves, but the API and implementation may change in the future.</docs-warning>
756
-
757
739
[Vanilla Extract][vanilla-extract] is a zero-runtime CSS-in-TypeScript (or JavaScript) library that lets you use TypeScript as your CSS preprocessor. Styles are written in separate `*.css.ts` (or `*.css.js`) files and all code within them is executed during the build process rather than in your user's browser. If you want to keep your CSS bundle size to a minimum, Vanilla Extract also provides an official library called [Sprinkles][sprinkles] that lets you define a custom set of utility classes and a type-safe function for accessing them at runtime.
758
740
759
-
First, ensure you've set up [CSS bundling][css-bundling] in your application.
741
+
To use the built-in Vanilla Extract support, first ensure you've set up [CSS bundling][css-bundling] in your application.
760
742
761
-
Next, install Vanilla Extract's core styling package as a dev dependency.
743
+
Then, install Vanilla Extract's core styling package as a dev dependency.
762
744
763
745
```sh
764
746
npm install -D @vanilla-extract/css
765
747
```
766
748
767
-
Then, to enable Vanilla Extract, set the `future.unstable_vanillaExtract` feature flag in `remix.config.js`.
768
-
769
-
```js filename=remix.config.js
770
-
/**@type{import('@remix-run/dev').AppConfig}*/
771
-
module.exports= {
772
-
future: {
773
-
unstable_vanillaExtract:true,
774
-
},
775
-
// ...
776
-
};
777
-
```
778
-
779
-
With this feature flag enabled, you can now opt into Vanilla Extract via the `.css.ts`/`.css.js` file name convention. For example:
749
+
You can then opt into Vanilla Extract via the `.css.ts`/`.css.js` file name convention. For example:
<docs-warning>This feature is unstable and currently only available behind a feature flag. We're confident in the use cases it solves, but the API and implementation may change in the future.</docs-warning>
811
-
812
780
Some NPM packages use side-effect imports of plain CSS files (e.g. `import"./styles.css"`) to declare the CSS dependencies of JavaScript files. If you want to consume one of these packages, first ensure you've set up [CSS bundling][css-bundling] in your application.
813
781
814
-
Then, set the `future.unstable_cssSideEffectImports` feature flag in `remix.config.js`.
815
-
816
-
```js filename=remix.config.js
817
-
/**@type{import('@remix-run/dev').AppConfig}*/
818
-
module.exports= {
819
-
future: {
820
-
unstable_cssSideEffectImports:true,
821
-
},
822
-
// ...
823
-
};
824
-
```
825
-
826
-
Finally, since JavaScript runtimes don't support importing CSS in this way, you'll also need to add any relevant packages to the [`serverDependenciesToBundle`][server-dependencies-to-bundle] option in your `remix.config.js` file. This ensures that any CSS imports are compiled out of your code before running it on the server. For example, to use React Spectrum:
782
+
Since JavaScript runtimes don't support importing CSS in this way, you'll need to add any relevant packages to the [`serverDependenciesToBundle`][server-dependencies-to-bundle] option in your `remix.config.js` file. This ensures that any CSS imports are compiled out of your code before running it on the server. For example, to use React Spectrum:
0 commit comments