UVP*

and the future of

CSSinJS 

* Unique Value Proposition

by Oleg Slobodskoi @oleg008

The world’s first
Project Messenger.

chatgrape.com

http://cssinjs.org

I maintain a

CSSinJS lib

CSSinJS is an
approach to describe

CSS in JavaScript

CSSinJS

!==

Inline Styles

1. Scoping
2. Isolation
3. Modules
4. Code reuse
5. Specificity
6. Non-deterministic Resolution
7. Dead code elimination

2014

Do we really need CSSinJS for this?

Can get there

with PostCSS?

So why CSSinJS?

JavaScript,
Motherfucker,
Do You Speak It!

2014

Since then I got a ridiculous  amount of feedback …

… did a lot of experiments …

… learned from many other CSSinJS implementations …

… and from using in production.

Lost my hair!!!

My Top 9

Examples!

polished

    import {zoomIn} from 'cssinjs-animations'
    
    const styles = {
      '@keyframes zoomIn': zoomIn,
      box: {
        position: 'absolute',
        width: 50,
        height: 50,
        background: 'blue',
        animation: {
          name: 'zoomIn',
          duration: '1s'
        }
      }
    }

cssinjs-animations

    import rtl 'rtl-css-js'
    
    const styles = rtl({paddingLeft: 10})
        

rtl-css-js

    const styles = {paddingRight: 10}

The contract

between packages

For JavaScript

1. Public API documentation

2. Tests

3. Linters
4. Typings

5. Runtime Errors

What about CSS?

NPM Registry
~ 550k Packages

Still wanna use BEM?

PBEM?

Package Block Element Modifier

How do you ensure?

- Source Order

- Cascading

- Global Styles

CSS Properties and Values should be part of the

contract

Many Runtimes

Is it a

CSSinJS war?

Is it
CSSinJS fatigue?

No, it is

absolutely

normal

The same is with  DOM

libs

Room for

improvements

DX gets better

Performance

gets better

Best ideas win

  <View style={{
    marginTop: 5,
    borderWidth: 1,
    borderRadius: 5,
    borderStyle: this.state.showBorder ? 'dotted' : null,
    padding: 5
  }}>
    <Text style={{fontSize: 11}}>
      Dotted border style
    </Text>
  </View>

react-native-web

    const styles = csjs`
      .panel {
        border: 1px solid black;
        background-color: ${green};
      }
    
      .title {
        padding: 4px;
        font-size: 15px;
      }
    `

csjs

    const Title = styled.h1`
      font-size: 1.5em;
      text-align: center;
      color: ${({theme}) => theme.palette.headline};
    `

    import {ThemeProvider} from 'theming'
    
    const theme = {
      main: 'green'
    }
    
    const App = () => (
      <ThemeProvider theme={theme}>
          <SomeComponent />
      </ThemeProvider>
    )
    

theming

Universal Theming

So what did

 JSS learn?

    box-shadow: 10px 10px 5px 5px black;

 
    boxShadow: {
        x: 10, 
        y: 10, 
        blur: 5, 
        spread: 5, 
        color: 'black'
    }
    

Expanded syntax

Function values

  button: {
    fontSize: 12,
    color: ({focused}) => focused ? 'black' : 'gray'
  }

Template Strings

    {
      button: `
        border-radius: 3px;
        background-color: green;
        color: red;
        margin: 20px 40px;
        padding: 10px;
      `
    }

styled-jss

    import styled from 'styled-jss'
    
    const Button = styled('button')({
      fontSize: 12,
      color: 'gray'
    })
    
    // Composition.
    const PrimaryButton = styled(Button)({
      color: 'blue'
    })

    <PrimaryButton>Click me!<PrimaryButton>

Styled Primitives

Theming

    const styles = (theme) => ({
      button: {
        background: theme.colorPrimary
      },
      label: {
        fontWeight: 'bold'
      }
    })
    
    const StyledButton = injectSheet(styles)(Button)

Theming

Definition of "Theme",

anyone?

Look and Feel

material-ui.com

CSS Variables

    :root {
      --main-bg-color: brown;
    }
    
    .one {
      color: white;
      background: var(--main-bg-color);
    }

CSS Variables

cascade and inherit

    :root {
      --main-bg-color: brown;
    }
    
    .one {
      color: white;
      background: var(--main-bg-color);
    }

global

When a contract between packages is vanilla CSS

Rebranding

Much easier with JavaScript

React Native

    const styles = StyleSheet.create({
      red: {
        color: 'red'
      },
      boldblue: {
        color: 'blue',
        fontWeight: 'bold'
      }
    })
    
    class SomeComponent extends Component {
      render() {
        return (
          <View>
            <Text style={styles.red}>red text</Text>
            <Text style={styles.boldblue}>bold blue text</Text>
          </View>
        );
      }
    }
    
    

Subset of CSS

No shorthand notations

No media queries

No pseudo selectors

Typed CSS

Autocomplete
Linting
Contracts

We need

Universal Flow and Typescript
typings

Shorthand support

    const styles = {
        border: '1px solid red'
    }

Expanded format

    const styles = {
        border: {
            width: 1,
            style: 'solid',
            color: 'red'
        }
    }

Colocation

Styles and Markup
in one file

Write small components!

State Driven Styles

User input

Mouse position

Viewport size

JavaScript Controlled Animations

Don't use Inline Styles!

High Performance
Function Values

JavaScipt Animations

at 60FPS

Faster than

React Inline Styles

2 Problems with
React Inline Styles

1. Reconciliation

in tree structure

2. Slow interface

    <div 
        style={{
            color: 'red', 
            fontSize: 12
        }}
    >
    </div>

CSSOM

to the rescue

Same

CSSStyleDeclaration
Interface

CSSRulesList
is flat

    const style = document.createElement(‘style’)
    
    style.sheet.insertRule(‘.my-button {color: red}’, 0)
    
    style.sheet.cssRules[0].style.color = ‘green’
    

Better Interface

    const styles = {
        button: {
            color: (props) => props.isFocused ? 'red' : 'green'
        }
    }

Applies Changes Only

    class MyComponent extends Component {
        shouldComponentUpdate() {
            return false
        }
    }

ISTF

Talk to me

http://cssinjs.org
https://slides.com/kof/why-cssinjs

@oleg008