decorock

Styled component library for solid.js

Install

npm i decorock

Usage

styled

const Heading = styled.('h1')`
  color: ${(p) => p.theme.color};
`

const Container = styled.div((p) => `
  background-color: ${p.theme.bg};
`)

const Paragraph = styled.p((p) => ({
  fontSize: p.theme.fontSize
}))

const Box = styled.div<{height: number}>`
  height: ${(p) => p.height};

  & > div {
    color: blue;
  }
`

<Box height={100} />

css

const Box = (props) => {
  return (
    <div
      class={css`
        background-color: aqua;
      `}
    >
      {props.children}
    </div>
  )
}

Theme

import { styled, createThemeStore, ThemeProvider } from 'decorock'

const [theme, setTheme] = createThemeStore({
  colors: {
    primary: 'aqua',
  },
})

const SomeText = styled.div`
  color: ${(props) => props.theme.colors.primary};
`

render(
  () => (
    <ThemeProvider theme={theme}>
      <SomeText>some text</SomeText>
    </ThemeProvider>
  ),
  document.getElementById('app'),
)

SSR

import { renderStyle } from 'decorock'

// After your app has rendered, just call it:
const styleTag = renderStyle()

// -> <style id="_goober">body { background-color: red; } .go000000000 {color: aqua;}</style>