Convert React inline styles to CSS rules

Question

Is there a tool, that converts React inline style descriptions to CSS rules?

Example input:

{
    minHeight: 200,
    position: 'relative',
    flexGrow: 1,
    flexShrink: 1,
    display: 'flex',
    flexDirection: 'column',
}

Example output:

{
    min-height: 200px;
    position: relative;
    flex-grow: 1;
    flex-shrink: 1;
    display: flex;
    flex-flow: column;
}

To put it differently, I want a tool that does the exact opposite of this: https://github.com/raphamorim/native-css

I would like to use it manually, so command line or web-based is preferable.

Ben Pritchard · Accepted Answer · 2020-02-20 01:21:30Z

16

Yes there's a tool that does just that!

https://glitch.com/~convert-css-js

If you paste your example input into the JS side (has to be in parentheses), you get the CSS output you specified (less the final semi-colon).

answered Feb 20, 2020 at 1:21

Ben Pritchard

5487 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MickeyDickey on codidact.com Over a year ago

Absurdly simple and effective! Takes a little while to load. But man-oh-man, just what I was looking for! Thanks a ton!

karzan · Accepted Answer · 2018-06-09 11:54:16Z

2

Have you tried this "A command line tool for JSS" https://github.com/cssinjs/cli

answered Jun 9, 2018 at 11:54

karzan

314 bronze badges

1 Comment

sesm Over a year ago

I tried to use it from command line, but couldn't make it work in 20 minuntes, so I had to step back. Thanks for pointing anyway!

Rounin · Accepted Answer · 2018-06-11 10:41:42Z

2

Is there a tool, that converts React inline style descriptions to CSS rules?

There is a tool, yes. It's Regular Expressions (or RegEx).

If you want to transform the following:

nH => n-h (minHeight => min-height)
xG => x-g (flexGrow => flex-grow)
xS => x-s (flexShrink => flex-shrink)
xD => x-d (flexDirection => flex-direction)

This is the same Regex operation each time.

The pattern match is:

/([a-z])([A-Z])/

ie. one lowercase letter followed by one uppercase letter, capturing each.

The replacement is:

$1-\L$2

ie.

keep the captured lowercase letter
follow the captured lowercase letter with a hyphen
follow the hyphen with a lowercase version of the captured uppercase letter

answered Jun 11, 2018 at 10:41

Rounin

29.9k13 gold badges102 silver badges126 bronze badges

4 Comments

sesm Over a year ago

Hi Rounin! Thanks for the answer. I like your approach for simplicity, but it won't fit all the cases. For example, flexDirection should be converted to flex-flow, instead of flex-direction. I guess one needs to take the list of all such cases from React source code, to make a complete solution.

cchamberlain Over a year ago

@sesm - flex-flow and flex-direction are different CSS rules. flex-flow is a shorthand to set both flex-direction and flex-wrap at once (since they go hand-in-hand). React supports all three of these via flexFlow, flexDirection, and flexWrap. developer.mozilla.org/en-US/docs/Web/CSS/flex-flow

sesm Over a year ago

@cchamberlain thanks for you comment, I didn't know this. This actually makes a regexp approach viable.

cchamberlain Over a year ago

NP! I was trying to find a tool that did this the other day. Agree regex might be best bet.

Sakib Hossain · Accepted Answer · 2022-08-03 18:28:29Z

1

you can use this tool for converting : https://casbin.org/CssToAndFromReact/

answered Aug 3, 2022 at 18:28

Sakib Hossain

212 bronze badges

Collectives™ on Stack Overflow

Convert React inline styles to CSS rules

4 Answers 4

1 Comment

1 Comment

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related