Gulp Filename Media Query
A Gulp Plugin that translates a specific filename syntax to a CSS media query and then wraps the file content accordingly.
Usage
In order to qualify as a media query file the CSS filename must be prepended with an @
character. If a media type (such as screen
or print
) should be used it has to be the first expression after the @
character.
Expressions such as min-width: 600px
are written as min-width-640px
. A value is not mandatory, color
is a valid expression as well.
The full CSS media query language features are available as BNF . The media type prefix not
and only
are currently not supported.
Multiple expressions are linked with a double dash (--
).
Commonly used expressions min-width
, max-width
, min-height
and max-height
can be abbreviated as w+
, w-
, h+
and h-
.
Options
The plugin accepts an options
object parameter with the following keys:
mediaType
: null | String
default: null
Prepends a specified media type (such as screen
or print
) to every generated media query that does not provide a media type in its filename.
on.evaluation
: function( mediaType, expressions )
default: function( mediaType, expressions ) { return [ mediaType, expressions ]; }
Callback method that allows to modify the evaluated media query (e.g. converting px
units to em
).
If a custom evaluation method is given it has to return an array of length 2 with the first item being the media type
(may be null
) and the second item an array of expressions ({ feature: _, value: _, unit: _ }
).
on.build
: function( mediaType, expressions, block, suffix )
default: String (Vanilla CSS media query)
Allows to hook into the media query generation process in order to support preprocessor favours such as SCSS or SASS.
Examples
Valid filenames:
@print
@tv
@print--min-width-600px
@min-width-30em
@screen--color
@min-width-500px--max-width-800px
@w+500px
Gulp configuration:
gulp
.src( '**/*.scss' )
.pipe( sass() )
.pipe( filenameMediaQuery( {
mediaType: 'screen',
on: {
evaluation: function( mediaType, expressions ) {
return [ mediaType, expressions.map( function( _ ) { _.unit = 'em'; } ) ]
}
}
} ) )
.pipe( concat( 'main.css' ) )
.pipe( groupMediaQueries() )
.pipe( gulp.dest( 'assets/' ) )