Switch branches/tags
react-fela@8.0.2 react-fela@7.3.0 react-fela@7.2.0 react-fela@7.0.1 react-fela@6.2.4 react-fela@6.2.3 react-fela@6.2.2 react-fela@6.2.1 react-fela@6.2.0 react-fela@6.1.1 react-fela@6.0.2 react-fela@6.0.1 react-fela@6.0.0 react-fela@5.3.0 react-fela@5.2.1 react-fela@5.2.0 react-fela@5.0.0 preact-fela@8.0.2 preact-fela@7.3.0 preact-fela@7.2.0 preact-fela@7.0.1 preact-fela@6.2.4 preact-fela@6.2.3 preact-fela@6.2.2 preact-fela@6.2.1 preact-fela@6.2.0 preact-fela@6.1.1 preact-fela@6.0.2 preact-fela@6.0.1 preact-fela@6.0.0 preact-fela@5.3.0 preact-fela@5.2.1 preact-fela@5.2.0 preact-fela@5.0.0 performance-benchmarks@0.0.13 performance-benchmarks@0.0.12 performance-benchmarks@0.0.10 performance-benchmarks@0.0.9 performance-benchmarks@0.0.8 performance-benchmarks@0.0.7 performance-benchmarks@0.0.6 jest-react-fela@1.0.0 jest-preact-fela@1.0.0 jest-inferno-fela@1.0.0 jest-fela-bindings@1.0.0 inferno-fela@9.0.2 inferno-fela@8.2.0 inferno-fela@8.1.0 inferno-fela@7.0.1 inferno-fela@6.2.4 inferno-fela@6.2.3 inferno-fela@6.2.2 inferno-fela@6.2.1 inferno-fela@6.2.0 inferno-fela@6.1.1 inferno-fela@6.0.2 inferno-fela@6.0.1 inferno-fela@6.0.0 inferno-fela@5.3.0 inferno-fela@5.2.1 inferno-fela@5.2.0 inferno-fela@5.0.0 fela@6.2.2 fela@6.1.8 fela@6.1.7 fela@6.1.3 fela@6.1.2 fela@6.1.1 fela@6.1.0 fela@6.0.2 fela@6.0.1 fela@6.0.0 fela@5.2.0 fela@5.1.1 fela@5.1.0 fela@5.0.0 fela-utils@8.1.2 fela-utils@8.0.7 fela-utils@8.0.6 fela-utils@8.0.3 fela-utils@8.0.2 fela-utils@8.0.1 fela-utils@8.0.0 fela-utils@7.0.2 fela-utils@7.0.1 fela-utils@7.0.0 fela-utils@6.0.1 fela-utils@6.0.0 fela-utils@5.0.5 fela-utils@5.0.0 fela-tools@5.2.2 fela-tools@5.1.6 fela-tools@5.1.5 fela-tools@5.1.2 fela-tools@5.1.1 fela-tools@5.1.0 fela-tools@5.0.14 fela-tools@5.0.10 fela-tools@5.0.9 fela-tools@5.0.8
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
47 lines (37 sloc) 1.26 KB

mapValueToMediaQuery(queryValueMap, mapper)

Transforms a set of mediaQuery-value pairs into valid style object media queries.


  1. queryValueMap (Object): An object consisting of mediaQuery-value pairs.
  2. mapper (Function): A function that takes each value and returns a style object which is mapped to the media query.


(Object): An object containing only valid media queries.


import { mapValueToMediaQuery } from 'fela-tools'

const rule = props => ({
  color: 'red',
  fontSize: '15px',
    value => ({ fontSize: value + 'px' })

const mediaSizes = {
  '@media (min-width: 320px)': 17,
  '@media (min-width: 480px)': 20
const style = rule({ sizes: mediaSizes })

style === {
  color: 'red',
  fontSize: '15px',
  '@media (min-width: 320px)': {
    fontSize: '17px'
  '@media (min-width: 480px)': {
    fontSize: '20px'

Tips & Tricks

It is best used within the extend value provided by fela-plugin-extend, because it merges nested objects (such as media queries) instead of overwriting them.

It can also be combined with the fela-plugin-named-media-query to have short query keys.