{"id":23174582,"url":"https://github.com/vscodeshift/jss-codemorphs","last_synced_at":"2026-04-09T20:44:48.473Z","repository":{"id":40783519,"uuid":"246159324","full_name":"vscodeshift/jss-codemorphs","owner":"vscodeshift","description":"command for converting from CSS to JSS","archived":false,"fork":false,"pushed_at":"2023-01-05T09:33:57.000Z","size":4047,"stargazers_count":1,"open_issues_count":23,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-10T09:15:15.264Z","etag":null,"topics":["codemods","css","css-in-jss","jscodeshift","jss","vscodeshift"],"latest_commit_sha":null,"homepage":null,"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/vscodeshift.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-03-09T22:58:27.000Z","updated_at":"2020-11-19T19:29:00.000Z","dependencies_parsed_at":"2023-02-03T23:00:55.772Z","dependency_job_id":null,"html_url":"https://github.com/vscodeshift/jss-codemorphs","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vscodeshift%2Fjss-codemorphs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vscodeshift%2Fjss-codemorphs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vscodeshift%2Fjss-codemorphs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vscodeshift%2Fjss-codemorphs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vscodeshift","download_url":"https://codeload.github.com/vscodeshift/jss-codemorphs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247271492,"owners_count":20911586,"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":["codemods","css","css-in-jss","jscodeshift","jss","vscodeshift"],"created_at":"2024-12-18T05:30:15.822Z","updated_at":"2026-04-09T20:44:48.425Z","avatar_url":"https://github.com/vscodeshift.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @vscodeshift/jss-codemorphs\n\n[![CircleCI](https://circleci.com/gh/vscodeshift/jss-codemorphs.svg?style=svg)](https://circleci.com/gh/vscodeshift/jss-codemorphs)\n[![Coverage Status](https://codecov.io/gh/vscodeshift/jss-codemorphs/branch/master/graph/badge.svg)](https://codecov.io/gh/vscodeshift/jss-codemorphs)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n[![Visual Studio Marketplace Version](https://img.shields.io/visual-studio-marketplace/v/vscodeshift.jss-codemorphs)](https://marketplace.visualstudio.com/items?itemName=vscodeshift.jss-codemorphs)\n\n# **Convert CSS to JSS** Command\n\n## Example\n\n### Before\n\n```ts\n@keyframes alarm {\n  from {\n    color: red;\n  }\n  50% {\n    color: initial;\n  }\n  to {\n    color: red;\n  }\n}\n.foo {\n  color: green;\n  \u0026 .bar-qux, \u0026 .glorm:after {\n    color: red;\n  }\n  \u0026 .baz:after {\n    content: 'whoo';\n  }\n}\n.glorm {\n  color: green;\n  display: box;\n  display: flex-box;\n  display: flex;\n}\n.bar-qux {\n  color: white;\n  animation: alarm 1s linear infinite;\n}\n@media screen {\n  a {\n    text-decoration: none;\n    .foo {\n      color: brown;\n    }\n  }\n  .foo {\n    \u0026 .bar-qux {\n      color: orange;\n    }\n  }\n}\n```\n\n### Command\n\n```\njscodeshift -t path/to/jss-codemorphs/css-to-jss.js \u003cfile\u003e\n```\n\n### After\n\n```ts\n'@keyframes alarm': {\n  from: {\n    color: 'red',\n  },\n  '50%': {\n    color: 'initial',\n  },\n  to: {\n    color: 'red',\n  },\n},\nfoo: {\n  color: 'green',\n  '\u0026 $barQux, \u0026 $glorm:after': {\n    color: 'red',\n  },\n  '\u0026 .baz:after': {\n    content: '\"whoo\"',\n  },\n},\nglorm: {\n  color: 'green',\n  display: 'flex',\n  fallbacks: [\n    {\n      display: 'box',\n    },\n    {\n      display: 'flex-box',\n    },\n  ],\n},\nbarQux: {\n  color: 'white',\n  animation: '$alarm 1s linear infinite',\n},\n'@media screen': {\n  $foo: {\n    '\u0026 $barQux': {\n      color: 'orange',\n    },\n  },\n  '@global': {\n    a: {\n      textDecoration: 'none',\n      '\u0026 $foo': {\n        color: 'brown',\n      },\n    },\n  },\n},\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvscodeshift%2Fjss-codemorphs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvscodeshift%2Fjss-codemorphs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvscodeshift%2Fjss-codemorphs/lists"}