OPTIONS.md

Options

• regex
• invert
• keepBaseRules

By default postcss-filter-mq will filter all media queries, this is not usually very useful, and so you'll want to pass options for controlling which media queries are filtered and how.

The default, configurable options are:

var options = {
    regex: /.*/i,           // decides the queries to filter
    invert: false,          // inverts the regex filter result
    keepBaseRules: false    // keep the non-media css rules
};

---

Regex

{ regex: /.*/i }

The regex option is passed as a regular expression (no quote marks) value, it will then match this regex against every media query found in the input css. If a media query matches, it will return to the output.

Example

{ regex: /max-width(\s)*:(\s)*1200px/ }

would match:

@media screen and ( max-width : 1200px ) { ... }
@media ( max-width:1200px ) { ... }

but would not match:

@media screen and ( min-width: 1200px ) { ... }
/* ( or anything else ) */

Tips:

• use (\s)* where there could be a space character.
• no need to provide /g flag, /i is optional.
• don't forget to escape the ( and ) that wrap media groups.

---

Invert

{ invert: false }

The invert option is passed as a boolean value, it will effectively invert the results returned by the filter. So if your regex was: /print/ it will keep anything that does not match /print/ and return it to the output.

Example

{ regex: /max-width/, invert: true }

html {}
@media screen and ( max-width: 1200px ) { ... }
@media screen and ( min-width: 1200px ) { ... }
@media print { ... }
a {}

would return

@media screen and ( min-width: 1200px ) { ... }
@media print { ... }

Tips:

• use when you don't want to write complicated negative regex.
• good for stripping out all media with: { regex: /.*/i , invert: true }.

---

KeepBaseRules

{ keepBaseRules: false }

The keepBaseRules option is passed as a boolean value, it will give you the option of keeping all the css which is not inside a media query if set to true, or stripping it out if left to the default false.

Example

{ regex: /max-width/, keepBaseRules: true }

html {}
@media screen and ( max-width: 1200px ) { ... }
@media screen and ( min-width: 1200px ) { ... }
@media print { ... }
a {}

would return

html {}
@media screen and ( max-width: 1200px ) { ... }
a {}

---

Check out the EXAMPLES.md file for more advanced use-cases.