feat(elements): flatten bundled output (#284)

* feat(elements): flatten bundled output

* fix(elements): remove early return from build

* fix(elements): update replacement to use regex

* fix(elements): update regex to include hyphens and more words

* chore(elements): update local gitignore patterns

packages/elements/.gitignore

@@ -1 +1,7 @@
-scss/bundled
+# Reference for gitignore patterns:
+# https://stackoverflow.com/questions/5533050/gitignore-exclude-folder-but-include-specific-subfolder
+!scss/
+
+scss/*
+!scss/elements.scss
+!scss/index.scss

packages/elements/package.json

@@ -26,7 +26,7 @@
   },
   "scripts": {
     "build": "yarn clean && bundler bundle src/index.js --name CarbonElements && node tasks/build.js && bundler check 'scss/*.scss'",
-    "clean": "rimraf es lib scss/bundled umd"
+    "clean": "rimraf es lib umd && node tasks/clean.js"
   },
   "dependencies": {
     "@carbon/colors": "0.0.1-alpha.29",

packages/elements/scss/elements.scss

@@ -1,7 +1,9 @@
-@import '@carbon/import-once/scss/import-once';
-@import '@carbon/colors/scss/colors';
-@import '@carbon/themes/scss/themes';
-@import '@carbon/layout/scss/layout';
-@import '@carbon/grid/scss/grid';
-@import '@carbon/type/scss/type';
-@import '@carbon/motion/scss/motion';
+// The files below are generated using the `yarn build` stage for this
+// package
+@import './import-once/import-once';
+@import './colors/colors';
+@import './themes/themes';
+@import './layout/layout';
+@import './grid/grid';
+@import './type/type';
+@import './motion/motion';

packages/elements/scss/index.scss

@@ -0,0 +1,7 @@
+@import '@carbon/import-once/scss/import-once';
+@import '@carbon/colors/scss/colors';
+@import '@carbon/themes/scss/themes';
+@import '@carbon/layout/scss/layout';
+@import '@carbon/grid/scss/grid';
+@import '@carbon/type/scss/type';
+@import '@carbon/motion/scss/motion';

packages/elements/tasks/build.js

@@ -14,7 +14,7 @@ const replace = require('replace-in-file');
 const packageJson = require('../package.json');
 
 const WORKSPACE_NODE_MODULES = path.resolve(__dirname, '../../../node_modules');
-const BUNDLE_DIR = path.resolve(__dirname, '../scss/bundled');
+const BUNDLE_DIR = path.resolve(__dirname, '../scss');
 const dependencies = Object.keys(packageJson.dependencies).map(key => {
   return [key, path.join(WORKSPACE_NODE_MODULES, key)];
 });
@@ -27,26 +27,47 @@ async function build() {
       if (!(await fs.pathExists(scssFolder))) {
         return;
       }
-
-      await fs.copy(scssFolder, path.join(BUNDLE_DIR, dependency, 'scss'));
+      await fs.copy(
+        scssFolder,
+        path.join(BUNDLE_DIR, path.basename(dependencyPath))
+      );
     })
   );
 
   // Replace `@carbon` imports with relative paths
   const paths = klaw(BUNDLE_DIR, {
     nodir: true,
+    filter(item) {
+      const paths = item.path.split('/');
+      const filename = paths[paths.length - 1];
+      const folder = paths[paths.length - 3];
+
+      if (folder === 'elements') {
+        if (filename === 'index.scss' || filename === 'elements.scss') {
+          return false;
+        }
+      }
+
+      return true;
+    },
   });
 
   await Promise.all(
     paths.map(async file => {
       const relativeImportPath = path.relative(
-        file.path,
-        path.join(BUNDLE_DIR, '@carbon')
+        path.dirname(file.path),
+        BUNDLE_DIR
       );
       await replace({
         files: file.path,
-        from: /\@carbon/g,
-        to: `${relativeImportPath}/@carbon`,
+        // Regex should match the following package patterns:
+        // @carbon/packagename
+        // @carbon/package-name
+        // Where the package name is the captured group in `match`
+        from: /\@carbon\/(\w+[-\w]*)\/scss/g,
+        to(_, match) {
+          return `${relativeImportPath}/${match}`;
+        },
       });
     })
   );

packages/elements/tasks/clean.js

@@ -0,0 +1,30 @@
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const fs = require('fs-extra');
+const path = require('path');
+const packageJson = require('../package.json');
+
+const WORKSPACE_NODE_MODULES = path.resolve(__dirname, '../../../node_modules');
+const BUNDLE_DIR = path.resolve(__dirname, '../scss');
+const dependencies = Object.keys(packageJson.dependencies).map(key => {
+  return [key, path.join(WORKSPACE_NODE_MODULES, key)];
+});
+
+async function clean() {
+  await Promise.all(
+    dependencies.map(([dependency, dependencyPath]) => {
+      return fs.remove(path.join(BUNDLE_DIR, path.basename(dependencyPath)));
+    })
+  );
+}
+
+clean().catch(error => {
+  console.error(error);
+});