https://github.com/unlight/gulp-extract-media-queries
Plugin extracts css rules inside of media queries and saves it to separated files.
https://github.com/unlight/gulp-extract-media-queries
Last synced: 12 months ago
JSON representation
Plugin extracts css rules inside of media queries and saves it to separated files.
- Host: GitHub
- URL: https://github.com/unlight/gulp-extract-media-queries
- Owner: unlight
- Created: 2015-10-12T14:06:22.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2017-04-24T12:43:33.000Z (about 9 years ago)
- Last Synced: 2025-03-25T05:41:36.764Z (about 1 year ago)
- Language: JavaScript
- Size: 4.88 KB
- Stars: 19
- Watchers: 3
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
gulp-extract-media-queries
--------------------------
Plugin extracts css rules inside of media queries and saves it to separated files.
EXAMPLE
-------
```js
var gulp = require("gulp");
var g = require("gulp-load-plugins")();
gulp.task("design.build", function() {
gulp.src("src/design/style.css")
.pipe(g.extractMediaQueries())
.pipe(gulp.dest("build"));
});
```
Task `design.build` for below `style.css` file:
``` css
* {
box-sizing: border-box;
}
@media (min-width: 640px) {
.container {
margin: 0 auto;
}
}
```
Produces following files:
style.css
min-width-640px.css
* {
box-sizing: border-box;
}
.container {
margin: 0 auto;
}
And now you can include it in your html in such way:
```html
```
When a media query is true, the corresponding style sheet or style rules are applied,
following the normal cascading rules. Style sheets with media queries attached
to their tags will still download even if their media queries
would return false (they will not apply, however).
Unless you use the `not` or `only` operators,
the media type is optional and the all type will be implied.