my-winder

library1.1.7jsnpmunverified

my-winder is a zero-dependency, runtime CSS-in-JS library that applies utility-first styles directly via inline `element.style` properties, eliminating the need for a build step or stylesheet generation. Version 1.1.7 is the current stable release, with no active maintenance cadence documented. Unlike Tailwind or other utility-first frameworks, my-winder operates entirely at runtime with no build step, using a `my-` prefixed class convention to map to CSS properties. It supports automatic MutationObserver-based re-scanning for dynamically added classes. Key differentiators: no build tooling, zero dependencies, works in browser and with shadow DOM, and supports CDN usage via esm.sh.

testing

npm install my-winder

package ↗

INSTALL

IMPORT

SIG · MY-WINDER

my-winder

testingjavascriptv1.1.7

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

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

applyMyStyles

✓ import { applyMyStyles } from 'my-winder'

✗ const applyMyStyles = require('my-winder')

my-winder is ESM-only; `require()` will fail. Use the named import from the main entry point.

auto-initialize (side effect import)

✓ import 'my-winder/auto'

✗ import { auto } from 'my-winder'

The auto-initialization is a separate entry point that must be imported as a side-effect. There is no named export `auto` from the main package.

applyMyStyles (CDN)

✓ import { applyMyStyles } from 'https://esm.sh/my-winder@1.1.7'

✗ import { applyMyStyles } from 'https://cdn.jsdelivr.net/npm/my-winder@1.1.7'

CDN usage is supported via esm.sh; other CDNs may not work correctly. The auto-init CDN path is `https://esm.sh/my-winder@1.1.7/auto`.

Creates an HTML page with a styled div using my-winder utility classes and applies styles via applyMyStyles().

<!DOCTYPE html> <html> <head></head> <body> <div class="my-bg-22c55e my-text-white my-p-24 my-rounded-8 my-fw-700 my-f-20"> Hello, my-winder 🍵 </div> <script type="module"> import { applyMyStyles } from "https://esm.sh/my-winder@1.1.7"; applyMyStyles(); </script> </body> </html>

Debug

Known issues

gotchaThe `my-` prefix is hardcoded and cannot be customized. If your project uses similar prefixes for other purposes, name collisions may occur.

fix

Ensure no other libraries or custom code use `my-` prefixed classes to avoid unintended styling.

affects: *

gotchaStyles are applied as inline styles via `element.style`, which has higher specificity than most selectors. This may override existing CSS in unexpected ways.

fix

Design your CSS cascade accordingly, or avoid combining my-winder classes with other inline styles on the same elements.

affects: *

gotchaThe `applyMyStyles()` function only scans the document once and then observes for mutations. If you call it multiple times on the same root, it will create multiple MutationObservers, potentially causing performance issues.

fix

Call `applyMyStyles()` only once per root. Use the returned observer to disconnect if needed.

affects: *

gotchaThe package has no TypeScript type declarations. Using it in a TypeScript project may require manual type definitions.

fix

Create a `.d.ts` file or use `// @ts-ignore` for the import.

affects: *

Errors

Common errors & fixes

Error [ERR_REQUIRE_ESM]: require() of ES Module /path/to/my-winder/index.js from /path/to/your/file.js not supported.

Using CommonJS `require()` to import an ESM-only package.

fix

Switch to `import { applyMyStyles } from 'my-winder';` in an ES module context (use `"type": "module"` in package.json or `.mjs` extension).

Uncaught TypeError: applyMyStyles is not a function

Importing the auto-init entry point but expecting a named export, or incorrect import path.

fix

If you want auto-init, use `import 'my-winder/auto';` (no curly braces). If you want the function, use `import { applyMyStyles } from 'my-winder';`.

Upgrade

Version history

1.1.7latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

6 hits · last 30 days

node

Resources

packagemy-winder ↗