|
| 1 | +# Nuxt SVG Loader - SVGs as components, also on the server side! |
| 2 | +[](https://npmjs.com/package/nuxt-purgecss) |
| 3 | +[](https://npmjs.com/package/nuxt-purgecss) |
| 4 | +[](https://travis-ci.com/Developmint/nuxt-purgecss) |
| 5 | +[](https://codecov.io/gh/Developmint/nuxt-purgecss) |
| 6 | +[](https://david-dm.org/Developmint/nuxt-purgecss) |
| 7 | +[](http://standardjs.com) |
| 8 | + |
| 9 | +> |
| 10 | +
|
| 11 | +[📖 **Release Notes**](./CHANGELOG.md) |
| 12 | + |
| 13 | +## Features |
| 14 | + |
| 15 | +* Remove unneeded CSS with ease |
| 16 | +* Webpack or PostCSS mode |
| 17 | +* Already comes with mighty default settings |
| 18 | +* Built on top of [purgecss](https://github.com/FullHuman/purgecss) |
| 19 | +* Nuxt 2 (and only Nuxt 2) support |
| 20 | +* Fully tested! |
| 21 | + |
| 22 | +## Setup |
| 23 | + |
| 24 | +- Add `nuxt-purgecss` dependency using yarn or npm to your project |
| 25 | +- Add `nuxt-purgecss` to `modules` section of `nuxt.config.js`: |
| 26 | + |
| 27 | +```js |
| 28 | +{ |
| 29 | + modules: [ |
| 30 | + 'nuxt-purgecss', |
| 31 | + ], |
| 32 | + |
| 33 | + purgeCSS: { |
| 34 | + // your settings here |
| 35 | + } |
| 36 | +} |
| 37 | +``` |
| 38 | + |
| 39 | +## Options |
| 40 | + |
| 41 | +### Defaults |
| 42 | + |
| 43 | +Before diving into the individual attributes, here are the default settings of the module: |
| 44 | + |
| 45 | +```js |
| 46 | +{ |
| 47 | + mode: MODES.webpack, |
| 48 | + enabled: ({ isDev, isClient }) => (!isDev && isClient), |
| 49 | + paths: [ |
| 50 | + 'components/**/*.vue', |
| 51 | + 'layouts/**/*.vue', |
| 52 | + 'pages/**/*.vue', |
| 53 | + 'plugins/**/*.js' |
| 54 | + ], |
| 55 | + styleExtensions: ['.css'], |
| 56 | + whitelist: ['body', 'html', 'nuxt-progress'], |
| 57 | + extractors: [ |
| 58 | + { |
| 59 | + extractor: class { |
| 60 | + static extract(content) { |
| 61 | + return content.match(/[A-z0-9-:\\/]+/g) |
| 62 | + } |
| 63 | + }, |
| 64 | + extensions: ['html', 'vue', 'js'] |
| 65 | + } |
| 66 | + ] |
| 67 | +} |
| 68 | +``` |
| 69 | + |
| 70 | +This settings should be a good foundation for a variety of projects. |
| 71 | + |
| 72 | +### Merging defaults |
| 73 | + |
| 74 | +You can define every option either as function or as static value (primitives, objects, arrays, ...). |
| 75 | +if you use a function, the default value will be provided as the first argument. |
| 76 | + |
| 77 | +If you *don't* use a function to define you properties, the module will try to |
| 78 | +merge them with the default values. This can be handy for `paths`, `whitelist` and so on because |
| 79 | +the defaults are quite sensible. If you don't want to have the defaults include, just use a function. |
| 80 | + |
| 81 | +### Properties in-depth |
| 82 | + |
| 83 | +#### mode |
| 84 | + |
| 85 | +* Type: `String` (webpack or postcss) |
| 86 | +* Default: `webpack` |
| 87 | + |
| 88 | +Defines the mode, PurgeCSS should be used in. |
| 89 | + |
| 90 | +* Webpack mode can only be used with `build.extractCSS: true` |
| 91 | +* PostCSS mode can only be used with a `build.postcss` **object** (no array) or default settings |
| 92 | + |
| 93 | +#### enabled |
| 94 | + |
| 95 | +* Type: `Boolean` or `Function` (only for webpack mode, will receive the build.extend ctx) |
| 96 | +* Default: `({ isDev, isClient }) => (!isDev && isClient)` (Only activates in production mode) |
| 97 | + |
| 98 | +Enables/Disables the module |
| 99 | + |
| 100 | +* If false, the module won't be activated at all |
| 101 | +* If a function is given, it'll be properly evaluated in webpack mode (in postcss mode it'll be handled as true) |
| 102 | + |
| 103 | + |
| 104 | +#### PurgeCSS options |
| 105 | + |
| 106 | +Please read [the PurgeCSS docs](https://www.purgecss.com/configuration) for information about |
| 107 | +PurgeCSS-related information. |
| 108 | + |
| 109 | +Instead of `content` we use `paths` to specify the paths PurgeCSS should look into (explained [here](https://www.purgecss.com/with-webpack#options). |
| 110 | +This applies to **both modes**, not only to `webpack mode`. |
| 111 | + |
| 112 | +## Examples |
| 113 | + |
| 114 | +### Default setup |
| 115 | + |
| 116 | +```js |
| 117 | +//nuxt.config.js |
| 118 | +export default { |
| 119 | + modules: [ |
| 120 | + 'nuxt-purgecss', |
| 121 | + ] |
| 122 | +} |
| 123 | +``` |
| 124 | + |
| 125 | +### Override a default value |
| 126 | + |
| 127 | + |
| 128 | +```js |
| 129 | +//nuxt.config.js |
| 130 | +export default { |
| 131 | + modules: [ |
| 132 | + 'nuxt-purgecss', |
| 133 | + ], |
| 134 | + |
| 135 | + purgeCSS: { |
| 136 | + whitelist: () => ['only-this-class'] |
| 137 | + } |
| 138 | +} |
| 139 | +``` |
| 140 | + |
| 141 | +### Append a value to the defaults |
| 142 | + |
| 143 | + |
| 144 | +```js |
| 145 | +//nuxt.config.js |
| 146 | +export default { |
| 147 | + modules: [ |
| 148 | + 'nuxt-purgecss', |
| 149 | + ], |
| 150 | + |
| 151 | + purgeCSS: { |
| 152 | + whitelist: ['defaults-and-this-class'] |
| 153 | + } |
| 154 | +} |
| 155 | +``` |
| 156 | + |
| 157 | +### Override a default value |
| 158 | + |
| 159 | + |
| 160 | +```js |
| 161 | +//nuxt.config.js |
| 162 | +export default { |
| 163 | + modules: [ |
| 164 | + 'nuxt-purgecss', |
| 165 | + ], |
| 166 | + |
| 167 | + purgeCSS: { |
| 168 | + whitelist: (defaultWhitelst) => defaultWhitelst.slice(1) |
| 169 | + } |
| 170 | +} |
| 171 | +``` |
| 172 | + |
| 173 | + |
| 174 | +## Development |
| 175 | + |
| 176 | +- Clone this repository |
| 177 | +- Install dependencies using `yarn install` or `npm install` |
| 178 | +- Start development server using `npm run dev` |
| 179 | + |
| 180 | +## License |
| 181 | + |
| 182 | +[MIT License](./LICENSE) |
| 183 | + |
| 184 | +Copyright (c) Alexander Lichter |
0 commit comments