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

feat: integration callbacks #942

Open
wants to merge 13 commits into
base: master
Choose a base branch
from

Conversation

astahmer
Copy link

@astahmer astahmer commented Dec 9, 2022

hey, I made a vite plugin that allows purging any unused style generated by vanilla-extract/sprinkles

https://twitter.com/astahmer_dev/status/1601244606133567488

it needs some minor changes (mostly onEvaluated+serializeVanillaModule callbacks for the integration package + forceEmitCssInSsrBuild option for the vite plugin)

this PR adds:

  • a onEvaluated callback to packages/integration/src/processVanillaFile.ts (very similar to what was proposed here)
  • a serializeVanillaModule callback to packages/integration/src/processVanillaFile.ts, pretty much like the current serializeVirtualCssPath callback, it allows customizing the behaviour
  • integrates the HMR fix from this PR
  • exports the default implementation of serializeVanillaModule
  • makes changes to the plugins integration (vite/webpack/esbuild/rollup) by allowing to pass those new callbacks to the
    processVanillaFile call
  • exports the ProcessVanillaFileOptions & SprinklesProperties type
  • creates an AdapterContext (which is just a reference to the result of the adapter after the evalCode of processVanillaFile so anyone can retrieve the generated class names / CSS rules by file scopes
  • allows customizing the forceEmitCssInSsrBuild option for the vite plugin (needed to make the HMR work with vite-plugin-ssr), would probably allow removing the hard-coded checks (['astro:build', 'solid-start-server', 'vite-plugin-qwik'].includes())
  • fix: using raw .css.ts from another package than config.root (monorepo/linked dependencies)
  • fix: perf improvement by removing a big regex, especially when used on node_modules filePath

let me know if there's any questions or things you'd like to see

@changeset-bot
Copy link

changeset-bot bot commented Dec 9, 2022

🦋 Changeset detected

Latest commit: dab0f25

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 13 packages
Name Type
@vanilla-extract/esbuild-plugin Minor
@vanilla-extract/rollup-plugin Minor
@vanilla-extract/sprinkles Minor
@vanilla-extract/vite-plugin Minor
@vanilla-extract/css Patch
@vanilla-extract/integration Minor
@fixtures/sprinkles Patch
@fixtures/features Patch
@fixtures/low-level Patch
@fixtures/recipes Patch
@fixtures/themed Patch
@fixtures/unused-modules Patch
vanilla-extract-example-webpack-react Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

astahmer added a commit to astahmer/box-extractor that referenced this pull request Dec 20, 2022
vanilla-extract-css/vanilla-extract#942
& inline ve/vite-plugin (since it's not working with the tgz, no idea why)
@endigma
Copy link
Contributor

endigma commented Dec 21, 2022

You should add a changeset, it will likely be brought up when maintainers get to this so having it done beforehand is best.

@tbrowang
Copy link

news about this ?

@astahmer
Copy link
Author

news about this ?

hey ! i'll try to summarize from my side:

  • I gave up this approach because of the current VE limitations / lack of news from maintainers
    so I ended up removing the code related to that PR from my repo
  • then I went with another approach, named vanilla-wind, (here in the code), details on twitter here, where I'd basically use VE (only the core, I kind of made my own sprinkles) internally but didnt require it explicitly, meaning: no .css.ts limitations, still fully compile-time (even more since I only generate the used styles), still typesafe, with arbitrary values, nested conditions & dynamically applicable selectors

but that approach still relied on tranforming the src code to replace it with the generated class names, meaning an extra integration should be made in each bundler (vite, esbuild, webpack, etc etc). I thought of unplugin but it doesn't support everything yet, ex: nested plugins (which I relied upon a lot)

still, even though it was a nice PoC of the static extraction box-extractor could provide, it was kind of buggy and I was getting bored of spending most of my time trying to fix HMR on every env possible: client rendering, SSR and 0 JS on different frameworks (just vite, vite-plugin-ssr, rakkas.. and this was only using vite, now imagine if I had to do that with webpack etc..) rather than working on the actual features.. generally having transforms makes HMR quite hard to get right (caching/invalidating/reloading which modules..)

then I received a message from a maintainer of well-known organization and I've been working these past weeks on a similar solution than vanilla-wind, which I'll deprecate/remove once the new project gets publicly released

tl;dr: I think it still could be of use to some people but not to me at this point so feel free to close this PR

@neolectron
Copy link

Sad ending then.
No progress towards the optimized version of vanilla extract where unused styles aren't a thing anymore.

Thank you for the updates, I hope maintainers are OK since they do not respond much :| .

Can't wait to test your vanilla-wind v2.

@astahmer
Copy link
Author

FWIW, Panda CSS is the new project that I was working on and that became public in the last days

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants