css-template

Reduce context-switching when defining style in React Component.

To use inline styles in React, you often find yourself writing this type of code:

1const styles = {
2  title: {
3    borderBottomLeftRadius: '10px',
4    //    ^     ^   ^       ^    ^^
5    //    |     |   |       |    ||___ annoying trailing comma
6    //    |     |   |       |____|____ annoying JS quotes
7    //    |_____|___|_________________ annoying camel case
8    //
9    //    (╯°□°）╯︵ ┻━┻ I WANT CSS BACK!!!
10  }
11}

With css-template, those times are gone! Instead of writing this:

1// THIS IS BAD FOR YOUR EYES
2const styles = {
3  title: {
4    marginTop: '10px',
5    fontSize: '120%',
6    lineHeight: '1.5',
7    textAlign: 'center',
8    backgroundColor: 'rgba(100, 255, 100, 0.7)',
9  },
10  footer: {
11    width: 'calc(100% - 16px)',
12    textAlign: 'right',
13    marginTop: '20px',
14  }
15};

you can write something like this

1// THIS IS BETTER
2const styles = {
3  title: css`{
4    margin-top: 10px;
5    font-size: 120%;
6    line-height: 1.5;
7    text-align: center;
8    background-color: rgba(100, 255, 100, 0.7);
9  }`,
10  footer: css`{
11    width: calc(100% - 16px);
12    text-align: right;
13    margin-top: 20px;
14  }`,
15};

Supported Features

• translate snake-case to camelCase

  1  css`margin-top: 20px` // will be translated to { marginTop: '20px' }

• multiple lines with optional brackets for better visuals

  1  css`{
  2    padding: 10px;
  3    margin: 10px;
  4  }`
  5
  6  // is equivalent to
  7  css`
  8    padding: 10px;
  9    margin: 10px;
  10  `

• optional final semicolon

  1  css`padding: 10px`
  2
  3  // is equivalent to
  4  css`padding: 10px;`

• multiple rules in one line

  1  css`padding: 10px; margin: 10px`

• compose other style objects

  1  const bigFont = css`font-size: 200%`
  2  const underlined = css`text-decoration: underline`
  3
  4  const myStyle = css`{
  5    composes: ${bigFont};
  6    composes: ${underlined};
  7    padding: 10px;
  8    margin: 10px;
  9  }`
  10

Installation

1npm i -S css-template

Usages

1import css from 'css-template';
2
3const COLOR_MAIN = 'white';
4const BACKGROUND_MAIN = '#336699';
5const awesomeStyles = css`font-size: 200%`;
6
7const styles = {
8  header: css`{
9    padding: 10px 0 20px 10px;
10    text-align: center;
11  }`,
12  main: css`{
13    composes: ${awesomeStyles};
14    color: ${COLOR_MAIN};
15    background-color: ${BACKGROUND_MAIN};
16  }`
17};
18
19const MyComponent = (props) => (
20  <div>
21    <div style={styles.header}>
22      {props.header}
23    </div>
24    <div style={styles.main}>
25      {props.main}
26    </div>
27  </div>
28);

ROADMAP

• composes: ${otherStyles}; just like postcss composes feature
• optional auto-prefixer
• spread numeric values like padding: ${[10, 20, 0, 10]}px;