CSS-in-JS API Approaches

Example01.js

// MyComponent.js
import { apiFunc } from 'some-project';

const styles = {
  base: {
    color: '#fff',
    ':hover': {
      backgroundColor: '#0074d9',
    },
  },
  warning: {
    'background-color': someValue(),
  },
};

// MyComponent.js (cont.)
export const MyComponent = () => (
  <div className={
    apiFunc(styles.base, styles.warning)
  }>
    Some content
  </div>
);

Example02.js

// MyComponent.js
import { apiFunc } from 'some-project';

const styles = apiFunc`
  .base {
    color: #fff;

    &:hover {
      background-color: #0074d9;
    }
  }

  .warning {
    background-color: ${someValue()},
  }
`;

// MyComponent.js (cont.)
export const MyComponent = () => (
  <div className={
    `${styles.base} ${styles.warning}`
  }>
    Some content
  </div>
);

Example03.js

// MyComponent.js
import { styled, css } from 'styled-components';
	
const Wrapper = styled.div`
  color: #fff;

  &:hover {
    background-color: #0074d9;
  }

  {props => props.warning && css`
    background-color: ${someValue()},
  `}
`;

// MyComponent.js (cont.)
export const MyComponent = () => (
  <Wrapper warning>Some content</Wrapper>
);

Example04.css

/* styles.css */
.base {
  color: #fff;

  &:hover {
    background-color: #0074d9;
  }
}

.warning {
  background-color: var(--imported-value),
}

Example04.js

// MyComponent.js
import styles from './styles.css';
import classNames from 'classnames';

export const MyComponent = () => (
  <div className={
    classNames(styles.base, styles.warning)
  }>
    Some content
  </div>
);

Example05.js

// callToAction.js
import styles from './styles.css';
import classNames from 'classnames';

export const CallToAction = () => (
  <article className={styles.Wrapper}>
    <h3 className={styles.Title}>
      Look at me.
    </h3>
    <p>
      <a link="#" className={styles.Link}>
        Now do this.
      </a>
    </p>
    Some content
  </article>
);

Example06.js

// JS file auto-generated by Webpack
const styles = {
  Wrapper: 'fdc03d',
  Title: '79ec33',
  Link: '6e4c6d',
};

export default styles;

Example07.css

/* Old-school CSS */
.Wrapper { /* properties here */ }

@media (min-width: 40em) {
  .Wrapper { /* properties here */ }
}

@media (min-width: 60em) {
  .Wrapper { /* properties here */ }
}

.Wrapper:hover, .Wrapper:focus { /* properties here */ }

Example08.css

/* CSS using css-nesting spec */
.Wrapper {
  /* properties here */

  @media (min-width: 40em) { /* properties here */ }

  @media (min-width: 60em) { /* properties here */ }

  @nest &:hover, &:focus { /* properties here */ }
}

Example09.css

/* What if we tried Sass-style nesting? */
.Wrapper {
  html.js & { /* Won't work! */
    /* properties here */
  }
}

/* The css-nesting spec does allow
   simple Sass-style nesting */
.Wrapper {
  & span { /* Works! */
    /* properties here */
  }
}

Example10.css

.TimeStamp {
  /* Add this class from another file. */
  composes: TimeStamp from '../BlogPost/styles.css';

  /* properties here */
}

.List {
  // Assume this class exists in the global space.
  composes: ListReset from global;

  /* properties here */
}

:global(.Loader) {
  /* properties here */
}

Example10.js

// JS file auto-generated by Webpack
const styles = {
  // Includes "79ec33" class from BlogPost.
  TimeStamp: 'fdc03d 79ec33',

  // Includes "ListReset" class.
  List: '6e4c6d ListReset',

  // No class name transforms.
  Loader: 'Loader'
};

export default styles;

Example11.css

/* These values can be exported to CSS, JS, and JSON files. */

:root {
  --primary-color: red;
}

@custom-media --tablet (min-width: 30em);

@custom-selector :--headings h1, h2, h3, h4, h5, h6;

postcss.config.js

// postcss.config.js
const path = require('path');

module.exports = {
  plugins: {
    'postcss-preset-env': {
      stage: 1,
      browsers: '> 0.5%, last 2 versions, Firefox ESR, not dead',
      exportTo: path.resolve('cssValues.json');
    },
  }
};