{"id":28419418,"url":"https://github.com/ppldo/vanillin","last_synced_at":"2025-06-27T04:32:13.026Z","repository":{"id":57137822,"uuid":"378877264","full_name":"ppldo/vanillin","owner":"ppldo","description":"CLI-tool for transpiling css modules to vanilla-extract","archived":false,"fork":false,"pushed_at":"2021-07-02T13:35:08.000Z","size":335,"stargazers_count":9,"open_issues_count":6,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-06-04T22:29:44.908Z","etag":null,"topics":["css","css-modules","migration","vanilla-extract"],"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/ppldo.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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-06-21T09:30:15.000Z","updated_at":"2023-01-17T18:28:31.000Z","dependencies_parsed_at":"2022-08-22T21:30:42.679Z","dependency_job_id":null,"html_url":"https://github.com/ppldo/vanillin","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ppldo/vanillin","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ppldo%2Fvanillin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ppldo%2Fvanillin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ppldo%2Fvanillin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ppldo%2Fvanillin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ppldo","download_url":"https://codeload.github.com/ppldo/vanillin/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ppldo%2Fvanillin/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262188396,"owners_count":23272341,"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-modules","migration","vanilla-extract"],"created_at":"2025-06-04T18:10:25.501Z","updated_at":"2025-06-27T04:32:13.014Z","avatar_url":"https://github.com/ppldo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vanillin - migrate to vanilla-extract in hour (eventually)\n\nCLI-tool for transpiling css modules to vanilla-extract.\n\nWhen it doesn't possible to transpile automatically, vanillin will add a TODO comment.\n\n**input:**\n\n```css\n.wrap {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    padding-top: 14px;\n    white-space: pre-wrap;\n    overflow-wrap: break-word\n}\n\n.wrap.active {\n    cursor: pointer;\n}\n\n.wrap a {\n    color: var(--color-0);\n}\n\n.wrap a:hover {\n    color: var(--color-1, pink);\n}\n```\n\n**output:**\n\n```ts\nimport {style, globalStyle} from \"@vanilla-extract/css\";\nimport {vars} from \"../vars\";\n\nexport const wrap = style({\n    display: \"flex\",\n    flexDirection: \"column\",\n    width: \"100%\",\n    paddingTop: \"14px\",\n    whiteSpace: \"pre-wrap\",\n    overflowWrap: \"break-word\"\n});\nexport const active = style({\n    selectors: {[`${wrap}\u0026`]: {cursor: \"pointer\"}}\n});\nglobalStyle(`${wrap} a`, {color: vars.color0});\nglobalStyle(`${wrap} a:hover`, {color: fallbackVar(vars.color1, \"pink\")});\n```\n\n## Install:\n\n```sh\nyarn add -D @ppldo/vanillin\n\nnpm install -D @ppldo/vanillin\n```\n\n## Usage\n\nInternally vanillin uses PostCSS parser, which expects spec-compliant CSS. If you use preprocessor, you need to\npreprocess your file before use vanillin.\n\nNext examples assume your project uses PostCSS. For another preprocessor consults with their CLI documentation.\n\n**Note:** don't forget to install postcss-cli with proper version\n\n```sh\nyarn add -D postcss-cli@YOUR_POSTCSS_VERSION\n\nnpm install -D postcss-cli@YOUR_POSTCSS_VERSION\n```\n\nTry to convert one file. Pass css content to stdin of vanillin, result will be printed stdout which you can redirect to\nnew file.\n\n```sh\npostcss styles.module.css | vanillin \u003e styles.css.ts\n```\n\nChange style imports:\n\n```ts\n// before\nimport styles from './styles.module.css'\n\n// after\nimport * as styles from './styles.css'\n```\n\nPrettify generated file with your code formatter.\n\nFix all TODO comments and possible compilation errors in generated file `styles.css.ts`\n\nMake sure code semantic doesn't change. Make bug reports if so.\n\nNow you can delete original file:\n\n```sh\nrm styles.module.css\n```\n\nCongrats! You just started migration to vanilla-extract.\n\nRepeat it until you (and we) will be sure about codegen quality, and then go to bulk converting.\n\n## Bug reports\n\nMake sure you use the latest version of vanillin.\n\n**If generated code changed semantic of original code and don't contain TODO comments about it, please let us know by\nsending bug report with preprocessed file (NOT ORIGINAL ONE) and generated file.**\n\nPlease, paste output of this command to bug report:\n\n```sh\nPREPR=$(postcss styles.module.css) \u0026\u0026\n printf \"IN:\\n\\n$PREPR\\n\\nOUT:\\n\\n\" \u0026\u0026\n  printf \"$PREPR\" | vanillin\n```\n\nAlso add vanillin version and desired output.\n\n## Variables\n\n**Note:**\nIf you want to convert variables.css to vanilla-extract variables, don't forget to disable the CSS processor plugin for\ntranslating custom properties.\n\nGiven such CSS variables:\n\n```css\n:root {\n    --color-black: #000;\n    --color-0: #F44336;\n    --color-0-1: #FF8575;\n    --color-gradient-0: linear-gradient(0deg, var(--color-0) 0%, var(--color-0-1) 100%);\n    --color-red: red;\n    --color-1: #C2185B;\n    --color-1-1: #E33594;\n    --color-gradient-1: linear-gradient(0deg, var(--color-1) 0%, var(--color-1-1) 100%);\n}\n```\n\nYou should create file `vars.ts` with `vars` export and all variables translated to camelCase:\n\n`vars.ts`\n\n```ts\nimport {createGlobalTheme} from '@vanilla-extract/css'\n\nconst colorBlack = '#000'\nconst color0 = '#F44336'\nconst color01 = '#FF8575'\nconst colorGradient0 = `linear-gradient(0deg, ${color0} 0%, ${color01} 100%)`\nconst colorRed = 'red'\nconst color1 = '#C2185B'\nconst color11 = '#E33594'\nconst colorGradient1 = `linear-gradient(0deg, ${color1} 0%, ${color11} 100%)`\n\nexport const vars = createGlobalTheme(':root', {\n    colorBlack,\n    color0,\n    color01,\n    colorGradient0,\n    colorRed,\n    color1,\n    color11,\n    colorGradient1\n})\n```\n\nYou can remember it path to shell variable:\n\n```sh\nVARS=$(realpath vars.ts)\n```\n\nThen when you run vanillin on your regular css pass this path under `vars` flag.\n\n**ATTENTION**: You should run this command from directory, where `styles.css.ts` will be placed!\n\n```sh\npostcss styles.module.css | vanillin --vars $VARS \u003e styles.css.ts\n```\n\nVanillin will replace variables from theme to refs. All unknown variables will be left as is.\n\n**input:**\n\n```css\n.root {\n    --color-0: purple;\n    --color-some: green;\n    color: var(--color-0, red);\n    background: var(--color-gradient-0);\n    border: solid 1px var(--color-brand);\n}\n```\n\n**output:**\n\n```ts\nimport {style} from \"@vanilla-extract/css\";\nimport {vars} from '../vars.ts'\n\nexport const root = style({\n    vars: {\n        [vars.color0]: 'purple',\n        '--color-some': 'green',\n    },\n    color: fallbackVar(vars.color0, \"red\"),\n    background: vars.colorGradient0,\n    border: 'solid 1px var(--color-brand)',\n})\n```\n\n## Bulk converting\n\nCall vanillin with two arguments: directory with preprocessed css files and your output directory.\n\nVanillin does recursive search css files in directory and writes it to output directory with the same structure. For\nexample styles.css from ./build/some-component/styles.css will be generated in ./src/some-component/styles.css.ts\n(full project).\n\nWe assume your original files named `styles.module.css`,then names of generated files will be `styles.modules.css.ts`\n\nSelect project part which you are going convert:\n\n```sh\nFOLDER=src\n```\n\nGenerate styles.css.ts with vanillin:\n\n```sh\npostcss \"$FOLDER/**/styles.module.css\" --base $FOLDER --dir build\nvanillin --bulk build $FOLDER\nrm -rf build\n```\n\nYou can use vanillin --bulk with `vars` flag.\n\n```sh\nvanillin --bulk cssDir targetDir --vars vars.ts\n```\n\nYou can bulk replace style imports with IDE or use some regexp:\n\n```sh\nfind $FOLDER -name '*.tsx' -type f -print0 |\n xargs -0 sed -E -i \"s#import\\s+(\\w+)\\s+from\\s+.\\./styles\\.module\\.css.#import * as \\1 from './styles.module.css'#\"\n```\n\nFix all TODO comments and possible compilation errors in generated files.\n\nNow you can delete original files:\n\n```sh\nfind $FOLDER -name \"styles.module.css\" -exec rm {} \\;\n```\n\n## Caveats\n\nAll kebab-case class names will be transformed to camelCase, with TODO comment, because of js syntax\n\nIn case of circular dependencies (or forward refs) in selectors, some marker classes will be added.\n\n:local() pseudo from css modules spec not supported.\n\n```css\n/*localB and localC will not be local*/\n.localA :global global-b :local(localC) :local .localB {\n}\n```\n\nFor all not implemented yet features from CSS and CSS Modules look\nhere: https://github.com/ppldo/vanillin/issues?q=is%3Aissue+is%3Aopen+label%3Atodo\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fppldo%2Fvanillin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fppldo%2Fvanillin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fppldo%2Fvanillin/lists"}