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

Vite plugin #47

Closed
targetlucked69 opened this issue Dec 6, 2023 · 46 comments
Closed

Vite plugin #47

targetlucked69 opened this issue Dec 6, 2023 · 46 comments
Assignees
Labels
enhancement New feature or request

Comments

@targetlucked69
Copy link

targetlucked69 commented Dec 6, 2023

It would be nice to have a Vite plugin. I tried the rollup plugin with a fresh React + Vite and got an error:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import stylex from '@stylexjs/rollup-plugin'

export default defineConfig({
  plugins: [react(), stylex()],
})

Error:

[vite] Internal server error: /Users/walmartwarlord/tmp/react-stylex-test/src/index.css: Unexpected token (1:0)

> 1 | :root {
    | ^
  2 |   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  3 |   line-height: 1.5;
  4 |   font-weight: 400;
  Plugin: rollup-plugin-stylex
  File: /Users/walmartwarlord/tmp/react-stylex-test/src/index.css:1:0
  1  |  :root {
     |  ^
  2  |    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  3  |    line-height: 1.5;
      at constructor (/Users/walmartwarlord/tmp/react-stylex-test/node_modules/.pnpm/@babel+parser@7.23.5/node_modules/@babel/parser/lib/index.js:356:19)

Edit: Cleaned up the fresh project; dev now runs successfully. However, running build leads to a different error.:

import stylex from '@stylexjs/stylex'

const s = stylex.create({
  main: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    gap: 10,
    paddingTop: 20,
  }
})

function App() {
  return (
    <main className={stylex(s.main)}>
      <h1>Hello</h1>
    </main>
  )
}
vite v5.0.5 building for production...
✓ 0 modules transformed.
[rollup-plugin-stylex] /Users/walmartwarlord/tmp/react-stylex-test/index.html: Unexpected token (1:1)

> 1 | <!doctype html>
    |  ^
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
file: /Users/walmartwarlord/tmp/react-stylex-test/index.html:1:1
error during build:
SyntaxError: /Users/walmartwarlord/tmp/react-stylex-test/index.html: Unexpected token (1:1)

> 1 | <!doctype html>
    |  ^
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
    at constructor (/Users/walmartwarlord/tmp/react-stylex-test/node_modules/.pnpm/@babel+parser@7.23.5/node_modules/@babel/parser/lib/index.js:356:19)
@HorusGoul
Copy link

I encountered the same issue and put together a vite plugin based on the rollup plugin implementation: https://github.com/HorusGoul/vite-plugin-stylex

Install it with npm install --save-dev vite-plugin-stylex and use it like this:

// ... other imports

import styleX from "vite-plugin-stylex";

export default defineConfig({
  plugins: [react(), styleX()],
});

I haven't tried more complex use cases like SSR yet, but I guess we can add support for those as needed by users (already thinking of trying this with the new Remix Vite plugin)


Question for maintainers: Is there a plan for an official Vite plugin? Or is this expected to be covered by the community using lower-level plugins like the Babel one? Thanks!

@Haroenv
Copy link

Haroenv commented Dec 6, 2023

Unplugin could be interesting to consider, since it would allow only maintaining one implementation: https://github.com/unjs/unplugin

@nonzzz
Copy link
Contributor

nonzzz commented Dec 6, 2023

I think it would be easier to implement based on the rollup version than to switch to unplugin :)

@nmn
Copy link
Contributor

nmn commented Dec 6, 2023

We do want to support an official Vite plugin, but we want it to support "complex use cases like SSR" as well. This is important to us as many Vite projects like Remix, Qwik, Astro or the upcoming Solid-Start won't ship some components to the browser at all. Even in development.

We want our Vite plugin to work for these scenarios.

Perhaps our Rollup plugin can be enhanced to work in the simpler case with Vite as well?

@nmn nmn added the enhancement New feature or request label Dec 6, 2023
@nonzzz
Copy link
Contributor

nonzzz commented Dec 6, 2023

@nmn I'm interested in this. I can create a pull request until the test case be passed in my local.

@JakeSaterlay
Copy link

So does this mean I can't spin up a project using Vite, and start using this simply straight away?

@HorusGoul
Copy link

HorusGoul commented Dec 8, 2023

@JakeSaterlay

Depends on the complexity of the setup you're using, for example, my unofficial plugin doesn't support Astro or Qwik yet, but it works with a basic create vite app that uses React (SPA) or even Remix using the unstable vite template.

@predaytor
Copy link

predaytor commented Dec 8, 2023

@HorusGoul, I am currently experimenting with vite-plugin-stylex using Remix. But it seems that including import 'virtual:stylex.css' in root.tsx causes some problems.

In dev mode there is a duplication of styles with built-in styles from vite.
Знімок екрана 2023-12-08 о 13 10 52

In the production build, the <head> contains only one style reference (root-I-XxiNSD.css) but no stylex reference (stylex.cdf3995e.css).
Знімок екрана 2023-12-08 о 13 10 12

> vite build && vite build --ssr

vite v5.0.6 building for production...

  ⚠️  Remix support for Vite is unstable
     and not recommended for production

✓ 70 modules transformed.
public/build/.vite/manifest.json                0.89 kB │ gzip:  0.27 kB
public/build/assets/root-I-XxiNSD.css           0.45 kB │ gzip:  0.28 kB
public/build/assets/stylex.cdf3995e.css         2.84 kB │ gzip:  1.18 kB
public/build/assets/root-VHjyehqh.js            1.37 kB │ gzip:  0.81 kB
public/build/assets/jsx-runtime-NroC4D4D.js     8.09 kB │ gzip:  3.05 kB
public/build/assets/entry.client-Zz46Ypws.js    9.51 kB │ gzip:  3.73 kB
public/build/assets/_index-VynOg2Ww.js         11.95 kB │ gzip:  4.49 kB
public/build/assets/components-WD7OCPmZ.js    211.54 kB │ gzip: 68.46 kB
✓ built in 650ms
vite v5.0.6 building SSR bundle for production...

  ⚠️  Remix support for Vite is unstable
     and not recommended for production

1:07:08 PM [vite] page reload virtual:stylex.css
1:07:08 PM [vite] page reload virtual:stylex.css (x2)
1:07:08 PM [vite] page reload virtual:stylex.css (x3)
✓ 14 modules transformed.
1:07:08 PM [vite] page reload virtual:stylex.css
1:07:08 PM [vite] page reload virtual:stylex.css (x2)
build/.vite/manifest.json                         0.18 kB
build/assets/_virtual_server-entry-Whtg1KgZ.css   0.47 kB
build/assets/stylex.cdf3995e.css                  2.84 kB
build/index.js                                   12.16 kB
✓ built in 171ms

@nmn
Copy link
Contributor

nmn commented Dec 9, 2023

I worked with a team member from Qwik.js and have a Vite plugin working with it.
The code is a bit messy, but it all works. Probably worth trying to port over the same plugin and trying to make it work with Remix as well.

https://github.com/nmn/qwik-stylex

Important things to note:

  • vite.config.mjs
  • vite-stylex-plugin/index.mjs
  • root.tsx contains import "virtual:stylex.css"; which is required.

@nmn
Copy link
Contributor

nmn commented Dec 9, 2023

On my end, I'm going to try and it make it work with SvelteKit.

@nonzzz
Copy link
Contributor

nonzzz commented Dec 12, 2023

Any upates. I created a repo to record the progress of the vite plugin.

https://github.com/nonzzz/vite-plugin-stylex

CheckList

  • Add remix and qwik demo
  • unit test case
  • Make logic better

It's work well for those demo. But i can't balance some designs like should we need fileName option? AFAK. vite can already handle css internally. So we only set a virtual module for eacth entry is enough.
And then in production mode we only update the renderChunk vite will collect all of styles and do the rest.

@nmn

@nmn
Copy link
Contributor

nmn commented Dec 12, 2023

I have a Vite plugin that's working with Qwik and Svelte on my end that doesn't rely on renderChunk etc. I worked on people from the Qwik team and got it to work. It worked in Svelte without many tweaks.

https://github.com/nmn/sveltekit-stylex

It shouldn't need a fileName arg IMO.

@predaytor
Copy link

@nmn, is there any time frame when we can expect an official adapter for Vite? Thx

@nmn
Copy link
Contributor

nmn commented Dec 12, 2023

@predaytor You're welcome to use the one from https://github.com/nmn/sveltekit-stylex if you want. Other than that, I don't have any timelines for you. When I feel confident in an implementation, we will add it to the repo. Don't let stop you from using it in the meantime.

@berkgulmus
Copy link

Anyone interested in using StyleX in Vue3? I've tried @HorusGoul 's vite plugin and although it compiles without error, I couldn't get it to work. Are there gonna be official support for all major frameworks in the future?

@nonzzz
Copy link
Contributor

nonzzz commented Dec 14, 2023

@berkgulmus see #154 . I have implemented a version and am currently preparing unit tests and e2e tests.

@I-NOZex
Copy link

I-NOZex commented Dec 19, 2023

NUXT 3 + Vite usage example: https://stackblitz.com/edit/nuxt-3-vite-stylex
Vue 3 + Vite usage example: https://stackblitz.com/edit/vue-3-vite-stylex

btw, as inspired by this finding: https://github.com/JakeSaterlay/stylex-playground/blob/main/vite.config.ts
seems that using the @stylexjs/rollup-plugin as a vite plugin works just fine, even in ssr! (at least with NUXT3)

@pravintargaryen
Copy link

@HorusGoul's solution works for vite

@MentorAliu
Copy link

MentorAliu commented Dec 29, 2023

@HorusGoul solution works, rollup-plugin however throws the Unexpected token on Vite

@nmn
Copy link
Contributor

nmn commented Dec 29, 2023

I haven't had time to look at the implementation of the Vite plugin by @HorusGoul but people have been generally happy with it.

Once we verify that it works in all the scenarios we care about, we can start recommending it officially. The community can do a better job at this than us trying to understand the idiosyncrasies of each bundler!

@zaydek
Copy link

zaydek commented Dec 29, 2023

I tried @HorusGoul's vite-plugin-stylex version and it didn't work for me in production, only development (missing styles, tried about a week ago). I've been using @nonzzz's vite-plugin-stylex-dev since and it hasn't given me any problems. Sometimes the app appears before the styles are ready but if I reload it works. I haven't had any issues with it working in production.

I'm sure this comment won't be relevant long term but it's worth stating that if Stylex doesn't work with one plugin doesn't mean that it doesn't work in general. Like @nmn said, bundlers and dev servers are very idiosyncratic said so just try a few. I'm sure they'll all converge on working solutions anyway.

@movahhedi
Copy link

@zaydek I've experienced it too. I figured it's because it doesn't set the path correctly in the HTML. Check vite-plugin-stylex#28

@nmn
Copy link
Contributor

nmn commented Dec 30, 2023

@zaydek @movahhedi Did you try the using the plugin as written in the Qwik and Svelte examples I shared above?

I don't want to publish an official package until I can verify that this approach works in a wide range scenarios. Vite is so popular that it is used in many different ways. However, since the approach works in Qwik which has many of the same characteristics as RSCs I'm hopeful it can work in most cases.

@edamascus
Copy link

I used vite-plugin-stylex v0.4.1 with a React spa project with Vite and it worked successfully in dev and production.

However, since I updated StyleX to v0.4.1, I am getting the following error: Uncaught TypeError: stylex.inject is not a function, not sure if this is related to the plugin or to something else with the new package. I have tried the same setup on a new project from scratch but it also failed. I also tried clearing Vite cache.

Trying to use the official @stylexjs/babel-plugin and @stylexjs/rollup-plugin without vite-plugin-stylex did not work from the beginning.

@zaydek
Copy link

zaydek commented Dec 30, 2023

@zaydek @movahhedi Did you try the using the plugin as written in the Qwik and Svelte examples I shared above?

I don't want to publish an official package until I can verify that this approach works in a wide range scenarios. Vite is so popular that it is used in many different ways. However, since the approach works in Qwik which has many of the same characteristics as RSCs I'm hopeful it can work in most cases.

@nmn Is your Vite plugin implementation published to NPM, even as a beta or alpha release? You can release the version namespaced with alpha or beta or canary if you like. I'd be happy to give feedback on that. I'm just using React (CSR style) but I am using Vite.

Alternatively do you have a React example I should install from GitHub instead?

@nonzzz
Copy link
Contributor

nonzzz commented Dec 30, 2023

used vite-plugin-stylex v0.4.1 with a React spa project with Vite and it worked successfully in dev and production.

However, since I updated StyleX to v0.4.1, I am getting the following error: Uncaught TypeError: stylex.inject is not a function, not sure if this is related to the plugin or to something else with the new package. I have tried the same setup on a new project from scratch but it also failed. I also tried clearing Vite cache.

Trying to use the official @stylexjs/babel-plugin and @stylexjs/rollup-plugin without vite-plugin-stylex did not work from the beginning.

I think maybe esm cause it.I am currently looking for a better way to balance between multiple frameworks

@nonzzz
Copy link
Contributor

nonzzz commented Dec 30, 2023

I will test esm after this weekend.

@zaydek
Copy link

zaydek commented Dec 30, 2023

I will test esm after this weekend.

Just wanted to say thanks. Your plugin has been working nearly perfectly for me.

@nmn
Copy link
Contributor

nmn commented Dec 31, 2023

Is your Vite plugin implementation published to NPM, even as a beta or alpha release?

Not yet. I'm testing a few more frameworks before I do this.

Alternatively do you have a React example I should install from GitHub instead?

I don't have a React example, you should be able to copy the setup from the Qwik example to try it with a React app.

@zaydek
Copy link

zaydek commented Jan 2, 2024

Is your Vite plugin implementation published to NPM, even as a beta or alpha release?

Not yet. I'm testing a few more frameworks before I do this.

Alternatively do you have a React example I should install from GitHub instead?

I don't have a React example, you should be able to copy the setup from the Qwik example to try it with a React app.

Yes, can try once I start a project tabula rasa that uses Stylex.

@nonzzz
Copy link
Contributor

nonzzz commented Jan 7, 2024

@zaydek A friendly ping i release v0.2.1 for my plugin. In this version i support path alias and convert most of hmr scenes and upgrate stylexjs deps. I will verify astro and SvelteKit soon

@zaydek
Copy link

zaydek commented Jan 11, 2024

Is your Vite plugin implementation published to NPM, even as a beta or alpha release?

Not yet. I'm testing a few more frameworks before I do this.

Alternatively do you have a React example I should install from GitHub instead?

I don't have a React example, you should be able to copy the setup from the Qwik example to try it with a React app.

@nmn I tried to create a repro using React based on the Qwik directory you shared but I crashed and burned pretty quickly. Here is the rerpo repo: https://github.com/zaydek/experimental-vite-stylex-official. It's very possible I did something wrong but I tried to take the Qwik code base and just make the necesarry changes to React, nothing else.

Screenshot 2024-01-11 at 4 24 11 AM
zaydek@Zaydeks-MacBook-Pro experimental-vite-stylex-official % npx vite dev
Re-optimizing dependencies because lockfile has changed

  VITE v5.0.11  ready in 278 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  Inspect: http://localhost:5173/__inspect/
  ➜  press h + enter to show help
4:23:10 AM [vite] hmr update /src/App.tsx
✘ [ERROR] Could not resolve "./StyleXSheet"

    node_modules/@stylexjs/stylex/lib/es/stylex-inject.mjs:1:27:
      1 │ import { styleSheet } from './StyleXSheet';
        ╵                            ~~~~~~~~~~~~~~~

4:23:10 AM [vite] error while updating dependencies:
Error: Build failed with 1 error:
node_modules/@stylexjs/stylex/lib/es/stylex-inject.mjs:1:27: ERROR: Could not resolve "./StyleXSheet"
    at failureErrorWithLog (/Users/zaydek/Code/__corpo/experimental-vite-stylex-official/node_modules/esbuild/lib/main.js:1651:15)
    at /Users/zaydek/Code/__corpo/experimental-vite-stylex-official/node_modules/esbuild/lib/main.js:1059:25
    at /Users/zaydek/Code/__corpo/experimental-vite-stylex-official/node_modules/esbuild/lib/main.js:1527:9
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

@zaydek
Copy link

zaydek commented Jan 11, 2024

@zaydek A friendly ping i release v0.2.1 for my plugin. In this version i support path alias and convert most of hmr scenes and upgrate stylexjs deps. I will verify astro and SvelteKit soon

@nonzzz Thank you! Still no problems. I've been succesfully ship two project so far using Stylex and vite-plugin-stylex-dev.

I think you may have fixed the problem where the stylesheet doesn't load initially (seems to happen once when I start working on a project, then goes away indefinitely) because I can't reproduce it anymore.

@nmn
Copy link
Contributor

nmn commented Jan 12, 2024

Oh. Ok. This is interesting. Will look into it. This is a bug with the ESM export from StyleX where it's refusing to respect imports without file extensions.

@nmn
Copy link
Contributor

nmn commented Jan 13, 2024

@zaydek Can you check if v0.5.0-alpha.3 fixes this problem?

See #346 for the change made.

@zaydek
Copy link

zaydek commented Jan 13, 2024

@zaydek Can you check if v0.5.0-alpha.3 fixes this problem?

See #346 for the change made.

Thanks OK. @nmn few observations:

When upgrading all Stylex-related packages to v0.5.0-alpha.3 and building in dev mode, I first see this error:

Screenshot 2024-01-12 at 4 46 23 PM

Packages upgraded in question:

"@stylexjs/stylex": "^0.5.0-alpha.3",
"@stylexjs/babel-plugin": "^0.5.0-alpha.3",
"@stylexjs/eslint-plugin": "^0.5.0-alpha.3",

(I also made sure to remove node_modules and package-lock.json and do a fresh install to make sure there's no dependency caching.)

So I went into the src/vite-stylex-plugin file and exclusively commented out these lines:

//// import { babelPluginTailwindToStylex } from "tailwind-to-stylex";
...
          //// babelPluginTailwindToStylex(),

One I did that both npx vite dev and npx vite build && npx vite preview (production mode) started working. There was one thing I noticed in the production console logs:

Screenshot 2024-01-12 at 4 47 04 PM

You can ignore the locator stuff that's a Chrome plugin. To sanity check I opened it in Incognito mode and I see the same error. And if I click on where virtual:stylex.css:1 links to in the console I see this:

Screenshot 2024-01-12 at 4 51 41 PM

So it looks like it's very close to working without caveats, the naunces being the Tailwind thing (which doesn't seem necesarry for this plugin) and the superfluous console error which doesn't prevent the styles from being applied.

Let me know when you want me to test again. The reference repo is up to date with this comment as of now.

Here's the vite.config.ts file for reference:

import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"
import Inspect from "vite-plugin-inspect"
import tsconfigPaths from "vite-tsconfig-paths"
import styleX from "./vite-stylex-plugin/index.mjs"
import pre from "./vite-stylex-plugin/pre.mjs"

export default defineConfig(() => {
  return {
    plugins: [
      { ...pre(), enforce: "pre" },
      styleX(),
      Inspect(),
      react(),
      tsconfigPaths(),
    ],
    dev: { headers: { "Cache-Control": "public, max-age=0" } },
    preview: { headers: { "Cache-Control": "public, max-age=600" } },
  }
})

@nmn
Copy link
Contributor

nmn commented Jan 13, 2024

the naunces being the Tailwind thing (which doesn't seem necesarry for this plugin)

This has already been removed the qwik-stylex repo and moved into a separate plugin. That's unrelated to StyleX.


The virtual:stylex.css is an interesting case which works sometimes. This feels like the main issue with the Vite plugin at the moment.


You can remove the pre plugin entirely from your vite config. That is a separate plugin that allows using Tailwind by converting it to stylex. It's completely unrelated to StyleX and the Vite plugin.


One I did that both npx vite dev and npx vite build && npx vite preview (production mode) started working.

This is the main thing I needed right now, since I'm trying to make the neccessary changes to StyleX itself. Thanks for the confirmation. I will go ahead with the StyleX changes and will revisit the Vite plugin to fix the virtual:stylex.css issue.

@nonzzz
Copy link
Contributor

nonzzz commented Jan 13, 2024

the naunces being the Tailwind thing (which doesn't seem necesarry for this plugin)

This has already been removed the qwik-stylex repo and moved into a separate plugin. That's unrelated to StyleX.

The virtual:stylex.css is an interesting case which works sometimes. This feels like the main issue with the Vite plugin at the moment.

You can remove the pre plugin entirely from your vite config. That is a separate plugin that allows using Tailwind by converting it to stylex. It's completely unrelated to StyleX and the Vite plugin.

One I did that both npx vite dev and npx vite build && npx vite preview (production mode) started working.

This is the main thing I needed right now, since I'm trying to make the neccessary changes to StyleX itself. Thanks for the confirmation. I will go ahead with the StyleX changes and will revisit the Vite plugin to fix the virtual:stylex.css issue.

I think vite plugin don't need inject style logic because vite has own hmr logic so we only keep them work it's enough, The most of thing is esm package should be work fine. By the way order is unnecessary. Normally pre is alway work for parse unknown things. The above opinions represent only my own

@johnsonav1992
Copy link

johnsonav1992 commented Jan 18, 2024

I followed the instructions exactly for vite-plugin-stylex and I am still getting the error: "stylex.create should never be called. It should be compiled away."

Any reason why?

image

@HorusGoul
Copy link

@johnsonav1992 try with this import:

import * as stylex from '@stylexjs/stylex';

idk why but using the named export doesn't work with the plugin

@nmn
Copy link
Contributor

nmn commented Jan 18, 2024

@johnsonav1992

import {stylex} from is not supported. The named export was a mistake and will be removed in the next release.

Both import stylex from and import * as stylex should work though.

@johnsonav1992
Copy link

@nmn @HorusGoul Yep, that worked! I do find it odd that they aren't allowing a named export but I'm assuming it's because of stuff under the hood that doesn't allow everything to work properly. Thanks again!

@necolas
Copy link
Contributor

necolas commented Sep 8, 2024

@nmn Let's close this old issue. I don't think we'll develop or maintain more bundler plugins

@movahhedi
Copy link

Vite is already the go-to for many.

It's sad that we can't use Stylex.

Webpack is like WordPress: old, boring, but widespread.

@necolas
Copy link
Contributor

necolas commented Sep 8, 2024

This thread is full of options to use stylex with vite. The plugin just won't be maintained out of this repo, and anyone who is experienced with developing vite plugins can integrate the stylex transform

@nmn
Copy link
Contributor

nmn commented Sep 9, 2024

Closing this issue for now as the recommendation is to use one of the two community Vite plugins.

We might work on a Vite plugin eventually, but we have higher priority tasks to tackle in the short and medium term.

@nmn nmn closed this as completed Sep 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests