CSS in JS wish list

css-in-js-wish-list.md

1. Style elements inline in JSX via the style prop, without any wrapping. No (mandatory) "presentational components" or StyleSheet.

• style prop allows for compatibility with react-primitives, React Native components and many 3rd party components. The Primitives (View, Text, Image...) are designed to work cross-platform (web, Android, iOS...) and they provide convenient defaults for Flexbox based layout.
• I want to add these elements in JSX, style them inline and only name and extract them to separate component when it becomes necessary, not upfront. Extracting to a named component can be as simple as adding const Wrapper = () => before the JSX element. No new syntax for creating a component.

2. Support vendor prefixes, pseudo classes, media queries, CSS variables...

• Support things like @media (-webkit-min-device-pixel-ratio: 2), :hover, or var(--panel-background-color). CSS syntax might help with this, but also JS syntax is acceptable as long as the translation from CSS to it is straightforward.

3. Generate real CSS files on the web, StyleSheet for React Native.

Example syntax:

class MyLink extends React.Component {
  render() {
    return (
      <View
        style={css`
          border-radius: 3px;
          padding: 6px;
          background-color: papayawhip;
        `}>
        <Link
          style={css`
            color: palevioletred;
            &:hover {
              text-decoration: underline;
            }
          `}>
          Go
        </Link>
      </View>
    );
  }
}