Comments (8)
Can confirm that vite dev mode doesn't work. If i understand correctly it would need its own plugin, based on the existing rollup one, that on code load transforms the file, stores the CSS, and triggers a HMR update of the CSS. If that is correct, it shouldn't be too hard to implement. It's not something I have any plans to add, but a PR would be welcome.
from style9.
There is an experimental plugin in the vite branch if you want to try it.
from style9.
I can confirm this plugin works in the basic/example case.
But if I import any real CSS file besides using style9
, it fails:
14:26:19 [vite] Internal server error: /home/smoku/dev/frontend/app/src/main.css: Missing semicolon. (1:4)
> 1 | body {
| ^
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
4 | 'Droid Sans', 'Helvetica Neue', sans-serif;
Plugin: style9
File: /home/smoku/dev/frontend/app/src/main.css
1 | body {
| ^
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
from style9.
Does it work if you add exclude: '**/*.css'
to the plugin config?
from style9.
Yes siree, indeed it works!
Thanks. :D
from style9.
Sheesh…
It works fine during dev.
But I cannot make it work during production build.
Plugin generates separate file, but does not make it part of assets bundle. This means it is not getting hashed id file and is not attached to generated index.html.
I tried attaching it manually, but rollup is removing my link trying to replace it with bundled one.
from style9.
If you want the file name to be hashed you have to use the name
property instead of fileName
.
from style9.
OK.
I don't know whether this help me to make the plugin work during production build?
from style9.
Related Issues (20)
- Generate readable class names in output HOT 1
- Incompatible with ejected create-react-app HOT 2
- Atomic css rule not works when component loaded as lazy HOT 7
- selector parse error HOT 1
- Compress class names HOT 2
- Incompatible with latest version of Next.js HOT 5
- Feature request: support nested selectors HOT 1
- Next.js hot-reload not working for new styles HOT 6
- Using Next.js _document.js throws error on static export HOT 5
- Breaks with latest version of Next HOT 6
- Issue with webpack plugin on windows HOT 4
- [Feature Request] Transpile away `style9` runtime call HOT 5
- Support for advanced pseudos HOT 2
- Plugin does not work with next-contentlayer HOT 2
- Conflicts when used with Geist UI HOT 1
- Any plans to productionize a Vite plugin? HOT 1
- How to use global styles? HOT 1
- [Feature Request]: Support Vite
- Official support for CRA HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from style9.