Indentation/ Code style for <style jsx></style>

Created March 12, 2020 07:59

Indentation/ Code style for <style jsx></style>
I am using Next.js and my style are in the javascript files like this

const component = () =>{

return(<div>
<div>
.....................
<div/>
<style jsx>
{`
p{

margin-bottom:10px

}
`}
</style>
</div>)

}

Usually, I hit a keyboard combination to indent and arrange the code but here is CSS in js and the editor can't understand that.

Is there a way to be able to indent CSS automatically in js files?

Thank you for your help
Florin

2 comments

Elena Pogorelova

Created March 12, 2020 10:25

When implementing formatting inside strings, our intention was to avoid changing the runtime behavior of code, so formatting is disabled unless the string is marked as 'safe' to reformat with a comment (//language=CSS) - see https://www.jetbrains.com/help/webstorm/using-language-injections.html#injection_comments.

return (
    <div>
        <p>only this paragraph will get the style :)</p>
        {/*language=CSS*/}
        <style jsx>{`
            p {
                color: red;
            }
        `}</style>
    </div>
)

We have been requested and are planning to invert the default in a future version - reformat unless specifically excluded. See https://youtrack.jetbrains.com/issue/WEB-30883

Florin

Created March 20, 2020 12:01

Hello,
Thank you for your response, It helps me a lot this feature.

Sorry for the late response.

Florin

Please sign in to leave a comment.