Styled-components: Tips and trick "Media Templates" didn't work: css is not defined

[rohmanhm]

Version

1.3.0

Reproduction

This is my files.

style-utils.js

// these sizes are arbitrary and you can set them to whatever you wish
const sizes = {
  giant: 1170,
  desktop: 992,
  tablet: 768,
  phone: 376
}

// iterate through the sizes and create a media template
export const media = Object.keys(sizes).reduce((accumulator, label) => {
  // use em in breakpoints to work properly cross-browser and support users
  // changing their browsers font-size: https://zellwk.com/blog/media-query-units/
  const emSize = sizes[label] / 16
  accumulator[label] = (...args) => css`
    @media (max-width: ${emSize}em) {
      ${css(...args)}
    }
  `
  return accumulator
}, {})

component.jsx

import { media } from '../utils/style-utils.js'

const ListHeader = Styled.div`
float: left;
width: ${ props => props.width ? props.width : 'initial' };
&:hover {
  background: red;
}
${media.desktop`padding: 0 20px;`}
`

Steps to reproduce

I'm following this tips and trick tutorial. https://github.com/styled-components/styled-components/blob/master/docs/tips-and-tricks.md#media-templates

Expected Behavior

Work like tutorial says.

Actual Behavior

But, I got an error.
here's the error from console.

Uncaught ReferenceError: css is not defined
    at Object.accumulator.(anonymous function) [as desktop] (http://localhost:8080/build/bundle.js:38603:12)
    at Object.<anonymous> (http://localhost:8080/build/bundle.js:21442:73)
    at __webpack_require__ (http://localhost:8080/build/bundle.js:1299:30)
    at fn (http://localhost:8080/build/bundle.js:720:20)
    at Object.<anonymous> (http://localhost:8080/build/bundle.js:21488:66)
    at __webpack_require__ (http://localhost:8080/build/bundle.js:1299:30)
    at fn (http://localhost:8080/build/bundle.js:720:20)
    at Object.<anonymous> (http://localhost:8080/build/bundle.js:21110:70)
    at __webpack_require__ (http://localhost:8080/build/bundle.js:1299:30)
    at fn (http://localhost:8080/build/bundle.js:720:20)

[mxstbr]

You only need to import css at the top of your file to fix this issue:

import { css } from 'styled-components'

const sizes = ...

[hmontes]

This needs to be in the official documentation

[kitten]

@hmontes PRs welcome :wink: but in all seriousness, we have a couple of issues that unfortunately have never been picked up over at our website repo https://github.com/styled-components/styled-components-website/issues/51