babel-preset-enhanced-react-style

babel-preset-enhanced-react-style

Automatically splits static and dynamic styling from the style attribute into CSS class names and inline styles.

Motivation

Writing styles is a hassle and though great iterations has been done with css-in-js libraries we still have to think about a few things. Things like... this dynamic css, how many class names will it produce? And this prop... will it be passed into the DOM as well? And do I really have to set up all this stuff to get automatic class creation?

We wanted to see if we could just make this stuff work. So basically you just style up your elements and to not think any more on it. One attribute style and just add the rules, them being dynamic or not.

How to install

npm install babel-preset-enhanced-react-style

babel config

{
  "presets": ["@babel/react", "babel-preset-enhanced-react-style"]
}

babel config (TYPESCRIPT)

{
  "presets": ["@babel/typescript", "@babel/react", "babel-preset-enhanced-react-style"]
}

Currently you have to manually augment React to allow the & property, in your index:

type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>

declare module 'react' {
  interface CSSProperties {
    '&'?: {
      [selector: string]: Omit<CSSProperties, '&'>
    }
  }
}

NOTE! We will find a way to automate this

How to use

Basically just start using the style attribute as normal. When you look at the element inspector in the browser you will see it splits out static styling to class names.

const MyComponent: React.FunctionComponent = ({ width }) => {
  return (
    <div
      style={{
        color: 'red',
        width: width + 'px'
      }}
    />
  )
}

Selectors

You can now use CSS selectors behind the & prop:

const MyComponent: React.FunctionComponent = ({ width }) => {
  return (
    <div
      style={{
        color: 'red',
        '&': {
          ':hover': {
            color: 'blue'
          }
        }
      }}
    />
  )
}

Selectors can not be dynamic.

Organize

Typically you want to define some element more explicitly. Do that by defining them as their own components:

const Header: React.FunctionComponent = ({ children }) => (
  <h1
    style={{
      color: '#333',
      fontSize: 28
    }}
  >
    {children}
  </h1>
)

Server side rendering

It just works, critical CSS is extracted with renderToString.

Big thanks

To emotion which is an awesome css-in-js library. We are just lowering the threshold to use it... to the extent you do not even know you are using it :)