extract-css-media

Provides a function, which parses a given css string and extracts the media query definitions into separate css strings (or ASTs, if configured).

It uses the css module, to parse and compile the input css string.

Installation

``npm i extract-css-media`

`API`

The module exports a function which accepts to parameters: the input css string and an options object.

`$3`


#### minRules: Number - default: 20
Specifies a minimum number of rules for a media query to be required to split that media query definitions into an extra string.
The background for that is, that there are sometimes media queries which contain only a little amount of definitions. In that case it often makes sense to keep them in the overall css.
#### compress: Boolean - default: true
The parameter gets passed to css.parse. When set to true,
the output css gets minified.
#### asAst: Boolean - default: false
This option can be used, if the splitted stylesheets should get processed further. 
#### source: String - default: undefined
The source parameter gets passed to css.parse and is used to
show the filename, in which a potential parsing errors occurred.
$3

If the execution was successful, the following object gets returned:

{
    mediaQuery1: CSS-string or AST
    mediaQuery2: CSS-string or AST,
    all: CSS-string or AST of the rules without media queries
}
Example

`const extractMedia = require('extract-css-media')

const extracted = extractMedia(
body {
color: red
}

@media screen and (min-width: 300px) {
body {
color: green
}
}, { minRules: 1 } )

console.log(JSON.stringify(extracted, null, 4));`

prints

`{ "screen and (min-width: 300px)": "body{color:green;}", "all": "body{color:red;}" }``

Note

The compress option doesn't produce a fully minimized css. Like you can already see in the
example output, the splitting semicolon for css definitions is also added to the last statement
of each definition. If you really want to have the smallest css, you should use a real minifier
after the media query separation.

API

The module exports a function which accepts to parameters: the input css string and an options object.

$3

#### minRules: Number - default: 20
Specifies a minimum number of rules for a media query to be required to split that media query definitions into an extra string.

The background for that is, that there are sometimes media queries which contain only a little amount of definitions. In that case it often makes sense to keep them in the overall css.

#### compress: Boolean - default: true
The parameter gets passed to css.parse. When set to true,
the output css gets minified.

#### asAst: Boolean - default: false
This option can be used, if the splitted stylesheets should get processed further.

#### source: String - default: undefined
The source parameter gets passed to css.parse and is used to
show the filename, in which a potential parsing errors occurred.

$3

If the execution was successful, the following object gets returned:


{
    mediaQuery1: CSS-string or AST
    mediaQuery2: CSS-string or AST,
    all: CSS-string or AST of the rules without media queries
}

Example


const extractMedia = require('extract-css-media')

const extracted = extractMedia(
body {
color: red
}

@media screen and (min-width: 300px) {
body {
color: green
}
}

, {
        minRules: 1
    }
)

console.log(JSON.stringify(extracted, null, 4));

prints


{
    "screen and (min-width: 300px)": "body{color:green;}",
    "all": "body{color:red;}"
}