chore(project): fix build issues on windows (#4823)

* fix(bundler): inline command path resolution in windows * fix(elements): build tasks path resolution in windows * fix(icon-build-helpers): react & vanilla builders path resolution in windows * fix(icons-vue): path resolution in windows & improve logging * fix(bundler): inconsistent sass module finder & code styling issues * chore: use native path separator * fix: moduleName prefixing logic * chore: improve root directory check logic Co-authored-by: mecolela <[email protected]> Co-authored-by: Josh Black <[email protected]>
carbon-design-system · Jan 13, 2020 · 9f02b35 · 9f02b35
1 parent e03967a
commit 9f02b35
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 20 deletions.
diff --git a/packages/bundler/src/commands/inline.js b/packages/bundler/src/commands/inline.js
@@ -11,7 +11,9 @@ const fs = require('fs-extra');
 const klaw = require('klaw-sync');
 const os = require('os');
 const path = require('path');
+const isWin = process.platform === 'win32';
 const replace = require('replace-in-file');
+const { reporter } = require('@carbon/cli-reporter');
 
 const tmpDir = os.tmpdir();
 
@@ -24,12 +26,14 @@ async function inline(options, info) {
 
   await Promise.all([fs.remove(inlineFolder), fs.remove(vendorFolder)]);
 
+  reporter.info('Inlining sass dependencies');
   await inlineSassDependencies(
     packageJsonPath,
     sourceFolder,
     vendorFolder,
     cwd
   );
+  reporter.success('Done');
 }
 
 async function inlineSassDependencies(
@@ -50,8 +54,9 @@ async function inlineSassDependencies(
   ];
   const inlinedDependencies = (await Promise.all(
     allPossibleDependencies.map(async dependency => {
-      const [packageFolder, scssFolder] = await findSassModule(dependency, cwd);
-      if (packageFolder) {
+      const modules = await findSassModule(dependency, cwd);
+      if (modules) {
+        const [scssFolder] = modules;
         const dependencyOutputFolder = path.join(vendorFolder, dependency);
 
         await fs.copy(scssFolder, dependencyOutputFolder);
@@ -84,11 +89,7 @@ async function inlineSassDependencies(
         return false;
       }
 
-      if (path.basename(src) === 'index.scss') {
-        return false;
-      }
-
-      return true;
+      return path.basename(src) !== 'index.scss';
     },
   });
   await fs.copy(tmpFolder, inlineFolder);
@@ -113,7 +114,9 @@ async function inlineSassDependencies(
         files: file.path,
         from: REPLACE_REGEX,
         to(_, match) {
-          return `@import '${relativeImportPath}/${match}`;
+          return `@import '${
+            isWin ? relativeImportPath.replace('\\', '/') : relativeImportPath
+          }/${match}`;
         },
       });
     })
@@ -123,20 +126,20 @@ async function inlineSassDependencies(
 function findSassModule(packageName, cwd) {
   let currentDirectory = cwd;
 
-  while (currentDirectory !== '/') {
+  while (currentDirectory !== path.dirname(currentDirectory)) {
     const nodeModulesFolder = path.join(currentDirectory, 'node_modules');
     const packageFolder = path.join(nodeModulesFolder, packageName);
     const scssFolder = path.join(packageFolder, 'scss');
     const packageJsonPath = path.join(packageFolder, 'package.json');
 
     if (fs.existsSync(scssFolder)) {
-      return [packageFolder, scssFolder, packageJsonPath];
+      return [scssFolder, packageFolder, packageJsonPath];
     }
 
     currentDirectory = path.dirname(currentDirectory);
   }
 
-  return [false];
+  return false;
 }
 
 module.exports = inline;
diff --git a/packages/elements/tasks/build.js b/packages/elements/tasks/build.js
@@ -40,7 +40,7 @@ async function build() {
   const paths = klaw(BUNDLE_DIR, {
     nodir: true,
     filter(item) {
-      const paths = item.path.split('/');
+      const paths = item.path.split(path.sep);
       const filename = paths[paths.length - 1];
       const folder = paths[paths.length - 3];
 

diff --git a/packages/icon-build-helpers/src/builders/react/builder.js b/packages/icon-build-helpers/src/builders/react/builder.js
@@ -8,6 +8,7 @@
 'use strict';
 
 const { camel } = require('change-case');
+const { reporter } = require('@carbon/cli-reporter');
 const fs = require('fs-extra');
 const path = require('path');
 const { rollup } = require('rollup');
@@ -71,6 +72,7 @@ ${modules.map(({ source }) => `export ${source}`).join('\n')}
 export { Icon };
 `;
 
+  reporter.info('Building components');
   const bundle = await rollup({
     input: '__entrypoint__.js',
     external,
@@ -106,6 +108,7 @@ export { Icon };
     })
   );
 
+  reporter.info('Creating aliases');
   // Create aliases for `@carbon/icons-react/es/<icon-name>/<size>`
   await Promise.all(
     meta.map(async icon => {
@@ -114,7 +117,7 @@ export { Icon };
         // The length of this is determined by the number of directories from
         // our `outputOptions` minus 1 for the bundle type (`es` for example)
         // and minus 1 for the filename as it does not count as a directory jump
-        length: outputOptions.file.split('/').length - 2,
+        length: outputOptions.file.split(path.sep).length - 2,
       })
         .fill('..')
         .join('/');
@@ -141,7 +144,7 @@ export default ${moduleName};
     // Drop the first part of `outputOptions.file` as it contains the `es/`
     // directory
     const commonjsFilepath = outputOptions.file
-      .split('/')
+      .split(path.sep)
       .slice(1)
       .join('/');
     const { source: component } = createIconComponent(moduleName, descriptor);
@@ -165,6 +168,7 @@ export default ${moduleName};`;
     };
   }, {});
 
+  reporter.info('Bundling Javascript modules');
   // Using the mapping of file path to file source, we can specify our input to
   // rollup by formatting the filepath so that rollup outputs the file to the
   // correct place. The location is going to match the key that we use in the
@@ -200,6 +204,7 @@ export default ${moduleName};`;
     ],
   });
 
+  reporter.info('Writing to destination');
   await commonjsBundles.write({
     dir: 'lib',
     format: 'cjs',

diff --git a/packages/icon-build-helpers/src/builders/vanilla/builder.js b/packages/icon-build-helpers/src/builders/vanilla/builder.js
@@ -209,13 +209,16 @@ async function builder(source, { cwd } = {}) {
 function getModuleName(name, size, prefixParts, descriptor) {
   const width = parseInt(descriptor.attrs.width, 10);
   const height = parseInt(descriptor.attrs.height, 10);
-  const prefix = prefixParts
+  let prefix = prefixParts
     .filter(size => isNaN(size))
     .map(pascal)
     .join('');
   const isGlyph = width < 16 || height < 16;
 
   if (prefix !== '') {
+    if (prefix.match(/^\d/)) {
+      prefix = '_' + prefix;
+    }
     if (!size) {
       if (isGlyph) {
         return prefix + pascal(name) + 'Glyph';

diff --git a/packages/icons-vue/tasks/build.js b/packages/icons-vue/tasks/build.js
@@ -8,10 +8,12 @@
 'use strict';
 
 const meta = require('@carbon/icons/build-info.json');
+const { reporter } = require('@carbon/cli-reporter');
 const { rollup } = require('rollup');
 const babel = require('rollup-plugin-babel');
 const virtual = require('./plugins/virtual');
 const { createIconComponent } = require('./createIconComponent');
+const isWin = process.platform === 'win32';
 
 const BUNDLE_FORMATS = [
   {
@@ -46,11 +48,14 @@ const babelConfig = {
  * building icon components built on top of the `<Icon>` primitive in `src`.
  */
 async function build() {
+  reporter.info('Creating components');
   const modules = meta.map(icon => {
     const { source } = createIconComponent(icon.moduleName, icon.descriptor);
     return {
       moduleName: icon.moduleName,
-      filepath: icon.outputOptions.file.replace(/^es\//g, '').slice(0, -3),
+      filepath: icon.outputOptions.file
+        .replace(isWin ? /^es\\/g : /^es\//g, '')
+        .slice(0, -3),
       source,
     };
   });
@@ -64,6 +69,7 @@ async function build() {
   },
 }`;
 
+  reporter.info('Bundling may take a while...');
   const bundle = await rollup({
     input: {
       index: '__entrypoint__.js',
@@ -91,6 +97,7 @@ async function build() {
     ],
   });
 
+  reporter.info('Writing out to files');
   await Promise.all(
     BUNDLE_FORMATS.map(({ format, dir }) => {
       return bundle.write({
@@ -101,7 +108,11 @@ async function build() {
   );
 }
 
-build().catch(error => {
-  // eslint-disable-next-line no-console
-  console.error(error);
-});
+build()
+  .then(() => {
+    reporter.success('Done!');
+  })
+  .catch(error => {
+    // eslint-disable-next-line no-console
+    console.error(error);
+  });