How to use css-mediaquery - 10 common examples

const media = Object.keys(this.props.queries).reduce((acc, queryName) => {
      const query = this.props.queries[queryName];

      if (this.props.values) {
        acc[queryName] = cssMediaQuery.match(query, this.props.values);
      } else {
        // if the consumer has not set `values` and is server rendering, default to false
        // because we don't know the screen size
        acc[queryName] = hasMatchMedia
          ? window.matchMedia(query).matches
          : false;
      }

      return acc;
    }, {});

const ssrMatchMedia = query => ({
    matches: mediaQuery.match(query, {
      // The estimated CSS width of the browser.
      width: 800,
    }),
  });

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
    }

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') {

get matches() {
      return mediaQuery.match(query, state.currentDesc)
    },
    media: query,

const doesQueryMatch = (query, viewportSize) => {
  if (!viewportSize) {
    return true
  }

  return mediaQuery.match(query, {
    type: 'screen',
    width: `${viewportSize}px`,
  })
}

? (query: string) => ({
              matches: mediaQuery.match(query, {
                width: theme.breakpoints.values[INITIAL_BREAKPOINT],
              }),
            })
          : undefined,

mqKeys.forEach(key => {
      const mqStr = key.replace(PREFIX, '');
      const isMatch = mediaQuery.match(mqStr, matchObject);
      if (isMatch) {
        merge(res, obj[key]);
      }
    });
  }

ast.stylesheet.rules = ast.stylesheet.rules.reduce(function (rules, rule) {
        if (rule.type === 'media') {
            if (mediaQuery.match(rule.media, options)) {
                rules.push.apply(rules, rule.rules);
            }
        }
        else {
            rules.push(rule);
        }
        return rules;
    }, []);
    return ast;

get matches() {
    return mediaQuery.match(this._query, {
      type: 'screen',
      ...Dimensions.get('window'),
    })
  }