Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mustardamus/nuxt-bulma-slim

Nuxt.js module to automatically make a slim Bulma build of used features with Purgecss
https://github.com/mustardamus/nuxt-bulma-slim

Last synced: 3 days ago
JSON representation

Nuxt.js module to automatically make a slim Bulma build of used features with Purgecss

Awesome Lists containing this project

README

        

# nuxt-bulma-slim

[Nuxt.js](https://nuxtjs.org) module to automatically make a slim
[Bulma](https://bulma.io) build of used features with
[Purgecss](https://www.purgecss.com). Simply drop in this module and
save precious kilobytes. Also gets rid of annoying warnings for you.

![Demo](./example/assets/images/demo.png)

## Setup

Install the dependency:

```shell
npm install nuxt-bulma-slim
```

Add it to the `modules` section of `nuxt.config.js`:

```javascript
{
modules: [
'nuxt-bulma-slim'
]
}
```

Or with custom options:

```javascript
{
modules: [
[
'nuxt-bulma-slim',
{
variablesPath: 'assets/scss/my-variables.scss',
additionalPaths: ['assets/scss/component-styles.scss']
}
]
]
}
```

## Options

### `srcGlobs`

This is an Array of glob paths. These paths can be absolute or relative to the
Nuxt App `srcDir` option. The Array is passed to Purgecss'
[`content`](https://www.purgecss.com/configuration.html#content) option.

#### Default

```javascript
srcGlobs = [
'/layouts/**/*.vue',
'/pages/**/*.vue',
'/components/**/*.vue'
]
```

### `variablesPath`

This is a String of a path to a `.sass`/`.scss` file that contains variables.
Use this file to overwrite
[Bulma's variables](https://bulma.io/documentation/overview/variables).

Note that the path can be absolute or relative to the Nuxt App `srcDir` option
and must be a `.sass` or `.scss` file.

For convenience this module checks if one of these files exists and
automatically set the `variablesPath` option if you haven't set it already:

- `/assets/sass/variables.sass`
- `/assets/scss/variables.scss`

#### Default

```javascript
variablesPath = null // if none of the above files exist, or ...
variablesPath = '/assets/sass/variables.sass' // or ...
variablesPath = '/assets/scss/variables.scss'
```

### `sassTempPath`

This is a String of a path to the temporary `.sass` file that will be consumed
by Nuxt.

#### Default

```javascript
sassTempPath = '/.tmp/nuxt-bulma-slim.sass'
```

### `cssTempPath`

This is a String of a path to the temporary `.css` file that will be consumed
by Nuxt.

#### Default

```javascript
cssTempPath = '/.tmp/nuxt-bulma-slim.css'
```

### `disablePostCSSWarnings`

This is a Boolean to disable PostCSS warnings when compiling Bulma's SASS to
CSS. If `true`, it will set this option in the Nuxt settings:

```javascript
{
build: {
postcss: {
plugins: {
'postcss-custom-properties': {
warnings: false
}
}
}
}
}
```

Check out the [related issue](https://github.com/nuxt/nuxt.js/issues/1670).

#### Default

```javascript
disablePostCSSWarnings = true
```

### `whitelist`

This is an Array of whitelisted selectors and is given to Purgecss'
[`whitelist`](https://www.purgecss.com/configuration.html#whitelist) option.

Note that `html` and `body` are already whitelisted by this module.

#### Default

```javascript
whitelist = []
```

### `whitelistPatterns`

This is an Array of whitelisted selectors based on RegEx and is given to
Purgecss'
[`whitelistPatterns`](https://www.purgecss.com/configuration.html#whitelistpatterns)
option.

#### Default

```javascript
whitelistPatterns = []
```

### `whitelistPatternsChildren`

This is an Array of whitelisted children selectors based on RegEx and is given
to Purgecss'
[`whitelistPatternsChildren`](https://www.purgecss.com/configuration.html#whitelistpatternschildren)
option.

#### Default

```javascript
whitelistPatternsChildren = []
```

### `additionalPaths`

This is an Array of additional `.sass`/`.scss`/`.css` paths that will be bundled
along with the `variablesPath` and the Bulma build. This is useful if you want
to bundle 3rd party libraries like [Buefy](https://buefy.github.io) that depend
on Bulma.

#### Default

```javascript
additionalPaths = []
```

## How does it work?

In development mode (`nuxt dev`) a temporary `.sass` file is written with your
defined `variablesPath`, the complete Bulma features, and any `additionalPaths`.

Temporary files are written to the Nuxt's `rootDir` in the `.tmp` folder.

This `.sass` file is then injected into the
[`css`](https://nuxtjs.org/api/configuration-css) Array of Nuxt. Since Nuxt can
compile SASS, it will also automatically hot-reload your styles when you change
your variables or additional paths content.

In production mode (`nuxt build`/`nuxt start` & `nuxt generate`), this module
will bundle the SASS just like in development. Additionally it will compile the
SASS to CSS.

This CSS is then run thru Purgecss to minify it, then it is written to a
temporary `.css` file and injected into Nuxt's `css` Array.

## Development

#### `npm test`

Run all the tests.

#### `npm run test:watch`

Re-run specific tests on file changes.

#### `npm run lint`

Lint all the code.

#### `npm run dev`

Run the `./example` Nuxt App in dev mode (will use the whole Bulma library).

#### `npm run build`

Build the example Nuxt App (will only bundle Bulma features that are used).

#### `npm start`

Will start the example Nuxt App in production.

#### `npm run upgrade`

Will start [npm-check](https://github.com/dylang/npm-check) to interactively
upgrade the depeendencies.