styled-components/src/utils/escape.js

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

// @flow
const escapeRegex = /[[\].#*$><+~=|^:(),"'`-]+/g
const dashesAtEnds = /(^-|-$)/g

/**
 * TODO: Explore using CSS.escape when it becomes more available
 * in evergreen browsers.
 */
export default function escape(str: string): string {
  return (
    str
      // Replace all possible CSS selectors
      .replace(escapeRegex, '-')

      // Remove extraneous hyphens at the start and end
      .replace(dashesAtEnds, '')
  )
}