https://github.com/Ghostavio/postcss-extract-media
PostCSS plugin to extract media from your css into a separated file.
https://github.com/Ghostavio/postcss-extract-media
Last synced: 4 days ago
JSON representation
PostCSS plugin to extract media from your css into a separated file.
- Host: GitHub
- URL: https://github.com/Ghostavio/postcss-extract-media
- Owner: Ghostavio
- License: mit
- Created: 2015-08-25T15:28:38.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2015-08-31T03:31:50.000Z (almost 11 years ago)
- Last Synced: 2025-09-30T08:54:51.760Z (9 months ago)
- Language: JavaScript
- Homepage:
- Size: 188 KB
- Stars: 25
- Watchers: 1
- Forks: 4
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-github-projects - postcss-extract-media - PostCSS plugin to extract media from your css into a separated file. ⭐25 `JavaScript` (📦 Legacy & Inactive Projects)
README
# postcss-extract-media
[`PostCSS`](https://github.com/postcss/postcss) plugin to extract `@media` queries from your stylesheets and move it to a `separate.css` file
This is alpha stage software to solve some of my specific needs. Jump in the issues section to collaborate if it also solve yours.
## Installation
```shell
npm install postcss-extract-media --save-dev
```
## How to use
### Options
#### `match`
This is the match for the media query:
```js
'^print'
'screen and (max-width: 300px)'
```
#### `prefix`
This prefix will be appended to the filename:
```js
'-print' => main.css will be saved as main-print.css
```
### Using
Plugin can be used just like any other `PostCSS` plugin. For example, [Gulp](https://github.com/gulpjs/gulp) setup (using [gulp-postcss](https://github.com/w0rm/gulp-postcss)).
Or [Grunt](https://github.com/gruntjs/grunt) setup (using [grunt-postcss](https://github.com/nDmitry/grunt-postcss)):
```js
module.exports = function(grunt) {
grunt.config('postcss', {
prefix: {
options: {
map : true,
diff : true,
processors: [
require('autoprefixer-core')({ browsers: ['> 1%', 'last 1 version', 'ie 8', 'ie 9'] }),
require('postcss-print')({ match: '^print', prefix: '-print' }),
require('postcss-print')({ match: '(min-width: 568px)', prefix: '-tablet' })
]
},
src: [
'public/css/dist/*.css',
'!public/css/dist/*-print.css',
'!public/css/dist/*.min.css'
]
}
});
grunt.loadNpmTasks('grunt-postcss');
};
```
And then use the print.css like this:
```html
```
## License
MIT © [Gustavo Siqueira](http://twitter.com/Dr_Gustavo)