{"id":19693342,"url":"https://github.com/renzp94/jsx-css-scoped-loader","last_synced_at":"2026-01-02T22:10:06.911Z","repository":{"id":65652029,"uuid":"468561213","full_name":"renzp94/jsx-css-scoped-loader","owner":"renzp94","description":"在jsx实现css scoped的webpack loader","archived":false,"fork":false,"pushed_at":"2024-05-18T03:56:20.000Z","size":546,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-21T22:37:40.241Z","etag":null,"topics":["babel-plugin","css","loader","postcss-plugin","swc-plugin","webpack-loader","webpack5"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/renzp94.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-03-11T01:01:01.000Z","updated_at":"2024-05-18T03:56:23.000Z","dependencies_parsed_at":"2024-05-18T04:30:42.842Z","dependency_job_id":"69175354-10e3-44f1-8729-e4846ab062d5","html_url":"https://github.com/renzp94/jsx-css-scoped-loader","commit_stats":{"total_commits":21,"total_committers":1,"mean_commits":21.0,"dds":0.0,"last_synced_commit":"c2d12461280e35ee01e56ca807ff9d79918444df"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/renzp94%2Fjsx-css-scoped-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/renzp94%2Fjsx-css-scoped-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/renzp94%2Fjsx-css-scoped-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/renzp94%2Fjsx-css-scoped-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/renzp94","download_url":"https://codeload.github.com/renzp94/jsx-css-scoped-loader/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243672373,"owners_count":20328762,"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":["babel-plugin","css","loader","postcss-plugin","swc-plugin","webpack-loader","webpack5"],"created_at":"2024-11-11T19:16:36.656Z","updated_at":"2026-01-02T22:10:06.905Z","avatar_url":"https://github.com/renzp94.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jsx-css-scoped-loader\n\n在`jsx`实现`css scoped`的`webpack loader`、`babel plugin`、`swc plugin`、`postcss plugin`。\n\n- 处理`jsx`文件的`webpack loader`: `@renzp/jsx-scoped-loader`\n- 处理`jsx`文件的`babel plugin`: `@renzp/babel-plugin-jsx-scoped`\n- 处理`jsx`文件的`swc plugin`: `@renzp/swc-jsx-scoped`\n- 处理`css`文件的`webpack loader`: `@renzp/css-scoped-loader`\n- 处理`css`文件的`postcss plugin`: `@renzp/postcss-css-scoped`\n\n\u003e Tips: 如果要实现`css scoped`的话，需要同时使用`JSX`和`CSS`的处理插件。\n\n\n原理：通过将css文件中的类名全部转化为`xx[data-scoped-xxx]`，然后将每个有className的元素加上`data-scoped-xxx`属性\n\n`css`\n```css\n/* 转化前 */\n.test{\n  color: red;\n}\n/* 转化后 */\n.test[data-scoped-729a2688]{\n  color:red;\n}\n```\n\n`tsx`\n\n```tsx\n// 转化前\n\u003cdiv className=\"test\"\u003etest\u003c/div\u003e\n// 转化后\n\u003cdiv class=\"test\" data-scoped-729a2688=\"true\"\u003etest\u003c/div\u003e\n```\n\n如果需要在css Scoped文件中写全局样式可以通过`::global`\n\n```css\n::global .test {\n  color: red;\n}\n```\n\n\n## webpack\n\n```bash\nnpm i @renzp/jsx-scoped-loader @renzp/css-scoped-loader -D\n```\n\n`webpack.config.js`\n\n```js\nmodule: {\n  rules: [\n    {\n      test: /\\.tsx$/,\n      exclude: /node_modules/,\n      use: ['swc-loader', '@renzp/jsx-scoped-loader'],\n    },\n    {\n      test: /\\.scope\\.css$/,\n      exclude: /node_modules/,\n      use: [\n        'style-loader',\n        'css-loader',\n        '@renzp/css-scoped-loader',\n      ],\n    },\n  ],\n},\n```\n\n## babel\n\n如果你没有用`webpack`，但是用了`babel`，那么可以使用babel插件：`@renzp/babel-plugin-jsx-scoped`，但是还需要配置`postcss`处理的插件：`@renzp/postcss-css-scoped`\n\n\n## swc\n\n可以使用swc插件：`@renzp/swc-jsx-scoped`和`postcss`处理的插件：`@renzp/postcss-css-scoped`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frenzp94%2Fjsx-css-scoped-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frenzp94%2Fjsx-css-scoped-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frenzp94%2Fjsx-css-scoped-loader/lists"}