{"id":45500,"library":"my-winder","title":"my-winder","description":"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.","status":"active","version":"1.1.7","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","css","utility","runtime","styling","tailwind","utility-css","atomic-css"],"install":[{"cmd":"npm install my-winder","lang":"bash","label":"npm"},{"cmd":"yarn add my-winder","lang":"bash","label":"yarn"},{"cmd":"pnpm add my-winder","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"my-winder is ESM-only; `require()` will fail. Use the named import from the main entry point.","wrong":"const applyMyStyles = require('my-winder')","symbol":"applyMyStyles","correct":"import { applyMyStyles } from 'my-winder'"},{"note":"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.","wrong":"import { auto } from 'my-winder'","symbol":"auto-initialize (side effect import)","correct":"import 'my-winder/auto'"},{"note":"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`.","wrong":"import { applyMyStyles } from 'https://cdn.jsdelivr.net/npm/my-winder@1.1.7'","symbol":"applyMyStyles (CDN)","correct":"import { applyMyStyles } from 'https://esm.sh/my-winder@1.1.7'"}],"quickstart":{"code":"\n\n\n\n \n Hello, my-winder 🍵\n
\n\n \n\n","lang":"javascript","description":"Creates an HTML page with a styled div using my-winder utility classes and applies styles via applyMyStyles()."},"warnings":[{"fix":"Ensure no other libraries or custom code use `my-` prefixed classes to avoid unintended styling.","message":"The `my-` prefix is hardcoded and cannot be customized. If your project uses similar prefixes for other purposes, name collisions may occur.","severity":"gotcha","affected_versions":"*"},{"fix":"Design your CSS cascade accordingly, or avoid combining my-winder classes with other inline styles on the same elements.","message":"Styles are applied as inline styles via `element.style`, which has higher specificity than most selectors. This may override existing CSS in unexpected ways.","severity":"gotcha","affected_versions":"*"},{"fix":"Call `applyMyStyles()` only once per root. Use the returned observer to disconnect if needed.","message":"The `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.","severity":"gotcha","affected_versions":"*"},{"fix":"Create a `.d.ts` file or use `// @ts-ignore` for the import.","message":"The package has no TypeScript type declarations. Using it in a TypeScript project may require manual type definitions.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"search_vec":"'1.1.7':40 'activ':48 'ad':93 'appli':19 'atom':125 'atomic-css':124 'automat':84 'base':87 'browser':104 'build':34,69,98 'cadenc':50 'cdn':111 'class':75,94 'convent':76 'css':14,80,116,123,126 'css-in-j':13 'current':43 'depend':11,101 'differenti':96 'direct':24 'document':51 'dom':108 'dynam':92 'element.style':27 'elimin':29 'entir':64 'esm.sh':114 'first':22,58 'framework':59 'generat':38 'inlin':26 'javascript':115 'js':16 'key':95 'librari':17 'mainten':49 'map':78 'mutationobserv':86 'mutationobserver-bas':85 'my-wind':1,4,60 'need':31 'oper':63 'prefix':74 'properti':28,81 're':89 're-scan':88 'releas':45 'runtim':12,66,118 'scan':90 'shadow':107 'stabl':44 'step':35,70 'style':23,119 'stylesheet':37 'support':83,110 'tailwind':53,120 'tool':99 'unlik':52 'usag':112 'use':71 'util':21,57,117,122 'utility-css':121 'utility-first':20,56 'version':39 'via':25,113 'winder':3,6,62 'work':102 'zero':10,100 'zero-depend':9","created_at":"2026-06-07T12:55:19.083862+00:00","updated_at":"2026-06-07T12:55:19.083862+00:00","problems":[{"fix":"Switch to `import { applyMyStyles } from 'my-winder';` in an ES module context (use `\"type\": \"module\"` in package.json or `.mjs` extension).","cause":"Using CommonJS `require()` to import an ESM-only package.","error":"Error [ERR_REQUIRE_ESM]: require() of ES Module /path/to/my-winder/index.js from /path/to/your/file.js not supported."},{"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';`.","cause":"Importing the auto-init entry point but expecting a named export, or incorrect import path.","error":"Uncaught TypeError: applyMyStyles is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":null,"github":null,"docs":null,"changelog":null,"pypi":null,"npm":"my-winder","openapi_spec":null,"status_page":null,"smithery":null,"categories":["testing"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-07","next_check":"2026-09-05","install_tag":null}}