Skip to content

Commit be9838b

Browse files
TheAlexLichterTheAlexLichter
committed
chore: improve readme + change constants split
1 parent f786e52 commit be9838b

File tree

3 files changed

+53
-71
lines changed

3 files changed

+53
-71
lines changed

‎README.md

Lines changed: 47 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,14 @@
11
# Nuxt PurgeCSS - Drop superfluous CSS!
2-
[![npm (scoped with tag)](https://img.shields.io/npm/v/nuxt-purgecss/latest.svg?style=flat-square)](https://npmjs.com/package/nuxt-purgecss)
3-
[![npm](https://img.shields.io/npm/dt/nuxt-purgecss.svg?style=flat-square)](https://npmjs.com/package/nuxt-purgecss)
4-
[![Build Status](https://travis-ci.com/Developmint/nuxt-purgecss.svg?branch=master)](https://travis-ci.com/Developmint/nuxt-purgecss)
5-
[![codecov](https://codecov.io/gh/Developmint/nuxt-purgecss/branch/master/graph/badge.svg)](https://codecov.io/gh/Developmint/nuxt-purgecss)
6-
[![Dependencies](https://david-dm.org/Developmint/nuxt-purgecss/status.svg?style=flat-square)](https://david-dm.org/Developmint/nuxt-purgecss)
7-
[![js-standard-style](https://img.shields.io/badge/code_style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com)
8-
[![thanks](https://img.shields.io/badge/thanks-%E2%99%A5-ff69b4.svg)](https://thanks.lichter.io/)
92

10-
>
3+
[![npm version][npm-version-src]][npm-version-href]
4+
[![npm downloads][npm-downloads-src]][npm-downloads-href]
5+
[![Github Actions CI][github-actions-ci-src]][github-actions-ci-href]
6+
[![Codecov][codecov-src]][codecov-href]
7+
[![License][license-src]][license-href]
8+
[![thanks](https://img.shields.io/badge/thanks-%E2%99%A5-ff69b4.svg)](https://thanks.lichter.io/)
119

1210
[📖 **Release Notes**](./CHANGELOG.md)
1311

14-
## Release Note for purgecss 2
15-
The extractor is now a function that takes the content as an argument.
16-
```js
17-
class Extractor {
18-
static extract(content) {}
19-
}
20-
```
21-
changes to
22-
```js
23-
function extractor(content) {}
24-
```
25-
26-
2712
## Features
2813

2914
* Remove unneeded CSS with ease
@@ -35,51 +20,39 @@ function extractor(content) {}
3520

3621
## Setup
3722

38-
- Add `nuxt-purgecss` dependency using yarn or npm to your project
39-
- Add `nuxt-purgecss` to `modules` section of `nuxt.config.js`:
23+
1. Add `nuxt-purgecss` dependency to your project
24+
25+
```bash
26+
yarn add --dev nuxt-purgecss # or npm install --save-dev nuxt-purgecss
27+
```
28+
29+
2. Add `nuxt-purgecss` to the `buildModules` section of `nuxt.config.js`
4030

4131
```js
42-
{
43-
modules: [
32+
export default {
33+
buildModules: [
34+
// Simple usage
4435
'nuxt-purgecss',
45-
],
4636

47-
purgeCSS: {
48-
// your settings here
49-
}
37+
// With options
38+
['nuxt-purgecss', { /* module options */ }]
39+
]
5040
}
5141
```
5242

43+
:warning: If you are using Nuxt **< v2.9** you have to install the module as a `dependency` (No `--dev` or `--save-dev` flags) and use `modules` section in `nuxt.config.js` instead of `buildModules`.
44+
45+
5346
## Options
5447

5548
### Defaults
5649

57-
Before diving into the individual attributes, here are the default settings of the module:
50+
Before diving into the individual attributes, please have a look [at the default settings](https://github.com/Developmint/nuxt-purgecss/blob/master/lib/utils.js) of the module.
5851

59-
```js
60-
{
61-
mode: MODES.webpack,
62-
enabled: ({ isDev, isClient }) => (!isDev && isClient), // or `false` when in dev/debug mode
63-
paths: [
64-
'components/**/*.vue',
65-
'layouts/**/*.vue',
66-
'pages/**/*.vue',
67-
'plugins/**/*.js'
68-
],
69-
styleExtensions: ['.css'],
70-
whitelist: ['body', 'html', 'nuxt-progress'],
71-
extractors: [
72-
{
73-
extractor(content) {
74-
return content.match(/[\w-.:/]+(?<!:)/g)
75-
},
76-
extensions: ['html', 'vue', 'js']
77-
}
78-
]
79-
}
80-
```
52+
The defaults will scan all your `.vue` or `.js` components in the common Nuxt folders, as well as checking your `nuxt.config.js` for used classes.
53+
Furthermore, typical classes (like these needed for transitions, the nuxt link ones or those set when using scoped styles) are whitelisted already.
8154

82-
This settings should be a good foundation for a variety of projects.
55+
These settings should be a good foundation for a variety of projects.
8356

8457
### Merging defaults
8558

@@ -94,8 +67,8 @@ the defaults are quite sensible. If you don't want to have the defaults include,
9467

9568
#### mode
9669

97-
* Type: `String` (webpack or postcss)
98-
* Default: `webpack`
70+
* Type: `String` ('webpack' or 'postcss')
71+
* Default: `postcss`
9972

10073
Defines the mode, PurgeCSS should be used in.
10174

@@ -104,15 +77,11 @@ Defines the mode, PurgeCSS should be used in.
10477

10578
#### enabled
10679

107-
* Type: `Boolean` or `Function` (only for webpack mode, will receive the build.extend ctx)
108-
* Default: `({ isDev, isClient }) => (!isDev && isClient)` (only activates in production mode) or `false` in debug/dev mode
80+
* Type: `Boolean`
81+
* Default: `options.dev === false` (Disabled during `nuxt dev`, enabled otherwise)
10982

11083
Enables/Disables the module
11184

112-
* If it evaluates to false, the module won't be activated at all
113-
* If a function is given, it'll be properly evaluated in webpack mode (in postcss mode it'll be handled as true)
114-
115-
11685
#### PurgeCSS options
11786

11887
Please read [the PurgeCSS docs](https://www.purgecss.com/configuration) for information about
@@ -212,14 +181,25 @@ export default {
212181
}
213182
```
214183

215-
## Development
216-
217-
- Clone this repository
218-
- Install dependencies using `yarn install` or `npm install`
219-
- Start development server using `npm run dev`
220-
221184
## License
222185

223186
[MIT License](./LICENSE)
224187

225188
Copyright (c) Alexander Lichter
189+
190+
<!-- Badges -->
191+
[npm-version-src]: https://img.shields.io/npm/v/nuxt-purgecss/latest.svg
192+
[npm-version-href]: https://npmjs.com/package/nuxt-purgecss
193+
194+
[npm-downloads-src]: https://img.shields.io/npm/dt/nuxt-purgecss.svg
195+
[npm-downloads-href]: https://npmjs.com/package/nuxt-purgecss
196+
197+
[github-actions-ci-src]: https://github.com/Developmint/nuxt-purgecss/workflows/ci/badge.svg
198+
[github-actions-ci-href]: https://github.com/Developmint/nuxt-purgecss/actions?query=workflow%3Aci
199+
200+
[codecov-src]: https://img.shields.io/codecov/c/github/Developmint/nuxt-purgecss.svg
201+
[codecov-href]: https://codecov.io/gh/Developmint/nuxt-purgecss
202+
203+
[license-src]: https://img.shields.io/npm/l/nuxt-purgecss.svg
204+
[license-href]: https://npmjs.com/package/nuxt-purgecss
205+

‎lib/module.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ const glob = require('glob-all')
33

44
const logger = require('./logger')
55

6-
const { MODES, DEFAULTS } = require('./constants')
6+
const { MODES, getDefaults } = require('./utils')
77

88
function nuxtPurgeCss (moduleOptions) {
99
const { srcDir, purgeCSS = {} } = Object.assign({}, this.options)
@@ -16,6 +16,8 @@ function nuxtPurgeCss (moduleOptions) {
1616
* Defaults
1717
*/
1818

19+
const DEFAULTS = getDefaults(this.options)
20+
1921
const mergedConfig = Object.entries(purgeCSS).reduce((options, [key, value]) => {
2022
const defaultValue = DEFAULTS[key]
2123

‎lib/constants.js renamed to ‎lib/utils.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ const MODES = {
55

66
module.exports = {
77
MODES,
8-
DEFAULTS: {
8+
getDefaults: options => ({
99
mode: MODES.postcss,
10-
enabled: ({ isDev, isClient }) => (!isDev && isClient),
10+
enabled: options.dev === false,
1111
paths: [
1212
'components/**/*.vue',
1313
'layouts/**/*.vue',
@@ -33,5 +33,5 @@ module.exports = {
3333
extensions: ['html', 'vue', 'js']
3434
}
3535
]
36-
}
36+
})
3737
}

0 commit comments

Comments
 (0)