NibCSS

@nibcss/next & @nibcss/nuxt

The two meta-framework presets: withNib for Next.js and the Nuxt module, with every option and the files they generate.

2 min readv1

Both packages exist for the same reason: a meta-framework owns its build, so the integration should own nothing else. Each one wires the bundler plugin, the runtime and the dev-server behaviour in a single line.

@nibcss/next#

TypeScript
// next.config.ts
import { withNib } from "@nibcss/next";

export default withNib(nextConfig, {
  include: ["app/**/*.tsx", "content/**/*.md"],
  exclude: ["**/*.stories.tsx"],
  config: "config/nibcss.config.ts",
  devtools: true,
});

Option

Default

What it does

include / exclude

project sources

extra globs to scan, or skip

config

auto-detected

path to the config file

devtools

true

mount the overlay in dev (needs debug: true)

scaffold

true

false stops the preset creating the config file

rewrite is deliberately not an option — the preset owns it: attributes are kept beside the class in development and replaced in a build. Pass it anyway and the preset says so once.

What it generates#

Path

What it is

node_modules/.nib/styles.css

the stylesheet, imported as @nibcss/styles.css

node_modules/.nib/config.mjs, config.json

the resolved config

node_modules/@nibcss/config

a real package re-exporting it

node_modules/.nib/boot.mjs

the runtime entry added to the client bundle

node_modules/.nib/dev.mjs

dev only, debug: true: the overlay and the warnings

@nibcss/nuxt#

TypeScript
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ["@nibcss/nuxt"],
  nib: {
    runtime: true,
    devtools: true,
    include: ["content/**/*.md"],
    override: { debug: process.env.CI !== "true" },
  },
});

Option

Default

What it does

runtime

true

install the Vue plugin automatically

devtools

true

mount the overlay in dev (needs debug: true)

config

beside nuxt.config.ts

path to the config file

include / exclude

project sources

extra globs to scan, or skip

override

—

config fields that win over the file

scaffold

true

false stops the module creating the config file

The module adds the stylesheet to nuxt.options.css, registers the Vue plugin on both client and server, re-reads the config per render in dev, and — with darkMode: "class" — inlines the dark-mode decision at the top of <head> so a dark app never flashes white.

What it generates#

Path

What it is

node_modules/.nib/styles.css

the stylesheet, added to nuxt.options.css

node_modules/.nib/config.mjs, config.json

the resolved config

node_modules/@nibcss/config

a real package re-exporting it

.nuxt/nib-vue.mjs, nib-vue-server.mjs, nib-hot.client.mjs, nib-devtools.client.mjs

the generated plugins

Next steps#