Only allow classnames & compile inline styles

[geelen]

What if there was a kind of uninline project that meant that projects using inline styles could use a component that expected only classes?

As an author I write a component like this:

export default props => {
  let {theme, children} = props

  return <header className={theme.header}>
    <h1 className={theme.title}>{children}</h1>
  </header>
}

As a user on a project that uses inline styles, I could be doing something like this:

export default () => {
  let inlineStyles = {
    header: {
      margin: 40
    },
    title: {
      lineHeight: 1,
      fontSize: '4rem'
    }
  }

  <MyComponent theme={uninline(inlineStyles)}>Sneaky Class Times!</MyComponent>
}

The automatically generated classnames would have lower specificity than inline styles but we could mitigate that by either adding !important to every rule :scream: or asking the user to add an ID of #uninlined somewhere to their project and generating CSS that looks like this:

:export {
  header: 204a1c693ef27e;
  title: 1aafe63c034927;
}
#uninlined .204a1c693ef27e {
  margin: 40px;
}
#uninlined .1aafe63c034927 {
  line-height: 1;
  font-size: 4rem;
}

Adding the #uninlined id could be optional but if it's mandatory it will mean much fewer specificity surprises down the track.

Basically an inline styles to ICSS compiler. Thoughts?

[chantastic]

@geelen holy crapy. so, i apparently never sign into Discord. i really like this idea. still seem like a good idea to you?