FAQs

Some questions about how to use spike don't belong particularly in any other category and as such will be collected here.

Adding a postcss plugin

Spike's default template for creating new projects starts you off with a single plugin bundle, which forms the foundation of our CSS standards.

The postcss option in app.js expects an object with a plugins key holding an array of postcss plugins. Alternatively, we can return the object with a function:

app.js

const cssStandards = require('spike-css-standards')

module.exports = {
  postcss: (ctx) => {
    return cssStandards({ webpack: ctx })
  }
}

In order to take advantage of additional postcss plugins, we require them in app.js and add them to the array of the plugins key:

app.js

const cssStandards = require('spike-css-standards')
const placehold = require('postcss-placehold')

module.exports = {
  postcss: (ctx) => {
    const css = cssStandards({ webpack: ctx })
    css.plugins.push(placehold())
    return css
  }
}

To add even more postcss plugins, we comma-separate them:

app.js

const cssStandards = require('spike-css-standards')
const placehold = require('postcss-placehold')
const brandColors = require('postcss-brand-colors')

module.exports = {
  postcss: (ctx) => {
    const css = cssStandards({ webpack: ctx })
    css.plugins.push(placehold(), brandColors())
    return css
  }
}

Turning off sugar syntax

If you just like working with normal html and css, semicolons and brackets and closing tags and all, that is totally fine and super easy to switch to. All you need to do is pass parser: false as an option to the html and css standards plugins in the default setting, and of course switch over the format of your files. You will not lose any of the other functionality -- loops, imports, etc. will still work exactly the same way, it will only remove the whitespace-significant syntax.

We also built a template set up by default for this which can be found here. This is the easiest way to do it, as everything is already configured for you and there's no need to convert files or anything. Check out the Project Templates docs for more info on how to use this template!

Outputting multiple JavaScript files

As mentioned in the documentation for the app.js file, webpack provides us with an entry key, which we can use to output multiple JavaScript files.

Consider the following example:

app.js

module.exports = {
  entry: {
    'js/01': ['./assets/js/01.js'],
    'js/02': ['./assets/js/02.js'],
    'js/03': ['./assets/js/03.js']
  }
}

After kicking off a new spike compile or spike watch, we will find 4 JavaScript files in our js directory:

• main.js
• 01.js
• 02.js
• 03.js

Note: spike uses { 'js/main': ['./assets/js/index.js'] } as the default object for the entry key.