How to use the fela-utils.cssifySupportRules function in fela-utils

To help you get started, we’ve selected a few fela-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 robinweser / fela / packages / fela-dom / src / server / renderToMarkup.js View on Github external
// basic media query rules
      if (
        cacheCluster.mediaRules[media] &&
        cacheCluster.mediaRules[media].length > 0
      ) {
        markup += createStyleTagMarkup(
          cacheCluster.mediaRules[media],
          RULE_TYPE,
          media,
          rehydrationIndex
        )
      }

      // support media rules
      if (cacheCluster.supportMediaRules[media]) {
        const mediaSupport = cssifySupportRules(
          cacheCluster.supportMediaRules[media]
        )

        if (mediaSupport.length > 0) {
          markup += createStyleTagMarkup(
            mediaSupport,
            RULE_TYPE,
            media,
            rehydrationIndex,
            true
          )
        }
      }

      return markup
    },
github robinweser / fela / packages / fela-dom / src / server / renderToSheetList.js View on Github external
// basic media query rules
      if (
        cacheCluster.mediaRules[media] &&
        cacheCluster.mediaRules[media].length > 0
      ) {
        list.push({
          css: cacheCluster.mediaRules[media],
          type: RULE_TYPE,
          rehydration: rehydrationIndex,
          media,
        })
      }

      // support media rules
      if (cacheCluster.supportMediaRules[media]) {
        const mediaSupport = cssifySupportRules(
          cacheCluster.supportMediaRules[media]
        )

        if (mediaSupport.length > 0) {
          list.push({
            css: mediaSupport,
            type: RULE_TYPE,
            rehydration: rehydrationIndex,
            support: true,
            media,
          })
        }
      }

      return list
    },
github robinweser / fela / packages / fela-dom / src / server / renderToMarkup.js View on Github external
renderer.supportQueryOrder
  )

  let styleMarkup = objectReduce(
    sheetMap,
    (markup, type, key) => {
      if (cacheCluster[key].length > 0) {
        markup += createStyleTagMarkup(cacheCluster[key], type, '')
      }

      return markup
    },
    ''
  )

  const support = cssifySupportRules(cacheCluster.supportRules)

  if (support) {
    styleMarkup += createStyleTagMarkup(support, RULE_TYPE, '', true)
  }

  const mediaKeys = Object.keys({
    ...cacheCluster.supportMediaRules,
    ...cacheCluster.mediaRules,
  })

  return arrayReduce(
    mediaKeys,
    (markup, media) => {
      // basic media query rules
      if (
        cacheCluster.mediaRules[media] &&
github robinweser / fela / packages / fela-dom / src / server / renderToMarkup.js View on Github external
(markup, media) => {
      // basic media query rules
      if (
        cacheCluster.mediaRules[media] &&
        cacheCluster.mediaRules[media].length > 0
      ) {
        markup += createStyleTagMarkup(
          cacheCluster.mediaRules[media],
          RULE_TYPE,
          media
        )
      }

      // support media rules
      if (cacheCluster.supportMediaRules[media]) {
        const mediaSupport = cssifySupportRules(
          cacheCluster.supportMediaRules[media]
        )

        if (mediaSupport.length > 0) {
          markup += createStyleTagMarkup(mediaSupport, RULE_TYPE, media, true)
        }
      }

      return markup
    },
    styleMarkup
github robinweser / fela / packages / fela-dom / src / server / renderToMarkup.js View on Github external
(markup, type, key) => {
      if (cacheCluster[key].length > 0) {
        markup += createStyleTagMarkup(
          cacheCluster[key],
          type,
          '',
          rehydrationIndex
        )
      }

      return markup
    },
    ''
  )

  const support = cssifySupportRules(cacheCluster.supportRules)

  if (support) {
    styleMarkup += createStyleTagMarkup(
      support,
      RULE_TYPE,
      '',
      rehydrationIndex,
      true
    )
  }

  const mediaKeys = Object.keys({
    ...cacheCluster.supportMediaRules,
    ...cacheCluster.mediaRules,
  }).sort(renderer.sortMediaQuery)
github robinweser / fela / packages / fela-tools / src / renderToString.js View on Github external
(css, query) => {
      const mediaCSS = mediaRules[query] || ''
      const supportCSS = cssifySupportRules(supportMediaRules[query] || {})

      return css + cssifyMediaQueryRules(query, mediaCSS + supportCSS)
    },
    basicCSS
github robinweser / fela / packages / fela-dom / src / dom / connectDOMNodes.js View on Github external
const cacheCluster = clusterCache(
    renderer.cache,
    renderer.mediaQueryOrder,
    renderer.supportQueryOrder,
    renderer.ruleOrder
  )

  const baseNode = renderer.nodes[RULE_TYPE]

  objectEach(sheetMap, (type, key) => {
    if (cacheCluster[key].length > 0) {
      initDOMNode(renderer.nodes, baseNode, cacheCluster[key], type)
    }
  })

  const support = cssifySupportRules(cacheCluster.supportRules)

  if (support) {
    initDOMNode(renderer.nodes, baseNode, support, RULE_TYPE, '', true)
  }

  const mediaKeys = Object.keys({
    ...cacheCluster.supportMediaRules,
    ...cacheCluster.mediaRules,
  })

  arrayEach(mediaKeys, media => {
    if (
      cacheCluster.mediaRules[media] &&
      cacheCluster.mediaRules[media].length > 0
    ) {
      initDOMNode(
github robinweser / fela / packages / fela-dom / src / dom / connectDOMNodes.js View on Github external
arrayEach(mediaKeys, media => {
    if (
      cacheCluster.mediaRules[media] &&
      cacheCluster.mediaRules[media].length > 0
    ) {
      initDOMNode(
        renderer.nodes,
        baseNode,
        cacheCluster.mediaRules[media],
        RULE_TYPE,
        media
      )
    }

    if (cacheCluster.supportMediaRules[media]) {
      const mediaSupport = cssifySupportRules(
        cacheCluster.supportMediaRules[media]
      )

      if (mediaSupport.length > 0) {
        initDOMNode(
          renderer.nodes,
          baseNode,
          mediaSupport,
          RULE_TYPE,
          media,
          true
        )
      }
    }
  })
}
github robinweser / fela / packages / fela-tools / src / renderToString.js View on Github external
export default function renderToString(renderer: DOMRenderer): string {
  const {
    fontFaces,
    statics,
    keyframes,
    rules,
    mediaRules,
    supportRules,
    supportMediaRules,
  } = clusterCache(renderer.cache, renderer.ruleOrder)

  const basicCSS =
    fontFaces + statics + keyframes + rules + cssifySupportRules(supportRules)

  const mediaKeys = Object.keys({
    ...supportMediaRules,
    ...mediaRules,
  }).sort(renderer.sortMediaQuery)

  return arrayReduce(
    mediaKeys,
    (css, query) => {
      const mediaCSS = mediaRules[query] || ''
      const supportCSS = cssifySupportRules(supportMediaRules[query] || {})

      return css + cssifyMediaQueryRules(query, mediaCSS + supportCSS)
    },
    basicCSS
  )
github robinweser / fela / packages / fela-dom / src / server / renderToSheetList.js View on Github external
sheetMap,
    (list, type, key) => {
      if (cacheCluster[key].length > 0) {
        list.push({
          css: cacheCluster[key],
          rehydration: rehydrationIndex,
          type,
        })
      }

      return list
    },
    []
  )

  const support = cssifySupportRules(cacheCluster.supportRules)

  if (support) {
    sheetList.push({
      css: support,
      type: RULE_TYPE,
      rehydration: rehydrationIndex,
      support: true,
    })
  }

  const mediaKeys = Object.keys({
    ...cacheCluster.supportMediaRules,
    ...cacheCluster.mediaRules,
  }).sort(renderer.sortMediaQuery)

  return arrayReduce(