CODEWITHSUNDEEP
reactjsintellij-ideaintellij-pluginemmetreact-css-modules
JoshMoxey
JoshMoxey

Reputation: 36

IntelliJ's emmet + react-css-modules

I'm moving to react-css-modules which requires the class layout to be:

<div styleName="local-class-here">

instead of the traditional:

<div className="global-class-here">


How do I customize emmet in IntelliJ so that I when I expand

.my-class

it will return this instead?:

<div styleName="my-class">

Upvotes: 0

Views: 542

Answers (3)

Richard Tyler Miles
Richard Tyler Miles

Reputation: 683

Use built-in CSS Modules, works with sass too https://github.com/css-modules/css-modules

// this is the only page that should import styles this way, please use getStyles() so styles are not repeated in the header
import dig from "src/style.module.scss"


// the thought has occurred to me to put this in the DropVariables file, but getStyles of a different nature exists there, oops.
// feel free to un-clobber and move this.
export function getStyles<iCSS extends {}>(overrides: iCSS = {} as iCSS): typeof dig & iCSS {
    return {
        ...dig,
        ...overrides
    }
}

Upvotes: 0

hakobpogh
hakobpogh

Reputation: 677

Try using patch-styles. In that case, you'll still be using the traditional className and will get the same thing there. Your code will look like this:

<PatchStyles classNames={styles}>
  ...
  <div styleName="my-class">
    ...
  <div>
</PatchStyles>

And it'll automatically update your classNames instead of you.

Upvotes: -1

lena
lena

Reputation: 93868

There is no way to do this; if you miss this feature, please follow WEB-28691 for updates

Upvotes: 2

Related Questions