Skip to content

Commit 313c3c4

Browse files
committedAug 8, 2018
docs(README): update filename formatting
1 parent d6931da commit 313c3c4

File tree

1 file changed

+24
-21
lines changed

1 file changed

+24
-21
lines changed
 

‎README.md

+24-21
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ npm i -D postcss-loader
3333

3434
### `Configuration`
3535

36-
**postcss.config.js**
36+
**`postcss.config.js`**
3737
```js
3838
module.exports = {
3939
parser: 'sugarss',
@@ -72,7 +72,7 @@ Config lookup starts from `path.dirname(file)` and walks the file tree upwards u
7272

7373
After setting up your `postcss.config.js`, add `postcss-loader` to your `webpack.config.js`. You can use it standalone or in conjunction with `css-loader` (recommended). Use it **after** `css-loader` and `style-loader`, but **before** other preprocessor loaders like e.g `sass|less|stylus-loader`, if you use any.
7474

75-
**webpack.config.js**
75+
**`webpack.config.js`**
7676
```js
7777
module.exports = {
7878
module: {
@@ -88,7 +88,7 @@ module.exports = {
8888

8989
> ⚠️ When `postcss-loader` is used standalone (without `css-loader`) don't use `@import` in your CSS, since this can lead to quite bloated bundles
9090
91-
**webpack.config.js (recommended)**
91+
**`webpack.config.js` (recommended)**
9292
```js
9393
module.exports = {
9494
module: {
@@ -122,6 +122,7 @@ module.exports = {
122122

123123
If you use JS styles without the [`postcss-js`][postcss-js] parser, add the `exec` option.
124124

125+
**`webpack.config.js`**
125126
```js
126127
{
127128
test: /\.style.js$/,
@@ -148,7 +149,7 @@ You can manually specify the path to search for your config (`postcss.config.js`
148149
149150
> ⚠️ Note that you **can't** use a **filename** other than the [supported config formats] (e.g `.postcssrc.js`, `postcss.config.js`), this option only allows you to manually specify the **directory** where config lookup should **start** from
150151
151-
**webpack.config.js**
152+
**`webpack.config.js`**
152153
```js
153154
{
154155
loader: 'postcss-loader',
@@ -173,7 +174,7 @@ You can manually specify the path to search for your config (`postcss.config.js`
173174

174175
`postcss-loader` exposes context `ctx` to the config file, making your `postcss.config.js` dynamic, so can use it to do some real magic ✨
175176

176-
**postcss.config.js**
177+
**`postcss.config.js`**
177178
```js
178179
module.exports = ({ file, options, env }) => ({
179180
parser: file.extname === '.sss' ? 'sugarss' : false,
@@ -185,7 +186,7 @@ module.exports = ({ file, options, env }) => ({
185186
})
186187
```
187188

188-
**webpack.config.js**
189+
**`webpack.config.js`**
189190
```js
190191
{
191192
loader: 'postcss-loader',
@@ -202,7 +203,7 @@ module.exports = ({ file, options, env }) => ({
202203

203204
### `Plugins`
204205

205-
**webpack.config.js**
206+
**`webpack.config.js`**
206207
```js
207208
{
208209
loader: 'postcss-loader',
@@ -229,7 +230,7 @@ module.exports = ({ file, options, env }) => ({
229230

230231
#### `Parser`
231232

232-
**webpack.config.js**
233+
**`webpack.config.js`**
233234
```js
234235
{
235236
test: /\.sss$/,
@@ -242,7 +243,7 @@ module.exports = ({ file, options, env }) => ({
242243

243244
#### `Syntax`
244245

245-
**webpack.config.js**
246+
**`webpack.config.js`**
246247
```js
247248
{
248249
test: /\.css$/,
@@ -255,7 +256,7 @@ module.exports = ({ file, options, env }) => ({
255256

256257
#### `Stringifier`
257258

258-
**webpack.config.js**
259+
**`webpack.config.js`**
259260
```js
260261
{
261262
test: /\.css$/,
@@ -270,7 +271,7 @@ module.exports = ({ file, options, env }) => ({
270271

271272
Enables source map support, `postcss-loader` will use the previous source map given by other loaders and update it accordingly, if no previous loader is applied before `postcss-loader`, the loader will generate a source map for you.
272273

273-
**webpack.config.js**
274+
**`webpack.config.js`**
274275
```js
275276
{
276277
test: /\.css/,
@@ -288,7 +289,7 @@ Enables source map support, `postcss-loader` will use the previous source map gi
288289
You can set the `sourceMap: 'inline'` option to inline the source map
289290
within the CSS directly as an annotation comment.
290291

291-
**webpack.config.js**
292+
**`webpack.config.js`**
292293
```js
293294
{
294295
loader: 'postcss-loader',
@@ -308,7 +309,7 @@ within the CSS directly as an annotation comment.
308309

309310
### `Stylelint`
310311

311-
**webpack.config.js**
312+
**`webpack.config.js`**
312313
```js
313314
{
314315
test: /\.css$/,
@@ -330,9 +331,9 @@ within the CSS directly as an annotation comment.
330331
}
331332
```
332333

333-
### Autoprefixing
334+
### `Autoprefixing`
334335

335-
**webpack.config.js**
336+
**`webpack.config.js`**
336337
```js
337338
{
338339
test: /\.css$/,
@@ -361,7 +362,7 @@ This loader [cannot be used] with [CSS Modules] out of the box due
361362
to the way `css-loader` processes file imports. To make them work properly,
362363
either add the css-loader’s [`importLoaders`] option.
363364

364-
**webpack.config.js**
365+
**`webpack.config.js`**
365366
```js
366367
{
367368
test: /\.css$/,
@@ -386,6 +387,7 @@ If you want to process styles written in JavaScript, use the [postcss-js] parser
386387

387388
[postcss-js]: https://github.com/postcss/postcss-js
388389

390+
**`webpack.config.js`**
389391
```js
390392
{
391393
test: /\.style.js$/,
@@ -425,10 +427,11 @@ export default {
425427

426428
[ExtractPlugin]: https://github.com/webpack-contrib/mini-css-extract-plugin
427429

428-
**webpack.config.js**
430+
**`webpack.config.js`**
429431
```js
430-
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
431-
const devMode = process.env.NODE_ENV !== 'production';
432+
const devMode = process.env.NODE_ENV !== 'production'
433+
434+
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
432435

433436
module.exports = {
434437
module: {
@@ -438,14 +441,14 @@ module.exports = {
438441
use: [
439442
devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
440443
'css-loader',
441-
'postcss-loader',
444+
'postcss-loader'
442445
]
443446
}
444447
]
445448
},
446449
plugins: [
447450
new MiniCssExtractPlugin({
448-
filename: devMode ? '[name].css' : '[name].[hash].css',
451+
filename: devMode ? '[name].css' : '[name].[hash].css'
449452
})
450453
]
451454
}

0 commit comments

Comments
 (0)
Please sign in to comment.