From eb117d84ab007ea0d9a3523ee951e3f6dcb53220 Mon Sep 17 00:00:00 2001 From: SassNinja Date: Wed, 8 Aug 2018 10:26:44 +0200 Subject: [PATCH 1/4] update docs with media-query-plugin section --- README.md | 62 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 62 insertions(+) diff --git a/README.md b/README.md index e365e0d2..7189385a 100644 --- a/README.md +++ b/README.md @@ -272,6 +272,68 @@ module.exports = { For long term caching use `filename: "[contenthash].css"`. Optionally add `[name]`. +### Media Query + +When writing CSS with the help of a framework (such as [Bootstrap](https://getbootstrap.com/) or [Foundation](https://foundation.zurb.com/sites.html)) and with a modular design pattern your emited CSS files will probably contain many media queries. This is quite bad for mobile users who have to load all desktop specific CSS which they will never need. + +To improve this you can use the [media-query-plugin](https://github.com/SassNinja/media-query-plugin) which plays together well with the mini-css-extract-plugin. It will extract the defined media queries and emit them as separate files (or inject into existing chunks if working with dynamic imports). + +Afterwards a mobile user only needs to load this + +```scss +.foo { color: red } +.bar { font-size: 1rem } +``` + +instead of this + +```css +.foo { color: red } +@media (min-width: 75em) { + .foo { color: blue } +} +.bar { font-size: 1rem } +``` + +#### Usage + +Using the media-query-plugin is quite easy. Add the included loader to your rules and the plugin to your plugins. It will take over the filename option of the mini-css-extract-plugin and recognize its generated CSS chunks. + +```javascript +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); +const MediaQueryPlugin = require('media-query-plugin'); + +module.exports = { + module: { + rules: [ + { + test: /\.scss$/, + use: [ + MiniCssExtractPlugin.loader, + 'css-loader', + MediaQueryPlugin.loader, + 'postcss-loader', + 'sass-loader' + ] + } + ] + }, + plugins: [ + new MiniCssExtractPlugin({ + filename: '[name].css' + }), + new MediaQueryPlugin({ + include: true, + queries: { + '(min-width: 75em)': 'desktop' + } + }) + ] +}; +``` + +For more information please check the media-query-plugin [docs](https://github.com/SassNinja/media-query-plugin) and [examples](https://github.com/SassNinja/media-query-plugin/tree/master/examples). +

Maintainers

From 2f363dd015d69075cea086991f165f8a23942d57 Mon Sep 17 00:00:00 2001 From: SassNinja Date: Wed, 8 Aug 2018 13:39:34 +0200 Subject: [PATCH 2/4] improve docs of media-query-plugin I've now added filenames and line breaks in CSS code for better readability. --- README.md | 48 ++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 40 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 7189385a..455d53cc 100644 --- a/README.md +++ b/README.md @@ -278,32 +278,64 @@ When writing CSS with the help of a framework (such as [Bootstrap](https://getbo To improve this you can use the [media-query-plugin](https://github.com/SassNinja/media-query-plugin) which plays together well with the mini-css-extract-plugin. It will extract the defined media queries and emit them as separate files (or inject into existing chunks if working with dynamic imports). -Afterwards a mobile user only needs to load this +Afterwards a mobile user needs to load initially -```scss -.foo { color: red } -.bar { font-size: 1rem } +**`example.css`** +```css +.foo { + color: red; +} +.bar { + font-size: 1rem; +} ``` -instead of this +and only if necessary +**`example-desktop.css`** ```css -.foo { color: red } @media (min-width: 75em) { - .foo { color: blue } + .foo { + color: blue; + } +} +``` + +instead of always the full + +**`example.css`** +```css +.foo { + color: red; +} +@media (min-width: 75em) { + .foo { + color: blue; + } +} +.bar { + font-size: 1rem; } -.bar { font-size: 1rem } ``` #### Usage Using the media-query-plugin is quite easy. Add the included loader to your rules and the plugin to your plugins. It will take over the filename option of the mini-css-extract-plugin and recognize its generated CSS chunks. +**`example.js`** +```javascript +import './example.scss'; +``` + +**`webpack.config.js`** ```javascript const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const MediaQueryPlugin = require('media-query-plugin'); module.exports = { + entry: { + example: './example.js' + }, module: { rules: [ { From 88778a143795bd31e918c30b78cce5ba1ca959cb Mon Sep 17 00:00:00 2001 From: SassNinja Date: Wed, 15 Aug 2018 09:03:21 +0200 Subject: [PATCH 3/4] significantly shorten media query plugin section --- README.md | 94 ++----------------------------------------------------- 1 file changed, 3 insertions(+), 91 deletions(-) diff --git a/README.md b/README.md index 455d53cc..d5911ee2 100644 --- a/README.md +++ b/README.md @@ -272,99 +272,11 @@ module.exports = { For long term caching use `filename: "[contenthash].css"`. Optionally add `[name]`. -### Media Query +### Media Query Plugin -When writing CSS with the help of a framework (such as [Bootstrap](https://getbootstrap.com/) or [Foundation](https://foundation.zurb.com/sites.html)) and with a modular design pattern your emited CSS files will probably contain many media queries. This is quite bad for mobile users who have to load all desktop specific CSS which they will never need. +If you'd like to extract the media queries from the extracted CSS (so mobile users don't need to load desktop specific CSS anymore) you should use the [media-query-plugin](https://github.com/SassNinja/media-query-plugin). It will take over the filename option of the mini-css-extract-plugin and recognize its generated CSS chunks. -To improve this you can use the [media-query-plugin](https://github.com/SassNinja/media-query-plugin) which plays together well with the mini-css-extract-plugin. It will extract the defined media queries and emit them as separate files (or inject into existing chunks if working with dynamic imports). - -Afterwards a mobile user needs to load initially - -**`example.css`** -```css -.foo { - color: red; -} -.bar { - font-size: 1rem; -} -``` - -and only if necessary - -**`example-desktop.css`** -```css -@media (min-width: 75em) { - .foo { - color: blue; - } -} -``` - -instead of always the full - -**`example.css`** -```css -.foo { - color: red; -} -@media (min-width: 75em) { - .foo { - color: blue; - } -} -.bar { - font-size: 1rem; -} -``` - -#### Usage - -Using the media-query-plugin is quite easy. Add the included loader to your rules and the plugin to your plugins. It will take over the filename option of the mini-css-extract-plugin and recognize its generated CSS chunks. - -**`example.js`** -```javascript -import './example.scss'; -``` - -**`webpack.config.js`** -```javascript -const MiniCssExtractPlugin = require('mini-css-extract-plugin'); -const MediaQueryPlugin = require('media-query-plugin'); - -module.exports = { - entry: { - example: './example.js' - }, - module: { - rules: [ - { - test: /\.scss$/, - use: [ - MiniCssExtractPlugin.loader, - 'css-loader', - MediaQueryPlugin.loader, - 'postcss-loader', - 'sass-loader' - ] - } - ] - }, - plugins: [ - new MiniCssExtractPlugin({ - filename: '[name].css' - }), - new MediaQueryPlugin({ - include: true, - queries: { - '(min-width: 75em)': 'desktop' - } - }) - ] -}; -``` - -For more information please check the media-query-plugin [docs](https://github.com/SassNinja/media-query-plugin) and [examples](https://github.com/SassNinja/media-query-plugin/tree/master/examples). +---

Maintainers

From 762da0e87e32a347dd69369fb7ccc003dc2cb9fc Mon Sep 17 00:00:00 2001 From: SassNinja Date: Thu, 16 Aug 2018 10:32:37 +0200 Subject: [PATCH 4/4] remove horizontal line --- README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/README.md b/README.md index d5911ee2..4b0b18c0 100644 --- a/README.md +++ b/README.md @@ -276,7 +276,6 @@ For long term caching use `filename: "[contenthash].css"`. Optionally add `[name If you'd like to extract the media queries from the extracted CSS (so mobile users don't need to load desktop specific CSS anymore) you should use the [media-query-plugin](https://github.com/SassNinja/media-query-plugin). It will take over the filename option of the mini-css-extract-plugin and recognize its generated CSS chunks. ----

Maintainers