Launch Week Day 2: Introducing Reports: An Extensible Reporting Framework for Socket Data.Learn More
Socket
Book a DemoSign in
Socket

sheetify-custom-media

Package Overview
Dependencies
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

sheetify-custom-media

Spec compliant CSS custom media query syntax for sheetify

latest
Source
npmnpm
Version
1.0.1
Version published
Weekly downloads
5
Maintainers
1
Weekly downloads
 
Created
Source

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 for each 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

Keywords

sheetify

FAQs

Package last updated on 05 Oct 2014

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts