NibCSS

Astro, Solid, Qwik, Remix

Frameworks without dedicated bindings: add the bundler plugin, start the runtime, and everything else is the attribute you already know.

2 min readv1

NibCSS needs two things from any framework: a build step that can run a plugin, and a place to start the runtime. Every framework below has both, so none of them needs its own package — @nibcss/unplugin plus @nibcss/runtime is the whole integration.

JavaScript
// astro.config.mjs
import { defineConfig } from "astro/config";
import nib from "@nibcss/unplugin/vite";

export default defineConfig({
    vite: { plugins: [nib()] },
});
ASTRO
---
import "@nibcss/styles.css";
---
<html>
  <head>
    <script>
      import config from "@nibcss/config";
      import { init } from "@nibcss/runtime";
      init(config);
    </script>
  </head>
  <body nib="m=0; ftf=system-ui">
    <h1 nib="fts=32px; ftw=800">Hello</h1>
  </body>
</html>

Static nib attributes in .astro files are compiled at build time, so a fully static page needs no client script at all — add the init call only when an island assembles values at run time.

The general recipe for any framework#

  1. Add the plugin for whichever bundler it uses — @nibcss/unplugin/{vite,webpack,rspack,rollup,esbuild}.
  2. Import the stylesheet once, as early as possible: import "@nibcss/styles.css".
  3. Start one runtime with the published config: init(config) from @nibcss/runtime, or the framework binding if one exists.
  4. Write nib attributes. Static ones are compiled; computed ones go through runtime.classesFor(...).

No build step at all? Use the CLI or the CDN tag — same config, same output.

Next steps#