Implement basic component loader

packages/components-loader/fixture.html

@@ -0,0 +1,60 @@
+<section class="mw7 center avenir">
+  <h2 class="baskerville fw1 ph3 ph0-l">News</h2>
+  <article class="bt bb b--black-10">
+    <a class="db pv4 ph3 ph0-l no-underline black dim" href="#0">
+      <div class="flex flex-column flex-row-ns">
+        <div class="pr3-ns mb4 mb0-ns w-100 w-40-ns">
+          <img src="http://mrmrs.github.io/photos/cpu.jpg" class="db" alt="Photo of a dimly lit room with a computer interface terminal.">
+        </div>
+        <div class="w-100 w-60-ns pl3-ns">
+          <h1 class="f3 fw1 baskerville mt0 lh-title">Tech Giant Invests Huge Money to Build a Computer Out of Science Fiction</h1>
+          <p class="f6 f5-l lh-copy">
+            The tech giant says it is ready to begin planning a quantum
+            computer, a powerful cpu machine that relies on subatomic particles instead
+            of transistors.
+          </p>
+          <p class="f6 lh-copy mv0">By Robin Darnell</p>
+        </div>
+      </div>
+    </a>
+  </article>
+  <article class="bb b--black-10">
+    <a class="db pv4 ph3 ph0-l no-underline black dim" href="#0">
+      <div class="flex flex-column flex-row-ns">
+        <div class="pr3-ns mb4 mb0-ns w-100 w-40-ns">
+          <img src="http://mrmrs.github.io/photos/warehouse.jpg" class="db" alt="Photo of a warehouse with stacked shelves.">
+        </div>
+        <div class="w-100 w-60-ns pl3-ns">
+          <h1 class="f3 fw1 baskerville mt0 lh-title">Warehouse Prices Are Fast on the Rise</h1>
+          <p class="f6 f5-l lh-copy">
+            A warehouse is a commercial building for storage of goods.
+            Warehouses are used by manufacturers, importers, exporters,
+            wholesalers, transport businesses, customs, etc. They are
+            usually large plain buildings in industrial areas of cities,
+            towns and villages.
+          </p>
+          <p class="f6 lh-copy mv0">By Robin Darnell</p>
+        </div>
+      </div>
+    </a>
+  </article>
+  <article class="bb b--black-10">
+    <a class="db pv4 ph3 ph0-l no-underline black dim" href="#0">
+      <div class="flex flex-column flex-row-ns">
+        <div class="pr3-ns mb4 mb0-ns w-100 w-40-ns">
+          <img src="http://mrmrs.github.io/photos/whale.jpg" class="db" alt="Photo of a whale's tale coming crashing out of the water.">
+        </div>
+        <div class="w-100 w-60-ns pl3-ns">
+          <h1 class="f3 fw1 baskerville mt0 lh-title">Giant Whale Invests Huge Money to Build a Computer Out of Plankton</h1>
+          <p class="f6 f5-l lh-copy">
+            Whale is the common name for a widely distributed and diverse
+            group of fully aquatic placental marine mammals. They are an
+            informal grouping within the infraorder Cetacea, usually
+            excluding dolphins and porpoises.
+          </p>
+          <p class="f6 lh-copy mv0">By Robin Darnell</p>
+        </div>
+      </div>
+    </a>
+  </article>
+</section>

packages/components-loader/index.js

@@ -0,0 +1,54 @@
+const fs = require('fs')
+const path = require('path')
+const postcss = require('postcss')
+const atImport = require('postcss-import')
+const customMedia = require('postcss-custom-media')
+const cssVariables = require('postcss-css-variables')
+const removeComments = require('postcss-discard-comments')
+const removeEmpty = require('postcss-discard-empty')
+const select = require('postcss-select')
+const mqPacker = require('css-mqpacker')
+const perfectionist = require('perfectionist')
+const cssstats = require('cssstats')
+const getClasses = require('get-classes-from-html')
+
+module.exports = function (content) {
+  const callback = this.async()
+  const srcPath = path.join(process.cwd(), 'node_modules/tachyons/src/tachyons.css')
+
+  const srcCss = fs.readFileSync(srcPath, 'utf8')
+  const classes = getClasses(content).map(c => `.${c}`)
+
+  const plugins = [
+    atImport(),
+    cssVariables(),
+    customMedia(),
+    select(classes),
+    removeComments({ removeAll: true }),
+    mqPacker(),
+    removeEmpty(),
+    perfectionist()
+  ]
+
+  postcss(plugins)
+    .process(srcCss, { from: srcPath })
+    .then(({ css }) => {
+      const stats = cssstats(css)
+
+      const meta = {
+        stats,
+        classes
+      }
+
+      const code = `
+        const css = ${JSON.stringify(css)}
+        const html = ${JSON.stringify(content)}
+        const meta = ${JSON.stringify(meta)}
+
+        export { css, html, meta }
+      `
+
+      return callback(null, code)
+    })
+    .catch(err => callback(err))
+}

packages/components-loader/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "tachyons-component-loader",
+  "version": "0.0.1",
+  "description": "Webpack loader for components in Tachyons docs",
+  "main": "index.js",
+  "scripts": {
+    "test": "ava -v"
+  },
+  "keywords": [
+    "css",
+    "tachyons"
+  ],
+  "license": "MIT",
+  "repository": "tachyons-css/tachyons",
+  "devDependencies": {
+    "ava": "^0.25.0",
+    "babel-loader": "^7.1.4",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-preset-env": "^1.6.1",
+    "memory-fs": "^0.4.1",
+    "tachyons": "^4.9.1",
+    "webpack": "^4.1.1"
+  },
+  "dependencies": {
+    "css-mqpacker": "^6.0.2",
+    "cssstats": "^3.2.0",
+    "get-classes-from-html": "^1.0.1",
+    "perfectionist": "^2.4.0",
+    "postcss": "^6.0.20",
+    "postcss-discard-comments": "^2.0.4",
+    "postcss-discard-empty": "^2.1.0",
+    "postcss-import": "^11.1.0",
+    "postcss-select": "^2.1.0"
+  }
+}

packages/components-loader/readme.md

@@ -0,0 +1,8 @@
+# tachyons-component-loader
+
+Webpack loader for Tachyons html components in the Tachyons docs.
+
+## Why?
+
+This allows us to process components and their metadata at compile time, sending the minimal amount of metadata and content to the client.
+It also allows components to be defined as simple html files and essentially self document themselves.

packages/components-loader/test.js

@@ -0,0 +1,57 @@
+import test from 'ava'
+import path from 'path'
+import webpack from 'webpack'
+import memoryFs from 'memory-fs'
+
+const testFixture = (fixture, options = {}) => {
+  const compiler = webpack({
+    context: __dirname,
+    entry: `./${fixture}`,
+    output: {
+      path: path.resolve(__dirname),
+      filename: 'bundle.js'
+    },
+    node: {
+      fs: 'empty'
+    },
+    module: {
+      rules: [{
+        test: /\.html?$/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              presets: [
+                "env",
+              ],
+              plugins: [
+                "transform-runtime"
+              ]
+            }
+          },
+          {
+            loader: path.resolve(__dirname, './')
+          }
+        ]
+      }]
+    }
+  })
+
+  compiler.outputFileSystem = new memoryFs()
+
+  return new Promise((resolve, reject) => {
+    compiler.run((err, stats) => {
+      if (err) reject(err)
+
+      resolve(stats)
+    })
+  })
+}
+
+test('it loads markdown and returns a component', async t => {
+  const stats = await testFixture('fixture.html')
+
+  const result = stats.toJson().modules[0].source
+
+  t.snapshot(result)
+})