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. If you'd like a simpler way to append to this list, you can use the appendPlugins option:

app.js

const cssStandards = require('spike-css-standards')
const somePlugin = require('some-postcss-plugin')

module.exports = {
  postcss: cssStandards({ appendPlugins: [somePlugin()] })
  }
}

Sometimes plugin ordering matters. If you need to add your plugin(s) to the beginning of the list, you can do this easily as well with the prependPlugins option. And remember that css standards just returns a configuration object, which behaves as normal javascript -- no magic. So you can do something like this too:

app.js

const cssStandards = require('spike-css-standards')
const somePlugin = require('some-postcss-plugin')

const cssSt = cssStandards()
console.log(cssSt)
cssSt.plugins.push(somePlugin)

module.exports = {
  postcss: cssSt
}

Easy enough, right? Same theory (and append/prepend methods) apply for the html standards preset.

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!

Markdown processing locals

👍

Resolved!

This behavior is no longer the case with the latest version of reshape-standard. If you would like to avoid this workaround, upgrade your dependencies.

You may have noticed that if you do something like this, it does not work as expected:

Text

p(md) {{ someLocal }}

This is because reshape processes markdown before expressions due to the way it's built (it's also able to produce client-side templates as functions, which are bundled up with markdown parsed and expressions evaluated at runtime). In order to process your locals through markdown, you just need to put the markdown parse into the expression, as such:

Text

p {{ md(someLocal) }}

This also means you need to add a markdown parsing function as a local. This is pretty easy, honestly, you can do it as such in app.js with whatever markdown library you want:

app.js

const marked = require('marked')
const htmlStandards = require('reshape-standard')

module.exports = {
  reshape: htmlStandards({ locals: { md: marked } })
}

That should do the trick!

Passing locals to client JS

Sometimes you may want to pass your spike locals to your client side JS. If you're using static data, you can use webpack's built-in DefinePlugin:

JavaScript

//	app.js
const { DefinePlugin } = require('webpack')
const locals = {}

module.exports = {
	 //	...boilerplate config...
  reshape: htmlStandards({ locals }),
  plugins: [
  	new DefinePlugin({
      locals,
    })
  ],
  //	...	etc
}

If you're passing along data that you fetch at compile time (perhaps using a spike plugin like contentful or wordpress), the more reliable method is to embed your locals onto window at compile time and then access them from there, eg:

Text

// layout.sgr

block(name='javascript')
  script window.locals = {{{ JSON.stringify(locals) }}}
  script(src='js/main.js' defer)

JavaScript

//	index.js

console.log(locals)