sheetify-custom-media
Spec compliant CSS custom media query syntax for sheetify
Last updated 6 years ago by yoshuawuyts .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install sheetify-custom-media 
SYNC missed versions from official npm registry.

sheetify-custom-media

NPM version build status Test coverage Downloads

A sheetify transform to add support for W3C-style CSS custom media queries syntax. Uses rework-custom-media to perform the transformation.

N.B. This is not a polyfill. This transform aims to provide a future-proof way of using a limited subset of the features provided by native CSS custom media queries.

Installation

npm install sheetify-custom-media

Usage

As a sheetify transform:

var media = require('sheetify-custom-media');
var sheetify = require('sheetify');

sheetify('path/to/my/index.css')
  .transform(media())
  .bundle();

Options

map

Optionally, you may define the <media-query-list> for each <extension-name> in a JavaScript object that is passed to the function.

var myQueries = {
  map: {
    '--wide-screen': 'screen and (min-width:900px)'
  }
}

variables({map: myQueries});

CSS syntax

A custom media query is defined with the @custom-media rule. Its scope is global.

@custom-media <extension-name> <media-query-list>;

The <extension-name> can then be used in a media feature. The alias must be wrapped in parentheses.

@custom-media --narrow-window screen and (max-width: 30em);

@media (--narrow-window) {
  /* narrow window styles */
}

License

MIT

Current Tags

  • 1.0.1                                ...           latest (6 years ago)

2 Versions

  • 1.0.1                                ...           6 years ago
  • 1.0.0                                ...           6 years ago
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 2
Dependencies (1)
Dev Dependencies (5)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |