{"id":21186034,"url":"https://github.com/codemodsquad/jss-codemorphs","last_synced_at":"2025-07-10T01:30:58.162Z","repository":{"id":40289635,"uuid":"239903474","full_name":"codemodsquad/jss-codemorphs","owner":"codemodsquad","description":"jscodeshift transforms for converting CSS to JSS","archived":false,"fork":false,"pushed_at":"2023-01-05T07:03:03.000Z","size":2976,"stargazers_count":9,"open_issues_count":33,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-09-30T02:09:17.803Z","etag":null,"topics":["codemods","css","jscodeshift","jss"],"latest_commit_sha":null,"homepage":"https://codemodsquad.github.io/jss-codemorphs/","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/codemodsquad.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-02-12T01:42:07.000Z","updated_at":"2023-01-28T23:11:20.000Z","dependencies_parsed_at":"2023-02-03T17:16:59.679Z","dependency_job_id":null,"html_url":"https://github.com/codemodsquad/jss-codemorphs","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codemodsquad%2Fjss-codemorphs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codemodsquad%2Fjss-codemorphs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codemodsquad%2Fjss-codemorphs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codemodsquad%2Fjss-codemorphs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codemodsquad","download_url":"https://codeload.github.com/codemodsquad/jss-codemorphs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224859674,"owners_count":17381682,"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","jscodeshift","jss"],"created_at":"2024-11-20T18:20:53.288Z","updated_at":"2024-11-20T18:20:54.011Z","avatar_url":"https://github.com/codemodsquad.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jss-codemorphs\n\n[![CircleCI](https://circleci.com/gh/codemodsquad/jss-codemorphs.svg?style=svg)](https://circleci.com/gh/codemodsquad/jss-codemorphs)\n[![Coverage Status](https://codecov.io/gh/codemodsquad/jss-codemorphs/branch/master/graph/badge.svg)](https://codecov.io/gh/codemodsquad/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[![npm version](https://badge.fury.io/js/jss-codemorphs.svg)](https://badge.fury.io/js/jss-codemorphs)\n\njscodeshift transform for converting from CSS to JSS\n\n[Try it out!](https://codemodsquad.github.io/jss-codemorphs/)\n\n# Table of Contents\n\n\u003c!-- toc --\u003e\n\n- [JSCodeshift Transforms](#jscodeshift-transforms)\n  - [`css-to-jss`](#css-to-jss)\n- [Node.js API](#nodejs-api)\n  - [`convertCssToJss`](#convertcsstojss)\n  - [`convertCssToJssString`](#convertcsstojssstring)\n\n\u003c!-- tocstop --\u003e\n\n# JSCodeshift Transforms\n\n## `css-to-jss`\n\nConverts CSS to JSS. Accepts `selectionStart` and `selectionEnd` options if you only want to convert\na subrange of a file.\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},\nbaz: {},\n```\n\n# Node.js API\n\n## `convertCssToJss`\n\n```js\nimport convertCssToJss from 'jss-codemorphs/convertCssToJss'\n```\n\nConverts CSS to JSS. Returns an array of JS `ObjectProperty` AST nodes\nrepresenting the JSS. If you just want the string text, use `convertCssToJssString`.\n\nSignature:\n\n```js\ndeclare function convertCssToJss(rawCss: string): ObjectProperty[]\n```\n\n## `convertCssToJssString`\n\n```js\nimport { convertCssToJssString } from 'jss-codemorphs/convertCssToJss'\n```\n\nConverts CSS to JSS. Returns the resulting JSS code as a string. You can\npass `recast.Options` as the second argument to customize the code format.\nUses `{ tabWidth: 2, useTabs: false, quote: 'single' }` as default options.\n\nSignature:\n\n```js\ndeclare function convertCssToJssString(\n  rawCss: string,\n  options?: recast.Options\n): string\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodemodsquad%2Fjss-codemorphs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodemodsquad%2Fjss-codemorphs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodemodsquad%2Fjss-codemorphs/lists"}