vanilla-extract-css/vanilla-extract

Rollup plugin does not allow post processing css

Open

#904 opened on Nov 4, 2022

View on GitHub
 (0 comments) (13 reactions) (0 assignees)TypeScript (8,658 stars) (231 forks)batch import
help wanted

Description

Describe the bug

Summary

The @vanilla-extract/rollup-plugin does not allow post-processing the emitted css files with additional plugins. This means there is no way to apply plugins/loaders like autoprefixer, postcss, etc to the vanilla extract css files.

Reason I'm not sure, but I believe the reason is because @vanilla-extract/rollup-plugin is not providing the emitted file info to rollup so that it can be passed to subsequent plugins. My reason for believing this is that if I place a custom plugin after vanilla extract that will console log all of the files being processed, it includes other css files, but not the ones created by vanilla extract.

Other Plugins I verified that the plugins for both webpack and vite do work correctly, in that I am able to post-process the css with other plugins/loaders. (Related)

I haven't looked super closely, but it's interesting the the vite plugin works, since I would imagine the vite plugin should be very similar to the rollup plugin (given vite is built on rollup).

Repro Anyway, the following repo show the different behaviors between the different plugins.

In my case, I am wanting to have the css files injected from JS (I know, I know, but I have my reasons).

To run them, you can git clone, npm install, and npm run build. Then, you can check the dist folder to see the difference between the vanilla extract css (it's not injected) and the "normal" css modules (which are injected).

GitHub Repos Rollup: https://github.com/jessethomson/vanilla-extract-rollup <-- Does not work Vite: https://github.com/jessethomson/vanilla-extract-vite <-- Works Webpack: https://github.com/jessethomson/vanilla-extract-webpack <-- Works

Related Links

Reproduction

https://github.com/jessethomson/vanilla-extract-rollup

System Info

System:
    OS: macOS 12.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 24.40 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
    npm: 8.19.2 - ~/.nvm/versions/node/v16.14.2/bin/npm
  Browsers:
    Chrome: 107.0.5304.87
    Firefox: 105.0.1
    Safari: 16.1
  npmPackages:
    @vanilla-extract/css: ^1.9.1 => 1.9.1 
    @vanilla-extract/rollup-plugin: ^1.2.0 => 1.2.0 
    rollup: ^2.79.1 => 2.79.1

Used Package Manager

npm

Logs

No response

Validations

Contributor guide

Tech stack
typescriptnodejscss
Domain
build systemtooling
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Node.jsRollup plugin systemvanilla extract basics
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
45
Research direction
Investigate the @vanilla extract/rollup plugin source code to understand how CSS files are emitted. Compare with the Vite plugin implementation (which works) to identify why Rollup does not forward emitted files to subsequent plugins. Look at the related issue https://github.com/vanilla extract css/vanilla extract/issues/488 and discussion for context. The goal is to ensure that the Rollup plugin provides emitted file info so that plugins like autoprefixer can process the CSS.