Props to class modifier

[ai]

It will be nice to have something like:

const Content = styled.div`
  width: calc(100% - 200px);
  &.hideMenu {
    width: 100%;
  }
`

<Content hideMenu=true>

We can do it right now with dynamic properties width: ${ p => p.hideMenu ? 100 : 0 }%, but:

1. Dynamic properties are slow.
2. We can’t process dynamic properties throw PostCSS plugins.

[ai]

I saw some tools for styled-component to do the same, but not sure do they compatible with my favorite emotion :)

[ai]

While compiling we can find &.X selectors and create X props for every this selector.

[tkh44]

I'm thinking about this one.

[ai]

We can put it to third-party helper:

const Header = subClassMagic(styled.div`
  background: blue;
  &.error {
    background: red;
  }
`)

<Header error={true}>

Can I have access in Emotion component to map or origin class (error) to compiled classes (Styled_Header_hfttik)?

[tkh44]

Dynamic properties are slow.

This is not true btw.

Can I have access in Emotion component to map or origin class (error) to compiled classes (Styled_Header_hfttik)?

Why not just use classnames

import cx from 'classnames'

const Header = styled.div`
  background: blue;
  &.error {
    background: red;
  }
`

<Header className={cx({ error: true })}>

[ai]

Oops, I so brainwashed with CSS Modules that I even didn’t think that &.error will not be with some hash postfix (like .error → .error_kjbr75878e) for isolation :D.

If we didn’t add any hash postfix for classes, it means that &.error will not be isolated and could have conflict with some other .error class (we plan to make browser extension from our website code, so isolation is very important).

Seems like I need to find some other way. I have a problem that any interpolation in styles disable my PostCSS plugins (because dynamic can’t be extracted in 7.0).

Why not just use classnames

<Header error={isError}> is much more compact and readable than <Header className={cx({ error: isError })}> :(.

[Ailrun]

@ai Could you close this issue? Or are there more things to do within this issue?

[ai]

Did we have a solution, which is compact and useful? 😏

Creating class by css and using it in className is too long, those is a reason why I created a issue.

Check decss. They have this shortcuts and they look awesome.

[Andarist]

@ai have u considered creating a babel plugin for this? Should be doable & wouldnt cost extra runtime parsing.

[ai]

I thought to use it from Emotion extractStatic Babel plugin 😄

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.