How to use the css-mediaquery.parse function in css-mediaquery

To help you get started, we’ve selected a few css-mediaquery 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 pocketjoso / penthouse / src / non-matching-media-query-remover.js View on Github external
function _isMatchingMediaQuery (mediaQuery, matchConfig) {
  // TODO: use the media query parsing from css-tree instead
  let mediaAST
  try {
    mediaAST = cssMediaQuery.parse(mediaQuery)
  } catch (e) {
    // cant parse, most likely browser cant either
    return false
  }

  var keep = mediaAST.some(function (mq) {
    // not sure why css-mediaquery library sometimes flags the inverse as type,
    // rather than the inverse field, but for our purposes we want to treat
    // them the same.
    const isInverse = mq.inverse || mq.type === 'not'
    if (
      (!isInverse && mq.type === 'print') ||
      (isInverse && mq.type === 'screen')
    ) {
      return false
    }
github pocketjoso / penthouse / lib / phantomjs / non-matching-media-query-remover.js View on Github external
function _isMatchingMediaQuery (rule, matchConfig) {
  if (rule.type !== 'media') {
    // ignore (keep) all non media query rules
    return true
  }

  var mediaAST
  try {
    mediaAST = cssMediaQuery.parse(rule.media)
  } catch (e) {
    // cant parse, most likely browser cant either
    return false
  }
  var keep = mediaAST.some(function (mq) {
    if (mq.type === 'print') {
      return false
    }
    // f.e. @media all {}
    // go for false positives over false negatives,
    // i.e. accept @media randomThing {}
    if (mq.expressions.length === 0) {
      return true
    }
    return mq.expressions.some(function (expression) {
      if (expression.modifier === 'min') {
github kristerkari / css-to-react-native-transform / src / index.js View on Github external
rule.selectors[s].indexOf(" ") !== -1
      ) {
        continue;
      }

      const selector = rule.selectors[s].replace(/^\./, "");
      const styles = (result[selector] = result[selector] || {});
      transformDecls(styles, rule.declarations, result);
    }

    if (
      rule.type == "media" &&
      options != null &&
      options.parseMediaQueries === true
    ) {
      const parsed = mediaQuery.parse(rule.media);

      parsed.forEach(mq => {
        if (mediaQueryTypes.indexOf(mq.type) === -1) {
          throw new Error(`Failed to parse media query type "${mq.type}"`);
        }

        mq.expressions.forEach(e => {
          const mf = e.modifier ? `${e.modifier}-${e.feature}` : e.feature;
          const val = e.value ? `: ${e.value}` : "";

          if (mediaQueryFeatures.indexOf(e.feature) === -1) {
            throw new Error(`Failed to parse media query feature "${mf}"`);
          }

          if (
            dimensionFeatures.indexOf(e.feature) > -1 &&
github NervJS / taro / packages / css-to-react-native / src / index.js View on Github external
rule.selectors[s].indexOf(' ') !== -1
      ) {
        continue
      }

      const selector = rule.selectors[s].replace(/^\./, '')
      const styles = (result[selector] = result[selector] || {})
      transformDecls(styles, rule.declarations, result)
    }

    if (
      rule.type == 'media' &&
      options != null &&
      options.parseMediaQueries === true
    ) {
      const parsed = mediaQuery.parse(rule.media)

      parsed.forEach(mq => {
        if (mediaQueryTypes.indexOf(mq.type) === -1) {
          throw new Error(`Failed to parse media query type "${mq.type}"`)
        }

        mq.expressions.forEach(e => {
          const mf = e.modifier ? `${e.modifier}-${e.feature}` : e.feature
          const val = e.value ? `: ${e.value}` : ''

          if (mediaQueryFeatures.indexOf(e.feature) === -1) {
            throw new Error(`Failed to parse media query feature "${mf}"`)
          }

          if (
            dimensionFeatures.indexOf(e.feature) > -1 &&

css-mediaquery

Parses and determines if a given CSS Media Query matches a set of values.

BSD
Latest version published 10 years ago

Package Health Score

67 / 100
Full package analysis

Similar packages