Remix build fails with Vanilla Extract outside of root.tsx #6794

jwpaine · 2023-07-07T19:52:22Z

What version of Remix are you using?

1.18.1

Are all your remix dependencies & dev-dependencies using the same version?

Yes

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.

The text was updated successfully, but these errors were encountered:

ivosabev · 2023-07-17T12:19:29Z

This is not an issue with Remix, but you have a typo in your code.

Fix the error ERROR: Expected ">" but found "{" and it will work. I had the same issue and thought it is from the css bundler, but in reality the css bundler complains if you have typos in your code and misleads you.

markdalgleish · 2023-07-18T05:14:33Z

I had a look into this and it turns out it's an issue with our HMR transform for .js files, not a Vanilla Extract issue. Looks like a fix for a different issue inadvertently fixed this problem too since we're now using the correct loader for .js files: #6762

I'm closing this as fixed. Just to confirm, can you check whether you're still experiencing this issue with the 1.19.0-pre.0 release? Updating to this pre-release fixes my local repro. Otherwise, if you're still having issues, let me know.

jwpaine added the bug:unverified label Jul 7, 2023

jwpaine changed the title ~~Remix build fails when adding Vanilla Extract CSS~~ Remix build fails with Vanilla Extract outside of root.tsx Jul 7, 2023

brophdawg11 added package:dev package:css-bundle labels Jul 10, 2023

markdalgleish self-assigned this Jul 18, 2023

markdalgleish closed this as completed Jul 18, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Remix build fails with Vanilla Extract outside of root.tsx #6794

Remix build fails with Vanilla Extract outside of root.tsx #6794

jwpaine commented Jul 7, 2023 •

edited

Loading

ivosabev commented Jul 17, 2023

markdalgleish commented Jul 18, 2023 •

edited

Loading

Remix build fails with Vanilla Extract outside of root.tsx #6794

Remix build fails with Vanilla Extract outside of root.tsx #6794

Comments

jwpaine commented Jul 7, 2023 • edited Loading

What version of Remix are you using?

Are all your remix dependencies & dev-dependencies using the same version?

Steps to Reproduce

Expected Behavior

Actual Behavior

NOTE:

ivosabev commented Jul 17, 2023

markdalgleish commented Jul 18, 2023 • edited Loading

jwpaine commented Jul 7, 2023 •

edited

Loading

markdalgleish commented Jul 18, 2023 •

edited

Loading