https://github.com/hipstersmoothie/prepend-media-queries
Strips out all media queries based on user provided breakpoints and prepends all effected classes with a breakpoint specific wrapper.
https://github.com/hipstersmoothie/prepend-media-queries
Last synced: 29 days ago
JSON representation
Strips out all media queries based on user provided breakpoints and prepends all effected classes with a breakpoint specific wrapper.
- Host: GitHub
- URL: https://github.com/hipstersmoothie/prepend-media-queries
- Owner: hipstersmoothie
- Created: 2017-12-08T18:34:12.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-12-27T21:51:41.000Z (over 7 years ago)
- Last Synced: 2024-10-29T08:43:33.886Z (6 months ago)
- Language: JavaScript
- Size: 14.6 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# prepend-media-queries
Strips out all media queries based on user provided breakpoints and prepends all effected classes with a breakpoint specific wrapper.
## Installation
```console
$ npm i prepend-media-queries --save-dev
```
## Usage
##### myCss.css
```css
.foo {
color: red;
}
@media (min-width: 350px) {
.foo {
color: blue;
}
}
@media (min-width: 767px) {
.foo {
color: green;
}
}
```
##### transformed.css
```css
.base .foo {
color: red;
}
.small .foo {
color: blue;
}
.medium .foo {
color: green;
}
```
### Breakpoints Structure
For the plugin to work you must specify the breakpoints for the media queries you want to replace.
##### Breakpoints:
```js
{
breakPoints: [
{
wrapper: '.base',
includeBaseStyles: true,
match:
`\\(max-width:[ \t]+350px\\)|` +
`\\(max-width:[ \t]+767px\\)|` +
},
{
wrapper: '.small',
match:
`\\(min-width:[ \t]+350px\\)|` +
`\\(max-width:[ \t]+766px\\)`
},
{
wrapper: '.medium',
match: `(min-width: 767px)`,
}
]
}
```
#### wrapper
The className to wrap each matched query in.
#### includeBaseStyles
If set to true will include any none media query in the wrapper.
#### match
The media queries to match. Can either be a RegExp or a string.
## Webpack Loader
If you are using `css-loader` with css modules you will need to use this loader. It must come directly after the `css-loader` so that the wrapper classes don
```js
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: 'prepend-media-queries/lib/webpack-plugin',
query: {
breakPoints: [ ... ]
}
},
{
loader: 'css-loader',
query: `modules`
},
{
loader: 'postcss-loader'
}
]
}
]
}
```
## PostCSS Plugin
If you are using `css-loader` with css modules you will need to use this loader. It must come directly after the `css-loader`.
##### postcss.config.js:
```js
{
plugins: [
require('prepend-media-queries/lib/postcss-plugin')({
breakPoints: [ ... ]
}),
]
});
```