What version of Remix are you using?
1.18.1
Are all your remix dependencies & dev-dependencies using the same version?
Steps to Reproduce
- Fresh install remix: npx create-remix@latest
- Install Vanilla Extract CSS: npm install -D @vanilla-extract/css
- Per the Styling Guide, create a file
app/components/button/index.js with the following:
import * as styles from "./styles.css";
export const Button = React.forwardRef(
({ children, ...props }, ref) => {
return (
<button
{...props}
ref={ref}
className={styles.root}
/>
);
}
);
Button.displayName = "Button";
- Create a file
app/components/button/styles.css.ts with the following:
export const root = style({
border: "solid 1px",
background: "white",
color: "#454545",
});
- Import and use the
Button component within routes/_index.tsx :
import {Button} from "../components/button"
export default function Index() {
return (
<div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
<Button/>
</div>
);
}
Expected Behavior
The project should compile and the button should assume appropriate styling.
Actual Behavior
info building...
X [ERROR] Transform failed with 1 error:
<stdin>:14:8: ERROR: Expected ">" but found "{" [plugin css-side-effects-plugin]
app/routes/_index.tsx:20:23:
20 │ import { Button } from "../components/button";
╵ ~~~~~~~~~~~~~~~~~~~~~~
This error came from the "onLoad" callback registered here:
node_modules/@remix-run/dev/dist/compiler/plugins/cssSideEffectImports.js:64:12:
64 │ build.onLoad({
╵ ~~~~~~
NOTE:
Vanilla-extract works as expected when imported into root.tsx:
- Create file
root.css.ts with the following:
import { style } from "@vanilla-extract/css";
export const root = style({
background: "red",
color: "#454545",
});
- Add import to
root.tsx :
...
import * as styles from "./root.css";
...
<body className={styles.root}>
...
On build, the background is red as expected.
What version of Remix are you using?
1.18.1
Are all your remix dependencies & dev-dependencies using the same version?
Steps to Reproduce
app/components/button/index.jswith the following:app/components/button/styles.css.tswith the following:Buttoncomponent withinroutes/_index.tsx:Expected Behavior
The project should compile and the button should assume appropriate styling.
Actual Behavior
NOTE:
Vanilla-extract works as expected when imported into root.tsx:
root.css.tswith the following:root.tsx:On build, the background is red as expected.