{"id":18063035,"url":"https://github.com/stagas/nested-css","last_synced_at":"2025-04-11T15:13:53.612Z","repository":{"id":57310058,"uuid":"423735240","full_name":"stagas/nested-css","owner":"stagas","description":"compile nested css rules","archived":false,"fork":false,"pushed_at":"2022-08-04T07:21:12.000Z","size":308,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-25T11:21:53.560Z","etag":null,"topics":["compiler","css","css-in-js","less","nested","parser","sass"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stagas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-11-02T06:47:39.000Z","updated_at":"2023-01-29T21:39:31.000Z","dependencies_parsed_at":"2022-08-31T04:21:45.042Z","dependency_job_id":null,"html_url":"https://github.com/stagas/nested-css","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stagas%2Fnested-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stagas%2Fnested-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stagas%2Fnested-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stagas%2Fnested-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stagas","download_url":"https://codeload.github.com/stagas/nested-css/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248429117,"owners_count":21101785,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["compiler","css","css-in-js","less","nested","parser","sass"],"created_at":"2024-10-31T05:09:13.198Z","updated_at":"2025-04-11T15:13:53.590Z","avatar_url":"https://github.com/stagas.png","language":"TypeScript","readme":"\u003ch1\u003e\nnested-css \u003ca href=\"https://npmjs.org/package/nested-css\"\u003e\u003cimg src=\"https://img.shields.io/badge/npm-v3.0.8-F00.svg?colorA=000\"/\u003e\u003c/a\u003e \u003ca href=\"src\"\u003e\u003cimg src=\"https://img.shields.io/badge/loc-129-FFF.svg?colorA=000\"/\u003e\u003c/a\u003e \u003ca href=\"https://cdn.jsdelivr.net/npm/nested-css@3.0.8/dist/nested-css.min.js\"\u003e\u003cimg src=\"https://img.shields.io/badge/brotli-1.1K-333.svg?colorA=000\"/\u003e\u003c/a\u003e \u003ca href=\"LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/badge/license-MIT-F0B.svg?colorA=000\"/\u003e\u003c/a\u003e\n\u003c/h1\u003e\n\n\u003cp\u003e\u003c/p\u003e\n\ncompile nested css rules\n\n\u003ch4\u003e\n\u003ctable\u003e\u003ctr\u003e\u003ctd title=\"Triple click to select and copy paste\"\u003e\n\u003ccode\u003enpm i nested-css \u003c/code\u003e\n\u003c/td\u003e\u003ctd title=\"Triple click to select and copy paste\"\u003e\n\u003ccode\u003epnpm add nested-css \u003c/code\u003e\n\u003c/td\u003e\u003ctd title=\"Triple click to select and copy paste\"\u003e\n\u003ccode\u003eyarn add nested-css\u003c/code\u003e\n\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\n\u003c/h4\u003e\n\n## API\n\n\u003cp\u003e  \u003cdetails id=\"NestedCSSCompiler$5\" title=\"TypeAlias\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#NestedCSSCompiler$5\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003eNestedCSSCompiler\u003c/strong\u003e\u003c/code\u003e     \u0026ndash; Compile to CSS passing parameters to {@link jsToCss}.\u003c/summary\u003e  \u003ca href=\"src/index.ts#L10\"\u003esrc/index.ts#L10\u003c/a\u003e  \u003cul\u003e\u003cp\u003e\u003cdetails id=\"__type$6\" title=\"Function\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#__type$6\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003cem\u003e(rootSelector, aliasMap)\u003c/em\u003e    \u003c/summary\u003e    \u003cul\u003e    \u003cp\u003e    \u003cdetails id=\"rootSelector$8\" title=\"Parameter\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#rootSelector$8\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003erootSelector\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e    \u003cul\u003e\u003cp\u003estring\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"aliasMap$9\" title=\"Parameter\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#aliasMap$9\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003ealiasMap\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e    \u003cul\u003e\u003cp\u003e\u003cspan\u003eMap\u003c/span\u003e\u0026lt;string, string\u0026gt;\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e  \u003cp\u003e\u003cstrong\u003e\u003c/strong\u003e\u003cem\u003e(rootSelector, aliasMap)\u003c/em\u003e  \u0026nbsp;=\u0026gt;  \u003cul\u003estring\u003c/ul\u003e\u003c/p\u003e\u003c/p\u003e    \u003c/ul\u003e\u003c/details\u003e \u0026amp; {\u003cp\u003e  \u003cdetails id=\"valueOf$11\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#valueOf$11\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003evalueOf\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e  \u003ca href=\"src/index.ts#L15\"\u003esrc/index.ts#L15\u003c/a\u003e  \u003cul\u003e\u003cp\u003e\u003ca href=\"#NestedCSSCompiler$5\"\u003eNestedCSSCompiler\u003c/a\u003e\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003c/p\u003e}\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"NestedCSSDeclaration$12\" title=\"TypeAlias\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#NestedCSSDeclaration$12\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003eNestedCSSDeclaration\u003c/strong\u003e\u003c/code\u003e     \u0026ndash; Nested CSS rules.\u003c/summary\u003e  \u003ca href=\"src/types.ts#L6\"\u003esrc/types.ts#L6\u003c/a\u003e  \u003cul\u003e\u003cp\u003e\u003cspan\u003ePartial\u003c/span\u003e\u0026lt;\u003cspan\u003eCSSStyleDeclaration\u003c/span\u003e\u0026gt; \u0026amp; {}\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"css$1\" title=\"Function\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#css$1\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003ecss\u003c/strong\u003e\u003c/code\u003e\u003cem\u003e(parts, values)\u003c/em\u003e     \u0026ndash; Factory a {@link NestedCSSCompiler} for the given string.\u003c/summary\u003e  \u003ca href=\"src/index.ts#L23\"\u003esrc/index.ts#L23\u003c/a\u003e  \u003cul\u003e    \u003cp\u003e    \u003cdetails id=\"parts$3\" title=\"Parameter\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#parts$3\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003eparts\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e    \u003cul\u003e\u003cp\u003e\u003cspan\u003eTemplateStringsArray\u003c/span\u003e\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"values$4\" title=\"Parameter\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#values$4\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003evalues\u003c/strong\u003e\u003c/code\u003e     \u0026ndash;\n\u003c/summary\u003e    \u003cul\u003e\u003cp\u003eunknown  []\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e  \u003cp\u003e\u003cstrong\u003ecss\u003c/strong\u003e\u003cem\u003e(parts, values)\u003c/em\u003e  \u0026nbsp;=\u0026gt;  \u003cul\u003e\u003ca href=\"#NestedCSSCompiler$5\"\u003eNestedCSSCompiler\u003c/a\u003e\u003c/ul\u003e\u003c/p\u003e\u003c/p\u003e    \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"cssToJs$16\" title=\"Function\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#cssToJs$16\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003ecssToJs\u003c/strong\u003e\u003c/code\u003e\u003cem\u003e(input)\u003c/em\u003e     \u0026ndash; Convert a CSS string to a {@link NestedCSSDeclaration}.\u003c/summary\u003e  \u003ca href=\"src/css-to-js.ts#L21\"\u003esrc/css-to-js.ts#L21\u003c/a\u003e  \u003cul\u003e    \u003cp\u003e    \u003cdetails id=\"input$18\" title=\"Parameter\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#input$18\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003einput\u003c/strong\u003e\u003c/code\u003e     \u0026ndash;\n\u003c/summary\u003e    \u003cul\u003e\u003cp\u003estring\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e  \u003cp\u003e\u003cstrong\u003ecssToJs\u003c/strong\u003e\u003cem\u003e(input)\u003c/em\u003e  \u0026nbsp;=\u0026gt;  \u003cul\u003e\u003cspan\u003ePartial\u003c/span\u003e\u0026lt;\u003cspan\u003eCSSStyleDeclaration\u003c/span\u003e\u0026gt;\u003c/ul\u003e\u003c/p\u003e\u003c/p\u003e    \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"jsToCss$19\" title=\"Function\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#jsToCss$19\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003ejsToCss\u003c/strong\u003e\u003c/code\u003e\u003cem\u003e(rules, rootSelector, aliasMap)\u003c/em\u003e     \u0026ndash; Compile a JS nested rules {@link NestedCSSDeclaration} to a CSS string.\u003c/summary\u003e  \u003ca href=\"src/js-to-css.ts#L44\"\u003esrc/js-to-css.ts#L44\u003c/a\u003e  \u003cul\u003e    \u003cp\u003e  \u003cp\u003e\n\nExamples:\n\n```ts\njsToCss({ '.foo': { color: 'blue' } })\n// =\u003e .foo{color:blue}\n\n// custom root\njsToCss({ color: 'red' }, '.my-button')\n// =\u003e .my-button{color:red}\n\n// with substitution\njsToCss({ '.foo': { color: 'blue' } }, null, new Map([['foo', 'bar']]))\n// =\u003e .bar{color:blue}\n```\n\n\u003c/p\u003e\n  \u003cdetails id=\"rules$21\" title=\"Parameter\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#rules$21\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003erules\u003c/strong\u003e\u003c/code\u003e     \u0026ndash; Rules object\u003c/summary\u003e    \u003cul\u003e\u003cp\u003e\u003cspan\u003ePartial\u003c/span\u003e\u0026lt;\u003cspan\u003eCSSStyleDeclaration\u003c/span\u003e\u0026gt;\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"rootSelector$22\" title=\"Parameter\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#rootSelector$22\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003erootSelector\u003c/strong\u003e\u003c/code\u003e     \u0026ndash; Top level rules will use this selector\u003c/summary\u003e    \u003cul\u003e\u003cp\u003e\u003ccode\u003enull\u003c/code\u003e | string\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"aliasMap$23\" title=\"Parameter\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#aliasMap$23\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003ealiasMap\u003c/strong\u003e\u003c/code\u003e     \u0026ndash; Alias identifiers (i.e for \u003ccode\u003e.foo\u003c/code\u003e to become \u003ccode\u003e.bar\u003c/code\u003e\nyou will need a \u003ccode\u003efoo=bar\u003c/code\u003e entry)\u003c/summary\u003e    \u003cul\u003e\u003cp\u003e\u003cspan\u003eMap\u003c/span\u003e\u0026lt;string, string\u0026gt;\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e  \u003cp\u003e\u003cstrong\u003ejsToCss\u003c/strong\u003e\u003cem\u003e(rules, rootSelector, aliasMap)\u003c/em\u003e  \u0026nbsp;=\u0026gt;  \u003cul\u003estring\u003c/ul\u003e\u003c/p\u003e\u003c/p\u003e    \u003c/ul\u003e\u003c/details\u003e\u003c/p\u003e\n\n## Credits\n\n- [tokenizer-next](https://npmjs.org/package/tokenizer-next) by [stagas](https://github.com/stagas) \u0026ndash; iterator based tokenizer for writing parsers\n\n## Contributing\n\n[Fork](https://github.com/stagas/nested-css/fork) or [edit](https://github.dev/stagas/nested-css) and submit a PR.\n\nAll contributions are welcome!\n\n## License\n\n\u003ca href=\"LICENSE\"\u003eMIT\u003c/a\u003e \u0026copy; 2022 [stagas](https://github.com/stagas)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstagas%2Fnested-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstagas%2Fnested-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstagas%2Fnested-css/lists"}