{"id":14971548,"url":"https://github.com/sya-ri/css-var-extract","last_synced_at":"2025-07-04T21:06:59.742Z","repository":{"id":255437001,"uuid":"849931659","full_name":"sya-ri/css-var-extract","owner":"sya-ri","description":"Use CSS variables type-safely for CSS-in-JS.  Generate at build time, has no runtime dependencies, and can be optimized.","archived":false,"fork":false,"pushed_at":"2024-09-17T19:18:52.000Z","size":398,"stargazers_count":7,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-28T23:48:52.627Z","etag":null,"topics":["css","css-in-js","css-variables","react","rsbuild","rsbuild-plugin","rspack","rspack-plugin","vite","vite-plugin","webpack","webpack-plugin"],"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/sya-ri.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"ko_fi":"sya_ri"}},"created_at":"2024-08-30T14:39:54.000Z","updated_at":"2024-09-05T03:52:28.000Z","dependencies_parsed_at":null,"dependency_job_id":"23bc5f44-a491-4cdb-9b62-1da1acf980a2","html_url":"https://github.com/sya-ri/css-var-extract","commit_stats":{"total_commits":78,"total_committers":2,"mean_commits":39.0,"dds":"0.038461538461538436","last_synced_commit":"952197fa3f0f714c0ff0242e8a6c5f6c8de9e7c8"},"previous_names":["sya-ri/css-var-extract"],"tags_count":13,"template":false,"template_full_name":null,"purl":"pkg:github/sya-ri/css-var-extract","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sya-ri%2Fcss-var-extract","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sya-ri%2Fcss-var-extract/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sya-ri%2Fcss-var-extract/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sya-ri%2Fcss-var-extract/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sya-ri","download_url":"https://codeload.github.com/sya-ri/css-var-extract/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sya-ri%2Fcss-var-extract/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263056858,"owners_count":23406834,"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":["css","css-in-js","css-variables","react","rsbuild","rsbuild-plugin","rspack","rspack-plugin","vite","vite-plugin","webpack","webpack-plugin"],"created_at":"2024-09-24T13:45:21.831Z","updated_at":"2025-07-04T21:06:59.721Z","avatar_url":"https://github.com/sya-ri.png","language":"TypeScript","funding_links":["https://ko-fi.com/sya_ri"],"categories":[],"sub_categories":[],"readme":"# CSS Var Extract\n\n[![npm version](https://badge.fury.io/js/css-var-extract.svg)](https://badge.fury.io/js/css-var-extract)\n\nUse CSS variables type-safely for CSS-in-JS.\n\nGenerate at build time, has **no runtime dependencies**, and can be **optimized**.\n\n## 🤔 Why?\n\nType-safely access CSS variables created by yourself or by external component libraries from TypeScript.\n\n```css\n:root {\n    --primary: #d3a3a3;\n    --secondary: #5aa68a;\n    --white: #fff;\n}\n```\n\nAutomatically generate `.ts` files based on `.css`.\n\n```ts\n// :root: #d3a3a3\nexport const primary = \"var(--primary)\"\n\n// :root: #5aa68a\nexport const secondary = \"var(--secondary)\"\n\n// :root: #fff\nexport const white = \"var(--white)\"\n```\n\nIt can be used in `styles` and also in CSS-in-JS such as [vanilla-extract](https://vanilla-extract.style).\n\n```tsx\nimport \"./theme.css\";\nimport * as vars from \"./cssVar.gen\";\n\nconst App = () =\u003e {\n    return (\n        \u003cdiv style={{ backgroundColor: vars.primary }}\u003e\n            \u003ch1 style={{ color: vars.primary }}\u003e\n                Primary color\n            \u003c/h1\u003e\n            \u003cp style={{ color: vars.secondary }}\u003e\n                Secondary color\n            \u003c/p\u003e\n        \u003c/div\u003e\n    );\n};\n\nexport default App;\n```\n\n```ts\nimport { style } from \"@vanilla-extract/css\";\nimport * as vars from \"./cssVar.gen.ts\";\n\nexport const buttonStyle = style({\n    backgroundColor: vars.primary,\n});\n\nexport const messageStyle = style({\n    color: vars.secondary,\n});\n```\n\n## 📦 Installation\n\nYou need to configure your project's bundler to use the CssVarExtract Plugin or the CssVarExtract CLI.\n\nThe plugin will automatically generate .ts through your bundler's dev and build processes.\n\n### Configuration with Vite\n\n- [examples/basic-vite-react](examples/basic-vite-react)\n- [examples/with-vanilla-extract](examples/with-vanilla-extract)\n\nYou need to install the `css-var-extract-plugin` package.\n\n```shell\nnpm i -D css-var-extract-plugin\n```\n\nOnce installed, you'll need to add the plugin to your Vite configuration.\n\n```ts\n// vite.config.ts\nimport react from \"@vitejs/plugin-react\";\nimport CssVarExtractVite from \"css-var-extract-plugin/vite\";\nimport { defineConfig } from \"vite\";\n\nexport default defineConfig({\n    plugins: [\n        CssVarExtractVite({\n            files: [\"src/theme.css\"],\n        }),\n        react(),\n    ],\n});\n```\n\n### Configuration with Rspack/Rsbuild\n\n- [examples/basic-rsbuild-react](examples/basic-rsbuild-react)\n\nYou need to install the `css-var-extract-plugin` package.\n\n```shell\nnpm i -D css-var-extract-plugin\n```\n\nOnce installed, you'll need to add the plugin to your configuration.\n\n```ts\n// rsbuild.config.ts\nimport { defineConfig } from \"@rsbuild/core\";\nimport { pluginReact } from \"@rsbuild/plugin-react\";\nimport CssVarExtractRspack from \"css-var-extract-plugin/rspack\";\n\nexport default defineConfig({\n    plugins: [pluginReact()],\n    tools: {\n        rspack: {\n            plugins: [\n                CssVarExtractRspack({\n                    files: [\"src/theme.css\"],\n                }),\n            ],\n        },\n    },\n});\n```\n\n### Configuration with Webpack\n\n- [examples/basic-webpack-react](examples/basic-webpack-react)\n\nYou need to install the `css-var-extract-plugin` package.\n\n```shell\nnpm i -D css-var-extract-plugin\n```\n\nOnce installed, you'll need to add the plugin to your configuration.\n\n```ts\n// webpack.config.ts\nimport CssVarExtractWebpack from \"css-var-extract-plugin/webpack\"\n\nexport default {\n    plugins: [CssVarExtractWebpack({\n        files: [\"src/theme.css\"],\n    })],\n}\n```\n\n### Configuration with the CSS Var Extract CLI\n\nYou need to install the `css-var-extract-cli` package.\n\n```shell\nnpm i -D css-var-extract-cli\n```\n\nOnce installed, you'll need to amend your scripts in your package.json for the CLI to watch and generate files.\n\n```json\n{\n  \"scripts\": {\n    \"generate-css-var\": \"cve generate\",\n    \"watch-css-var\": \"cve watch\",\n    \"build\": \"npm run generate-css-var \u0026\u0026 ...\",\n    \"dev\": \"npm run watch-css-var \u0026\u0026 ...\"\n  }\n}\n```\n\nWith the CLI installed, the following commands are made available via the `cve` command\n\n#### Using the `generate` command\n\nGenerates the `.ts` file based on the provided configuration.\n\n```shell\ncve generate\n```\n\n#### Using the `watch` command\n\nContinuously watches the specified files and regenerates the `.ts` file as needed.\n\n```shell\ncve watch\n```\n\n## 🔧 Configuration\n\nYou can create `cve.config.json` and change settings.\nIf you are using a plugin, it also supports inline configuration.\n\nYou can also override the settings by the `CVE_CONFIG` environment variable.\n\n### Priority\n\nThe lower the number, the higher the priority.\n\n1. Environment variable: `CVE_CONFIG`\n2. Inline config\n3. File config `cve.config.json`\n\n### JSON\n\n```json\n{\n  \"files\": [],\n  \"output\": \"./src/cssVar.gen.ts\",\n  \"fileHeader\": [\n    \"/* prettier-ignore-start */\",\n    \"/* eslint-disable */\",\n    \"// @ts-nocheck\",\n    \"// noinspection JSUnusedGlobalSymbols\"\n  ],\n  \"fileFooter\": [\n    \"/* prettier-ignore-end */\"\n  ],\n  \"disableLogging\": false,\n  \"emoji\": true\n}\n```\n\n| Option         | Description                                                           |\n|----------------|-----------------------------------------------------------------------|\n| files          | CSS files that collects css variables. Set relative or absolute path. |\n| output         | Path to generate the Typescript file. Set relative or absolute path.  |\n| fileHeader     | Header of the generated file.                                         |\n| fileFooter     | Footer of the generated file.                                         |\n| disableLogging | Disable logging on generation.                                        |\n| emoji          | Use emojis in logs.                                                   |\n\n## 👏 Acknowledgments\n\nThis project was inspired by and references implementation patterns from the [TanStack Router](https://tanstack.com/router) package.\nWe extend our gratitude to the developers and maintainers of [TanStack Router](https://tanstack.com/router) for their excellent work.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsya-ri%2Fcss-var-extract","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsya-ri%2Fcss-var-extract","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsya-ri%2Fcss-var-extract/lists"}