https://github.com/vscodeshift/jss-codemorphs
command for converting from CSS to JSS
https://github.com/vscodeshift/jss-codemorphs
codemods css css-in-jss jscodeshift jss vscodeshift
Last synced: 6 months ago
JSON representation
command for converting from CSS to JSS
- Host: GitHub
- URL: https://github.com/vscodeshift/jss-codemorphs
- Owner: vscodeshift
- License: mit
- Created: 2020-03-09T22:58:27.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T09:33:57.000Z (almost 3 years ago)
- Last Synced: 2025-02-10T09:15:15.264Z (8 months ago)
- Topics: codemods, css, css-in-jss, jscodeshift, jss, vscodeshift
- Language: TypeScript
- Size: 3.86 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# @vscodeshift/jss-codemorphs
[](https://circleci.com/gh/vscodeshift/jss-codemorphs)
[](https://codecov.io/gh/vscodeshift/jss-codemorphs)
[](https://github.com/semantic-release/semantic-release)
[](http://commitizen.github.io/cz-cli/)
[](https://marketplace.visualstudio.com/items?itemName=vscodeshift.jss-codemorphs)
# **Convert CSS to JSS** Command
## Example
### 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',
},
},
},
},
```