How to use emotion-utils - 6 common examples

To help you get started, we’ve selected a few emotion-utils examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github emotion-js / emotion / packages / babel-plugin-emotion / src / parser.js View on Github external
let flattened = Object.keys(style).reduce((accum, key) => {
    if (Array.isArray(style[key])) {
      accum[key] = style[key].join(`; ${processStyleName(key)}: `)
    } else if (
      Object.prototype.toString.call(style[key]) === '[object Object]'
    ) {
      accum[key] = expandCSSFallbacks(style[key])
    } else {
      accum[key] = style[key]
    }
    return accum
  }, {})
  // todo -
github emotion-js / emotion / packages / babel-plugin-emotion / src / index.js View on Github external
export function hashArray(arr) {
  return hashString(arr.join(''))
}
github emotion-js / emotion / packages / babel-plugin-emotion / src / index.js View on Github external
import { touchSync } from 'touch'
import {
  getIdentifierName,
  getName,
  createRawStringFromTemplateLiteral,
  minify
} from './babel-utils'
import { hashString, Stylis } from 'emotion-utils'
import cssProps from './css-prop'
import ASTObject from './ast-object'

export function hashArray(arr) {
  return hashString(arr.join(''))
}

const staticStylis = new Stylis({ keyframe: false })

export function replaceCssWithCallExpression(
  path,
  identifier,
  state,
  t,
  staticCSSSrcCreator = src => src,
  removePath = false,
  staticCSSSelectorCreator = (name, hash) => `.${name}-${hash}`
) {
  try {
    const { hash, src } = createRawStringFromTemplateLiteral(path.node.quasi)
    const name = getName(getIdentifierName(path, t), 'css')

    if (state.extractStatic && !path.node.quasi.expressions.length) {
      const staticCSSRules = staticStylis(
github emotion-js / next / packages / server / src / index.js View on Github external
ids[match[1]] = true
    }
  }

  o.rules = sheet.sheet.cssRules.slice().filter(x => {
    RGX.lastIndex = 0
    let match = RGX.exec(x.cssText)
    const ret = match == null || ids[match[1]] || false
    return ret
  })

  o.ids = keys(inserted).filter(id => {
    return !!ids[id] || !registered[`css-${id}`]
  })
  let css = ''
  forEach(o.rules, x => (css += x.cssText))
  o.css = css

  return o
}
github emotion-js / emotion / packages / babel-plugin-emotion / src / inline.js View on Github external
export function inline(
  quasi: any,
  identifierName?: string,
  prefix: string
): {
  name: string,
  hash: string,
  src: string
} {
  let strs = quasi.quasis.map(x => x.value.cooked)
  let hash = hashArray([...strs])
  let name = getName(identifierName, prefix)
  let { src } = createRawStringFromQuasi(strs)

  return {
    name,
    hash,
    src
  }
}
github emotion-js / next / packages / server / src / index.js View on Github external
let match
  let ids = {}
  while ((match = RGX.exec(html)) !== null) {
    if (!ids[match[1]]) {
      ids[match[1]] = true
    }
  }

  o.rules = sheet.sheet.cssRules.slice().filter(x => {
    RGX.lastIndex = 0
    let match = RGX.exec(x.cssText)
    const ret = match == null || ids[match[1]] || false
    return ret
  })

  o.ids = keys(inserted).filter(id => {
    return !!ids[id] || !registered[`css-${id}`]
  })
  let css = ''
  forEach(o.rules, x => (css += x.cssText))
  o.css = css

  return o
}

emotion-utils

Shared utilities used by emotion, The Next Generation of CSS-in-JS.

MIT
Latest version published 6 years ago

Package Health Score

75 / 100
Full package analysis