Format / expand CSS?

[edlefebvre]

With CSJS syntax, how do you use tools such as emmet to expand your CSS code?

Do you use something in particular?

[scott113341]

Hi @edlefebvre, this will depend on the IDE you're using. Personally, I use WebStorm for development, and I've found that Language Injections work quite nicely to support this exact behavior. Let's say I have this:

If I put my cursor in the middle of the template string and press Option + Return, it will bring up this menu:

Then I press Return:

And then I press Return again (CSS is always the default since it remembers your last action). This marks that specific string as a CSS string:

And now I can write CSS with full IDE support (and that includes Emmet abbreviations, as you can see in this picture):

The csjs extends syntax shows up as an error, but doesn't affect the parsing of the subsequent CSS block, so that's fine:

[edlefebvre]

Neat!

Thank you for this detailed answer @scott113341 . I use Atom right now and I'm not sure I can have the same behaviour out of the box. At least I know it is possible with webStorm ;)

[rtsao]

@scott113341 That's really cool!

I typically just write plain CSS directly. I'll use autoprefixer (which can be used with https://github.com/rtsao/babel-plugin-csjs-postcss) to avoid needing to deal with vendor prefixes, but otherwise I don't find writing plain CSS to be too onerous. I try and approach UI and styles with componentization abstraction and modularity in mind, so usually the CSS within a given component is pretty manageable.

It seems like emmet is super handy for quickly producing lots of HTML/CSS source code, but that's usually what I'm trying to avoid, if possible.

[scott113341]

Update for IntelliJ platforms! @kompot figured out how to automatically inject csjs here 👍 Here's a quick how-to:

Open up Preferences > Editor > Language Injections

Click the little plus button and choose Generic Js

Fill out the settings with the following:

Name: csjs Language ID: CSS Places Patterns: jsLiteralExpression().withText(string().matchesBrics("csjs.+"))

Note that files that are already open might not immediately auto-inject CSS; you can just close and re-open them.

Thanks @kompot for figuring this out!