gulp-filename-media-query v1.2.1

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