wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Add support for object based custom media queries

Browse source
This commit is contained in:
Adam Wathan 2017-08-24 21:25:19 -04:00
parent ac77724081
commit ddaaa2a7f8
1 changed files with 15 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/tailwind.js
View file

@ -27,9 +27,23 @@ function findMixin(css, mixin) {
}
function addCustomMediaQueries(css, breakpoints) {
function buildMediaQuery(breakpoint) {
if (_.isString(breakpoint)) {
breakpoint = { min: breakpoint }
}
return _(breakpoint).toPairs().map(([feature, value]) => {
feature = _.get({
min: 'min-width',
max: 'max-width',
}, feature, feature)
return `(${feature}: ${value})`
}).join(' and ')
}
Object.keys(breakpoints).forEach(breakpoint => {
const variableName = `--breakpoint-${breakpoint}`
const mediaQuery = `(min-width: ${breakpoints[breakpoint]})`
const mediaQuery = buildMediaQuery(breakpoints[breakpoint])
const rule = postcss.atRule({
name: 'custom-media',
params: `${variableName} ${mediaQuery}`