{"id":32469489,"url":"https://github.com/zdunecki/wc-css-transform","last_synced_at":"2026-07-15T10:33:02.705Z","repository":{"id":318235571,"uuid":"1070441571","full_name":"zdunecki/wc-css-transform","owner":"zdunecki","description":"Transform Web Components CSS to regular CSS","archived":false,"fork":false,"pushed_at":"2025-10-05T23:48:40.000Z","size":28,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-26T15:59:30.864Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/zdunecki.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-05T23:24:47.000Z","updated_at":"2025-10-05T23:48:43.000Z","dependencies_parsed_at":"2025-10-06T01:16:35.958Z","dependency_job_id":"168f54e9-8475-4754-9d2f-d45a59836071","html_url":"https://github.com/zdunecki/wc-css-transform","commit_stats":null,"previous_names":["zdunecki/wc-css-transform"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zdunecki/wc-css-transform","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zdunecki%2Fwc-css-transform","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zdunecki%2Fwc-css-transform/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zdunecki%2Fwc-css-transform/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zdunecki%2Fwc-css-transform/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zdunecki","download_url":"https://codeload.github.com/zdunecki/wc-css-transform/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zdunecki%2Fwc-css-transform/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35501664,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-15T02:00:06.706Z","response_time":131,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2025-10-26T15:59:28.725Z","updated_at":"2026-07-15T10:33:02.689Z","avatar_url":"https://github.com/zdunecki.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# wc-css-transform\n\nTransform Web Components CSS to regular CSS format with data attribute mapping.\n\nA powerful tool for converting web component CSS (using `:host` selectors) into regular CSS compatible formats, with automatic data attribute mapping for better framework integration.\n\n## Features\n\n- 🎯 **Transform `:host` selectors** to regular CSS format\n- 🔄 **Data attribute mapping** - automatically convert attributes to `data-*` format\n- 🛠️ **PostCSS plugin** - integrate with your existing build pipeline\n- 📦 **Framework agnostic** - works with React, Vue, Angular, and more\n- 🎨 **CSS compatible** - outputs clean CSS that works with styled-components, emotion, etc.\n\n## Installation\n\n```bash\nnpm install wc-css-transform\n# or\npnpm add wc-css-transform\n# or\nyarn add wc-css-transform\n```\n\n## Usage\n\n### Basic Usage\n\n```typescript\nimport { wcCssTransform } from 'wc-css-transform';\n\nconst input = `\n:host {\n  color: red;\n  font-size: 16px;\n}\n\n:host([active]) {\n  background: blue;\n}\n\n:host(:hover) {\n  opacity: 0.8;\n}\n`;\n\nconst output = wcCssTransform(input);\n\nconsole.log(output);\n// Output:\n// color: red;\n// font-size: 16px;\n//\n// \u0026[active] {\n//   background: blue;\n// }\n//\n// \u0026:hover {\n//   opacity: 0.8;\n// }\n```\n\n### PostCSS Plugin\n\n```javascript\nimport postcss from 'postcss';\nimport { postcssPlugin } from 'wc-css-transform';\n\nconst result = await postcss([\n  postcssPlugin\n]).process(input);\n```\n\n## API\n\n### `wcCssTransform(input, options)`\n\nTransform web component CSS to regular CSS format.\n\n**Parameters:**\n- `input` (string): CSS input string\n- `options` (object): Configuration options\n\n**Options:**\n- `hostTag` (string): Tag to replace `:host` with (default: `\"\u0026\"`)\n- `dataAttributes` (boolean): Enable data attribute mapping (default: `false`)\n- `excludeFromData` (string[]): Attributes to exclude from data- prefix\n- `layer` (string | false): CSS layer name (default: `false`)\n\n### `postcssPlugin(options)`\n\nPostCSS plugin for build pipeline integration.\n\n## Examples\n\n### React with styled-components\n\n```typescript\nimport styled from 'styled-components';\nimport { wcCssTransform } from 'wc-css-transform';\n\nconst webComponentCSS = `\n:host {\n  color: var(--primary-color);\n}\n\n:host([size=\"large\"]) {\n  font-size: 24px;\n}\n`;\n\nconst StyledComponent = styled.div`\n  ${wcCssTransform(webComponentCSS, { hostTag: '\u0026', dataAttributes: true })}\n`;\n```\n\n### Vue with CSS modules\n\n```typescript\nimport { wcCssTransform } from 'wc-css-transform';\n\nconst componentCSS = wcCssTransform(`\n:host {\n  display: flex;\n  align-items: center;\n}\n\n:host([disabled]) {\n  opacity: 0.5;\n  pointer-events: none;\n}\n`, { hostTag: '\u0026', dataAttributes: true });\n```\n\n## Configuration\n\n### Data Attribute Mapping\n\nWhen `dataAttributes: true`, attributes are automatically prefixed with `data-`:\n\n```css\n/* Input */\n:host([id]) { }\n:host([size=\"large\"]) { }\n[active] { }\n\n/* Output */\n\u0026[data-id] { }\n\u0026[data-size=\"large\"] { }\n[data-active] { }\n```\n\n### Exclude Attributes\n\nUse `excludeFromData` to prevent certain attributes from being prefixed:\n\n```typescript\nwcCssTransform(input, {\n  dataAttributes: true,\n  excludeFromData: ['part', 'class', 'id']\n});\n```\n\n## Build Integration\n\n### Vite\n\n```javascript\n// vite.config.js\nimport { defineConfig } from 'vite';\nimport { postcssPlugin } from 'wc-css-transform';\n\nexport default defineConfig({\n  css: {\n    postcss: {\n      plugins: [\n        postcssPlugin({\n          dataAttributes: true\n        })\n      ]\n    }\n  }\n});\n```\n\n## License\n\nMIT\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzdunecki%2Fwc-css-transform","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzdunecki%2Fwc-css-transform","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzdunecki%2Fwc-css-transform/lists"}