chai-winder

library1.0.9jsnpmunverified

chai-wind is a utility-first CSS-in-JS library designed exclusively for browser environments, focusing on a zero-dependency, no-build-step approach to styling. It allows developers to apply inline CSS styles to HTML elements by using `chai-` prefixed class names, such as `chai-bg-22c55e` or `chai-f-20`. The library operates by scanning the DOM for these special class names upon `DOMContentLoaded` and converting them directly into `element.style` properties. Currently at version `1.0.9`, it appears to be in an active development phase, though specific release cadence isn't detailed. Its primary differentiator is the complete eschewal of traditional CSS files, build tools, and bundlers, making it highly suitable for quick prototyping or projects where a minimal setup is paramount.

web-framework serialization

npm install chai-winder

package ↗

INSTALL

IMPORT

SIG · CHAI-WINDER

chai-winder

web-frameworkjavascriptv1.0.9

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

applyChaiStyles

✓ import { applyChaiStyles } from 'chai-wind'

✗ const { applyChaiStyles } = require('chai-wind')

chai-wind is an ES Module. Use `import` syntax in a script tag with `type="module"` or in an ES Module-compatible bundler setup.

This quickstart demonstrates how to include chai-wind directly in an HTML file using an ESM import and apply basic utility styles to elements.

<!DOCTYPE html> <html> <head> <title>Chai-Wind Quickstart</title> <style> body { font-family: sans-serif; margin: 2rem; } </style> </head> <body> <div class="chai-bg-22c55e chai-text-white chai-p-24 chai-rounded-8 chai-fw-700 chai-f-20"> Hello, chai-wind 🍵 </div> <p class="chai-text-orange chai-f-16 chai-dp-flex chai-mt-16"> This paragraph has some inline styles applied via chai-wind classes. </p> <script type="module"> import { applyChaiStyles } from "https://esm.sh/chai-winder@1.0.9"; // For local development, you'd use: import { applyChaiStyles } from './node_modules/chai-wind/index.js'; // Call applyChaiStyles to convert `chai-` prefixed classes to inline styles. // This function automatically waits for the DOMContentLoaded event. applyChaiStyles(); </script> </body> </html>

Debug

Known issues

gotchachai-wind applies styles directly to `element.style`, which has the highest CSS specificity. This means traditional CSS stylesheets will be overridden by `chai-wind` unless `!important` is used in external CSS, which is generally discouraged.

fix

Be aware of CSS specificity. For critical overrides, use `!important` in your external stylesheet or consider if `chai-wind` is the right tool for scenarios requiring complex cascading.

affects: >=1.0.0

gotchaAs a client-side JavaScript utility that manipulates the DOM, chai-wind does not support Server-Side Rendering (SSR). Initial server-rendered content will appear unstyled until the JavaScript executes in the browser.

fix

If SSR is required, chai-wind is not a suitable solution. Consider server-compatible CSS-in-JS libraries or traditional CSS approaches.

affects: >=1.0.0

gotchaFor pages with a very large number of elements utilizing `chai-` classes, querying and manipulating the DOM for each element during `DOMContentLoaded` might introduce a measurable performance overhead, causing a brief flash of unstyled content.

fix

Profile performance on large pages. If FOUC (Flash of Unstyled Content) or initial load performance is an issue, consider traditional CSS or a more optimized styling solution.

affects: >=1.0.0

breakingThe library is designed for ES Modules. Attempting to use CommonJS `require()` syntax will result in runtime errors as the package does not provide a CommonJS entry point.

fix

Always use `import` syntax: `import { applyChaiStyles } from 'chai-wind';`. Ensure your environment supports ES Modules (e.g., `<script type="module">` in browsers or Node.js with module support).

affects: >=1.0.0

Errors

Common errors & fixes

Uncaught TypeError: require is not a function

Attempting to use CommonJS `require()` syntax (`const chai = require('chai-wind');`) in an ES Module context or directly in a browser without a bundler.

fix

Use ES Module `import` syntax: `import { applyChaiStyles } from 'chai-wind';` and ensure your script tag has `type="module"` or your build setup supports ESM.

Styles are not applied to elements with `chai-` classes.

`applyChaiStyles()` was not called, or there might be an issue with script loading order preventing its execution.

fix

Ensure `applyChaiStyles()` is called once in your script. Although it uses `DOMContentLoaded`, verify your script loads correctly and executes. Place the `<script type="module">` tag at the end of the `<body>`.

My custom CSS is not working; `chai-wind` styles are always winning.

`chai-wind` applies styles as inline `element.style` properties, which have the highest specificity in CSS and will override almost any other style rule.

fix

Understand that inline styles take precedence. If you absolutely need to override `chai-wind` with external CSS, you might have to use `!important` in your external stylesheet. Alternatively, re-evaluate if `chai-wind` is the most appropriate styling solution for parts of your UI requiring complex cascading or fine-grained style control.

Upgrade

Version history

1.0.9latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

13 hits · last 30 days

node

OpenAI (training)

Resources

packagehttps://www.npmjs.com/package/chai-winder ↗