[styled-jss] Styled Primitive Components

[kof]

Create a small library that allows to style primitives similar to styled-components. Some pseudo code.

[kof]

Variant 1

import styled from 'styled-jss'

const Button = styled('button', {
  fontSize: 12,
  color: (props) => props.theme.textColor
})

const PrimaryButton = styled(Button, {
  color: 'red'
})

[kof]

Variant 2

import Styled from 'styled-jss'
import injectSheet from 'react-jss'

// Base styles, like a regular jss object.
const styled = Styled({
  root: {
    margin: 10
  },
  baseButton: {
    padding: 10
  }
})

const NormalButton = styled('button', {
  composes: '$baseButton',
  border: '1px solid grey'
  color: 'black'
})

// Composition over styled() same like styled-components
const PrimaryButton = styled(NormalButton, {
  color: 'red'
})

// One can use classes AND styled primitives.
const MyComponent = ({classes}) => (
  <div className={classes.root}>
    <PrimaryButton>
  </div>
)

const MyStyledComponent = injectSheet(styled)(MyComponent)

cc @cssinjs/core

[sergeysova]

@kof any progress here?

[kof]

Yes, me and @lttb are evaluating some interesting interfaces, but its not ready yet.

[sergeysova]

@kof Can I help you?

[kof]

Yes, we are preparing some syntax variants and will need user feedbacks, we will post the poll here soon cc @lttb

[kof]

You see actually already 2 possible syntaxes, what are your thoughts on them? What do you NOT understand?

[sergeysova]

All syntaxes is readable.

[sergeysova]

https://gist.github.com/kof/3277ee04d2100bab3e6c6c33656edce7#gistcomment-2034780

[lttb]

Variant 3

There are some points about yet another concept:

• we declare style primitives for component in lower case on the top level:

{
  button: {
    color: 'red' 
  }
}

• we can use primitive modifier starts with Capital letter, eg:

{
  App: { padding: '10px' }, // on the top level it turns into <div> with modifier className

  button: {
    color: 'black',

    Primary: {
      color: 'red'
    }
  }
}

• we can compose modifiers with something like primitiveModifier:

{
  button: {
    color: 'black',

    Normal: {
      border: '1px solid black'
    },
    Secondary: {
      composes: '$buttonNormal' // -> button.Normal styles
    }
  }
}

• we can also declare modifiers just on the top level:

{
  button: {
    color: 'black',
  },
  buttonNormal: {
    border: '1px solid black'
  },
  buttonSecondary: {
    composes: '$buttonNormal'
  }
}

• full example

const styles = {
  App: { padding: 30px },
  
  button: { 
    padding: '10px', 

    Normal: { 
      border: '1px solid black' 
    }, 
    Primary: { 
      color: 'red' 
    }, 
    Secondary: { 
      composes: '$buttonNormal', 
      color: 'green' 
    }
  } 
}

const MyComponent = ({ styled }) => (
  <styled.App>
    <styled.button />
    <styled.button.Primary />
  </styled.App>
)

const MyStyledComponent = injectStyled(styles)(MyComponent)

[kof]

closing, as we got it released https://github.com/cssinjs/styled-jss