Refactor: CSS handling (#2344)

* refactor(css): only load base styles, add css task, cleanup exports
* style(base): add edge label bg
* refactor(css): use css-utils
* feat(core): add Panel component
* refactor(background): cleanup
* refactor(css-handling): cleanup

tooling/inject-css-babel-plugin.js

@@ -1,45 +0,0 @@
-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));
-      },
-    },
-  };
-};

tooling/postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: [
+    require('postcss-nested'),
+    require('autoprefixer'),
+    require('postcss-import'),
+  ],
+};