{"id":13417395,"url":"https://github.com/shixuanhong/vite-plugin-css-export","last_synced_at":"2025-03-15T02:31:16.555Z","repository":{"id":56788374,"uuid":"452914062","full_name":"shixuanhong/vite-plugin-css-export","owner":"shixuanhong","description":"A Vite plugin for sharing variables between Javascript and CSS (or Sass, Less, etc.)","archived":false,"fork":false,"pushed_at":"2024-10-16T16:46:38.000Z","size":237,"stargazers_count":26,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-18T14:33:01.730Z","etag":null,"topics":["css","vite","vite-plugin","vite-plugin-css-export"],"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/shixuanhong.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}},"created_at":"2022-01-28T02:30:07.000Z","updated_at":"2024-10-16T16:46:42.000Z","dependencies_parsed_at":"2024-01-07T18:05:16.565Z","dependency_job_id":"73c73b41-6f56-409b-8230-f26dd8916ffa","html_url":"https://github.com/shixuanhong/vite-plugin-css-export","commit_stats":{"total_commits":59,"total_committers":3,"mean_commits":"19.666666666666668","dds":"0.10169491525423724","last_synced_commit":"e528ed9eb77ef862caa90ae4b9b6c7f69417e2a2"},"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shixuanhong%2Fvite-plugin-css-export","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shixuanhong%2Fvite-plugin-css-export/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shixuanhong%2Fvite-plugin-css-export/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shixuanhong%2Fvite-plugin-css-export/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shixuanhong","download_url":"https://codeload.github.com/shixuanhong/vite-plugin-css-export/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243674797,"owners_count":20329163,"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","vite","vite-plugin","vite-plugin-css-export"],"created_at":"2024-07-30T22:00:36.384Z","updated_at":"2025-03-15T02:31:16.191Z","avatar_url":"https://github.com/shixuanhong.png","language":"TypeScript","funding_links":[],"categories":["Plugins"],"sub_categories":["Framework-agnostic Plugins"],"readme":"# vite-plugin-css-export 🥰\n\n[中文](https://github.com/shixuanhong/vite-plugin-css-export/blob/main/README_zh-CN.md) | [English](https://github.com/shixuanhong/vite-plugin-css-export/blob/main/README.md)\n\n**Export variables from CSS to JS, and support nested rules.**\n\n\u003cp align=\"left\"\u003e\n  \u003ca href=\"https://npmjs.com/package/vite-plugin-css-export\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/vite-plugin-css-export\" alt=\"npm package\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://nodejs.org/en/about/releases/\"\u003e\u003cimg src=\"https://img.shields.io/node/v/vite-plugin-css-export\" alt=\"node compatibility\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vite\"\u003e\u003cimg src=\"https://img.shields.io/npm/dependency-version/vite-plugin-css-export/peer/vite\" alt=\"vite compatibility\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nThis plugin allows you to use a pseudo-class called `:export` in CSS, and properties in this pseudo-class will be exported to JavaScript.\n\nBesides that, with the help of Vite, we can use `:export` in .scss, .sass, .less, .styl and .stylus files.\n\n[How to use css pre-processors in Vite](https://vitejs.dev/guide/features.html#css-pre-processors)\n\n\u003e Note: Please use 3.x for Vite5, 2.x for Vite4, and 1.x for Vite2 and Vite3.\n\n## Install ❤️\n\n```shell\nnpm install vite-plugin-css-export -D\n```\n\nor\n\n```shell\nyarn add vite-plugin-css-export -D\n```\n\nor\n\n```shell\npnpm add vite-plugin-css-export -D\n```\n\n## Usage 💡\n\n### Quick Start\n\n```typescript\n// vite.config.ts\nimport ViteCSSExportPlugin from 'vite-plugin-css-export'\nimport { defineConfig } from 'vite'\n\nexport default defineConfig({\n  plugins: [ViteCSSExportPlugin()]\n})\n```\n\n```css\n/* example.css */\n:root {\n  --font-color: #333;\n}\n\n:export {\n  fontColor: var(--font-color);\n  fontSize: 14px;\n}\n\n:export button {\n  bgColor: #462dd3;\n  color: #fff;\n}\n\n:export menu menuItem {\n  bgColor: #1d243a;\n  color: #fff;\n}\n```\n\n```typescript\n// if you use in Typescript. wildcard module declarations\n// env.d.ts\n/// \u003creference types=\"vite-plugin-css-export/client\" /\u003e\n\n// if you want IntelliSense\ninterface CSSPropertiesExportedData {\n  fontColor: string\n  fontSize: string\n  button: {\n    bgColor: string\n    color: string\n  }\n  menu: {\n    menuItem: {\n      bgColor: string\n      color: string\n    }\n  }\n}\n```\n\nUse the suffix `?export`.\n\n```typescript\n// main.ts\nimport cssResult from './assets/style/example.css?export'\n\nconsole.log(cssResult)\n\n// output\n// {\n//     fontColor: \"var(--font-color)\",\n//     fontSize: \"14px\",\n//     button: {\n//         bgColor: \"#462dd3\",\n//         color: \"#fff\"\n//     },\n//     menu: {\n//         menuItem: {\n//             bgColor: \"#1d243a\",\n//             color: \"#fff\"\n//         }\n//     }\n// }\n```\n\n### CSS Pre-processor\n\nIf you are using CSS pre-processor then you can use nested rules.\n\n```scss\n// .scss\n:root {\n  --font-color: #333;\n}\n\n$menuItemBgColor: #1d243a;\n\n:export {\n  fontColor: var(--font-color);\n  fontSize: 14px;\n  button {\n    bgcolor: #462dd3;\n    color: #fff;\n  }\n  menu {\n    menuItem {\n      bgcolor: $menuItemBgColor;\n      color: #fff;\n    }\n  }\n}\n```\n\n### CSS Module\n\nWhen used with CSS module, some simple configuration is required. By default, the exported results will not include CSS module related content (except what's in `:export`) .\n\n```typescript\n// vite.config.ts\nimport ViteCSSExportPlugin from 'vite-plugin-css-export'\nimport { defineConfig } from 'vite'\n\nexport default defineConfig({\n  plugins: [\n    ViteCSSExportPlugin({\n      cssModule: {\n        isGlobalCSSModule: false,\n        enableExportMerge: true, // default false\n        sharedDataExportName: 'cssExportedData' // default 'sharedData'\n      }\n    })\n  ]\n})\n```\n\n```scss\n// example.module.scss\n:root {\n  --font-color: #333;\n}\n\n$menuItemBgColor: #1d243a;\n\n.base-button {\n  background-color: transparent;\n}\n\n// alias for :export\n:share {\n  fontcolor: var(--font-color);\n  fontsize: 14px;\n\n  button {\n    bgcolor: #462dd3;\n    color: #fff;\n  }\n\n  menu {\n    menuItem {\n      bgcolor: $menuItemBgColor;\n      color: #fff;\n    }\n  }\n}\n\n:export {\n  fontColor: var(--font-color);\n  fontSize: 14px;\n}\n```\n\n```typescript\n// main.ts\nimport cssModuleResult from './assets/style/example.module.scss?export'\n\nconsole.log(cssModuleResult)\n\n// output\n// {\n//     cssExportedData: {\n//         fontColor: \"var(--font-color)\",\n//         fontSize: \"14px\",\n//         button: {\n//             bgColor: \"#462dd3\",\n//             color: \"#fff\"\n//         },\n//         menu: {\n//             menuItem: {\n//                 bgColor: \"#1d243a\",\n//                 color: \"#fff\"\n//             }\n//         }\n//     },\n//     fontColor: \"var(--font-color)\",\n//     fontSize: \"14px\",\n//     \"base-button\": \"_base-button_1k9w3_5\"\n// }\n\n// when enableExportMerge is false\n// output\n// {\n//     fontColor: \"var(--font-color)\",\n//     fontSize: \"14px\",\n//     button: {\n//         bgColor: \"#462dd3\",\n//         color: \"#fff\"\n//     },\n//     menu: {\n//         menuItem: {\n//             bgColor: \"#1d243a\",\n//             color: \"#fff\"\n//         }\n//     }\n// }\n```\n\n### Note ⚠\n\nIf the plugin is used with CSS module, please replace `:export` with `:share` to avoid unknown conflicts with `:export` provided by CSS module.\n\n\u003e In fact you can still use `:export`, which won't cause a runtime error, `:share` is an alias for `:export`.\n\nPlease do not type the following characters in property names:\n\n```bash\n\n\"/\", \"~\", \"\u003e\", \"\u003c\", \"[\", \"]\", \"(\", \")\", \".\", \"#\", \"@\", \":\", \"*\"\n```\n\nBecause this plugin is applied after `vite:css`, all parsing actions are based on the result returned by `vite:css`. When you type the above characters, there are some characters that the plugin cannot give correct warning/error message, for example: `@`\n\n```scss\n// your code\n:export {\n  fontColor: var(--font-color);\n  fontSize: 14px;\n\n  button {\n    bgcolor: #462dd3;\n    color: #fff;\n  }\n\n  @menu {\n    menuItem {\n      bgcolor: $menuItemBgColor;\n      color: #fff;\n    }\n  }\n}\n```\n\n```css\n/** after vite:css */\n:export {\n  fontColor: var(--font-color);\n  fontSize: 14px;\n}\n:export button {\n  bgColor: #462dd3;\n  color: #fff;\n}\n/** unable to track the error @menu */\n@menu {\n  :export menuItem {\n    bgColor: #1d243a;\n    color: #fff;\n  }\n}\n```\n\n```javascript\n// after vite:css-export\n{\n  fontColor: \"var(--font-color)\",\n  fontSize: \"14px\",\n  button: {\n    bgColor: \"#462dd3\",\n    color: \"#fff\"\n  },\n  // menu is missing\n  menuItem: {\n    bgColor: \"#1d243a\",\n    color: \"#fff\"\n  }\n}\n```\n\n### Lint\n\nYou may get some warnings from the editor or Stylelint, you can disable related rules.\n\n#### VS Code\n\n```json\n{\n  \"css.lint.unknownProperties\": \"ignore\",\n  \"scss.lint.unknownProperties\": \"ignore\",\n  \"less.lint.unknownProperties\": \"ignore\"\n}\n```\n\n#### Stylelint\n\n```json\n{\n  \"rules\": {\n    \"property-no-unknown\": [\n      true,\n      {\n        \"ignoreSelectors\": [\":export\", \":share\"]\n      }\n    ],\n    \"property-case\": null,\n    \"selector-pseudo-class-no-unknown\": [\n      true,\n      {\n        \"ignorePseudoClasses\": [\"export\", \"share\"]\n      }\n    ],\n    \"selector-type-no-unknown\": [\n      true,\n      {\n        \"ignore\": [\"default-namespace\"]\n      }\n    ]\n  }\n}\n```\n\n## Options ⚙️\n\n### shouldTransform\n\n- **type:** `(id: string) =\u003e boolean`\n\n- **default:** `undefined`\n\n- **description:** This option allows you to additionally specify which style files should be transformed, not just `?export`. Usage:\n\n```typescript\n// vite.config.ts\nexport default defineConfig({\n  plugins: [\n    ViteCSSExportPlugin({\n      shouldTransform(id) {\n        const include = path.resolve(\n          process.cwd(),\n          'example/assets/style/share-to-js'\n        )\n        return path.resolve(id).indexOf(include) \u003e -1\n      }\n    })\n  ]\n})\n```\n\n### propertyNameTransformer\n\n- **type:** `(key: string) =\u003e string`\n\n- **default:** `undefined`\n\n- **description:** The option allows you to define a method for transforming CSS property names, but doesn`t transform additionalData. The plugin has some built-in methods. Usage:\n\n```typescript\n// vite.config.ts\nimport {\n  default as ViteCSSExportPlugin,\n  kebabCaseToUpperCamelCase,\n  kebabCaseToLowerCamelCase,\n  kebabCaseToPascalCase\n} from 'vite-plugin-css-export'\n\nexport default defineConfig({\n  plugins: [\n    ViteCSSExportPlugin({\n      propertyNameTransformer: kebabCaseToUpperCamelCase\n    })\n  ]\n})\n```\n\n### additionalData\n\n- **type:** `SharedCSSData`\n\n- **default:** `{}`\n\n- **description:** The option allows you to append data to all processed results, we can share some common variables here.\n\n### cssModule\n\n#### cssModule.isGlobalCSSModule\n\n- **type:** `boolean`\n\n- **default:** `false`\n\n- **description:** Whether the CSS module is used globally, not just in the `.module.[suffix]` file.\n\n#### cssModule.enableExportMerge\n\n- **type:** `boolean`\n\n- **default:** `false`\n\n- **description:** When value is true, `sharedData` will be merged with the result of CSS module, otherwise only `sharedData` will be exported. It won't work when using `?inline`\n\n\u003e _`sharedData` is the parsed result of the plugin._\n\n#### cssModule.sharedDataExportName\n\n- **type:** `string`\n\n- **default:** `'sharedData'`\n\n- **description:** When `cssModule.enableExportMerge` is true, modify the property name of `sharedData` in the merged result. It won't work when using `?inline`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshixuanhong%2Fvite-plugin-css-export","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshixuanhong%2Fvite-plugin-css-export","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshixuanhong%2Fvite-plugin-css-export/lists"}