Merge pull request #997 from devtools-html/components-postCSS

devtools-components postCSS config

Author: codehag

packages/devtools-components/package.json

@@ -1,12 +1,12 @@
 {
   "name": "devtools-components",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "DevTools HTML Components",
   "main": "index.js",
   "scripts": {
     "copy-assets": "node bin/copy-assets",
     "license-check": "devtools-license-check",
-    "storybook": "start-storybook -p 9002 -c .storybook -s ./src",
+    "storybook": "NODE_ENV=storybook start-storybook -p 9002 -c .storybook -s ./src",
     "test": "jest"
   },
   "author": "Jason Laster",

packages/devtools-components/postcss.config.js

@@ -2,5 +2,36 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-// Dumb export so launchpad does not throw.
-module.exports = () => ({});
+const mapUrl = require("postcss-url-mapper");
+const MC_PATH = "chrome://devtools/skin/images/devtools-components/";
+const EXPRESS_PATH = "/devtools-components/images/";
+
+function mapUrlProduction(url, type) {
+  return url.replace("/images/arrow.svg", MC_PATH + "arrow.svg");
+}
+
+function mapUrlDevelopment(url) {
+  return url.replace("/images/arrow.svg", EXPRESS_PATH + "arrow.svg");
+}
+
+module.exports = ({ file, options, env }) => {
+  // Here we don't want to do anything for storybook since we serve the images thanks
+  // to the `-s ./src` option in the `storybook` command (see package.json).
+  if (env === "storybook") {
+    return {};
+  }
+
+  // This will be used when creating a bundle for mozilla-central (from devtools-reps
+  // or debugger.html).
+  if (env === "production") {
+    return {
+      plugins: [mapUrl(mapUrlProduction)]
+    };
+  }
+
+  // This will be used when using this module in launchpad mode. We set a unique path so
+  // we can serve images from express.
+  return {
+    plugins: [mapUrl(mapUrlDevelopment)]
+  };
+};

packages/devtools-components/src/tree.css

@@ -22,10 +22,6 @@
   user-select: none;
 }
 
-.tree button {
-  display: block;
-}
-
 .tree .tree-node {
   display: flex;
 }