Posthtml & Other Restructures

lib/config.js

@@ -1,14 +1,13 @@
 const path = require('path')
 const qs = require('querystring')
 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')
 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')
@@ -45,21 +44,14 @@ module.exports = class Config {
       root: Joi.string().required(),
       env: Joi.string(),
       matchers: Joi.object().default().keys({
-        jade: Joi.string().default('**/*.jade'),
-        css: Joi.string().default('**/*.sss'),
-        js: Joi.string().default('**/*.js'),
-        static: Joi.string().default('!**/*.+(js|sss|jade)')
+        html: Joi.string().default('**/*.html'),
+        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()
-      }),
-      css: Joi.object().default({}),
+      postcss: Joi.alternatives().try(Joi.object(), Joi.func()).default({ plugins: [] }),
+      posthtml: Joi.alternatives().try(Joi.object(), Joi.func()).default({ defaults: [] }),
       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([]),
@@ -175,11 +167,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']
 
     // `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
@@ -216,16 +208,16 @@ 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,
         loader: 'babel-loader',
         _core: 'js'
       }, {
         exclude: reIgnores,
-        loader: 'jade-static-loader',
-        _core: 'jade'
+        loader: 'source-loader!posthtml-loader',
+        _core: 'html'
       }, {
         exclude: reIgnores,
         loader: 'source-loader',
@@ -235,22 +227,12 @@ module.exports = class Config {
 
     this.module.loaders = spikeLoaders.concat(opts.module.loaders)
 
-    this.postcss = function (wp) {
-      opts.postcss.plugins.unshift(postcssImport({ addDependencyTo: wp }))
-      return opts.postcss
-    }
-
-    this.jade = Object.assign({
-      locals: opts.locals,
-      pretty: true
-    }, opts.jade)
-
     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) => {

lib/plugins/css_plugin.js

@@ -2,11 +2,9 @@
  * @module CSSPlugin
  */
 
-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 {
@@ -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(/\.[^/.]+$/, '.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 }
         }

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
   }

lib/plugins/jade_plugin.js → 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()
       })
     })

package.json

@@ -9,26 +9,23 @@
   },
   "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",
-    "jade": "^1.11.0",
-    "jade-static-loader": "0.2.0",
-    "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",
-    "require-from-string": "^1.2.0",
+    "posthtml-loader": "^0.9.0",
     "rimraf": "^2.5.2",
     "source-loader": "^0.2.0",
     "spike-util": "0.2.0",
@@ -37,16 +34,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",