{"_id":"css-js-gen","_rev":"4-f0f76f33b877a7b0029466fd77dabbdd","name":"css-js-gen","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.0":{"name":"css-js-gen","version":"1.0.0","keywords":["css","css-in-js","styles","typescript"],"author":{"url":"https://matthiesen.dev","name":"Adam Matthiesen","email":"adam@matthiesen.xyz"},"license":"MIT","_id":"css-js-gen@1.0.0","maintainers":[{"name":"adammatthiesen","email":"adam@matthiesen.xyz"}],"homepage":"https://github.com/Adammatthiesen/css-js-gen#readme","bugs":{"url":"https://github.com/Adammatthiesen/css-js-gen/issues"},"dist":{"shasum":"28e0c1eaa3073116cfc97aa5695b665e4f543c89","tarball":"https://registry.npmjs.org/css-js-gen/-/css-js-gen-1.0.0.tgz","fileCount":5,"integrity":"sha512-730erkJtJQL0TUL/qrnYnSNsNG0jR85TucuZbkCP342x2EphReM+SsrqK9fjzvERbQLh+daXJ2SQmGID3LI2kA==","signatures":[{"sig":"MEUCIG/AIS1Fu5o5QltDT/CjYM7dwK8NxpWX6t2bhvpQ9DGrAiEAk0A7NA1TQ0+SBsN9xfs4ucDomJOIarZ40ukMEIPUnJA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":11516},"type":"module","_from":"file:css-js-gen-1.0.0.tgz","exports":{".":{"types":"./dist/index.d.mts","import":"./dist/index.mjs"}},"scripts":{"dev":"tsdown --config tsdown.config.ts --watch","test":"vitest","build":"tsdown --config tsdown.config.ts","test:ui":"vitest --ui","test:run":"vitest run","test:coverage":"vitest run --coverage","scratchpad:test-styles":"node test-styles.mjs"},"_npmUser":{"name":"adammatthiesen","email":"adam@matthiesen.xyz"},"_resolved":"/tmp/537bed1487031b8c10c792a49de0af2a/css-js-gen-1.0.0.tgz","_integrity":"sha512-730erkJtJQL0TUL/qrnYnSNsNG0jR85TucuZbkCP342x2EphReM+SsrqK9fjzvERbQLh+daXJ2SQmGID3LI2kA==","repository":{"url":"git+https://github.com/Adammatthiesen/css-js-gen.git","type":"git"},"_npmVersion":"10.9.3","description":"Convert CSS object notation to CSS strings","directories":{},"_nodeVersion":"22.20.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsdown":"^0.20.3","vitest":"^4.0.18","@vitest/ui":"^4.0.18","typescript":"^5.9.3"},"_npmOperationalInternal":{"tmp":"tmp/css-js-gen_1.0.0_1771467805469_0.20428176094190098","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"css-js-gen","version":"1.0.1","keywords":["css","css-in-js","styles","typescript"],"author":{"url":"https://matthiesen.dev","name":"Adam Matthiesen","email":"adam@matthiesen.xyz"},"license":"MIT","_id":"css-js-gen@1.0.1","maintainers":[{"name":"adammatthiesen","email":"adam@matthiesen.xyz"}],"homepage":"https://github.com/Adammatthiesen/css-js-gen#readme","bugs":{"url":"https://github.com/Adammatthiesen/css-js-gen/issues"},"dist":{"shasum":"185b45062abda3e53b4c3377cb941760e139b039","tarball":"https://registry.npmjs.org/css-js-gen/-/css-js-gen-1.0.1.tgz","fileCount":5,"integrity":"sha512-Px4xI5daHckPXDONAA6lUWDTJ16wVmdYFpckP3QckhwoX5KL5+yiFJqypb5sKEThfthVNnddVc9WvLhy514qKQ==","signatures":[{"sig":"MEQCIAd79oTi9v+UBH79/HhcVenBXWEcMGkFB+LoVCnLbHjLAiBm6Nc07uuMBwWmICQf5qIXwuFU72GygLdohkeWjm+5Xg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":11690},"type":"module","_from":"file:css-js-gen-1.0.1.tgz","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"scripts":{"dev":"tsdown --config tsdown.config.ts --watch","test":"vitest","build":"tsdown --config tsdown.config.ts","test:ui":"vitest --ui","test:run":"vitest run","changeset":"changeset","test:coverage":"vitest run --coverage","scratchpad:test-styles":"node test-styles.mjs"},"_npmUser":{"name":"adammatthiesen","email":"adam@matthiesen.xyz"},"_resolved":"/tmp/0fe3ee65bb8ab33a4be210de24b13082/css-js-gen-1.0.1.tgz","_integrity":"sha512-Px4xI5daHckPXDONAA6lUWDTJ16wVmdYFpckP3QckhwoX5KL5+yiFJqypb5sKEThfthVNnddVc9WvLhy514qKQ==","repository":{"url":"git+https://github.com/Adammatthiesen/css-js-gen.git","type":"git"},"_npmVersion":"10.9.3","description":"Convert CSS object notation to CSS strings","directories":{},"_nodeVersion":"22.20.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsdown":"^0.20.3","vitest":"^4.0.18","publint":"^0.3.17","@vitest/ui":"^4.0.18","typescript":"^5.9.3","@changesets/cli":"^2.29.8"},"_npmOperationalInternal":{"tmp":"tmp/css-js-gen_1.0.1_1771469285675_0.8366811278774908","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"css-js-gen","version":"1.0.2","keywords":["css","css-in-js","styles","typescript"],"author":{"url":"https://matthiesen.dev","name":"Adam Matthiesen","email":"adam@matthiesen.xyz"},"license":"MIT","_id":"css-js-gen@1.0.2","maintainers":[{"name":"adammatthiesen","email":"adam@matthiesen.xyz"}],"homepage":"https://github.com/Adammatthiesen/css-js-gen#readme","bugs":{"url":"https://github.com/Adammatthiesen/css-js-gen/issues"},"dist":{"shasum":"5209a6d10b12fa3acc0a206b19717333479026ba","tarball":"https://registry.npmjs.org/css-js-gen/-/css-js-gen-1.0.2.tgz","fileCount":5,"integrity":"sha512-pCIxEf7bPQJMRlVRT4rpkp841fqoGCa07EOLrq+QV5VI4q+haa6MoS65/NK3xJ8bqojgCUAW1WYbl+H44dDQ4A==","signatures":[{"sig":"MEUCIHpvHpDhJaxGDn3juuerCEEq3uZahJV3UAZgGyhoijvKAiEAlhnYWibeTvxohXhwPuxtOKJz66Chh6sd4mdtUCTPu5g=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":11783},"main":"./dist/index.js","type":"module","_from":"file:css-js-gen-1.0.2.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"scripts":{"dev":"tsdown --config tsdown.config.ts --watch","test":"vitest","build":"tsdown --config tsdown.config.ts","test:ui":"vitest --ui","test:run":"vitest run","changeset":"changeset","test:coverage":"vitest run --coverage","scratchpad:test-styles":"node test-styles.mjs"},"_npmUser":{"name":"adammatthiesen","email":"adam@matthiesen.xyz"},"_resolved":"/tmp/bc2b5462796520becf174a62a04439ed/css-js-gen-1.0.2.tgz","_integrity":"sha512-pCIxEf7bPQJMRlVRT4rpkp841fqoGCa07EOLrq+QV5VI4q+haa6MoS65/NK3xJ8bqojgCUAW1WYbl+H44dDQ4A==","repository":{"url":"git+https://github.com/Adammatthiesen/css-js-gen.git","type":"git"},"_npmVersion":"10.9.3","description":"Convert CSS object notation to CSS strings","directories":{},"_nodeVersion":"22.20.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsdown":"^0.20.3","vitest":"^4.0.18","publint":"^0.3.17","@vitest/ui":"^4.0.18","typescript":"^5.9.3","@changesets/cli":"^2.29.8"},"_npmOperationalInternal":{"tmp":"tmp/css-js-gen_1.0.2_1771469419830_0.9510313926835963","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"css-js-gen","version":"1.1.0","description":"Convert CSS object notation to CSS strings","type":"module","repository":{"type":"git","url":"git+https://github.com/withstudiocms/expressive-code-twoslash.git","directory":"packages/css-js-gen"},"author":{"name":"Adam Matthiesen","email":"adam@matthiesen.xyz","url":"https://matthiesen.dev"},"publishConfig":{"access":"public"},"license":"MIT","types":"./dist/index.d.ts","main":"./dist/index.js","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"devDependencies":{"csstype":"^3.2.3"},"keywords":["css","css-in-js","styles","typescript"],"scripts":{"build":"tsdown --config tsdown.config.ts","dev":"tsdown --config tsdown.config.ts --watch --no-clean","test":"vitest","test:ui":"vitest --ui","test:run":"vitest run","test:coverage":"vitest run --coverage","scratchpad:test-styles":"node ./scratchpad/test-styles.mjs","changeset":"changeset"},"_id":"css-js-gen@1.1.0","bugs":{"url":"https://github.com/withstudiocms/expressive-code-twoslash/issues"},"homepage":"https://github.com/withstudiocms/expressive-code-twoslash#readme","_integrity":"sha512-CuPSTe6EwlrDHcMFOfcO3SwVqclVKLnqSbTGGYzfFt8z2NenGeupp47Z3wx+yhQ2pdozb3R8hc+nyECBTykooQ==","_resolved":"/tmp/28b211918ceb9415428a49f906c01939/css-js-gen-1.1.0.tgz","_from":"file:css-js-gen-1.1.0.tgz","_nodeVersion":"22.20.0","_npmVersion":"11.11.0","dist":{"integrity":"sha512-CuPSTe6EwlrDHcMFOfcO3SwVqclVKLnqSbTGGYzfFt8z2NenGeupp47Z3wx+yhQ2pdozb3R8hc+nyECBTykooQ==","shasum":"fcab8483467af760b2e2e8b2fa4dfa727d9370c2","tarball":"https://registry.npmjs.org/css-js-gen/-/css-js-gen-1.1.0.tgz","fileCount":7,"unpackedSize":1080397,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/css-js-gen@1.1.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQC6tNQVEyyqmjyaAy3o4XjSQyo99y/zeLg4aGru+cpaiQIhAK0XXrOMYcOiVY3V2kgGOLDu9xZXN6QqsZrHNjc+5vxI"}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:c6266803-f523-4b9f-8b44-649a3d7259f7"}},"directories":{},"maintainers":[{"name":"adammatthiesen","email":"adam@matthiesen.xyz"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/css-js-gen_1.1.0_1772502701055_0.6483372265602831"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-19T02:23:25.400Z","modified":"2026-03-03T01:51:41.523Z","1.0.0":"2026-02-19T02:23:25.717Z","1.0.1":"2026-02-19T02:48:05.863Z","1.0.2":"2026-02-19T02:50:20.047Z","1.1.0":"2026-03-03T01:51:41.246Z"},"bugs":{"url":"https://github.com/withstudiocms/expressive-code-twoslash/issues"},"author":{"name":"Adam Matthiesen","email":"adam@matthiesen.xyz","url":"https://matthiesen.dev"},"license":"MIT","homepage":"https://github.com/withstudiocms/expressive-code-twoslash#readme","keywords":["css","css-in-js","styles","typescript"],"repository":{"type":"git","url":"git+https://github.com/withstudiocms/expressive-code-twoslash.git","directory":"packages/css-js-gen"},"description":"Convert CSS object notation to CSS strings","maintainers":[{"name":"adammatthiesen","email":"adam@matthiesen.xyz"}],"readme":"# CSS-JS-Gen\n\n[![NPM Version](https://img.shields.io/npm/v/css-js-gen)](https://npm.im/css-js-gen)\n[![Formatted with Biome](https://img.shields.io/badge/Formatted_with-Biome-60a5fa?style=flat&logo=biome)](https://biomejs.dev/)\n[![Allure Test Report](https://img.shields.io/badge/Allure%20Test%20Report-blue?style=flat)](https://withstudiocms.github.io/expressive-code-twoslash/)\n\nA TypeScript package that converts CSS object notation to CSS strings, providing a more maintainable alternative to template literals for generating CSS that needs to be inlined or exported as strings.\n\n## Features\n\n- ✅ **Type-safe CSS objects** - Full TypeScript support with autocomplete\n- ✅ **Nested selectors** - Support for nested CSS rules with `&` parent selector\n- ✅ **Media queries** - Built-in support for `@media` and other at-rules\n- ✅ **Clean output** - Properly formatted and indented CSS strings\n- ✅ **Zero dependencies** - Lightweight and fast\n\n## Installation\n\n```bash\npnpm install css-js-gen\n```\n\n## Usage\n\n### Basic Example\n\n```typescript\nimport { toCSS, css } from './src/index.js';\n\n// Define CSS as objects\nconst styles = css({\n  '.container': {\n    'max-width': '1200px',\n    'margin': '0 auto',\n    'padding': '20px',\n    'background-color': 'var(--container-bg)',\n  },\n});\n\n// Convert to CSS string\nconst cssString = toCSS(styles);\nconsole.log(cssString);\n```\n\nOutput:\n```css\n.container {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 20px;\n    background-color: var(--container-bg);\n}\n```\n\n### Nested Selectors\n\n```typescript\nconst styles = css({\n  '.card': {\n    'padding': '16px',\n    'border-radius': '8px',\n    \n    // Nested selector\n    '.card-title': {\n      'font-size': '24px',\n      'font-weight': 'bold',\n    },\n    \n    // Using & for parent reference\n    '&:hover': {\n      'box-shadow': '0 4px 8px rgba(0,0,0,0.1)',\n    },\n  },\n});\n```\n\nOutput:\n```css\n.card {\n    padding: 16px;\n    border-radius: 8px;\n}\n\n.card .card-title {\n    font-size: 24px;\n    font-weight: bold;\n}\n\n.card:hover {\n    box-shadow: 0 4px 8px rgba(0,0,0,0.1);\n}\n```\n\n### Media Queries\n\n```typescript\nconst styles = css({\n  '.responsive': {\n    'width': '100%',\n    \n    '@media (min-width: 768px)': {\n      'width': '750px',\n      'margin': '0 auto',\n    },\n    \n    '@media (min-width: 1024px)': {\n      'width': '960px',\n    },\n  },\n});\n```\n\n### Minified Output\n\n```typescript\nconst cssString = toCSS(styles, {\n  minify: true,\n  addNewlines: false,\n});\n```\n\n### Custom Indentation\n\n```typescript\nconst cssString = toCSS(styles, {\n  indent: '  ', // 2 spaces instead of 4\n});\n```\n\n## API\n\n### `toCSS(css: CSSObject, options?: CSSGeneratorOptions): string`\n\nConverts a CSS object to a CSS string.\n\n**Parameters:**\n- `css`: The CSS object to convert\n- `options`: Optional configuration\n  - `indent`: Indentation string (default: 4 spaces)\n  - `minify`: Whether to minify output (default: false)\n  - `addNewlines`: Whether to add newlines between rules (default: true)\n\n**Returns:** CSS string\n\n### `css(styles: CSSObject): CSSObject`\n\nHelper function that provides TypeScript autocomplete support for CSS objects.\n\n### `stylesheet(...styles: CSSObject[]): StylesheetReturn`\n\nCreates a merged CSS object with a `toString()` method for flexible style composition.\n\nThis function is designed to be flexible in its input types, allowing for various ways to define styles. It can accept multiple CSS objects as separate arguments, a single array of CSS objects, or a single object containing multiple CSS rules. The function will merge all provided styles and return an object with both the merged `styles` property and a `toString()` method.\n\n**Parameters:**\n- `styles`: One or more CSS objects (as separate arguments, array, or single object)\n\n**Returns:** Object with:\n- `styles`: The merged CSSObject\n- `toString()`: Method that returns the CSS string\n\n**Examples:**\n\nMultiple style objects as arguments:\n```typescript\nconst sheet = stylesheet(\n  { '.header': { background: 'white', padding: '10px' } },\n  { '.container': { padding: '20px', margin: '0 auto' } }\n);\n\nconsole.log(sheet.toString());\n// or access the merged styles object\nconsole.log(sheet.styles);\n```\n\nArray of style objects:\n```typescript\nconst styles = [\n  { '.header': { background: 'white' } },\n  { '.footer': { background: 'black' } }\n];\n\nconst sheet = stylesheet(styles);\nconst cssString = sheet.toString();\n```\n\nSingle object with multiple rules:\n```typescript\nconst sheet = stylesheet({\n  '.header': { \n    background: 'white',\n    padding: '10px',\n    '.title': {\n      'font-size': '24px'\n    }\n  },\n  '.footer': { \n    background: 'black' \n  }\n});\n```\n\nMerging overlapping selectors:\n```typescript\nconst sheet = stylesheet(\n  { '.button': { color: 'red', padding: '10px' } },\n  { '.button': { color: 'blue' } } // color will be overridden\n);\n// Result: .button will have color: blue and padding: 10px\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md"}