{"_id":"@alex.radulescu/styled-static","_rev":"9-ab4a2ea953a35de955c2e8a667f0f419","name":"@alex.radulescu/styled-static","dist-tags":{"latest":"0.12.1"},"versions":{"0.2.0":{"name":"@alex.radulescu/styled-static","version":"0.2.0","keywords":["styled-components","css-in-js","vite","react","zero-runtime","static-css"],"author":{"name":"Alex Radulescu"},"license":"MIT","_id":"@alex.radulescu/styled-static@0.2.0","maintainers":[{"name":"alex.radulescu","email":"radulescu.alexandru.doru@gmail.com"}],"homepage":"https://github.com/alexradulescu/styled-static#readme","bugs":{"url":"https://github.com/alexradulescu/styled-static/issues"},"dist":{"shasum":"3464ea96d5d834e2b170b02d7a937162c02d5c23","tarball":"https://registry.npmjs.org/@alex.radulescu/styled-static/-/styled-static-0.2.0.tgz","fileCount":23,"integrity":"sha512-8rhLp5chUEImQc9BhHncd+FVi+TWsVPrnnWWWedz2yEshSzKZuT0cY71XgF25ru5jyhReUCz+2SFTaVnIWzzsw==","signatures":[{"sig":"MEQCIDyT6aZw7k+lyBpVj/c2wqJ1YuATz1TpP585oPIX0tsFAiBhy6Ew5y8MtROfb7d/Kt1kpY3rEjATWUf1boSwyXHcLw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":76813},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./vite":{"types":"./dist/vite.d.ts","import":"./dist/vite.js"},"./runtime":{"types":"./dist/runtime.d.ts","import":"./dist/runtime.js"}},"gitHead":"4bc13bc3a60017b1a803a7ac73d24f93ff8ddb0f","private":false,"scripts":{"dev":"vite","test":"vitest","build":"tsc","dev:watch":"tsc --watch","prepublishOnly":"npm run build"},"_npmUser":{"name":"alex.radulescu","email":"radulescu.alexandru.doru@gmail.com"},"repository":{"url":"git+https://github.com/alexradulescu/styled-static.git","type":"git"},"_npmVersion":"10.9.3","description":"Zero-runtime styled components for React 19+ with Vite. CSS extracted at build time.","directories":{},"_nodeVersion":"22.18.0","dependencies":{},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.0.3","acorn":"^8.15.0","react":"^19.0.0","vitest":"^2.1.8","react-dom":"^19.0.0","typescript":"^5.7.2","@types/node":"^22.10.1","@types/react":"^19.0.1","@types/react-dom":"^19.0.2","@vitejs/plugin-react":"^4.3.4"},"peerDependencies":{"vite":"^5.0.0 || ^6.0.0","react":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/styled-static_0.2.0_1765463804917_0.8325892279521783","host":"s3://npm-registry-packages-npm-production"}},"0.7.1":{"name":"@alex.radulescu/styled-static","version":"0.7.1","keywords":["styled-components","css-in-js","vite","react","zero-runtime","static-css"],"author":{"name":"Alex Radulescu"},"license":"MIT","_id":"@alex.radulescu/styled-static@0.7.1","maintainers":[{"name":"alex.radulescu","email":"radulescu.alexandru.doru@gmail.com"}],"homepage":"https://github.com/alexradulescu/styled-static#readme","bugs":{"url":"https://github.com/alexradulescu/styled-static/issues"},"dist":{"shasum":"5f0d9332b9a26328375fb3ac88a86744818946e8","tarball":"https://registry.npmjs.org/@alex.radulescu/styled-static/-/styled-static-0.7.1.tgz","fileCount":27,"integrity":"sha512-hA0uKuNVDqeoP1h5FbhSMKY67rx4ocEv7iC2pyn7hJCYJDJrw+ef7eMPqHnh0cwPNugkg6hYyVPsLnxGJvZPeA==","signatures":[{"sig":"MEQCIAROQ5FRQwFSrUe8GQluRVAPJ6rSz0Jy7T7ft+todqM8AiB32j+LYgpRwwmxSee6JnpwPMPAyFDvb4Mtc153XHQP+Q==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":119253},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./vite":{"types":"./dist/vite.d.ts","import":"./dist/vite.js"},"./runtime":{"types":"./dist/runtime/index.d.ts","import":"./dist/runtime/index.js"}},"gitHead":"10e034fdca0ffbdb28c1969c3747b919cc3fbf16","private":false,"scripts":{"dev":"vite","test":"vitest","build":"tsc -p tsconfig.build.json && bun run build:minify && bun run build:sizes","format":"prettier --write .","dev:watch":"tsc --watch","build:sizes":"bun scripts/sizes.ts","build:minify":"bun scripts/minify.ts","format:check":"prettier --check .","prepublishOnly":"npm run build"},"_npmUser":{"name":"alex.radulescu","email":"radulescu.alexandru.doru@gmail.com"},"repository":{"url":"git+https://github.com/alexradulescu/styled-static.git","type":"git"},"_npmVersion":"10.8.2","description":"Near-zero-runtime styled components for React 19+ with Vite. CSS extracted at build time, minimal runtime.","directories":{},"_nodeVersion":"20.19.6","dependencies":{},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.0.3","acorn":"^8.15.0","jsdom":"^27.3.0","react":"^19.0.0","vitest":"^2.1.8","prettier":"^3.7.4","react-dom":"^19.0.0","typescript":"^5.7.2","@types/node":"^22.10.1","@types/react":"^19.0.1","@vitest/browser":"^4.0.16","@types/react-dom":"^19.0.2","@vitest/coverage-v8":"2.1.8","@vitejs/plugin-react":"^4.3.4","@trivago/prettier-plugin-sort-imports":"^6.0.0"},"peerDependencies":{"vite":"^5.0.0 || ^6.0.0","react":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/styled-static_0.7.1_1766466817426_0.4087802105894891","host":"s3://npm-registry-packages-npm-production"}},"0.7.2":{"name":"@alex.radulescu/styled-static","version":"0.7.2","keywords":["styled-components","css-in-js","vite","react","zero-runtime","static-css"],"author":{"name":"Alex Radulescu"},"license":"MIT","_id":"@alex.radulescu/styled-static@0.7.2","maintainers":[{"name":"alex.radulescu","email":"radulescu.alexandru.doru@gmail.com"}],"homepage":"https://github.com/alexradulescu/styled-static#readme","bugs":{"url":"https://github.com/alexradulescu/styled-static/issues"},"dist":{"shasum":"e7b77a627db80b5c1b00d412b9baf0171450df28","tarball":"https://registry.npmjs.org/@alex.radulescu/styled-static/-/styled-static-0.7.2.tgz","fileCount":27,"integrity":"sha512-kAVy+fpp4hnO1l++Mv3UrdJvcFYsU/9uQDo/Dp7sK2Y/FysxYrkvpqSTF/tT/CvOEHrZx71elOzAz6Srji/x/w==","signatures":[{"sig":"MEUCIA2+kL6LtHMypLcjs6YPXiEWSxFiHjTu3qyq2K7tzEVIAiEA59+U7jCMALLwYHhs3YPsl3xV7Iz2SB3xbW420mH9vX0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":120312},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./vite":{"types":"./dist/vite.d.ts","import":"./dist/vite.js"},"./runtime":{"types":"./dist/runtime/index.d.ts","import":"./dist/runtime/index.js"}},"gitHead":"50486bdcd489c28aa4b88499bb8820ae43170a17","private":false,"scripts":{"dev":"vite","test":"vitest","build":"tsc -p tsconfig.build.json && bun run build:minify && bun run build:sizes","format":"prettier --write .","dev:watch":"tsc --watch","build:sizes":"bun scripts/sizes.ts","build:minify":"bun scripts/minify.ts","format:check":"prettier --check .","prepublishOnly":"npm run build"},"_npmUser":{"name":"alex.radulescu","email":"radulescu.alexandru.doru@gmail.com"},"repository":{"url":"git+https://github.com/alexradulescu/styled-static.git","type":"git"},"_npmVersion":"10.8.2","description":"Near-zero-runtime styled components for React 19+ with Vite. CSS extracted at build time, minimal runtime.","directories":{},"_nodeVersion":"20.19.6","dependencies":{},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.0.3","acorn":"^8.15.0","jsdom":"^27.3.0","react":"^19.0.0","vitest":"^2.1.8","prettier":"^3.7.4","react-dom":"^19.0.0","typescript":"^5.7.2","@types/node":"^22.10.1","@types/react":"^19.0.1","@vitest/browser":"^4.0.16","@types/react-dom":"^19.0.2","@vitest/coverage-v8":"2.1.8","@vitejs/plugin-react":"^4.3.4","@trivago/prettier-plugin-sort-imports":"^6.0.0"},"peerDependencies":{"vite":"^5.0.0 || ^6.0.0","react":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/styled-static_0.7.2_1766470963800_0.8472492767287905","host":"s3://npm-registry-packages-npm-production"}},"0.7.3":{"name":"@alex.radulescu/styled-static","version":"0.7.3","keywords":["styled-components","css-in-js","vite","react","zero-runtime","static-css"],"author":{"name":"Alex Radulescu"},"license":"MIT","_id":"@alex.radulescu/styled-static@0.7.3","maintainers":[{"name":"alex.radulescu","email":"radulescu.alexandru.doru@gmail.com"}],"homepage":"https://github.com/alexradulescu/styled-static#readme","bugs":{"url":"https://github.com/alexradulescu/styled-static/issues"},"dist":{"shasum":"2c58863e8847768197c4bf0a903b16414b10f4e2","tarball":"https://registry.npmjs.org/@alex.radulescu/styled-static/-/styled-static-0.7.3.tgz","fileCount":27,"integrity":"sha512-ACk+Av4TDKkjXQemf5ybGjzI0ES8ePuT1TlaiREMsfITxuCvv2wom4llmPizlK3rpNe0WY685XkRxfjtWwk/yw==","signatures":[{"sig":"MEQCIAq+iUTbGZ+S415Mvlr+wEv1MWVpyVngcCGiwy8GpdWDAiA8g88a/yGSKm6mREY0pqDKmMXn/pyRX2GFRcv4nNyp8w==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":124629},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./vite":{"types":"./dist/vite.d.ts","import":"./dist/vite.js"},"./runtime":{"types":"./dist/runtime/index.d.ts","import":"./dist/runtime/index.js"}},"gitHead":"736449616a0f7a1bc99950c9e43e2fe0e5c25652","private":false,"scripts":{"dev":"vite","test":"vitest","build":"tsc -p tsconfig.build.json && bun run build:minify && bun run build:sizes","format":"prettier --write .","dev:watch":"tsc --watch","build:sizes":"bun scripts/sizes.ts","build:minify":"bun scripts/minify.ts","format:check":"prettier --check .","prepublishOnly":"npm run build"},"_npmUser":{"name":"alex.radulescu","email":"radulescu.alexandru.doru@gmail.com"},"repository":{"url":"git+https://github.com/alexradulescu/styled-static.git","type":"git"},"_npmVersion":"10.8.2","description":"Near-zero-runtime styled components for React 19+ with Vite. CSS extracted at build time, minimal runtime.","directories":{},"_nodeVersion":"20.19.6","dependencies":{},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.0.3","acorn":"^8.15.0","jsdom":"^27.3.0","react":"^19.0.0","vitest":"^2.1.8","prettier":"^3.7.4","react-dom":"^19.0.0","typescript":"^5.7.2","@types/node":"^22.10.1","@types/react":"^19.0.1","@vitest/browser":"^4.0.16","@types/react-dom":"^19.0.2","@vitest/coverage-v8":"2.1.8","@vitejs/plugin-react":"^4.3.4","@trivago/prettier-plugin-sort-imports":"^6.0.0"},"peerDependencies":{"vite":"^5.0.0 || ^6.0.0","react":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/styled-static_0.7.3_1766547113519_0.6089822874136162","host":"s3://npm-registry-packages-npm-production"}},"0.8.0":{"name":"@alex.radulescu/styled-static","version":"0.8.0","keywords":["styled-components","css-in-js","vite","react","zero-runtime","static-css"],"author":{"name":"Alex Radulescu"},"license":"MIT","_id":"@alex.radulescu/styled-static@0.8.0","maintainers":[{"name":"alex.radulescu","email":"radulescu.alexandru.doru@gmail.com"}],"homepage":"https://github.com/alexradulescu/styled-static#readme","bugs":{"url":"https://github.com/alexradulescu/styled-static/issues"},"dist":{"shasum":"a44c6c85b655d078dbc3f9e7263536908b78be66","tarball":"https://registry.npmjs.org/@alex.radulescu/styled-static/-/styled-static-0.8.0.tgz","fileCount":27,"integrity":"sha512-rgeqU/IzVZSanR41Ba8GLtZMM/k0ehNj/o49lpPK6FsI2+ujaWOhG0fKeaUo8h2rxJ4uYxo4OK0Fto0c+Zco8g==","signatures":[{"sig":"MEQCIBJwwHUpmN1G9RTEui+xT8YmHDo1lbLQAh+3rbeCEggAAiBeAjkxeU8XyC5SHVQMLuNC/46ujge+IfiXplIKNxgPKQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":130960},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./vite":{"types":"./dist/vite.d.ts","import":"./dist/vite.js"},"./runtime":{"types":"./dist/runtime/index.d.ts","import":"./dist/runtime/index.js"}},"gitHead":"63d945086fecee52397d3d15c6567e3e036f5aaa","private":false,"scripts":{"dev":"vite","test":"vitest","build":"tsc -p tsconfig.build.json && bun run build:minify && bun run build:sizes","format":"prettier --write .","dev:watch":"tsc --watch","build:sizes":"bun scripts/sizes.ts","build:minify":"bun scripts/minify.ts","format:check":"prettier --check .","prepublishOnly":"npm run build"},"_npmUser":{"name":"alex.radulescu","email":"radulescu.alexandru.doru@gmail.com"},"repository":{"url":"git+https://github.com/alexradulescu/styled-static.git","type":"git"},"_npmVersion":"10.8.2","description":"Near-zero-runtime styled components for React 19+ with Vite. CSS extracted at build time, minimal runtime.","directories":{},"_nodeVersion":"20.20.0","dependencies":{},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.0.3","acorn":"^8.15.0","jsdom":"^27.3.0","react":"^19.0.0","vitest":"^2.1.8","prettier":"^3.7.4","react-dom":"^19.0.0","typescript":"^5.7.2","@types/node":"^22.10.1","@types/react":"^19.0.1","@vitest/browser":"^4.0.16","@types/react-dom":"^19.0.2","@vitest/coverage-v8":"2.1.8","@vitejs/plugin-react":"^4.3.4","@trivago/prettier-plugin-sort-imports":"^6.0.0"},"peerDependencies":{"vite":"^5.0.0 || ^6.0.0","react":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/styled-static_0.8.0_1770340439384_0.49100792863434695","host":"s3://npm-registry-packages-npm-production"}},"0.9.0":{"name":"@alex.radulescu/styled-static","version":"0.9.0","keywords":["styled-components","css-in-js","vite","react","zero-runtime","static-css"],"author":{"name":"Alex Radulescu"},"license":"MIT","_id":"@alex.radulescu/styled-static@0.9.0","maintainers":[{"name":"alex.radulescu","email":"radulescu.alexandru.doru@gmail.com"}],"homepage":"https://github.com/alexradulescu/styled-static#readme","bugs":{"url":"https://github.com/alexradulescu/styled-static/issues"},"dist":{"shasum":"525852a56576bc010753ee6d1e3f6de49ca68965","tarball":"https://registry.npmjs.org/@alex.radulescu/styled-static/-/styled-static-0.9.0.tgz","fileCount":27,"integrity":"sha512-iYFKFj4hYAkMh72u4o3AF1VJ/CXGlh7DZtfVI+quufEoNqevlTJAz5BTyuxCoo1Ic1K25VwJJRH37fvKlZQi3A==","signatures":[{"sig":"MEUCIHqIlOyf/99Q9Gf7KYVYPq74hhaQp1wssXwMXEHA87RnAiEAmWLZMAgUbj7hDPvmOiuNacfJ3pVtr1oQhdSUsI0b3Fc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":130960},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./vite":{"types":"./dist/vite.d.ts","import":"./dist/vite.js"},"./runtime":{"types":"./dist/runtime/index.d.ts","import":"./dist/runtime/index.js"}},"gitHead":"1e58803f427da98b8f8327a20b738f052502141a","private":false,"scripts":{"dev":"vite","test":"vitest","build":"tsc -p tsconfig.build.json && bun run build:minify && bun run build:sizes","format":"prettier --write .","dev:watch":"tsc --watch","build:sizes":"bun scripts/sizes.ts","build:minify":"bun scripts/minify.ts","format:check":"prettier --check .","prepublishOnly":"npm run build"},"_npmUser":{"name":"alex.radulescu","email":"radulescu.alexandru.doru@gmail.com"},"repository":{"url":"git+https://github.com/alexradulescu/styled-static.git","type":"git"},"_npmVersion":"10.8.2","description":"Near-zero-runtime styled components for React 19+ with Vite. CSS extracted at build time, minimal runtime.","directories":{},"_nodeVersion":"20.20.0","dependencies":{},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.0.3","acorn":"^8.15.0","jsdom":"^27.3.0","react":"^19.0.0","vitest":"^2.1.8","prettier":"^3.7.4","react-dom":"^19.0.0","typescript":"^5.7.2","@types/node":"^22.10.1","@types/react":"^19.0.1","@vitest/browser":"^4.0.16","@types/react-dom":"^19.0.2","@vitest/coverage-v8":"2.1.8","@vitejs/plugin-react":"^4.3.4","@trivago/prettier-plugin-sort-imports":"^6.0.0"},"peerDependencies":{"vite":"^5.0.0 || ^6.0.0","react":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/styled-static_0.9.0_1770605591080_0.023941747231581267","host":"s3://npm-registry-packages-npm-production"}},"0.9.1":{"name":"@alex.radulescu/styled-static","version":"0.9.1","keywords":["styled-components","css-in-js","vite","react","zero-runtime","static-css"],"author":{"name":"Alex Radulescu"},"license":"MIT","_id":"@alex.radulescu/styled-static@0.9.1","maintainers":[{"name":"alex.radulescu","email":"radulescu.alexandru.doru@gmail.com"}],"homepage":"https://github.com/alexradulescu/styled-static#readme","bugs":{"url":"https://github.com/alexradulescu/styled-static/issues"},"dist":{"shasum":"ea999b6aab89212db98fa7f0240f6843708c823c","tarball":"https://registry.npmjs.org/@alex.radulescu/styled-static/-/styled-static-0.9.1.tgz","fileCount":27,"integrity":"sha512-R41YqUXd3JGigVRB0god7j0xQ47EMvOX+F9K7FuoR5PSxOBXmQ5dJHh1nCQZLsgBgiH9MnHKoaUL8swnfg+0Yw==","signatures":[{"sig":"MEUCIQCS6X2GdUad0rawson93iN7tqK9fIyyhBtoVWzS0GI/vAIgWSEEQmp2dtPigyfYADqGwlOnBpJCAKuzatDAz913zfo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":130787},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./vite":{"types":"./dist/vite.d.ts","import":"./dist/vite.js"},"./runtime":{"types":"./dist/runtime/index.d.ts","import":"./dist/runtime/index.js"}},"gitHead":"0d4dc6051d38336c904d71764e8aa8254b5a1a14","private":false,"scripts":{"dev":"vite","test":"vitest","build":"tsc -p tsconfig.build.json && bun run build:minify && bun run build:sizes","format":"prettier --write .","dev:watch":"tsc --watch","build:sizes":"bun scripts/sizes.ts","build:minify":"bun scripts/minify.ts","format:check":"prettier --check .","prepublishOnly":"npm run build"},"_npmUser":{"name":"alex.radulescu","email":"radulescu.alexandru.doru@gmail.com"},"repository":{"url":"git+https://github.com/alexradulescu/styled-static.git","type":"git"},"_npmVersion":"10.8.2","description":"Near-zero-runtime styled components for React 19+ with Vite. CSS extracted at build time, minimal runtime.","directories":{},"_nodeVersion":"20.20.0","dependencies":{},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.0.3","acorn":"^8.15.0","jsdom":"^27.3.0","react":"^19.0.0","vitest":"^2.1.8","prettier":"^3.7.4","react-dom":"^19.0.0","typescript":"^5.7.2","@types/node":"^22.10.1","@types/react":"^19.0.1","@vitest/browser":"^4.0.16","@types/react-dom":"^19.0.2","@vitest/coverage-v8":"2.1.8","@vitejs/plugin-react":"^4.3.4","@trivago/prettier-plugin-sort-imports":"^6.0.0"},"peerDependencies":{"vite":"^5.0.0 || ^6.0.0","react":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/styled-static_0.9.1_1770700982974_0.6968727616405233","host":"s3://npm-registry-packages-npm-production"}},"0.10.0":{"name":"@alex.radulescu/styled-static","version":"0.10.0","keywords":["styled-components","css-in-js","vite","react","zero-runtime","static-css"],"author":{"name":"Alex Radulescu"},"license":"MIT","_id":"@alex.radulescu/styled-static@0.10.0","maintainers":[{"name":"alex.radulescu","email":"radulescu.alexandru.doru@gmail.com"}],"homepage":"https://github.com/alexradulescu/styled-static#readme","bugs":{"url":"https://github.com/alexradulescu/styled-static/issues"},"dist":{"shasum":"0ff0a2fb24c5bd2ed4e6338941b7f6d6324a3b57","tarball":"https://registry.npmjs.org/@alex.radulescu/styled-static/-/styled-static-0.10.0.tgz","fileCount":35,"integrity":"sha512-jy83Y9bO+vLdnK9eXjtvIKJsLt47UHbB1fSuwxeaBbWrdi2b8UD43drwKItkGjxAIVAUP/LOm/hKvfhKtPNPrg==","signatures":[{"sig":"MEQCIDALiYoV/AbenIkJcJYNGc7nH5lh0QACsJo9jsOEWvACAiAUQ9j6t1XSneBdu3tdMBJAx0elzKutZQLXNsNqZcD/6Q==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":149889},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"bun":">=1.3.8"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./vite":{"types":"./dist/vite.d.ts","import":"./dist/vite.js"},"./runtime":{"types":"./dist/runtime/index.d.ts","import":"./dist/runtime/index.js"}},"gitHead":"df9b80a699b8b2c84c80e95239072825b2b79b58","private":false,"scripts":{"dev":"vite","test":"vitest run --coverage","build":"tsc -p tsconfig.build.json && bun run build:minify && bun run build:sizes","format":"prettier --write .","dev:watch":"tsc --watch","test:watch":"vitest","build:sizes":"bun scripts/sizes.ts","build:minify":"bun scripts/minify.ts","format:check":"prettier --check .","prepublishOnly":"npm run build"},"_npmUser":{"name":"alex.radulescu","email":"radulescu.alexandru.doru@gmail.com"},"repository":{"url":"git+https://github.com/alexradulescu/styled-static.git","type":"git"},"_npmVersion":"10.8.2","description":"Near-zero-runtime styled components for React 19+ with Vite. CSS extracted at build time, minimal runtime.","directories":{},"_nodeVersion":"20.20.0","dependencies":{},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.3.1","acorn":"^8.15.0","jsdom":"^28.0.0","react":"^19.2.4","vitest":"^4.0.18","prettier":"^3.8.1","react-dom":"^19.2.4","typescript":"^5.7.2","@types/node":"^22.10.1","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","@vitest/coverage-v8":"^4.0.18","@vitejs/plugin-react":"^5.1.4","@trivago/prettier-plugin-sort-imports":"^6.0.2"},"peerDependencies":{"vite":"^5.0.0 || ^6.0.0 || ^7.0.0","react":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/styled-static_0.10.0_1771483102178_0.5674515932065236","host":"s3://npm-registry-packages-npm-production"}},"0.12.1":{"name":"@alex.radulescu/styled-static","version":"0.12.1","description":"Near-zero-runtime styled components for React 19+ with Vite. CSS extracted at build time, minimal runtime.","type":"module","private":false,"publishConfig":{"access":"public"},"main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./vite":{"types":"./dist/vite.d.ts","import":"./dist/vite.js"},"./runtime":{"types":"./dist/runtime/index.d.ts","import":"./dist/runtime/index.js"}},"scripts":{"build":"tsc -p tsconfig.build.json && bun run build:minify && bun run build:sizes","build:minify":"bun scripts/minify.ts","build:sizes":"bun scripts/sizes.ts","dev":"vite","dev:watch":"tsc --watch","test":"printf '\\033[33m⚠️  [1/2] Node tests (theme.ts coverage intentionally low — browser paths covered in run 2)\\033[0m\\n' && bun test --coverage --only-failures src/vite.test.ts src/index.test.ts src/theme.test.ts && printf '\\033[32m✓ [2/2] Browser tests (theme.ts expected 100%%)\\033[0m\\n' && bun test --coverage --only-failures --preload ./src/setup-dom.ts ./src/theme.browser.test.ts","test:watch":"bun test --watch","format":"prettier --write .","format:check":"prettier --check .","prepublishOnly":"npm run build"},"engines":{"bun":">=1.3.8"},"peerDependencies":{"vite":"^5.0.0 || ^6.0.0 || ^7.0.0","react":"^19.0.0"},"dependencies":{},"devDependencies":{"@happy-dom/global-registrator":"^20.6.3","@trivago/prettier-plugin-sort-imports":"^6.0.2","@types/node":"^22.10.1","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^5.1.4","acorn":"^8.15.0","magic-string":"^0.30.21","prettier":"^3.8.1","react":"^19.2.4","react-dom":"^19.2.4","typescript":"^5.7.2","vite":"^7.3.1"},"keywords":["styled-components","css-in-js","vite","react","zero-runtime","static-css"],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/alexradulescu/styled-static.git"},"author":{"name":"Alex Radulescu"},"_id":"@alex.radulescu/styled-static@0.12.1","gitHead":"9186908b3b2c0c3a319cf8d9c8418f0dca6c77f8","bugs":{"url":"https://github.com/alexradulescu/styled-static/issues"},"homepage":"https://github.com/alexradulescu/styled-static#readme","_nodeVersion":"20.20.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-V5qmX/pNzO1KfIOLunisOlnB2rCmcbXDQxlRYgRji8lxp6d6Kc6XPa01w+PPFQCcrfVJ6jZgkNS5UZB5IKenIw==","shasum":"b526877d7f8d3089458b107026549e1de329c3c5","tarball":"https://registry.npmjs.org/@alex.radulescu/styled-static/-/styled-static-0.12.1.tgz","fileCount":35,"unpackedSize":150267,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQC/OkLKa9rcAuMk+BzgLghgLc3pOYXc0uDxTtEONYdrcAIhAI8shLfHHrqkpdUqcDJZcDGPk4zc3tJM8/xLrU6kXkRG"}]},"_npmUser":{"name":"alex.radulescu","email":"radulescu.alexandru.doru@gmail.com"},"directories":{},"maintainers":[{"name":"alex.radulescu","email":"radulescu.alexandru.doru@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/styled-static_0.12.1_1771552078017_0.709538256022495"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-11T14:36:44.806Z","modified":"2026-02-20T01:47:58.335Z","0.2.0":"2025-12-11T14:36:45.068Z","0.7.1":"2025-12-23T05:13:37.566Z","0.7.2":"2025-12-23T06:22:43.958Z","0.7.3":"2025-12-24T03:31:53.669Z","0.8.0":"2026-02-06T01:13:59.528Z","0.9.0":"2026-02-09T02:53:11.236Z","0.9.1":"2026-02-10T05:23:03.116Z","0.10.0":"2026-02-19T06:38:22.351Z","0.12.1":"2026-02-20T01:47:58.201Z"},"bugs":{"url":"https://github.com/alexradulescu/styled-static/issues"},"author":{"name":"Alex Radulescu"},"license":"MIT","homepage":"https://github.com/alexradulescu/styled-static#readme","keywords":["styled-components","css-in-js","vite","react","zero-runtime","static-css"],"repository":{"type":"git","url":"git+https://github.com/alexradulescu/styled-static.git"},"description":"Near-zero-runtime styled components for React 19+ with Vite. CSS extracted at build time, minimal runtime.","maintainers":[{"name":"alex.radulescu","email":"radulescu.alexandru.doru@gmail.com"}],"readme":"<!--\n═══════════════════════════════════════════════════════════════════════════════\nThis README serves as both user documentation and LLM context (LLMs.txt).\nIt documents styled-static - a near-zero-runtime CSS-in-JS library for React 19+\nwith Vite. CSS is extracted at build time; minimal runtime handles dynamic features.\n\nKey APIs: styled, css, createGlobalStyle, styledVariants, cssVariants, cx\nTheme helpers: initTheme, setTheme, getTheme, onSystemThemeChange\nRuntime: Minimal | Dependencies: 0 | React 19+ required | Vite only\n\nFor implementation details, see CLAUDE.md or the source files in src/\n═══════════════════════════════════════════════════════════════════════════════\n-->\n\n# styled-static\n\nNear-zero-runtime CSS-in-JS for React 19+ with Vite. Write styled-components syntax, get static CSS extracted at build time.\n\n**What's \"zero\"?** CSS generation happens at build time (the expensive part). A minimal runtime (~45 bytes) handles className merging. Components are generated inline at build time.\n\n## Features\n\n- ⚡ **Static CSS** - All CSS extracted at build time, no runtime stylesheet generation\n- 🎯 **Type-Safe** - Full TypeScript support with proper prop inference\n- 🎨 **Familiar API** - styled-components syntax you already know\n- 📦 **Tiny** - Minimal ~45 byte runtime for className merging only\n- 🔧 **Zero Dependencies** - Uses native CSS features and Vite's built-in tools\n- 🌳 **Inline Components** - Components generated at build time, no runtime factories\n- 🌓 **Theme Helpers** - Simple utilities for dark mode and custom themes\n\n---\n\n## Quick Overview\n\nAll the APIs you need at a glance. styled-static provides 10 core functions that cover most CSS-in-JS use cases:\n\n### styled.element\n\nStyle HTML elements with template literals:\n\n```tsx\nconst Button = styled.button`\n  padding: 0.5rem 1rem;\n  ...\n`;\n\nconst PrimaryButton = styled(Button)`\n  font-weight: bold;\n  ...\n`;\n\nconst activeClass = css`\n  outline: 2px solid blue;\n  ...\n`;\n\n<Button className={isActive ? activeClass : \"\"}>Click</Button>;\n\nconst GlobalStyle = createGlobalStyle`\n  * { box-sizing: border-box; }\n  body { margin: 0; font-family: system-ui; }\n`;\n\n<GlobalStyle />; // Render once at app root\n\n// With css`` for IDE syntax highlighting (recommended)\nconst Button = styledVariants({\n  component: \"button\",\n  css: css`\n    padding: 0.5rem 1rem;\n    border-radius: 4px;\n  `,\n  variants: {\n    size: {\n      sm: css`\n        font-size: 0.875rem;\n      `,\n      lg: css`\n        font-size: 1.125rem;\n      `,\n    },\n  },\n});\n\n<Button size=\"lg\">Large Button</Button>;\n\nconst badgeCss = cssVariants({\n  css: css`\n    padding: 0.25rem 0.5rem;\n    border-radius: 4px;\n  `,\n  variants: {\n    color: {\n      blue: css`\n        background: #e0f2fe;\n        color: #0369a1;\n      `,\n      green: css`\n        background: #dcfce7;\n        color: #166534;\n      `,\n    },\n  },\n});\n\n<span className={badgeCss({ color: \"blue\" })}>Info</span>;\n\n// Combine classes conditionally\n<div className={cx(\"base\", isActive && activeClass)} />;\n\n// Default attributes\nconst PasswordInput = styled.input.attrs({ type: \"password\" })`\n  padding: 0.5rem 1rem;\n`;\n\n// Polymorphism - render Link with Button's styles\nimport { Link } from \"react-router-dom\";\nconst LinkButton = withComponent(Link, Button);\n<LinkButton to=\"/path\">Router link styled as button</LinkButton>;\n```\n\n---\n\n## Table of Contents\n\n- [Quick Overview](#quick-overview) · [Why](#why-styled-static) · [What We Don't Do](#what-we-dont-do) · [Installation](#installation)\n- **API:** [styled](#styled) · [Extension](#component-extension) · [css](#css-helper) · [keyframes](#keyframes) · [attrs](#attrs) · [cx](#cx-utility) · [Global Styles](#global-styles) · [Variants](#variants-api)\n- **Features:** [Polymorphism](#polymorphism-with-withcomponent) · [.className](#manual-composition-with-classname) · [CSS Nesting](#css-nesting) · [Dynamic Styling](#dynamic-styling) · [Theming](#theming)\n- **Internals:** [Troubleshooting](#troubleshooting) · [How It Works](#how-it-works) · [Config](#configuration) · [TypeScript](#typescript) · [Zero Deps](#zero-dependencies) · [Comparison](#comparison)\n\n---\n\n## Why styled-static?\n\n- 🌐 **CSS evolved.** Native nesting, CSS variables, container queries—the gap between CSS and CSS-in-JS is smaller than ever.\n- 😵 **CSS-in-JS fatigue.** Most libraries are obsolete, complex, or have large runtime overhead.\n- ✨ **Syntactic sugar over CSS modules.** Better DX for writing CSS, without runtime interpolation.\n- 🔒 **Zero dependencies.** Minimal attack surface. Nothing to audit.\n- 🎯 **Intentionally simple.** 95% native browser + 5% sprinkles.\n- 🎉 **Built for fun.** Curiosity-driven, useful code.\n\n---\n\n## What We Don't Do\n\n- 🚫 **No runtime interpolation** — Can't write `${props => props.color}`. Use variants, CSS variables, or data attributes.\n- ⚛️ **React 19+ only** — Uses automatic ref forwarding (no `forwardRef`).\n- ⚡ **Vite only** — Uses Vite's AST parser and virtual modules. No Webpack/Rollup.\n- 🚫 **No `css` prop** — Use named `css` variables with `className`.\n- 🚫 **No `shouldForwardProp`** — Not needed. Variants auto-strip props.\n\nEach constraint removes complexity—no CSS parsing, no forwardRef, one great integration.\n\n---\n\n## Installation\n\n```bash\nnpm install @alex.radulescu/styled-static\n# or\nbun add @alex.radulescu/styled-static\n```\n\nConfigure the Vite plugin:\n\n```ts\n// vite.config.ts\nimport react from \"@vitejs/plugin-react\";\nimport { styledStatic } from \"@alex.radulescu/styled-static/vite\";\nimport { defineConfig } from \"vite\";\n\nexport default defineConfig({\n  plugins: [styledStatic(), react()],\n});\n```\n\n> **Note:** The plugin must be placed **before** the React plugin in the plugins array.\n\n---\n\n## API Reference\n\n### styled\n\nCreate styled React components:\n\n```tsx\nimport { styled } from \"@alex.radulescu/styled-static\";\n\nconst Button = styled.button`\n  padding: 0.5rem 1rem;\n  background: #3b82f6;\n  color: white;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n\n  &:hover {\n    background: #2563eb;\n  }\n`;\n\n// Usage\n<Button onClick={handleClick}>Click me</Button>;\n```\n\n### Component Extension\n\nExtend existing styled components by passing them to `styled()`:\n\n```tsx\nconst Button = styled.button`\n  padding: 0.5rem 1rem;\n  border-radius: 4px;\n`;\n\n// Extend with additional styles\nconst PrimaryButton = styled(Button)`\n  background: #3b82f6;\n  color: white;\n`;\n\n// Chain extensions\nconst LargePrimaryButton = styled(PrimaryButton)`\n  padding: 1rem 2rem;\n  font-size: 1.25rem;\n`;\n```\n\n**CSS Cascade Order:**\nWhen components are extended, classes are ordered correctly:\n\n- Base styles first\n- Extension styles second (override base)\n- User className last (override all)\n\n```tsx\n<LargePrimaryButton className=\"custom\" />\n// Renders: class=\"ss-base ss-primary ss-large custom\"\n```\n\n### css Helper\n\nGet a scoped class name for mixing with other classes:\n\n```tsx\nimport { css } from '@alex.radulescu/styled-static';\n\nconst activeClass = css`\n  outline: 2px solid blue;\n`;\n\nconst highlightClass = css`\n  box-shadow: 0 0 10px yellow;\n`;\n\n// Mix with styled components\n<Button className={isActive ? activeClass : ''}>\n  Conditional styling\n</Button>\n\n// Combine multiple classes\n<div className={`${activeClass} ${highlightClass}`}>\n  Multiple classes\n</div>\n```\n\n### keyframes\n\nCreate scoped keyframe animations. The animation name is hashed to avoid conflicts between components:\n\n```tsx\nimport { keyframes, styled } from \"@alex.radulescu/styled-static\";\n\nconst spin = keyframes`\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n`;\n\nconst pulse = keyframes`\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.5; }\n`;\n\nconst Spinner = styled.div`\n  width: 24px;\n  height: 24px;\n  border: 2px solid #3b82f6;\n  border-top-color: transparent;\n  border-radius: 50%;\n  animation: ${spin} 1s linear infinite;\n`;\n\nconst PulsingDot = styled.div`\n  width: 8px;\n  height: 8px;\n  background: #10b981;\n  border-radius: 50%;\n  animation: ${pulse} 2s ease-in-out infinite;\n`;\n```\n\nAnimation names are hashed at build time to avoid conflicts.\n\n### attrs\n\nSet default HTML attributes using `.attrs()`:\n\n```tsx\nconst SubmitButton = styled.button.attrs({\n  type: 'submit',\n  'aria-label': 'Submit form',\n})`\n  padding: 0.5rem 1rem;\n  background: #3b82f6;\n  color: white;\n`;\n\n<SubmitButton>Send</SubmitButton>\n// Renders: <button type=\"submit\" aria-label=\"Submit form\" class=\"ss-xyz789\">\n```\n\n> **Note:** attrs must be static objects (no functions). For dynamic attributes, use regular props.\n\n### cx Utility\n\nCombine class names conditionally. Intentionally flat (no nested arrays/objects) for minimal bundle size:\n\n```tsx\nimport { css, cx } from '@alex.radulescu/styled-static';\n\nconst activeClass = css`color: blue;`;\n\ncx('base', 'active')                    // → \"base active\"\ncx('btn', isActive && activeClass)      // → \"btn ss-abc123\" or \"btn\"\ncx('a', null, undefined, false, 'b')    // → \"a b\"\n```\n\n### Global Styles\n\n```tsx\nimport { createGlobalStyle } from \"@alex.radulescu/styled-static\";\n\nconst GlobalStyle = createGlobalStyle`\n  * {\n    box-sizing: border-box;\n  }\n\n  body {\n    margin: 0;\n    font-family: system-ui, sans-serif;\n  }\n\n  :root {\n    --color-primary: #3b82f6;\n    --color-text: #1a1a1a;\n  }\n`;\n\n// Render once at app root\ncreateRoot(document.getElementById(\"root\")!).render(\n  <StrictMode>\n    <GlobalStyle />\n    <App />\n  </StrictMode>\n);\n```\n\n\n### Variants API\n\nFor type-safe variant handling, use `styledVariants` to create components with variant props, or `cssVariants` to get class functions.\n\n> **Tip:** Wrap CSS strings in `css\\`...\\`` to get IDE syntax highlighting from the styled-components VSCode extension.\n\n#### styledVariants\n\n```tsx\nimport { css, styledVariants } from \"@alex.radulescu/styled-static\";\n\nconst Button = styledVariants({\n  component: \"button\",\n  css: css`\n    padding: 0.5rem 1rem;\n    background: gray;\n    color: white;\n    font-size: 1rem;\n  `,\n  variants: {\n    color: {\n      primary: css`background: blue;`,\n      danger: css`background: red;`,\n      success: css`background: green;`,\n    },\n    size: {\n      sm: css`font-size: 0.875rem; padding: 0.25rem 0.5rem;`,\n      lg: css`font-size: 1.125rem; padding: 0.75rem 1.5rem;`,\n    },\n  },\n  // Default variant values (applied when prop is undefined)\n  defaultVariants: {\n    color: \"primary\",\n    size: \"sm\",\n  },\n  // Compound variants (special styles when multiple conditions match)\n  compoundVariants: [\n    {\n      size: \"lg\",\n      color: \"danger\",\n      css: css`font-weight: 900; text-transform: uppercase;`,\n    },\n  ],\n});\n\n<Button>Click me</Button>\n// Uses defaults: color=\"primary\", size=\"sm\"\n// Renders: <button class=\"ss-abc ss-abc--color-primary ss-abc--size-sm\">\n\n<Button size=\"lg\" color=\"danger\">Delete</Button>\n// Gets compound styles (font-weight: 900, text-transform: uppercase)\n// Renders: <button class=\"ss-abc ss-abc--color-danger ss-abc--size-lg\">\n```\n\n#### cssVariants\n\n```tsx\nimport { cssVariants, css, cx } from '@alex.radulescu/styled-static';\n\n// With css`` for syntax highlighting (recommended)\nconst badgeCss = cssVariants({\n  css: css`\n    padding: 0.25rem 0.5rem;\n    border-radius: 4px;\n    font-size: 0.75rem;\n  `,\n  variants: {\n    variant: {\n      info: css`background: #e0f2fe; color: #0369a1;`,\n      success: css`background: #dcfce7; color: #166534;`,\n      warning: css`background: #fef3c7; color: #92400e;`,\n    },\n  },\n  // defaultVariants and compoundVariants also work with cssVariants\n});\n\n// Usage - returns class string\n<span className={badgeCss({ variant: 'info' })}>Info</span>\n// Returns: \"ss-xyz ss-xyz--variant-info\"\n\n// Combine with cx for conditional classes\n<span className={cx(badgeCss({ variant: 'info' }), isActive && activeClass)}>\n  Info\n</span>\n```\n\n---\n\n## Features\n\n### Polymorphism with withComponent\n\nRender one component with another's styles using `withComponent`:\n\n```tsx\nimport { Link } from \"react-router-dom\";\nimport { styled, withComponent } from \"@alex.radulescu/styled-static\";\n\nconst Button = styled.button`\n  padding: 0.5rem 1rem;\n  background: blue;\n  color: white;\n`;\n\n// Create a Link that looks like Button\nconst LinkButton = withComponent(Link, Button);\n\n// Also works with HTML tags\nconst AnchorButton = withComponent('a', Button);\n\n// Usage\n<LinkButton to=\"/path\">Router link styled as button</LinkButton>\n<AnchorButton href=\"/external\">External link</AnchorButton>\n```\n\n`withComponent` accepts:\n\n- **First argument**: The component to render (React component or HTML tag string)\n- **Second argument**: The styled component whose styles to use\n\n### Manual Composition with .className\n\nEvery styled component exposes a static `.className` property for manual composition:\n\n```tsx\nconst Button = styled.button`\n  padding: 0.5rem 1rem;\n  background: blue;\n`;\n\n// Use className directly on any element\n<a className={Button.className} href=\"/link\">\n  Link with button styles\n</a>\n\n// Combine with cx utility\n<div className={cx(Button.className, Card.className, \"custom\")}>\n  Combined styles\n</div>\n```\n\nThis is useful when you need button styles on a non-component element or want to combine multiple styled component classes.\n\n### CSS Nesting\n\nstyled-static uses native CSS nesting (supported in all modern browsers):\n\n```tsx\nconst Card = styled.div`\n  padding: 1rem;\n  background: white;\n  border-radius: 8px;\n\n  /* Pseudo-classes */\n  &:hover {\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  }\n\n  /* Child selectors */\n  & h2 {\n    margin: 0 0 0.5rem;\n  }\n\n  /* Media queries */\n  @media (max-width: 640px) {\n    padding: 0.5rem;\n  }\n\n  /* Pseudo-elements */\n  &::before {\n    content: \"\";\n    position: absolute;\n  }\n`;\n```\n\n> **Tip:** Native CSS nesting means zero build-time processing. Your CSS is passed directly to the browser.\n\n---\n\n## Dynamic Styling\n\nNo runtime interpolation—use these patterns instead:\n- **[Variants API](#variants-api)** — Type-safe component variants (recommended)\n- **[cx utility](#cx-utility)** — Conditional class toggling\n- **CSS variables** — Pass via `style` prop for truly dynamic values\n- **Data attributes** — Style with `&[data-variant=\"x\"]` selectors\n\n---\n\n## Theming\n\nCSS-first theming with CSS variables and `data-theme` attributes:\n\n```tsx\nconst GlobalStyle = createGlobalStyle`\n  :root, [data-theme=\"light\"] { --bg: #fff; --text: #1a1a1a; }\n  [data-theme=\"dark\"] { --bg: #0a0a0a; --text: #f1f5f9; }\n  [data-theme=\"pokemon\"] { --bg: #ffcb05; --text: #2a75bb; }\n`;\n\nconst Card = styled.div`\n  background: var(--bg);\n  color: var(--text);\n`;\n```\n\n### Theme Helpers\n\n```tsx\nimport { initTheme, setTheme, getTheme, onSystemThemeChange } from \"@alex.radulescu/styled-static\";\n\n// Initialize (reads localStorage → system preference → default)\ninitTheme({ defaultTheme: \"light\", useSystemPreference: true });\n\n// Switch themes\nsetTheme(\"dark\");              // persists to localStorage\nsetTheme(\"pokemon\", false);    // no persist (preview)\n\n// Read current\nconst current = getTheme();    // 'light' | 'dark' | etc.\n\n// React to OS changes\nconst unsub = onSystemThemeChange((prefersDark) => {\n  if (!localStorage.getItem(\"theme\")) setTheme(prefersDark ? \"dark\" : \"light\", false);\n});\n```\n\n| Function | Description |\n| -------- | ----------- |\n| `initTheme(options?)` | Init on load. Priority: localStorage → system → default |\n| `setTheme(theme, persist?)` | Set theme. Persists to localStorage by default |\n| `getTheme()` | Get current theme from `data-theme` |\n| `onSystemThemeChange(cb)` | Subscribe to OS theme changes |\n\n---\n\n## Troubleshooting\n\n### Storybook: \"This package is ESM only\"\n\nIf you see this error when using styled-static with Storybook:\n\n```\nFailed to resolve \"@alex.radulescu/styled-static/vite\".\nThis package is ESM only but it was tried to load by `require`.\n```\n\nAdd the package to Vite's `optimizeDeps.include` in your Storybook config:\n\n```ts\n// .storybook/main.ts\nexport default {\n  // ... other config\n  viteFinal: async (config) => {\n    config.optimizeDeps = config.optimizeDeps || {};\n    config.optimizeDeps.include = [\n      ...(config.optimizeDeps.include || []),\n      '@alex.radulescu/styled-static',\n    ];\n    return config;\n  },\n};\n```\n\nThis is a known limitation with ESM-only packages in Storybook's esbuild-based config loading.\n\n---\n\n## How It Works\n\nstyled-static uses a Vite plugin to transform your styled components at build time. Here's what happens under the hood:\n\n### Build-Time Transformation\n\nWhen you write a styled component, the Vite plugin intercepts your code and performs AST-based transformation:\n\n```tsx\n// 1. What you write:\nimport { styled } from \"@alex.radulescu/styled-static\";\n\nconst Button = styled.button`\n  padding: 1rem;\n  background: blue;\n  color: white;\n`;\n\n// 2. What gets generated:\nimport { createElement } from \"react\";\nimport { m } from \"@alex.radulescu/styled-static/runtime\";\nimport \"@alex.radulescu/styled-static:abc123-0.css\";\n\nconst Button = Object.assign(\n  (p) => createElement(\"button\", {...p, className: m(\"ss-abc123\", p.className)}),\n  { className: \"ss-abc123\" }\n);\n```\n\nThe CSS is completely removed from your JavaScript bundle and extracted to a virtual CSS module. The component becomes an inline function with a static `.className` property for composition.\n\n### Virtual CSS Modules\n\nEach styled component gets its own virtual CSS module with a unique ID like `styled-static:abc123-0.css`. This approach enables:\n\n- ✅ **Deduplication** - CSS is optimized by Vite's pipeline\n- ✅ **Code splitting** - CSS loads only with the components that use it\n- ✅ **Hot Module Replacement** - Changes to styles trigger instant HMR\n- ✅ **Production optimization** - CSS can be extracted to a single file\n\n```css\n/* Virtual module: styled-static:abc123-0.css */\n.ss-abc123 {\n  padding: 1rem;\n  background: blue;\n  color: white;\n}\n```\n\n### Minimal Runtime\n\nThe runtime is extremely small because components are generated inline at build time. The only runtime code is a className merge helper:\n\n| Module           | Minified | Brotli |\n| ---------------- | -------- | ------ |\n| runtime/index.js | **45 B** | 50 B   |\n\nThis is a **98% reduction** from traditional CSS-in-JS libraries.\n\n```tsx\n// The ENTIRE runtime - just className merging\nexport const m = (base, user) => user ? `${base} ${user}` : base;\n```\n\nEverything else is generated at build time as inline components.\n\n### Zero-Runtime Features\n\nSome features have literally zero runtime cost because they're completely replaced at build time:\n\n```tsx\n// css helper - zero runtime (just a string)\nconst activeClass = css`outline: 2px solid blue;`;\n// Generated: const activeClass = \"ss-xyz789\";\n\n// Global styles - zero runtime (just CSS import)\nconst GlobalStyles = createGlobalStyle`* { box-sizing: border-box; }`;\n// Generated: const GlobalStyles = () => null;\n\n// withComponent - zero runtime (build-time transformation)\nconst LinkButton = withComponent(Link, Button);\n// Generated: Object.assign((p) => createElement(Link, {...p, className: m(Button.className, p.className)}), { className: Button.className })\n```\n\n---\n\n## Configuration\n\n```ts\nstyledStatic({\n  // Prefix for generated class names (default: 'ss')\n  classPrefix: \"my-app\",\n\n  // CSS output mode (default: 'auto')\n  // - 'auto': Uses 'file' for library builds (build.lib set), 'virtual' for apps\n  // - 'virtual': CSS as virtual modules (Vite bundles into single file)\n  // - 'file': CSS as separate files co-located with JS (for library builds)\n  cssOutput: \"auto\",\n});\n```\n\n### Library Builds\n\nWhen building a component library with `build.lib` configured, styled-static automatically outputs CSS as separate files co-located with each JS file. This enables CSS tree-shaking for consuming applications.\n\n```\ndist/\n  components/\n    Button/\n      Button.js    # imports \"./Button.css\"\n      Button.css   # Button-specific styles only\n    Alert/\n      Alert.js     # imports \"./Alert.css\"\n      Alert.css    # Alert-specific styles only\n```\n\nConsuming apps automatically get only the CSS for components they import:\n\n```tsx\n// In your app - only Button.css is included in the bundle\nimport { Button } from \"my-component-library/components/Button\";\n```\n\nFor app builds (no `build.lib`), CSS is bundled as virtual modules into a single CSS file, which is the default Vite behavior.\n\n---\n\n## TypeScript\n\nFull type inference is provided:\n\n```tsx\nconst Button = styled.button`...`;\n\n// ✅ Type-safe: button props are available\n<Button type=\"submit\" disabled>Submit</Button>\n\n// ✅ Type-safe: withComponent infers props from target component\nconst LinkButton = withComponent(Link, Button);\n<LinkButton to=\"/path\">Link</LinkButton>\n\n// ✅ Type-safe: .className is always string\nconst classes = Button.className; // string\n```\n\n---\n\n## Zero Dependencies\n\nZero runtime dependencies. Uses native CSS nesting (Chrome 112+, Safari 16.5+, Firefox 117+) and Vite's CSS pipeline. See [Installation](#installation) for optional Lightning CSS integration.\n\n---\n\n## Comparison\n\n**Legend:** ✓ Yes | ◐ Partial | ✗ No\n\n| | styled-static | Emotion | Linaria | [Restyle](https://restyle.dev) | Panda CSS |\n|-|---------------|---------|---------|--------|-----------|\n| Runtime | **~50 B** | ~11 KB | ~1.5 KB | ~2.2 KB | 0 B |\n| Dependencies | 0 | 5+ | 10+ | 0 | 5+ |\n| React | 19+ | 16+ | 16+ | 19+ | 16+ |\n| Bundler | Vite | Any | Many | Any | Any |\n| `styled.el` | ✓ | ✓ | ✓ | ✓ | ◐ |\n| `styled(Comp)` | ✓ | ✓ | ✓ | ✓ | ◐ |\n| Variants | ✓ | ◐ | ◐ | ◐ | ✓ |\n| `css` helper | ✓ | ✓ | ✓ | ✓ | ✓ |\n| `css` inline prop | ✗ | ✓ | ✗ | ✓ | ✓ |\n| Runtime interpolation | ✗ | ✓ | ✗ | ✓ | ✗ |\n| Default variants | ✓ | ✗ | ✗ | ✗ | ✓ |\n| Compound variants | ✓ | ✗ | ✗ | ✗ | ✓ |\n| `.className` access | ✓ | ✗ | ✗ | ✗ | ✗ |\n\n---\n\n## VS Code Support\n\nFor syntax highlighting in template literals, install the [vscode-styled-components](https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components) extension.\n\n---\n\n## Inspiration\n\nWe take inspiration from the greats before us: [Emotion](https://emotion.sh), [styled-components](https://styled-components.com), [Linaria](https://linaria.dev), [Panda CSS](https://panda-css.com), [Pigment CSS](https://github.com/mui/pigment-css), [Stitches](https://stitches.dev), [Ecsstatic](https://github.com/danielroe/ecsstatic), [Restyle](https://restyle.dev), [goober](https://goober.rocks). Thanks to each and every one for ideas and inspiration.\n\n---\n\n## License\n\nMIT\n","readmeFilename":"README.md"}