From 340ee570e484ac9d6092492fdbde758de581a6cf Mon Sep 17 00:00:00 2001
From: Jeff Escalante <hello@jenius.me>
Date: Tue, 14 Jun 2016 20:24:54 -0400
Subject: [PATCH 1/8] starting to test posthtml with jade

---
 lib/config.js | 11 +++++++++--
 package.json  |  2 ++
 test/jade.js  |  5 ++++-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/lib/config.js b/lib/config.js
index ea9501f..aac671f 100644
--- a/lib/config.js
+++ b/lib/config.js
@@ -56,6 +56,9 @@ module.exports = class Config {
         stringifier: Joi.object(),
         syntax: Joi.object()
       }),
+      posthtml: Joi.object().default().keys({
+        plugins: Joi.array().single().default([])
+      }),
       css: Joi.object().default({}),
       babel: Joi.object(),
       cleanUrls: Joi.bool().default(true),
@@ -224,7 +227,7 @@ module.exports = class Config {
         _core: 'js'
       }, {
         exclude: reIgnores,
-        loader: 'jade-static-loader',
+        loader: 'posthtml-loader',
         _core: 'jade'
       }, {
         exclude: reIgnores,
@@ -235,11 +238,15 @@ module.exports = class Config {
 
     this.module.loaders = spikeLoaders.concat(opts.module.loaders)
 
-    this.postcss = function (wp) {
+    this.postcss = (wp) => {
       opts.postcss.plugins.unshift(postcssImport({ addDependencyTo: wp }))
       return opts.postcss
     }
 
+    this.posthtml = () => {
+      return { defaults: opts.posthtml.plugins }
+    }
+
     this.jade = Object.assign({
       locals: opts.locals,
       pretty: true
diff --git a/package.json b/package.json
index 43db711..6b75c3d 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "postcss": "^5.0.21",
     "postcss-import": "^8.1.2",
     "postcss-loader": "^0.9.1",
+    "posthtml-loader": "^0.9.0",
     "require-from-string": "^1.2.0",
     "rimraf": "^2.5.2",
     "source-loader": "^0.2.0",
@@ -44,6 +45,7 @@
     "husky": "^0.11.4",
     "md5-file": "^3.1.0",
     "nyc": "^6.4.4",
+    "posthtml-jade": "^0.8.2",
     "snazzy": "^4.0.0",
     "standard": "^7.1.0",
     "sugarss": "^0.1.2"
diff --git a/test/jade.js b/test/jade.js
index 14a2b36..1effff3 100644
--- a/test/jade.js
+++ b/test/jade.js
@@ -1,8 +1,11 @@
 const test = require('ava')
+const jadePlugin = require('posthtml-jade')
 const {compileFixture} = require('./_helpers')
 
 test('tracks jade front-end dependencies', (t) => {
-  return compileFixture(t, 'jade_dependencies').then(({res}) => {
+  return compileFixture(t, 'jade_dependencies', {
+    posthtml: { plugins: [jadePlugin({ pretty: true })] }
+  }).then(({res}) => {
     const fd = res.stats.compilation.fileDependencies.map((d) => {
       return d.replace(`${res.stats.compilation.options.context}/`, '')
     })

From 9a20ab062ba28982f43c972b7cf01859258dc3e6 Mon Sep 17 00:00:00 2001
From: Jeff Escalante <hello@jenius.me>
Date: Wed, 15 Jun 2016 12:11:30 -0400
Subject: [PATCH 2/8] working

---
 lib/config.js              | 2 +-
 lib/plugins/jade_plugin.js | 1 +
 package.json               | 1 +
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/lib/config.js b/lib/config.js
index aac671f..ed5513f 100644
--- a/lib/config.js
+++ b/lib/config.js
@@ -227,7 +227,7 @@ module.exports = class Config {
         _core: 'js'
       }, {
         exclude: reIgnores,
-        loader: 'posthtml-loader',
+        loader: 'source-loader!posthtml-loader',
         _core: 'jade'
       }, {
         exclude: reIgnores,
diff --git a/lib/plugins/jade_plugin.js b/lib/plugins/jade_plugin.js
index 81e8105..ed1a89c 100644
--- a/lib/plugins/jade_plugin.js
+++ b/lib/plugins/jade_plugin.js
@@ -27,6 +27,7 @@ module.exports = class JadeWebpackPlugin {
     // inject jade files into webpack's pipeline
     compiler.plugin('make', (compilation, done) => {
       jadeFiles = compiler.options.spike.files.jade
+      console.log(jadeFiles)
       this.util.addFilesAsWebpackEntries(compilation, jadeFiles)
         .done(() => done(), done)
     })
diff --git a/package.json b/package.json
index 6b75c3d..d247940 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
     "husky": "^0.11.4",
     "md5-file": "^3.1.0",
     "nyc": "^6.4.4",
+    "posthtml-custom-elements": "^1.0.3",
     "posthtml-jade": "^0.8.2",
     "snazzy": "^4.0.0",
     "standard": "^7.1.0",

From 8c957422f2ac0142d9183b15b390642e042550c1 Mon Sep 17 00:00:00 2001
From: Jeff Escalante <hello@jenius.me>
Date: Wed, 15 Jun 2016 13:38:14 -0400
Subject: [PATCH 3/8] jade loader removed, using posthtml-jade instead

---
 lib/config.js              | 13 +++++++++----
 lib/plugins/jade_plugin.js |  1 -
 package.json               |  2 --
 test/new.js                |  3 ++-
 4 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/lib/config.js b/lib/config.js
index ed5513f..83054c9 100644
--- a/lib/config.js
+++ b/lib/config.js
@@ -1,5 +1,6 @@
 const path = require('path')
 const qs = require('querystring')
+const url = require('url')
 const Joi = require('joi')
 const JadePlugin = require('./plugins/jade_plugin')
 const CSSPlugin = require('./plugins/css_plugin')
@@ -13,6 +14,8 @@ const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
 const {accessSync} = require('fs')
 const hygienist = require('hygienist-middleware')
 const SpikeUtils = require('spike-util')
+// temporary patch while posthtml is fully integrated
+const jadePlugin = require('posthtml-jade')
 
 /**
  * @module Config
@@ -243,15 +246,17 @@ module.exports = class Config {
       return opts.postcss
     }
 
-    this.posthtml = () => {
-      return { defaults: opts.posthtml.plugins }
-    }
-
     this.jade = Object.assign({
       locals: opts.locals,
       pretty: true
     }, opts.jade)
 
+    this.posthtml = (ctx) => {
+      const p = url.parse(ctx.request.split('!').slice(-1)[0]).pathname
+      const jadeOpts = Object.assign(opts.locals, opts.jade, { filename: p })
+      return { defaults: [jadePlugin(jadeOpts)] }
+    }
+
     const util = new SpikeUtils(this)
 
     this.plugins = [new FsPlugin(util)]
diff --git a/lib/plugins/jade_plugin.js b/lib/plugins/jade_plugin.js
index ed1a89c..81e8105 100644
--- a/lib/plugins/jade_plugin.js
+++ b/lib/plugins/jade_plugin.js
@@ -27,7 +27,6 @@ module.exports = class JadeWebpackPlugin {
     // inject jade files into webpack's pipeline
     compiler.plugin('make', (compilation, done) => {
       jadeFiles = compiler.options.spike.files.jade
-      console.log(jadeFiles)
       this.util.addFilesAsWebpackEntries(compilation, jadeFiles)
         .done(() => done(), done)
     })
diff --git a/package.json b/package.json
index d247940..158b641 100644
--- a/package.json
+++ b/package.json
@@ -18,8 +18,6 @@
     "filewrap": "^0.1.0",
     "glob": "^7.0.3",
     "hygienist-middleware": "^0.1.1",
-    "jade": "^1.11.0",
-    "jade-static-loader": "0.2.0",
     "joi": "^8.1.0",
     "lodash.merge": "^4.3.5",
     "lodash.union": "^4.2.0",
diff --git a/test/new.js b/test/new.js
index a2db028..70c739f 100644
--- a/test/new.js
+++ b/test/new.js
@@ -27,7 +27,8 @@ test.cb('creates a new spike project', (t) => {
     locals: {
       name: 'test',
       description: 'test',
-      github_username: 'test'
+      github_username: 'test',
+      production: false
     }
   })
 })

From b233c373625329d3daba6df7ce97b02970de7bda Mon Sep 17 00:00:00 2001
From: Jeff Escalante <hello@jenius.me>
Date: Wed, 15 Jun 2016 16:24:05 -0400
Subject: [PATCH 4/8] posthtml default

---
 lib/config.js                                 | 34 +++++--------------
 lib/plugins/fs_plugin.js                      | 13 +++----
 .../{jade_plugin.js => html_plugin.js}        | 28 ++++++++-------
 package.json                                  |  1 +
 readme.md                                     | 12 +++----
 test/app_config.js                            | 15 +++-----
 test/clean.js                                 |  2 +-
 test/dump_dirs.js                             |  2 +-
 test/environments.js                          |  8 ++---
 test/fixtures/app_config/app.js               |  2 +-
 test/fixtures/app_config/index.jade           |  1 -
 test/fixtures/clean/app.js                    |  7 +---
 test/fixtures/clean/index.html                |  1 +
 test/fixtures/clean/index.jade                |  1 -
 test/fixtures/dump_dirs/views/index.html      |  1 +
 test/fixtures/dump_dirs/views/index.jade      |  1 -
 test/fixtures/environments/app.doge.js        |  2 +-
 test/fixtures/environments/app.js             |  2 +-
 test/fixtures/html/index.html                 |  7 ++++
 .../image.jpg => html/style.css}              |  0
 test/fixtures/ignores/about.jade              |  4 ---
 test/fixtures/ignores/ignore.html             |  1 +
 test/fixtures/ignores/index.html              |  1 +
 test/fixtures/ignores/index.jade              |  4 ---
 test/fixtures/ignores/layout.jade             |  6 ----
 test/fixtures/jade/image.jpg                  |  0
 .../{jade_dependencies => jade}/index.jade    |  0
 .../{jade_dependencies => jade}/script.js     |  0
 .../{jade_dependencies => jade}/style.css     |  0
 test/fixtures/plugins/app.js                  |  2 +-
 test/fixtures/plugins/index.html              |  1 +
 test/fixtures/plugins/index.jade              |  1 -
 test/fixtures/plugins/plugin.js               |  2 +-
 test/fixtures/static_plugins/app.js           |  1 -
 test/fixtures/static_plugins/foo.html         |  1 +
 test/fixtures/static_plugins/foo.jade         |  1 -
 test/fixtures/vendor/index.html               |  1 +
 test/fixtures/vendor/index.jade               |  1 -
 test/fixtures/watch/index.html                |  1 +
 test/fixtures/watch/index.jade                |  1 -
 test/html.js                                  | 23 +++++++++++++
 test/ignores.js                               |  6 ++--
 test/jade.js                                  | 17 +++++++---
 test/locals.js                                | 11 ------
 test/plugins.js                               |  9 ++---
 test/static.js                                |  2 +-
 test/watch.js                                 |  8 ++---
 47 files changed, 113 insertions(+), 132 deletions(-)
 rename lib/plugins/{jade_plugin.js => html_plugin.js} (76%)
 delete mode 100644 test/fixtures/app_config/index.jade
 create mode 100644 test/fixtures/clean/index.html
 delete mode 100644 test/fixtures/clean/index.jade
 create mode 100644 test/fixtures/dump_dirs/views/index.html
 delete mode 100644 test/fixtures/dump_dirs/views/index.jade
 create mode 100644 test/fixtures/html/index.html
 rename test/fixtures/{jade_dependencies/image.jpg => html/style.css} (100%)
 delete mode 100644 test/fixtures/ignores/about.jade
 create mode 100644 test/fixtures/ignores/ignore.html
 create mode 100644 test/fixtures/ignores/index.html
 delete mode 100644 test/fixtures/ignores/index.jade
 delete mode 100644 test/fixtures/ignores/layout.jade
 create mode 100644 test/fixtures/jade/image.jpg
 rename test/fixtures/{jade_dependencies => jade}/index.jade (100%)
 rename test/fixtures/{jade_dependencies => jade}/script.js (100%)
 rename test/fixtures/{jade_dependencies => jade}/style.css (100%)
 create mode 100644 test/fixtures/plugins/index.html
 delete mode 100644 test/fixtures/plugins/index.jade
 create mode 100644 test/fixtures/static_plugins/foo.html
 delete mode 100644 test/fixtures/static_plugins/foo.jade
 create mode 100644 test/fixtures/vendor/index.html
 delete mode 100644 test/fixtures/vendor/index.jade
 create mode 100644 test/fixtures/watch/index.html
 delete mode 100644 test/fixtures/watch/index.jade
 create mode 100644 test/html.js
 delete mode 100644 test/locals.js

diff --git a/lib/config.js b/lib/config.js
index 83054c9..dec0f49 100644
--- a/lib/config.js
+++ b/lib/config.js
@@ -1,8 +1,7 @@
 const path = require('path')
 const qs = require('querystring')
-const url = require('url')
 const Joi = require('joi')
-const JadePlugin = require('./plugins/jade_plugin')
+const HtmlPlugin = require('./plugins/html_plugin')
 const CSSPlugin = require('./plugins/css_plugin')
 const StaticPlugin = require('./plugins/static_plugin')
 const FsPlugin = require('./plugins/fs_plugin')
@@ -14,8 +13,6 @@ const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
 const {accessSync} = require('fs')
 const hygienist = require('hygienist-middleware')
 const SpikeUtils = require('spike-util')
-// temporary patch while posthtml is fully integrated
-const jadePlugin = require('posthtml-jade')
 
 /**
  * @module Config
@@ -48,10 +45,9 @@ module.exports = class Config {
       root: Joi.string().required(),
       env: Joi.string(),
       matchers: Joi.object().default().keys({
-        jade: Joi.string().default('**/*.jade'),
+        html: Joi.string().default('**/*.html'),
         css: Joi.string().default('**/*.sss'),
-        js: Joi.string().default('**/*.js'),
-        static: Joi.string().default('!**/*.+(js|sss|jade)')
+        js: Joi.string().default('**/*.js')
       }),
       postcss: Joi.object().default().keys({
         plugins: Joi.array().single().default([]),
@@ -59,13 +55,10 @@ module.exports = class Config {
         stringifier: Joi.object(),
         syntax: Joi.object()
       }),
-      posthtml: Joi.object().default().keys({
-        plugins: Joi.array().single().default([])
-      }),
+      posthtml: Joi.alternatives().try(Joi.object(), Joi.func()).default({ defaults: [] }),
       css: Joi.object().default({}),
       babel: Joi.object(),
       cleanUrls: Joi.bool().default(true),
-      jade: Joi.object().default({}),
       dumpDirs: Joi.array().default(['views', 'assets']),
       locals: Joi.object().default({}),
       ignore: Joi.array().default([]),
@@ -181,11 +174,11 @@ module.exports = class Config {
    */
   transformSpikeOptionsToWebpack (opts) {
     // `disallow` options would break spike if modified.
-    const disallow = ['output', 'resolveLoader', 'spike', 'plugins', 'context', 'jade', 'postcss']
+    const disallow = ['output', 'resolveLoader', 'spike', 'plugins', 'context', 'postcss']
 
     // `noCopy` options are spike-specific and shouldn't be directly added to
     // webpack's config
-    const noCopy = ['root', 'matchers', 'env', 'locals', 'server', 'cleanUrls', 'dumpDirs', 'ignore', 'vendor', 'outputDir', 'css', 'postcssQuery']
+    const noCopy = ['root', 'matchers', 'env', 'server', 'cleanUrls', 'dumpDirs', 'ignore', 'vendor', 'outputDir', 'css', 'postcssQuery']
 
     // All options other than `disallow` or `noCopy` are added directly to
     // webpack's config object
@@ -231,7 +224,7 @@ module.exports = class Config {
       }, {
         exclude: reIgnores,
         loader: 'source-loader!posthtml-loader',
-        _core: 'jade'
+        _core: 'html'
       }, {
         exclude: reIgnores,
         loader: 'source-loader',
@@ -246,23 +239,12 @@ module.exports = class Config {
       return opts.postcss
     }
 
-    this.jade = Object.assign({
-      locals: opts.locals,
-      pretty: true
-    }, opts.jade)
-
-    this.posthtml = (ctx) => {
-      const p = url.parse(ctx.request.split('!').slice(-1)[0]).pathname
-      const jadeOpts = Object.assign(opts.locals, opts.jade, { filename: p })
-      return { defaults: [jadePlugin(jadeOpts)] }
-    }
-
     const util = new SpikeUtils(this)
 
     this.plugins = [new FsPlugin(util)]
       .concat(opts.plugins)
       .concat([
-        new JadePlugin(util),
+        new HtmlPlugin(util),
         new CSSPlugin(util),
         new StaticPlugin(util),
         new BrowserSyncPlugin(opts.server, { callback: (_, bs) => {
diff --git a/lib/plugins/fs_plugin.js b/lib/plugins/fs_plugin.js
index ee838b0..bea6a9d 100644
--- a/lib/plugins/fs_plugin.js
+++ b/lib/plugins/fs_plugin.js
@@ -6,6 +6,7 @@ const path = require('path')
 const glob = require('glob')
 const micromatch = require('micromatch')
 const File = require('filewrap')
+const difference = require('lodash.difference')
 
 /**
  * @class FsWebpackPlugin
@@ -84,20 +85,16 @@ module.exports = class FsWebpackPlugin {
     // include any ignored, vendored, or custom loader processed files, as we
     // have separared these earlier.
 
-    const allWithoutCustomOrVendored = files.all.filter((f) => {
-      return files.custom.concat(files.vendored).indexOf(f) < 0
-    })
+    const allWithoutCustomOrVendored = difference(files.all, files.custom, files.vendored)
 
     for (const key in util.conf.spike.matchers) {
       files[key] = micromatch(allWithoutCustomOrVendored, util.conf.spike.matchers[key], { dot: true })
     }
 
-    // Finally, we add vendored files to files.static so that they are written
-    // by the static plugin, without modification.
+    // Any files that have not been fit into a category already are added to
+    // the static category, including vendored files
 
-    if (files.vendored.length) {
-      files.static = files.static.concat(files.vendored)
-    }
+    files.static = difference(files.all, files.html, files.css, files.js, files.custom)
 
     return files
   }
diff --git a/lib/plugins/jade_plugin.js b/lib/plugins/html_plugin.js
similarity index 76%
rename from lib/plugins/jade_plugin.js
rename to lib/plugins/html_plugin.js
index 81e8105..0a1ebd1 100644
--- a/lib/plugins/jade_plugin.js
+++ b/lib/plugins/html_plugin.js
@@ -1,15 +1,15 @@
 /**
- * @module JadePlugin
+ * @module HtmlPlugin
  */
 
 const cheerio = require('cheerio')
 
 /**
- * @class JadePlugin
- * @classdesc A webpack plugin that takes in .jade files, adds them to the
+ * @class HtmlPlugin
+ * @classdesc A webpack plugin that takes in .html files, adds them to the
  * pipeline, and writes them.
  */
-module.exports = class JadeWebpackPlugin {
+module.exports = class HtmlWebpackPlugin {
 
   /**
    * @constructor
@@ -22,19 +22,19 @@ module.exports = class JadeWebpackPlugin {
   }
 
   apply (compiler) {
-    let jadeFiles
+    let htmlFiles
 
-    // inject jade files into webpack's pipeline
+    // inject html files into webpack's pipeline
     compiler.plugin('make', (compilation, done) => {
-      jadeFiles = compiler.options.spike.files.jade
-      this.util.addFilesAsWebpackEntries(compilation, jadeFiles)
+      htmlFiles = compiler.options.spike.files.html
+      this.util.addFilesAsWebpackEntries(compilation, htmlFiles)
         .done(() => done(), done)
     })
 
     // grab the sources and dependencies and export them into the right files
     // have webpack export them into their own files
     compiler.plugin('emit', (compilation, done) => {
-      jadeFiles.forEach((f) => {
+      htmlFiles.forEach((f) => {
         const dep = compilation.modules.find((el) => {
           if (el.userRequest === f) { return el }
         })
@@ -68,7 +68,10 @@ module.exports = class JadeWebpackPlugin {
           dep.fileDependencies.push(p.relative)
         })
 
-        const outputPath = this.util.getOutputPath(f).relative.replace(/\.jade$/, '.html')
+        let outputPath = this.util.getOutputPath(f).relative
+        // replace any other extension with `.html`
+        outputPath = outputPath.replace(/(.*)?(\..+?$)/, '$1.html')
+
         compilation.assets[outputPath] = {
           source: () => { return src },
           size: () => { return src.length }
@@ -78,11 +81,10 @@ module.exports = class JadeWebpackPlugin {
       done()
     })
 
-    // remove jade assets from webpack pipeline, unless jadeTemplates option
-    // is present
+    // remove html assets from webpack pipeline
     compiler.plugin('compilation', (compilation) => {
       compilation.plugin('optimize-chunk-assets', (chunks, done) => {
-        this.util.removeAssets(compilation, jadeFiles, chunks)
+        this.util.removeAssets(compilation, htmlFiles, chunks)
         done()
       })
     })
diff --git a/package.json b/package.json
index 158b641..3c7511c 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "glob": "^7.0.3",
     "hygienist-middleware": "^0.1.1",
     "joi": "^8.1.0",
+    "lodash.difference": "^4.3.0",
     "lodash.merge": "^4.3.5",
     "lodash.union": "^4.2.0",
     "micromatch": "^2.3.7",
diff --git a/readme.md b/readme.md
index 905cbab..362bd02 100644
--- a/readme.md
+++ b/readme.md
@@ -16,9 +16,9 @@ Spike certainly is not the only [static site generator](https://www.staticgen.co
 
 ### The Stack
 
-Spike is fairly strict in enforcing a default stack. However, the stack allows for quite a large amount of flexibility as both the css and js parsers are able to accept plugins. Also spike's core compiler is [Webpack](https://github.com/webpack/webpack), so you can customize your project with [loaders](https://webpack.github.io/docs/loaders.html) and [plugins](https://webpack.github.io/docs/plugins.html). The inflexibility of the stack means faster compiles and better stability. We use...
+Spike is fairly strict in enforcing a default stack. However, the stack allows for quite a large amount of flexibility as all of the parsers are simply foundations that do nothing by default and accept plugins to transform code. Also spike's core compiler is [Webpack](https://github.com/webpack/webpack), so you can customize your project with [loaders](https://webpack.github.io/docs/loaders.html) and [plugins](https://webpack.github.io/docs/plugins.html). The inflexibility of the stack means faster compiles and better stability. We use...
 
-- [jade](http://jade-lang.com/) for markup
+- [posthtml](https://github.com/posthtml/posthtml) for markup
 - [babel](https://babeljs.io/) for JS and JS transforms
 - [postcss](https://github.com/postcss/postcss) for CSS transforms
 - [webpack](http://webpack.github.io) as the core compiler
@@ -58,13 +58,11 @@ The above shows a minimal instantiation, but the constructor accepts a wide vari
 Option                 | Description                                                                                                                                                                                                                                                                                                                         | Default
 :--------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------
 **root**               | **[required]** An absolute path to the root of your project.                                                                                                                                                                                                                                                                        |
-**matchers**           | An object with `jade`, `css`, and `js` keys. Each key is a [micromatch](https://github.com/jonschlinkert/micromatch) string, and represents which files should be pulled into the pipeline to be processed. Be very careful if you are trying to change this.                                                                       | `**/*.jade`, `**/*.css`, and `**/*.js`
+**matchers**           | An object with `html`, `css`, and `js` keys. Each key is a [micromatch](https://github.com/jonschlinkert/micromatch) string, and represents which files should be pulled into the pipeline to be processed. Be very careful if you are trying to change this.                                                                       | `**/*.html`, `**/*.css`, and `**/*.js`
 **postcss**            | An object that can contain a `plugins` key, which is an array of [plugins to be passed to PostCSS](http://postcss.parts/) for CSS processing, and a `parser`, `stringifier`, and/or `syntax` key, each of which are objects and take [any of the postcss-loader options](https://github.com/postcss/postcss-loader#custom-syntaxes). Any options other than the ones specified above will be passed as querystring options. |
 **css**              | An object which is serialized as a querystring and passed directly to the [css loader](https://github.com/webpack/css-loader).                                                                                                                                                                                                                                        |
 **babel**              | A [configuration object for Babel](http://babeljs.io/docs/usage/options/) for JS processing.                                                                                                                                                                                                                                        |
-**jade**               | A [configuration object for jade](http://jade-lang.com/api/).                                                                                                                                                                                                                                                                       |
 **dumpDirs**           | An array of directories which, if direct children of the project root, will dump their contents to the root on compile.                                                                                                                                                                                                             | `['views', 'assets']`.
-**locals**             | An object containing locals to be passed to jade views. This can be used for values, functions, any sort of view helper you need.                                                                                                                                                                                                   |
 **env**                | The environment you would like to use when compiling. See [environments](#environments) for more information about this option.                                                                                                                                                                                                     |
 **ignore**             | An array of [micromatch](https://github.com/jonschlinkert/micromatch) strings, each one defining a file pattern to be ignored from compilation.                                                                                                                                                                                     |
 **outputDir**          | The name or path of the folder your project will be compiled into, on top of the project's root.                                                                                                                                                                                                                                    | `'public'`
@@ -297,7 +295,7 @@ In this example, we have a hypothetical example of a "foo loader" which does som
 
 There are a few things to note about this process. First, Spike does not require you to `require` a file from somewhere in order for it to be processed and written, and this holds for any custom loaders. Also note that if the loader "emits" the file, this will be suppressed, instead spike will handle the file writing and output.
 
-Note that Spike's core loaders will pull in any files with `.jade`, `.sss`, and `.js` extensions for processing. If you add a loader that uses one of these extensions, your custom loader will overwrite spike's core loaders for that file. So if you want to use a loader on a `.js` file, then have it processed with babel as spike normally does, you need to add the babel-loader to the loader chain yourself like this:
+Note that Spike's core loaders will pull in any files with `.html`, `.css`, and `.js` extensions for processing. If you add a loader that uses one of these extensions, your custom loader will overwrite spike's core loaders for that file. So if you want to use a loader on a `.js` file, then have it processed with babel as spike normally does, you need to add the babel-loader to the loader chain yourself like this:
 
 ```js
 // app.js
@@ -327,7 +325,7 @@ module.exports = {
 }
 ```
 
-Note that if you use the `skipSpikeProcessing` flag on a `.js`, `.sss`, and/or `.jade` file, it will entirely skip spike's internal loaders, and you will need to process and write these files entirely on your own. This is not recommended.
+Note that if you use the `skipSpikeProcessing` flag on a `.js`, `.css`, and/or `.html` file, it will entirely skip spike's internal loaders, and you will need to process and write these files entirely on your own. This is not recommended.
 
 Finally, note that if you are using spike as a global module and using a locally-installed loader, you might have issues resolving the loader correctly. If you do, you can use webpack's [resolveLoader config option](https://webpack.github.io/docs/configuration.html#resolveloader) to ensure that it is able to resolve your loader from wherever you are trying to load it.
 
diff --git a/test/app_config.js b/test/app_config.js
index 389450d..9d4ac19 100644
--- a/test/app_config.js
+++ b/test/app_config.js
@@ -1,20 +1,15 @@
 const test = require('ava')
-const path = require('path')
-const {fs, compileFixture} = require('./_helpers')
+const {compileFixture} = require('./_helpers')
 
 test('uses app.js configuration', (t) => {
-  return compileFixture(t, 'app_config').then(({publicPath}) => {
-    return fs.readFile(path.join(publicPath, 'index.html'), 'utf8')
-  }).then((contents) => {
-    return t.is(contents, 'override')
+  return compileFixture(t, 'app_config').then(({res}) => {
+    t.truthy(res.stats.compilation.options.testing.foo === 'override')
   })
 })
 
 test('API config overrides app.js config', (t) => {
-  return compileFixture(t, 'app_config', { locals: { foo: 'double override' } }).then(({publicPath}) => {
-    return fs.readFile(path.join(publicPath, 'index.html'), 'utf8')
-  }).then((contents) => {
-    return t.is(contents, 'double override')
+  return compileFixture(t, 'app_config', { testing: { foo: 'double override' } }).then(({res}) => {
+    t.truthy(res.stats.compilation.options.testing.foo === 'double override')
   })
 })
 
diff --git a/test/clean.js b/test/clean.js
index 2b62d7d..2edadf6 100644
--- a/test/clean.js
+++ b/test/clean.js
@@ -8,7 +8,7 @@ test.before((t) => {
     .then(({publicPath}) => { return path.join(publicPath, 'index.html') })
     .tap((index) => { return fs.stat(index).tap(t.truthy.bind(t)) })
     .then((index) => { return fs.readFile(index, 'utf8') })
-    .then((contents) => { return t.is(contents, '\n<p>override</p>') })
+    .then((contents) => { return t.is(contents.trim(), '<p>hello</p>') })
 })
 
 test.cb('emits clean message correctly', (t) => {
diff --git a/test/dump_dirs.js b/test/dump_dirs.js
index 9fa7377..7a0f212 100644
--- a/test/dump_dirs.js
+++ b/test/dump_dirs.js
@@ -7,5 +7,5 @@ test('discards directories, but keeps the directory\'s files', (t) => {
     .then(({publicPath}) => { return path.join(publicPath, 'index.html') })
     .tap((index) => { return fs.stat(index).tap(t.truthy.bind(t)) })
     .then((index) => { return fs.readFile(index, 'utf8') })
-    .then((contents) => { return t.is(contents, '\n<p>hello world!</p>') })
+    .then((contents) => { return t.is(contents.trim(), '<p>hello world!</p>') })
 })
diff --git a/test/environments.js b/test/environments.js
index b2f8b30..3a7b58b 100644
--- a/test/environments.js
+++ b/test/environments.js
@@ -1,11 +1,9 @@
-const fs = require('fs')
-const path = require('path')
 const test = require('ava')
 const {compileFixture} = require('./_helpers')
 
 test('environment config parsed correctly', (t) => {
-  return compileFixture(t, 'environments', { env: 'doge' }).then(({publicPath}) => {
-    const src = fs.readFileSync(path.join(publicPath, 'index.html'), 'utf8')
-    t.is(src.trim(), '<p>true+true</p>')
+  return compileFixture(t, 'environments', { env: 'doge' }).then(({res}) => {
+    t.truthy(res.stats.compilation.options.env1)
+    t.truthy(res.stats.compilation.options.env2)
   })
 })
diff --git a/test/fixtures/app_config/app.js b/test/fixtures/app_config/app.js
index 0fcd44a..71d4551 100644
--- a/test/fixtures/app_config/app.js
+++ b/test/fixtures/app_config/app.js
@@ -1,5 +1,5 @@
 module.exports = {
-  locals: {
+  testing: {
     foo: 'override'
   }
 }
diff --git a/test/fixtures/app_config/index.jade b/test/fixtures/app_config/index.jade
deleted file mode 100644
index 71bf7da..0000000
--- a/test/fixtures/app_config/index.jade
+++ /dev/null
@@ -1 +0,0 @@
-= foo
\ No newline at end of file
diff --git a/test/fixtures/clean/app.js b/test/fixtures/clean/app.js
index 37a51bb..f2ae02f 100644
--- a/test/fixtures/clean/app.js
+++ b/test/fixtures/clean/app.js
@@ -1,8 +1,3 @@
 module.exports = {
-  locals: {
-    foo: 'override'
-  },
-  server: {
-    open: false
-  }
+  server: { open: false }
 }
diff --git a/test/fixtures/clean/index.html b/test/fixtures/clean/index.html
new file mode 100644
index 0000000..302a01f
--- /dev/null
+++ b/test/fixtures/clean/index.html
@@ -0,0 +1 @@
+<p>hello</p>
diff --git a/test/fixtures/clean/index.jade b/test/fixtures/clean/index.jade
deleted file mode 100644
index d54a583..0000000
--- a/test/fixtures/clean/index.jade
+++ /dev/null
@@ -1 +0,0 @@
-p= foo
diff --git a/test/fixtures/dump_dirs/views/index.html b/test/fixtures/dump_dirs/views/index.html
new file mode 100644
index 0000000..20a6e8f
--- /dev/null
+++ b/test/fixtures/dump_dirs/views/index.html
@@ -0,0 +1 @@
+<p>hello world!</p>
diff --git a/test/fixtures/dump_dirs/views/index.jade b/test/fixtures/dump_dirs/views/index.jade
deleted file mode 100644
index b414209..0000000
--- a/test/fixtures/dump_dirs/views/index.jade
+++ /dev/null
@@ -1 +0,0 @@
-p hello world!
diff --git a/test/fixtures/environments/app.doge.js b/test/fixtures/environments/app.doge.js
index 2026a0d..f7ad0f9 100644
--- a/test/fixtures/environments/app.doge.js
+++ b/test/fixtures/environments/app.doge.js
@@ -1,3 +1,3 @@
 module.exports = {
-  locals: { v2: true }
+  env2: true
 }
diff --git a/test/fixtures/environments/app.js b/test/fixtures/environments/app.js
index 14168d8..25051fa 100644
--- a/test/fixtures/environments/app.js
+++ b/test/fixtures/environments/app.js
@@ -1,3 +1,3 @@
 module.exports = {
-  locals: { v1: true }
+  env1: true
 }
diff --git a/test/fixtures/html/index.html b/test/fixtures/html/index.html
new file mode 100644
index 0000000..b6c013a
--- /dev/null
+++ b/test/fixtures/html/index.html
@@ -0,0 +1,7 @@
+<head>
+  <title>test</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <custom>hello there</custom>
+</body>
diff --git a/test/fixtures/jade_dependencies/image.jpg b/test/fixtures/html/style.css
similarity index 100%
rename from test/fixtures/jade_dependencies/image.jpg
rename to test/fixtures/html/style.css
diff --git a/test/fixtures/ignores/about.jade b/test/fixtures/ignores/about.jade
deleted file mode 100644
index 3c4eeb6..0000000
--- a/test/fixtures/ignores/about.jade
+++ /dev/null
@@ -1,4 +0,0 @@
-extends layout
-
-block content
-  p all about this project wow
diff --git a/test/fixtures/ignores/ignore.html b/test/fixtures/ignores/ignore.html
new file mode 100644
index 0000000..60f0b7b
--- /dev/null
+++ b/test/fixtures/ignores/ignore.html
@@ -0,0 +1 @@
+<p>ignore me plz</p>
diff --git a/test/fixtures/ignores/index.html b/test/fixtures/ignores/index.html
new file mode 100644
index 0000000..20a6e8f
--- /dev/null
+++ b/test/fixtures/ignores/index.html
@@ -0,0 +1 @@
+<p>hello world!</p>
diff --git a/test/fixtures/ignores/index.jade b/test/fixtures/ignores/index.jade
deleted file mode 100644
index 4d9bfc4..0000000
--- a/test/fixtures/ignores/index.jade
+++ /dev/null
@@ -1,4 +0,0 @@
-extends layout
-
-block content
-  p hello world!
diff --git a/test/fixtures/ignores/layout.jade b/test/fixtures/ignores/layout.jade
deleted file mode 100644
index 052702e..0000000
--- a/test/fixtures/ignores/layout.jade
+++ /dev/null
@@ -1,6 +0,0 @@
-doctype html
-html
-  head
-    title Spike Mini
-  body
-    block content
diff --git a/test/fixtures/jade/image.jpg b/test/fixtures/jade/image.jpg
new file mode 100644
index 0000000..e69de29
diff --git a/test/fixtures/jade_dependencies/index.jade b/test/fixtures/jade/index.jade
similarity index 100%
rename from test/fixtures/jade_dependencies/index.jade
rename to test/fixtures/jade/index.jade
diff --git a/test/fixtures/jade_dependencies/script.js b/test/fixtures/jade/script.js
similarity index 100%
rename from test/fixtures/jade_dependencies/script.js
rename to test/fixtures/jade/script.js
diff --git a/test/fixtures/jade_dependencies/style.css b/test/fixtures/jade/style.css
similarity index 100%
rename from test/fixtures/jade_dependencies/style.css
rename to test/fixtures/jade/style.css
diff --git a/test/fixtures/plugins/app.js b/test/fixtures/plugins/app.js
index 161574e..bda82f8 100644
--- a/test/fixtures/plugins/app.js
+++ b/test/fixtures/plugins/app.js
@@ -1,7 +1,7 @@
 const TestPlugin = require('./plugin.js')
 
 module.exports = {
-  locals: { foo: 'bar' },
+  test: 'foo',
   ignore: ['app.js', 'plugin.js'],
   plugins: [new TestPlugin()]
 }
diff --git a/test/fixtures/plugins/index.html b/test/fixtures/plugins/index.html
new file mode 100644
index 0000000..454c8ea
--- /dev/null
+++ b/test/fixtures/plugins/index.html
@@ -0,0 +1 @@
+<p>hello there!</p>
diff --git a/test/fixtures/plugins/index.jade b/test/fixtures/plugins/index.jade
deleted file mode 100644
index 53c8b91..0000000
--- a/test/fixtures/plugins/index.jade
+++ /dev/null
@@ -1 +0,0 @@
-= foo
diff --git a/test/fixtures/plugins/plugin.js b/test/fixtures/plugins/plugin.js
index e05be16..076ff84 100644
--- a/test/fixtures/plugins/plugin.js
+++ b/test/fixtures/plugins/plugin.js
@@ -6,7 +6,7 @@ module.exports = class JadeWebpackPlugin {
   apply (compiler) {
     compiler.plugin('run', function (compilation, done) {
       setTimeout(function () {
-        compiler.options.spike.locals.foo = 'doge'
+        compiler.options.test = 'bar'
         done()
       }, 300)
     })
diff --git a/test/fixtures/static_plugins/app.js b/test/fixtures/static_plugins/app.js
index b982c1c..803ab23 100644
--- a/test/fixtures/static_plugins/app.js
+++ b/test/fixtures/static_plugins/app.js
@@ -1,7 +1,6 @@
 const GladePlugin = require('./plugin.js')
 
 module.exports = {
-  locals: { foo: 'bar' },
   ignore: ['plugin.js'],
   plugins: [new GladePlugin()]
 }
diff --git a/test/fixtures/static_plugins/foo.html b/test/fixtures/static_plugins/foo.html
new file mode 100644
index 0000000..3e46032
--- /dev/null
+++ b/test/fixtures/static_plugins/foo.html
@@ -0,0 +1 @@
+<p>foo</p>
diff --git a/test/fixtures/static_plugins/foo.jade b/test/fixtures/static_plugins/foo.jade
deleted file mode 100644
index d54a583..0000000
--- a/test/fixtures/static_plugins/foo.jade
+++ /dev/null
@@ -1 +0,0 @@
-p= foo
diff --git a/test/fixtures/vendor/index.html b/test/fixtures/vendor/index.html
new file mode 100644
index 0000000..057e455
--- /dev/null
+++ b/test/fixtures/vendor/index.html
@@ -0,0 +1 @@
+<p>index</p>
diff --git a/test/fixtures/vendor/index.jade b/test/fixtures/vendor/index.jade
deleted file mode 100644
index 51067ed..0000000
--- a/test/fixtures/vendor/index.jade
+++ /dev/null
@@ -1 +0,0 @@
-p index
diff --git a/test/fixtures/watch/index.html b/test/fixtures/watch/index.html
new file mode 100644
index 0000000..667c7a5
--- /dev/null
+++ b/test/fixtures/watch/index.html
@@ -0,0 +1 @@
+<p>watcher test</p>
\ No newline at end of file
diff --git a/test/fixtures/watch/index.jade b/test/fixtures/watch/index.jade
deleted file mode 100644
index de0bc05..0000000
--- a/test/fixtures/watch/index.jade
+++ /dev/null
@@ -1 +0,0 @@
-p watcher test
\ No newline at end of file
diff --git a/test/html.js b/test/html.js
new file mode 100644
index 0000000..2e148fb
--- /dev/null
+++ b/test/html.js
@@ -0,0 +1,23 @@
+const test = require('ava')
+const fs = require('fs')
+const path = require('path')
+const {compileFixture} = require('./_helpers')
+const customElements = require('posthtml-custom-elements')
+
+test('compiles straight html using posthtml, tracks dependencies', (t) => {
+  return compileFixture(t, 'html').then(({res}) => {
+    const fd = res.stats.compilation.fileDependencies.map((d) => {
+      return d.replace(`${res.stats.compilation.options.context}/`, '')
+    })
+    t.truthy(fd.indexOf('style.css') > -1)
+  })
+})
+
+test('can apply posthtml plugins', (t) => {
+  return compileFixture(t, 'html', {
+    posthtml: { defaults: [customElements()] }
+  }).then(({publicPath}) => {
+    const index = fs.readFileSync(path.join(publicPath, 'index.html'), 'utf8')
+    t.truthy(index.match('div class="custom"'))
+  })
+})
diff --git a/test/ignores.js b/test/ignores.js
index 650ef4c..6c1bb93 100644
--- a/test/ignores.js
+++ b/test/ignores.js
@@ -3,11 +3,9 @@ const path = require('path')
 const {compileFixture, fs} = require('./_helpers')
 
 test('does not compile ignored files', (t) => {
-  return compileFixture(t, 'ignores', { ignore: ['layout.jade'] }).tap(({publicPath}) => {
+  return compileFixture(t, 'ignores', { ignore: ['ignore.html'] }).tap(({publicPath}) => {
     return fs.access(path.join(publicPath, 'index.html'))
   }).tap(({publicPath}) => {
-    return fs.access(path.join(publicPath, 'about.html'))
-  }).tap(({publicPath}) => {
-    return t.throws(fs.access(path.join(publicPath, 'layout.html')))
+    return t.throws(fs.access(path.join(publicPath, 'ignore.html')))
   })
 })
diff --git a/test/jade.js b/test/jade.js
index 1effff3..d3b3bc4 100644
--- a/test/jade.js
+++ b/test/jade.js
@@ -1,11 +1,20 @@
 const test = require('ava')
+const path = require('path')
+const fs = require('fs')
+const url = require('url')
 const jadePlugin = require('posthtml-jade')
 const {compileFixture} = require('./_helpers')
 
-test('tracks jade front-end dependencies', (t) => {
-  return compileFixture(t, 'jade_dependencies', {
-    posthtml: { plugins: [jadePlugin({ pretty: true })] }
-  }).then(({res}) => {
+test('works with jade plugin, tracks dependencies', (t) => {
+  return compileFixture(t, 'jade', {
+    matchers: { html: '**/*.+(html|jade)' },
+    posthtml: (ctx) => {
+      const path = url.parse(ctx.request.split('!').slice(-1)[0]).pathname
+      return { defaults: [jadePlugin({ filename: path, pretty: true })] }
+    }
+  }).then(({res, publicPath}) => {
+    const index = fs.readFileSync(path.join(publicPath, 'index.html'), 'utf8')
+    t.truthy(index.match('<p>oh hello!</p>'))
     const fd = res.stats.compilation.fileDependencies.map((d) => {
       return d.replace(`${res.stats.compilation.options.context}/`, '')
     })
diff --git a/test/locals.js b/test/locals.js
deleted file mode 100644
index 763e5a8..0000000
--- a/test/locals.js
+++ /dev/null
@@ -1,11 +0,0 @@
-const test = require('ava')
-const path = require('path')
-const {compileFixture, fs} = require('./_helpers')
-
-test('injects template locals', (t) => {
-  return compileFixture(t, 'locals', { locals: { foo: () => 'bar' } }).then(({publicPath}) => {
-    return fs.readFile(path.join(publicPath, 'index.html'), 'utf8')
-  }).then((contents) => {
-    return t.is(contents, 'bar')
-  })
-})
diff --git a/test/plugins.js b/test/plugins.js
index 9404922..597ef8b 100644
--- a/test/plugins.js
+++ b/test/plugins.js
@@ -4,8 +4,9 @@ const {compileFixture, fs} = require('./_helpers')
 
 test('compiles a project with a custom plugin', (t) => {
   return compileFixture(t, 'plugins')
-    .then(({publicPath}) => { return path.join(publicPath, 'index.html') })
-    .tap((index) => { return fs.stat(index).tap(t.truthy.bind(t)) })
-    .then((index) => { return fs.readFile(index, 'utf8') })
-    .then((contents) => { return t.is(contents, 'doge') })
+    .then(({res, publicPath}) => {
+      const index = path.join(publicPath, 'index.html')
+      fs.statSync(index)
+      t.truthy(res.stats.compilation.options.test === 'bar')
+    })
 })
diff --git a/test/static.js b/test/static.js
index b015203..fa49971 100644
--- a/test/static.js
+++ b/test/static.js
@@ -24,7 +24,7 @@ test('static plugin ignores files processed by webpack plugins', (t) => {
     const f1 = fs.readFileSync(path.join(publicPath, 'foo.html'), 'utf8')
     const f2 = fs.readFileSync(path.join(publicPath, 'foo.spade'), 'utf8')
     const f3 = fs.readFileSync(path.join(publicPath, 'foo.glade'), 'utf8')
-    t.is(f1.trim(), '<p>bar</p>')
+    t.is(f1.trim(), '<p>foo</p>')
     t.is(f2.trim(), 'p not processed by spike core')
     t.is(f3.trim(), 'Glade Air Freshener™ is a really cool product')
   })
diff --git a/test/watch.js b/test/watch.js
index 83dc196..4f6c4d1 100644
--- a/test/watch.js
+++ b/test/watch.js
@@ -14,7 +14,7 @@ test.cb('watches the project, reloads on modification', (t) => {
   project.on('compile', (res) => {
     i++
     if (i === 1) {
-      const file = path.join(fixturesPath, 'watch/index.jade')
+      const file = path.join(fixturesPath, 'watch/index.html')
       fs.appendFileSync(file, ' ')
       fs.writeFileSync(file, fs.readFileSync(file, 'utf8').trim())
     }
@@ -35,17 +35,17 @@ test.cb('incorporates new file when added while watching', (t) => {
     server: { open: false }
   })
   let i = 0
-  const testFile = path.join(fixturesPath, 'watch/test.jade')
+  const testFile = path.join(fixturesPath, 'watch/test.html')
   const testResultFile = path.join(fixturesPath, 'watch/public/test.html')
 
   project.on('compile', (res) => {
     i++
     if (i === 1) {
-      fs.writeFileSync(testFile, 'p test')
+      fs.writeFileSync(testFile, '<p>test</p>')
     }
     if (i === 2) {
       const contents = fs.readFileSync(testResultFile, 'utf8')
-      t.truthy(contents, '\n<p>test</p>')
+      t.truthy(contents.trim(), '<p>test</p>')
       fs.unlinkSync(testFile)
       fs.unlinkSync(testResultFile)
       watcher.close()

From c8533f724fcd681a8528173288d9fcb19f9d2f34 Mon Sep 17 00:00:00 2001
From: Jeff Escalante <hello@jenius.me>
Date: Wed, 15 Jun 2016 16:41:29 -0400
Subject: [PATCH 5/8] sss > css by default

---
 lib/config.js                                    |  2 +-
 lib/plugins/css_plugin.js                        |  4 ++--
 package.json                                     |  1 +
 test/css.js                                      | 16 +++++++++++++---
 .../{sugarss => css_parser}/_partial.sss         |  0
 test/fixtures/{sugarss => css_parser}/app.js     |  5 ++---
 test/fixtures/{sugarss => css_parser}/main.sss   |  0
 test/fixtures/css_plugin/main.css                |  1 +
 8 files changed, 20 insertions(+), 9 deletions(-)
 rename test/fixtures/{sugarss => css_parser}/_partial.sss (100%)
 rename test/fixtures/{sugarss => css_parser}/app.js (54%)
 rename test/fixtures/{sugarss => css_parser}/main.sss (100%)
 create mode 100644 test/fixtures/css_plugin/main.css

diff --git a/lib/config.js b/lib/config.js
index dec0f49..eed5c92 100644
--- a/lib/config.js
+++ b/lib/config.js
@@ -46,7 +46,7 @@ module.exports = class Config {
       env: Joi.string(),
       matchers: Joi.object().default().keys({
         html: Joi.string().default('**/*.html'),
-        css: Joi.string().default('**/*.sss'),
+        css: Joi.string().default('**/*.css'),
         js: Joi.string().default('**/*.js')
       }),
       postcss: Joi.object().default().keys({
diff --git a/lib/plugins/css_plugin.js b/lib/plugins/css_plugin.js
index 9d799b3..047b391 100644
--- a/lib/plugins/css_plugin.js
+++ b/lib/plugins/css_plugin.js
@@ -6,7 +6,7 @@ const _eval = require('require-from-string')
 
 /**
  * @class CSSWebpackPlugin
- * @classdesc A webpack plugin that takes in .sss files, adds them to the
+ * @classdesc A webpack plugin that takes in .css files, adds them to the
  * pipeline, and writes them.
  */
 module.exports = class CSSWebpackPlugin {
@@ -48,7 +48,7 @@ module.exports = class CSSWebpackPlugin {
         let src = _eval(srcFn, f) // eslint-disable-line
         src = src[0][1] // this part is questionable, but it is what it is
         const outputPath = this.util.getOutputPath(f)
-        const newPath = outputPath.relative.replace(/\.[^/.]+$/, '.css')
+        const newPath = outputPath.relative.replace(/(.*)?(\..+?$)/, '$1.css')
         compilation.assets[newPath] = {
           source: () => { return src },
           size: () => { return src.length }
diff --git a/package.json b/package.json
index 3c7511c..d88d8c7 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "husky": "^0.11.4",
     "md5-file": "^3.1.0",
     "nyc": "^6.4.4",
+    "postcss-color-gray": "^3.0.0",
     "posthtml-custom-elements": "^1.0.3",
     "posthtml-jade": "^0.8.2",
     "snazzy": "^4.0.0",
diff --git a/test/css.js b/test/css.js
index 6ba1edd..e91ab2a 100644
--- a/test/css.js
+++ b/test/css.js
@@ -1,8 +1,9 @@
 const test = require('ava')
 const path = require('path')
+const colorGray = require('postcss-color-gray')
 const {compileFixture, fs} = require('./_helpers')
 
-test('css plugin works with .css', (t) => {
+test('.css files are compiled correctly', (t) => {
   return compileFixture(t, 'css')
     .then(({publicPath}) => { return path.join(publicPath, 'main.css') })
     .tap((base) => { return fs.stat(base).tap(t.truthy.bind(t)) })
@@ -10,8 +11,17 @@ test('css plugin works with .css', (t) => {
     .then((contents) => { return t.regex(contents, /color: pink/) })
 })
 
-test('css plugin works with .sss', (t) => {
-  return compileFixture(t, 'sugarss')
+test('css works with postcss plugins', (t) => {
+  return compileFixture(t, 'css_plugin', {
+    postcss: { plugins: [colorGray()] }
+  }).then(({publicPath}) => { return path.join(publicPath, 'main.css') })
+    .tap((base) => { return fs.stat(base).tap(t.truthy.bind(t)) })
+    .then((base) => { return fs.readFile(base, 'utf8') })
+    .then((contents) => { return t.regex(contents, /color: rgb\(50, 50, 50\)/) })
+})
+
+test('css works with alternate parser', (t) => {
+  return compileFixture(t, 'css_parser')
     .then(({publicPath}) => { return path.join(publicPath, 'main.css') })
     .tap((index) => { return fs.stat(index).tap(t.truthy.bind(t)) })
     .then((index) => { return fs.readFile(index, 'utf8') })
diff --git a/test/fixtures/sugarss/_partial.sss b/test/fixtures/css_parser/_partial.sss
similarity index 100%
rename from test/fixtures/sugarss/_partial.sss
rename to test/fixtures/css_parser/_partial.sss
diff --git a/test/fixtures/sugarss/app.js b/test/fixtures/css_parser/app.js
similarity index 54%
rename from test/fixtures/sugarss/app.js
rename to test/fixtures/css_parser/app.js
index 2384339..fe3cd5e 100644
--- a/test/fixtures/sugarss/app.js
+++ b/test/fixtures/css_parser/app.js
@@ -2,7 +2,6 @@ const sugarss = require('sugarss')
 
 module.exports = {
   ignore: ['**/_*'],
-  postcss: {
-    parser: sugarss
-  }
+  matchers: { css: '**/*.sss' },
+  postcss: { parser: sugarss }
 }
diff --git a/test/fixtures/sugarss/main.sss b/test/fixtures/css_parser/main.sss
similarity index 100%
rename from test/fixtures/sugarss/main.sss
rename to test/fixtures/css_parser/main.sss
diff --git a/test/fixtures/css_plugin/main.css b/test/fixtures/css_plugin/main.css
new file mode 100644
index 0000000..9cddc47
--- /dev/null
+++ b/test/fixtures/css_plugin/main.css
@@ -0,0 +1 @@
+p { color: gray(50); }

From 50d79704f1a333c3c533a485151060b34117c513 Mon Sep 17 00:00:00 2001
From: Jeff Escalante <hello@jenius.me>
Date: Wed, 15 Jun 2016 17:21:35 -0400
Subject: [PATCH 6/8] update deps

---
 lib/config.js                   |  8 +-------
 package.json                    | 19 +++++++++----------
 test/fixtures/css_parser/app.js |  8 +++++++-
 3 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/lib/config.js b/lib/config.js
index eed5c92..6205b17 100644
--- a/lib/config.js
+++ b/lib/config.js
@@ -8,7 +8,6 @@ const FsPlugin = require('./plugins/fs_plugin')
 const micromatch = require('micromatch')
 const union = require('lodash.union')
 const merge = require('lodash.merge')
-const postcssImport = require('postcss-import')
 const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
 const {accessSync} = require('fs')
 const hygienist = require('hygienist-middleware')
@@ -174,7 +173,7 @@ module.exports = class Config {
    */
   transformSpikeOptionsToWebpack (opts) {
     // `disallow` options would break spike if modified.
-    const disallow = ['output', 'resolveLoader', 'spike', 'plugins', 'context', 'postcss']
+    const disallow = ['output', 'resolveLoader', 'spike', 'plugins', 'context']
 
     // `noCopy` options are spike-specific and shouldn't be directly added to
     // webpack's config
@@ -234,11 +233,6 @@ module.exports = class Config {
 
     this.module.loaders = spikeLoaders.concat(opts.module.loaders)
 
-    this.postcss = (wp) => {
-      opts.postcss.plugins.unshift(postcssImport({ addDependencyTo: wp }))
-      return opts.postcss
-    }
-
     const util = new SpikeUtils(this)
 
     this.plugins = [new FsPlugin(util)]
diff --git a/package.json b/package.json
index d88d8c7..76c2bb9 100644
--- a/package.json
+++ b/package.json
@@ -9,23 +9,21 @@
   },
   "bugs": "https://github.com/static-dev/spike/issues",
   "dependencies": {
-    "babel-core": "^6.9.0",
+    "babel-core": "^6.9.1",
     "babel-loader": "^6.2.0",
-    "browser-sync": "^2.11.1",
-    "browser-sync-webpack-plugin": "^1.0.1",
+    "browser-sync": "^2.13.0",
+    "browser-sync-webpack-plugin": "^1.0.3",
     "cheerio": "^0.20.0",
     "css-loader": "^0.23.1",
     "filewrap": "^0.1.0",
     "glob": "^7.0.3",
     "hygienist-middleware": "^0.1.1",
-    "joi": "^8.1.0",
+    "joi": "^8.4.2",
     "lodash.difference": "^4.3.0",
     "lodash.merge": "^4.3.5",
     "lodash.union": "^4.2.0",
     "micromatch": "^2.3.7",
     "mkdirp": "^0.5.1",
-    "postcss": "^5.0.21",
-    "postcss-import": "^8.1.2",
     "postcss-loader": "^0.9.1",
     "posthtml-loader": "^0.9.0",
     "require-from-string": "^1.2.0",
@@ -37,19 +35,20 @@
     "when": "^3.7.7"
   },
   "devDependencies": {
-    "ava": "^0.15.0",
+    "ava": "^0.15.2",
     "babel-eslint": "^6.0.4",
     "chalk": "^1.1.3",
     "coveralls": "^2.11.9",
     "husky": "^0.11.4",
     "md5-file": "^3.1.0",
-    "nyc": "^6.4.4",
+    "nyc": "^6.6.1",
     "postcss-color-gray": "^3.0.0",
+    "postcss-import": "^8.1.2",
     "posthtml-custom-elements": "^1.0.3",
     "posthtml-jade": "^0.8.2",
     "snazzy": "^4.0.0",
-    "standard": "^7.1.0",
-    "sugarss": "^0.1.2"
+    "standard": "^7.1.2",
+    "sugarss": "^0.1.4"
   },
   "engines": {
     "node": ">=6.0.0",
diff --git a/test/fixtures/css_parser/app.js b/test/fixtures/css_parser/app.js
index fe3cd5e..127a8fe 100644
--- a/test/fixtures/css_parser/app.js
+++ b/test/fixtures/css_parser/app.js
@@ -1,7 +1,13 @@
 const sugarss = require('sugarss')
+const postcssImport = require('postcss-import')
 
 module.exports = {
   ignore: ['**/_*'],
   matchers: { css: '**/*.sss' },
-  postcss: { parser: sugarss }
+  postcss: (wp) => {
+    return {
+      parser: sugarss,
+      plugins: [postcssImport({ addDependencyTo: wp })]
+    }
+  }
 }

From 81903a8366ac7dd7cc6c94ca0763be2af22ccd61 Mon Sep 17 00:00:00 2001
From: Jeff Escalante <hello@jenius.me>
Date: Wed, 15 Jun 2016 18:10:02 -0400
Subject: [PATCH 7/8] postcss config object accepted direct, update deps

---
 lib/config.js         | 7 +------
 readme.md             | 2 +-
 test/config_errors.js | 4 ++--
 test/css.js           | 2 +-
 4 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/lib/config.js b/lib/config.js
index 6205b17..617eaea 100644
--- a/lib/config.js
+++ b/lib/config.js
@@ -48,12 +48,7 @@ module.exports = class Config {
         css: Joi.string().default('**/*.css'),
         js: Joi.string().default('**/*.js')
       }),
-      postcss: Joi.object().default().keys({
-        plugins: Joi.array().single().default([]),
-        parser: Joi.object(),
-        stringifier: Joi.object(),
-        syntax: Joi.object()
-      }),
+      postcss: Joi.alternatives().try(Joi.object(), Joi.func()).default({ plugins: [] }),
       posthtml: Joi.alternatives().try(Joi.object(), Joi.func()).default({ defaults: [] }),
       css: Joi.object().default({}),
       babel: Joi.object(),
diff --git a/readme.md b/readme.md
index 362bd02..b49e499 100644
--- a/readme.md
+++ b/readme.md
@@ -59,7 +59,7 @@ Option                 | Description
 :--------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------
 **root**               | **[required]** An absolute path to the root of your project.                                                                                                                                                                                                                                                                        |
 **matchers**           | An object with `html`, `css`, and `js` keys. Each key is a [micromatch](https://github.com/jonschlinkert/micromatch) string, and represents which files should be pulled into the pipeline to be processed. Be very careful if you are trying to change this.                                                                       | `**/*.html`, `**/*.css`, and `**/*.js`
-**postcss**            | An object that can contain a `plugins` key, which is an array of [plugins to be passed to PostCSS](http://postcss.parts/) for CSS processing, and a `parser`, `stringifier`, and/or `syntax` key, each of which are objects and take [any of the postcss-loader options](https://github.com/postcss/postcss-loader#custom-syntaxes). Any options other than the ones specified above will be passed as querystring options. |
+**postcss**            | A function or object with a `plugins` key, each of which return an array of [plugins to be passed to PostCSS](http://postcss.parts/) for CSS processing. A `parser`, `stringifier`, and/or `syntax` key can also be on the object, each of which take [any of the postcss-loader options](https://github.com/postcss/postcss-loader#custom-syntaxes). Any options other than the ones specified above will be passed as querystring options. |
 **css**              | An object which is serialized as a querystring and passed directly to the [css loader](https://github.com/webpack/css-loader).                                                                                                                                                                                                                                        |
 **babel**              | A [configuration object for Babel](http://babeljs.io/docs/usage/options/) for JS processing.                                                                                                                                                                                                                                        |
 **dumpDirs**           | An array of directories which, if direct children of the project root, will dump their contents to the root on compile.                                                                                                                                                                                                             | `['views', 'assets']`.
diff --git a/test/config_errors.js b/test/config_errors.js
index d5179b4..b17e40c 100644
--- a/test/config_errors.js
+++ b/test/config_errors.js
@@ -8,8 +8,8 @@ test('config errors', (t) => {
     'ValidationError: child "matchers" fails because ["matchers" must be an object]')
   t.throws(() => { new Spike({ root: 'foo', matchers: { css: [1] } }) }, // eslint-disable-line
     'ValidationError: child "matchers" fails because [child "css" fails because ["css" must be a string]]')
-  t.throws(() => { new Spike({ root: 'foo', postcss: function () {} }) }, // eslint-disable-line
-    'ValidationError: child "postcss" fails because ["postcss" must be an object]')
+  t.throws(() => { new Spike({ root: 'foo', postcss: 8 }) }, // eslint-disable-line
+    'ValidationError: child "postcss" fails because ["postcss" must be an object, "postcss" must be a Function]')
   t.throws(() => { new Spike({ root: 'foo', babel: 'wow' }) }, // eslint-disable-line
     'ValidationError: child "babel" fails because ["babel" must be an object]')
   t.throws(() => { new Spike({ root: 'foo', entry: ['foo', 'bar'] }) }, // eslint-disable-line
diff --git a/test/css.js b/test/css.js
index e91ab2a..b1e70eb 100644
--- a/test/css.js
+++ b/test/css.js
@@ -3,7 +3,7 @@ const path = require('path')
 const colorGray = require('postcss-color-gray')
 const {compileFixture, fs} = require('./_helpers')
 
-test('.css files are compiled correctly', (t) => {
+test('css files are compiled correctly', (t) => {
   return compileFixture(t, 'css')
     .then(({publicPath}) => { return path.join(publicPath, 'main.css') })
     .tap((base) => { return fs.stat(base).tap(t.truthy.bind(t)) })

From d196b8e3309b29983de4634d861451223708863c Mon Sep 17 00:00:00 2001
From: Jeff Escalante <hello@jenius.me>
Date: Wed, 15 Jun 2016 18:43:12 -0400
Subject: [PATCH 8/8] css-loader > source-loader, readme update

---
 lib/config.js             |  3 +--
 lib/plugins/css_plugin.js | 15 +++++++--------
 package.json              |  1 -
 readme.md                 | 18 +++++++++---------
 test/app_config.js        |  4 ++--
 test/jade.js              |  2 +-
 6 files changed, 20 insertions(+), 23 deletions(-)

diff --git a/lib/config.js b/lib/config.js
index 617eaea..d7dc401 100644
--- a/lib/config.js
+++ b/lib/config.js
@@ -50,7 +50,6 @@ module.exports = class Config {
       }),
       postcss: Joi.alternatives().try(Joi.object(), Joi.func()).default({ plugins: [] }),
       posthtml: Joi.alternatives().try(Joi.object(), Joi.func()).default({ defaults: [] }),
-      css: Joi.object().default({}),
       babel: Joi.object(),
       cleanUrls: Joi.bool().default(true),
       dumpDirs: Joi.array().default(['views', 'assets']),
@@ -209,7 +208,7 @@ module.exports = class Config {
     const spikeLoaders = [
       {
         exclude: reIgnores,
-        loader: `css-loader?${qs.stringify(opts.css)}!postcss-loader?${qs.stringify(opts.postcssQuery)}`,
+        loader: `source-loader!postcss-loader?${qs.stringify(opts.postcssQuery)}`,
         _core: 'css'
       }, {
         exclude: reIgnores,
diff --git a/lib/plugins/css_plugin.js b/lib/plugins/css_plugin.js
index 047b391..f51123f 100644
--- a/lib/plugins/css_plugin.js
+++ b/lib/plugins/css_plugin.js
@@ -2,8 +2,6 @@
  * @module CSSPlugin
  */
 
-const _eval = require('require-from-string')
-
 /**
  * @class CSSWebpackPlugin
  * @classdesc A webpack plugin that takes in .css files, adds them to the
@@ -44,12 +42,13 @@ module.exports = class CSSWebpackPlugin {
         /* istanbul ignore next */
         if (dep.error) { return done(dep.error) }
 
-        const srcFn = dep._source._value
-        let src = _eval(srcFn, f) // eslint-disable-line
-        src = src[0][1] // this part is questionable, but it is what it is
-        const outputPath = this.util.getOutputPath(f)
-        const newPath = outputPath.relative.replace(/(.*)?(\..+?$)/, '$1.css')
-        compilation.assets[newPath] = {
+        let src = JSON.parse(dep._source._value.replace(/^module\.exports = /, ''))
+
+        let outputPath = this.util.getOutputPath(f)
+        // replace any other extension with `.css`
+        outputPath = outputPath.relative.replace(/(.*)?(\..+?$)/, '$1.css')
+
+        compilation.assets[outputPath] = {
           source: () => { return src },
           size: () => { return src.length }
         }
diff --git a/package.json b/package.json
index 76c2bb9..50327f2 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,6 @@
     "mkdirp": "^0.5.1",
     "postcss-loader": "^0.9.1",
     "posthtml-loader": "^0.9.0",
-    "require-from-string": "^1.2.0",
     "rimraf": "^2.5.2",
     "source-loader": "^0.2.0",
     "spike-util": "0.2.0",
diff --git a/readme.md b/readme.md
index b49e499..4a2d858 100644
--- a/readme.md
+++ b/readme.md
@@ -27,9 +27,10 @@ Spike is fairly strict in enforcing a default stack. However, the stack allows f
 
 - Easy configuration via the `app.js` file
 - Integration with [Webpack's](https://github.com/webpack/webpack) massive plugin/loader ecosystem
-- Support for ES6 in your site's JS via Babel
+- Support for ES6 in your client-side JS via Babel
+- PostCSS default means extensive flexibility in CSS syntax and tools
+- PostHTML default means the same for your HTML
 - Breezy local development powered by [Browsersync](https://browsersync.io/)
-- Turn-key isomorphism (no refresh page loads)
 - Selective compile in `watch` mode :zap:
 - Support for [multiple environments](#environments)
 - Interactive Project Starters via [sprout](https://github.com/carrot/sprout)
@@ -37,11 +38,11 @@ Spike is fairly strict in enforcing a default stack. However, the stack allows f
 
 ## Installation
 
-- `npm install spike-core`
+- `npm install spike-core -S`
 
 ## Usage
 
-Spike operates through a carefully crafted javascript interface. If you are looking to use spike through its command line interface, check out [spike](https://github.com/static-dev/spike). This project is just the core javascript api.
+Spike operates through a carefully crafted javascript interface. If you are looking to use spike through its command line interface, check out [spike](https://github.com/static-dev/spike). This project is just the core javascript API.
 
 ### Javacript API
 
@@ -59,18 +60,17 @@ Option                 | Description
 :--------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------
 **root**               | **[required]** An absolute path to the root of your project.                                                                                                                                                                                                                                                                        |
 **matchers**           | An object with `html`, `css`, and `js` keys. Each key is a [micromatch](https://github.com/jonschlinkert/micromatch) string, and represents which files should be pulled into the pipeline to be processed. Be very careful if you are trying to change this.                                                                       | `**/*.html`, `**/*.css`, and `**/*.js`
-**postcss**            | A function or object with a `plugins` key, each of which return an array of [plugins to be passed to PostCSS](http://postcss.parts/) for CSS processing. A `parser`, `stringifier`, and/or `syntax` key can also be on the object, each of which take [any of the postcss-loader options](https://github.com/postcss/postcss-loader#custom-syntaxes). Any options other than the ones specified above will be passed as querystring options. |
-**css**              | An object which is serialized as a querystring and passed directly to the [css loader](https://github.com/webpack/css-loader).                                                                                                                                                                                                                                        |
+**posthtml**            | A object with a `defaults` key, each of which return an array of [plugins to be passed to PostHTML](http://maltsev.github.io/posthtml-plugins/) for HTML processing. Can also be a function that returns the object. |
+**postcss**            | An object with a `plugins` key, each of which return an array of [plugins to be passed to PostCSS](http://postcss.parts/) for CSS processing. A `parser`, `stringifier`, and/or `syntax` key can also be on the object, each of which take [any of the postcss-loader options](https://github.com/postcss/postcss-loader#custom-syntaxes). Can also be a function that returns the object. Any options other than the ones specified above will be passed as querystring options. |
 **babel**              | A [configuration object for Babel](http://babeljs.io/docs/usage/options/) for JS processing.                                                                                                                                                                                                                                        |
 **dumpDirs**           | An array of directories which, if direct children of the project root, will dump their contents to the root on compile.                                                                                                                                                                                                             | `['views', 'assets']`.
 **env**                | The environment you would like to use when compiling. See [environments](#environments) for more information about this option.                                                                                                                                                                                                     |
 **ignore**             | An array of [micromatch](https://github.com/jonschlinkert/micromatch) strings, each one defining a file pattern to be ignored from compilation.                                                                                                                                                                                     |
 **outputDir**          | The name or path of the folder your project will be compiled into, on top of the project's root.                                                                                                                                                                                                                                    | `'public'`
 **cleanUrls**          | Remove `.html` from your paths during `spike.watch`.                                                                                                                                                                                                                                                                                | `true`
-**plugins**            | An array of webpack plugins.                                                                                                                                                                                                                                                                                                        |
-**entry**              | Webpack entry object duplicate. Can be used for code splitting and/or to use multiple bundles.                                                                                                                                                                                                                                      | `{ 'js/main': ['./assets/js/index.js'] }`
 **vendor**             | A string or array of glob paths used to indicate which files shouldn't be bundled by webpack, but instead are just copied directly to the output folder                                                                                                                                                                             |
-**modulesDirectories** | Webpack modulesDirectories array option, to select where modules can be loaded from.                                                                                                                                                                                                                                                | `['node_modules', 'bower_components']`
+**entry**              | Webpack entry object duplicate. Can be used for code splitting and/or to use multiple bundles. See [webpack's documentation](https://webpack.github.io/docs/configuration.html#entry) for details                                                                                                                                                                                                                                      | `{ 'js/main': ['./assets/js/index.js'] }`
+**plugins**            | An array of webpack plugins.                                                                                                                                                                                                                                                                                                        |
 **module.loaders**     | Allows you to define an array of custom loaders. See [webpack's documentation](https://webpack.github.io/docs/configuration.html#module-loaders) for details                                                                                                                                                                        |
 **resolve.alias**      | Set up loader aliases, like if you wanted to load a local loader. See [webpack's documentation](https://webpack.github.io/docs/configuration.html#resolve-alias) for details                                                                                                                                                        |
 
diff --git a/test/app_config.js b/test/app_config.js
index 9d4ac19..126f2f0 100644
--- a/test/app_config.js
+++ b/test/app_config.js
@@ -31,7 +31,7 @@ test('does not allow certain options to be configured', (t) => {
     })
 })
 
-test('postcss and css querystring options', (t) => {
+test('postcss querystring options', (t) => {
   return compileFixture(t, 'app_config', {
     postcss: { plugins: ['wow'], foo: 'bar' },
     css: { foo: 'bar' }
@@ -40,6 +40,6 @@ test('postcss and css querystring options', (t) => {
     t.truthy(opts.spike.postcssQuery.foo, 'bar')
     t.truthy(opts.spike.css.foo, 'bar')
     const cssLoaderConfig = opts.module.loaders.find((l) => l._core === 'css')
-    t.truthy(cssLoaderConfig.loader === 'css-loader?foo=bar!postcss-loader?foo=bar')
+    t.truthy(cssLoaderConfig.loader === 'source-loader!postcss-loader?foo=bar')
   })
 })
diff --git a/test/jade.js b/test/jade.js
index d3b3bc4..c3d9ade 100644
--- a/test/jade.js
+++ b/test/jade.js
@@ -7,7 +7,7 @@ const {compileFixture} = require('./_helpers')
 
 test('works with jade plugin, tracks dependencies', (t) => {
   return compileFixture(t, 'jade', {
-    matchers: { html: '**/*.+(html|jade)' },
+    matchers: { html: '**/*.jade' },
     posthtml: (ctx) => {
       const path = url.parse(ctx.request.split('!').slice(-1)[0]).pathname
       return { defaults: [jadePlugin({ filename: path, pretty: true })] }