https://github.com/zurb/siphon-media-query
Extract media query-specific rules from CSS.
https://github.com/zurb/siphon-media-query
Last synced: about 1 year ago
JSON representation
Extract media query-specific rules from CSS.
- Host: GitHub
- URL: https://github.com/zurb/siphon-media-query
- Owner: zurb
- License: mit
- Created: 2016-03-03T19:27:58.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2016-03-03T19:34:34.000Z (over 10 years ago)
- Last Synced: 2025-03-25T10:51:10.860Z (about 1 year ago)
- Language: JavaScript
- Size: 2.93 KB
- Stars: 6
- Watchers: 15
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# siphon-media-query
Extract media query-specific CSS from a stylesheet. Used by the [Foundation for Emails](http://foundation.zurb.com/emails) web inliner to separate general CSS from media query-specific CSS. Inspired by [media-query-extractor](https://www.npmjs.com/package/media-query-extractor), the main difference being this library works as a pure API.
## Installation
```bash
npm install siphon-media-query --save
```
## Usage
The parse function takes in a CSS string and gives you back a CSS string.
To extract all media queries:
```js
var parse = require('siphon-media-query');
var input = `
.foo { color: red; }
@media { .bar { color: dodgerblue; } }
`;
parse(input); // => @media { .bar { color: dodgerblue; } }
```
To extract only CSS from a specific media query:
```js
var input = `
@media (min-width: 400px) {
.foo { color: red; }
}
@media (min-width: 800px) {
.bar { color: dodgerblue; }
}
`;
parse(input, '(min-width: 800px)');
// =>
// @media (min-width: 800px) {
// .bar { color: dodgerblue; }
// }
```
## Local Development
```bash
git clone https://github.com/zurb/siphon-media-query
cd siphon-media-query
npm install
npm test
```