https://github.com/codemodsquad/jss-codemorphs
jscodeshift transforms for converting CSS to JSS
https://github.com/codemodsquad/jss-codemorphs
codemods css jscodeshift jss
Last synced: 3 months ago
JSON representation
jscodeshift transforms for converting CSS to JSS
- Host: GitHub
- URL: https://github.com/codemodsquad/jss-codemorphs
- Owner: codemodsquad
- License: mit
- Created: 2020-02-12T01:42:07.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T07:03:03.000Z (almost 3 years ago)
- Last Synced: 2024-09-30T02:09:17.803Z (about 1 year ago)
- Topics: codemods, css, jscodeshift, jss
- Language: TypeScript
- Homepage: https://codemodsquad.github.io/jss-codemorphs/
- Size: 2.84 MB
- Stars: 9
- Watchers: 2
- Forks: 1
- Open Issues: 33
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# jss-codemorphs
[](https://circleci.com/gh/codemodsquad/jss-codemorphs)
[](https://codecov.io/gh/codemodsquad/jss-codemorphs)
[](https://github.com/semantic-release/semantic-release)
[](http://commitizen.github.io/cz-cli/)
[](https://badge.fury.io/js/jss-codemorphs)
jscodeshift transform for converting from CSS to JSS
[Try it out!](https://codemodsquad.github.io/jss-codemorphs/)
# Table of Contents
- [JSCodeshift Transforms](#jscodeshift-transforms)
- [`css-to-jss`](#css-to-jss)
- [Node.js API](#nodejs-api)
- [`convertCssToJss`](#convertcsstojss)
- [`convertCssToJssString`](#convertcsstojssstring)
# JSCodeshift Transforms
## `css-to-jss`
Converts CSS to JSS. Accepts `selectionStart` and `selectionEnd` options if you only want to convert
a subrange of a file.
### Before
```ts
@keyframes alarm {
from {
color: red;
}
50% {
color: initial;
}
to {
color: red;
}
}
.foo {
color: green;
& .bar-qux, & .glorm:after {
color: red;
}
& .baz:after {
content: 'whoo';
}
}
.glorm {
color: green;
display: box;
display: flex-box;
display: flex;
}
.bar-qux {
color: white;
animation: alarm 1s linear infinite;
}
@media screen {
a {
text-decoration: none;
.foo {
color: brown;
}
}
.foo {
& .bar-qux {
color: orange;
}
}
}
```
### Command
```
jscodeshift -t path/to/jss-codemorphs/css-to-jss.js
```
### After
```ts
'@keyframes alarm': {
from: {
color: 'red',
},
'50%': {
color: 'initial',
},
to: {
color: 'red',
},
},
foo: {
color: 'green',
'& $barQux, & $glorm:after': {
color: 'red',
},
'& $baz:after': {
content: '"whoo"',
},
},
glorm: {
color: 'green',
display: 'flex',
fallbacks: [
{
display: 'box',
},
{
display: 'flex-box',
},
],
},
barQux: {
color: 'white',
animation: '$alarm 1s linear infinite',
},
'@media screen': {
$foo: {
'& $barQux': {
color: 'orange',
},
},
'@global': {
a: {
textDecoration: 'none',
'& $foo': {
color: 'brown',
},
},
},
},
baz: {},
```
# Node.js API
## `convertCssToJss`
```js
import convertCssToJss from 'jss-codemorphs/convertCssToJss'
```
Converts CSS to JSS. Returns an array of JS `ObjectProperty` AST nodes
representing the JSS. If you just want the string text, use `convertCssToJssString`.
Signature:
```js
declare function convertCssToJss(rawCss: string): ObjectProperty[]
```
## `convertCssToJssString`
```js
import { convertCssToJssString } from 'jss-codemorphs/convertCssToJss'
```
Converts CSS to JSS. Returns the resulting JSS code as a string. You can
pass `recast.Options` as the second argument to customize the code format.
Uses `{ tabWidth: 2, useTabs: false, quote: 'single' }` as default options.
Signature:
```js
declare function convertCssToJssString(
rawCss: string,
options?: recast.Options
): string
```