babel-preset-enhanced-react-style
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.1 • Public • Published

    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 {
        '&'?: {
          [selectorstring]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 :)

    Keywords

    none

    Install

    npm i babel-preset-enhanced-react-style

    DownloadsWeekly Downloads

    0

    Version

    2.0.1

    License

    MIT

    Unpacked Size

    13.2 kB

    Total Files

    9

    Last publish

    Collaborators

    • cerebral.js
    • christianalfoni
    • fweinb
    • henri-hulski