Panache

Panache.js is a library for writing CSS as React components. Panache is inspired by Styled Components but it lets you write your CSS as Objects.

Writing CSS as objects enables additional features such as:

• Easy syntax: One function to access props, theme and media query rules.
• Reponsive variables: Bind CSS values to one or multiple media query rules.
• Share and extend styles: Easily extend and share style objects across components with the spread operator.
• Type safe: Write type safe styles.

And just like Styled Components it comes with features such as:

• Component scoped styles
• Auto critical CSS
• Dynamic styling based on props
• Easy maintenance: Styles are coupled to your component

Motivation

Writing CSS as React components is a great way to handle styles for an app. You get styles that are scoped and coupled to your component. You don't have to worry about unexpected styling due to inheritance and it's easy to maintain your styles when they are coupled to your components. This design pattern is used by several libraries and Panache builds on their great ideas.

Panache uses Style Objects instead of plain CSS which enables additional features because it's easy to parse and transform objects into CSS.

The main added features and their purpose are described below. These features may change and Panache is currently a proof of concept.

Easy syntax

Props are easily available, just destructure once. Panache also has first class support for both theme and media queries.

const MyComponent = panache.div(({ theme, media, isActive }) => ({
  color: theme.colors.primary,
  padding: '10px',
  backgroundColor: isActive ? 'white' : 'gray',
  [media.medium]: {
    padding: '20px'
  },
}))

Responsive variables

One big feature that the Panache parser enables is responsive variables. With responsive values you can bind CSS values to media queries which can help keep styles consistant across devices and keep your code DRY.

The default value of the variable below is 10px while 20px is bound to a media query. This will automatically output the media query rules for you in the parsed CSS.

const responsiveVariable = ['10px', ['@media(min-width: 768px', '20px']]

const MyComponent = panache.div({
  padding: responsiveVariable,
  marginTop: responsiveVariable
})

Share and extend styles

Since your CSS is written as Style Objects it's easy and intuitive to extend simple styles with the spread operator.

const MyComponent = panache.div(({ hasError, theme }) => ({
  ...MyOtherComponent.Styles,
  padding: responsiveVariable,
  marginTop: responsiveVariable,
  ...hasError && theme.myErrorStyles
}))

You can also compose multiple Components or Style Objects to create a new component.

const MyComponent = panache.extend(MyOtherComponent, myStyleObject)({
  padding: '20px'
})

Type safe

Another benefit of Style Objects is that since they're objects you can write type safe styles.

Inspired by

Styled Components, Glamorous, Emotion