antfu / windicss-runtime-dom

🪄 Enables Windi CSS for any site with one-line code without any build tools

Home Page:https://windicss-runtime-dom.netlify.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

windicss-runtime-dom

NPM version npm bundle size

Enables Windi CSS for any site with one-line code without any build tools - Windi CSS on the browser runtime.

<script src="https://unpkg.com/windicss-runtime-dom"></script>

And start playing!

Idea credit to @alexanderniebuhr 🙌

Prevent FOUC

To prevent FOUC (flash of unstyled content), you can update the following line to your <body> tag.

<body class="block" hidden>

Configurations

<script>
window.windicssRuntimeOptions = {
  // enabled preflight
  preflight: true,
  // scan the entire dom tree to infer the classnames on page loaded
  extractInitial: true,
  // generate mock classes for browser to do the auto-completeion 
  mockClasses: false,
  // the windi config you are used to put in `windi.config.js`
  config: {}
}
</script>
<script src="https://unpkg.com/windicss-runtime-dom"></script>

Refer to src/index.ts for more details.

Notes

This is an Experimental project what ships the Windi CSS compiler to the client-side. It utilizes MutationObserver to watch the changes for the entire dom, and injects the style to the <head>. This might have a certain impact on the client-side performance, please consider using build tools instead of this if the production performance is something you need to consider. That said, it still works great and out-of-box for the scenarios that you want to focus more on content and styling without complex setups.

And for a faster/lighter solution, you may want to check out twind/shim.

Sponsors

License

MIT License © 2021 Anthony Fu

About

🪄 Enables Windi CSS for any site with one-line code without any build tools

https://windicss-runtime-dom.netlify.app/

License:MIT License


Languages

Language:TypeScript 70.3%Language:HTML 17.3%Language:JavaScript 12.3%