Skip to content

Commit

Permalink
Merge branch 'feature/make-modular' into master
Browse files Browse the repository at this point in the history
  • Loading branch information
SassNinja authored Jan 2, 2020
2 parents 0399e4e + 75880bb commit 43b7d58
Show file tree
Hide file tree
Showing 20 changed files with 372 additions and 21,317 deletions.
22 changes: 22 additions & 0 deletions .vscode/launch.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
{
// Verwendet IntelliSense zum Ermitteln möglicher Attribute.
// Zeigen Sie auf vorhandene Attribute, um die zugehörigen Beschreibungen anzuzeigen.
// Weitere Informationen finden Sie unter https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "run test",
"program": "${workspaceFolder}/node_modules/.bin/_mocha",
"args": ["--timeout", "60000"]
},
{
"type": "node",
"request": "launch",
"name": "example: gulp",
"program": "${workspaceFolder}/examples/gulp/node_modules/.bin/gulp",
"cwd": "${workspaceFolder}/examples/gulp"
}
]
}
57 changes: 41 additions & 16 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,6 @@ You can find complete examples <a href="examples">here</a>.
| output.name | '[name]-[query].[ext]' |
| queries | {} |
| extractAll | true |
| combine | true |
| stats | true |
| entry | null |

Expand Down Expand Up @@ -107,48 +106,74 @@ By default the plugin extracts all media queries into separate files. If you wan
}
```

### combine

The same media rules will probably appear several times in your original CSS file. This happens when you develop a CSS component and don't want to define the responsive behavior in another file / context.
### stats

By default the plugin will merge equal media rules into one after the extraction so you've got finally only one media rule per file. In case you don't want this merge (for whatever reason) you can disable it by setting this option `false`.
By default the plugin displays in your terminal / command prompt which files have been emited. If you don't want to see it just set this option `false`.

```javascript
'postcss-extract-media-query': {
combine: true
stats: true
}
```

### minimize
### entry

Since the emited, extracted files are outside of the bundler / task runner context your possibly defined CSS minification doesn't take effect. To minimize the emited files as well you have to set this option true.
By default the plugin uses the `from` value from the options of the loader or of the options you define in `postcss().process(css, { from: ... })`. Usually you don't need to change it but if you have to (e.g. when using the plugin standalone) you can define an **absolute** file path as entry.

```javascript
'postcss-extract-media-query': {
minimize: true
entry: path.join(__dirname, 'some/path/example.css')
}
```

### stats
### config

By default the plugin displays in your terminal / command prompt which files have been emited. If you don't want to see it just set this option `false`.
By default the plugin looks for a `postcss.config.js` file in your project's root (read [node-app-root-path](https://github.com/inxilpro/node-app-root-path) to understand how root is determined) and tries to apply all subsequent PostCSS plugins to the extracted CSS.

In case this lookup doesn't suite you it's possible to specify the config path yourself.

```javascript
'postcss-extract-media-query': {
stats: true
config: path.join(__dirname, 'some/path/postcss.config.js')
}
```

### entry

By default the plugin uses the `from` value from the options of the loader or of the options you define in `postcss().process(css, { from: ... })`. Usually you don't need to change it but if you have to (e.g. when using the plugin standalone) you can define an **absolute** file path as entry.
It's also possible to pass the config as object to avoid any file resolution.

```javascript
'postcss-extract-media-query': {
entry: path.join(__dirname, 'some/path/example.css')
config: {
plugins: {
'postcss-extract-media-query': {}
'cssnano': {}
}
}
}
```

## Migration

### coming from 1.x

Both options, `combine` and `minimize`, have been removed in v2 because the plugin parses your `postcss.config.js` now and applies all subsequent plugins to the extracted files as well.

So if you have used them you simply need to install appropriate PostCSS plugins (see below for example) and add them to your PostCSS config.

```bash
npm install postcss-combine-media-query cssnano --save-dev
```
```javascript
plugins: {
'postcss-combine-media-query': {},
'postcss-extract-media-query': {},
'cssnano': {},
}
```

### plugin authors

If you're using this plugin via the api (e.g. for your own plugin) you should note it has changed from sync to async in v2. This was necessary in the course of going with promises. I'm not going to keep support of the sync api because it would make the code more complex than necessary and it's officially recommended to use async. Please check the tests to see how it has to be done now!

## Webpack User?

If you're using webpack you should use [media-query-plugin](https://github.com/SassNinja/media-query-plugin) which is built for webpack only and thus comes with several advantages such as applying all other loaders you've defined and hash support for caching.
Expand Down
34 changes: 0 additions & 34 deletions combine-media.js

This file was deleted.

Loading

0 comments on commit 43b7d58

Please sign in to comment.