chore(preconstruct): inline css via babel config, add themes package

tooling/inject-css-babel-plugin.js

@@ -0,0 +1,45 @@
+const fs = require('fs');
+const path = require('path');
+const postcss = require('postcss');
+const autoprefixer = require('autoprefixer');
+const nested = require('postcss-nested');
+
+function getStyleInject(cssString) {
+  return `
+  (function(css) {
+    if (!css || typeof document === 'undefined') return;
+
+    const head = document.head || document.getElementsByTagName('head')[0];
+    const style = document.createElement('style');
+  
+    head.appendChild(style);
+  
+    style.appendChild(document.createTextNode(css));
+  })("${cssString}")
+  `;
+}
+
+module.exports = function (babel) {
+  return {
+    name: 'inject-css-babel-plugin',
+    visitor: {
+      ImportDeclaration(item, state) {
+        if (!item.node.source.value.includes('.css')) {
+          return;
+        }
+
+        const importFilePath = path.resolve(
+          state.file.opts.filename,
+          '..',
+          item.node.source.value
+        );
+
+        const css = fs.readFileSync(importFilePath).toString();
+        const result = postcss([autoprefixer, nested]).process(css);
+        const minified = result.css.replace(/\n/g, '');
+
+        item.replaceWithSourceString(getStyleInject(minified));
+      },
+    },
+  };
+};