Super primitive mix setup

docs/mix-manifest.json

@@ -0,0 +1,4 @@
+{
+  "/mix.js": "/mix.js",
+  "/source/css/main.css": "/source/css/main.css"
+}

docs/package.json

@@ -1,9 +1,16 @@
 {
+  "scripts": {
+      "dev": "npm run development && jigsaw build",
+      "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+      "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+      "watch-poll": "npm run watch -- --watch-poll",
+      "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
+      "prod": "npm run production && jigsaw build production",
+      "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
+  },
   "private": true,
   "devDependencies": {
-    "gulp": "^3.8.8",
-    "hasbin": "^1.2.3",
-    "laravel-elixir": "^6.0.0-15",
-    "yargs": "^4.6.0"
+    "cross-env": "^3.2.3",
+    "laravel-mix": "0.*"
   }
 }

docs/webpack.mix.js

@@ -0,0 +1,19 @@
+const mix = require('laravel-mix');
+
+/*
+|--------------------------------------------------------------------------
+| Mix Asset Management
+|--------------------------------------------------------------------------
+|
+| Mix provides a clean, fluent API for defining some Webpack build steps
+| for your Laravel application. By default, we are compiling the Sass
+| file for the application as well as bundling up all the JS files.
+|
+*/
+
+mix.less('source/_assets/less/main.less', 'source/css')
+  // .options({
+  //   postCss: [
+  //     require('./tailwind')(require('./resources/assets/less/tailwind.js')),
+  //   ]
+  // })

package.json

@@ -9,6 +9,7 @@
   ],
   "scripts": {},
   "dependencies": {
+    "lodash": "^4.17.4",
     "normalize.css": "^6.0.0",
     "postcss": "^6.0.9",
     "postcss-cssnext": "^3.0.2",

src/tailwind.js

@@ -0,0 +1,42 @@
+const _ = require('lodash');
+const postcss = require('postcss');
+const cssnext = require('postcss-cssnext');
+
+const findMixin = function (css, mixin) {
+  let match;
+
+  css.walkRules((rule) => {
+    if (_.trimStart(rule.selector, '.') === mixin) {
+      match = rule
+      return false
+    }
+  })
+
+  return match.clone().nodes
+}
+
+module.exports = postcss.plugin('tailwind', function (options) {
+  return function (css) {
+    options = options || {}
+
+    // Add custom media query declarations to top of node tree
+
+    // Generate utilities
+    // css.
+
+    // Substitute component mixins
+    css.walkRules(function (rule) {
+      rule.walkAtRules('class', atRule => {
+        const mixins = _.trim(atRule.params, ` "'`).split(' ')
+        const decls = _.flatMap(mixins, (mixin) => {
+          return findMixin(css, mixin)
+        })
+
+        atRule.before(decls)
+        atRule.remove()
+      })
+    })
+
+    return cssnext.process(css)
+  }
+})