chore(build): make dev Sass build faster

We used Sass importer because our dev env had `carbon-addons-cloud` code with circular dependency back to this repository (`carbon-components`). However, we found that it caused significant slowdown of our Sass dev build to an unacceptable level for change-style-and-see workflow. This change puts a copy of such `carbon-addons-cloud` code in this repository (as a dev-env-specific code) so we no longer need Sass importer, which yields 5x `sass:dev` task performance. In future, we should migrate from that code to UI shell side nav. Refs #1502 and #1709.
carbon-design-system · Feb 1, 2019 · caf34ed · caf34ed
1 parent fe28ed6
commit caf34ed
Show file tree

Hide file tree

Showing 3 changed files with 380 additions and 6 deletions.
diff --git a/demo/scss/_interior-left-nav.scss b/demo/scss/_interior-left-nav.scss
@@ -0,0 +1,379 @@
+//
+// Copyright IBM Corp. 2016, 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.
+//
+
+//-----------------------------
+// Interior Left Nav
+//-----------------------------
+
+@import '../../src/globals/scss/vars';
+@import '../../src/globals/scss/helper-mixins';
+@import '../../src/globals/scss/functions';
+@import '../../src/globals/scss/layer';
+@import '../../src/globals/scss/import-once';
+@import '../../src/globals/scss/css--reset';
+@import '../../src/globals/scss/css--typography';
+
+@mixin interior-left-nav {
+  .#{$prefix}--interior-left-nav {
+    @include reset;
+    @include font-family;
+    width: rem(250px);
+    position: fixed;
+    top: rem(90px);
+    height: 100%;
+    background-color: $color__white;
+    border-right: 1px solid $color__gray-1;
+
+    &--v6 {
+      top: rem(50px);
+    }
+
+    .left-nav-list {
+      list-style: none;
+      display: flex;
+      flex-direction: column;
+      background-color: $color__white;
+      padding-top: 1.5rem;
+      overflow: auto;
+
+      &__item {
+        cursor: pointer;
+        width: 100%;
+        padding: 0;
+
+        &:focus {
+          outline: 1px solid transparent;
+
+          &:not(.left-nav-list__item--has-children) {
+            background-color: $color__gray-2;
+          }
+
+          .left-nav-list__item-link {
+            color: $color__blue-51;
+            text-decoration: underline;
+          }
+
+          .left-nav-list--nested .left-nav-list__item-link {
+            color: $color__blue-90;
+            text-decoration: none;
+          }
+        }
+
+        &--active {
+          & > .left-nav-list__item-link {
+            background-color: $color__gray-2;
+            color: $color__blue-51;
+            font-weight: 600;
+          }
+        }
+
+        &-link {
+          @include typescale('zeta');
+          color: $color__blue-90;
+          font-weight: 400;
+          position: relative;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          text-decoration: none;
+          transition: background-color $transition--base;
+          padding: 0.75rem 1.5rem 0.75rem rem(59px);
+        }
+
+        &-icon {
+          display: flex;
+
+          .#{$prefix}--interior-left-nav__icon {
+            fill: $color__blue-51;
+            width: rem(8px);
+            height: rem(8px);
+            transition: $transition--base;
+          }
+        }
+
+        &--expanded {
+          .left-nav-list--nested {
+            max-height: 20rem;
+            transition: $transition--expansion $carbon--ease-in;
+            overflow: inherit;
+            opacity: 1;
+
+            .left-nav-list__item {
+              opacity: 1;
+            }
+          }
+
+          & > .left-nav-list__item-link {
+            color: $color__blue-51;
+          }
+
+          .left-nav-list__item-icon .#{$prefix}--interior-left-nav__icon {
+            transform: rotate(180deg);
+          }
+        }
+
+        &:not(.left-nav-list__item--has-children):hover {
+          & > .left-nav-list__item-link {
+            background-color: $color__gray-2;
+            color: $color__blue-51;
+          }
+        }
+      }
+
+      &__item--has-children {
+        .left-nav-list__item-link {
+          padding-right: 1.5rem;
+        }
+
+        &:hover {
+          > .left-nav-list__item-link {
+            color: $color__blue-51;
+          }
+        }
+      }
+    }
+
+    .left-nav-list--nested {
+      max-height: 0;
+      overflow: hidden;
+      transition: $transition--expansion $carbon--ease-out;
+      padding: 0;
+      opacity: 0;
+
+      .left-nav-list__item {
+        width: 100%;
+        position: relative;
+        padding: 0;
+        transition: $transition--base;
+        opacity: 0;
+
+        &-link {
+          @include typescale('zeta');
+          color: $color__blue-90;
+          padding: 0.75rem 1.35rem 0.75rem 4.5rem;
+          font-weight: 400;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+
+          &:focus {
+            outline: 1px solid transparent;
+            background-color: $color__gray-2;
+            color: $color__blue-51;
+            text-decoration: underline;
+          }
+        }
+
+        &:hover {
+          outline: none;
+        }
+
+        &--active {
+          color: $color__blue-51;
+          background-color: $color__gray-2;
+
+          & > .left-nav-list__item-link {
+            font-weight: 600;
+            color: $color__blue-51;
+          }
+        }
+      }
+    }
+  }
+
+  .#{$prefix}--interior-left-nav--collapseable {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    width: rem(200px);
+    padding-top: rem(20px);
+    transition: background-color 300ms $carbon--standard-easing, width 300ms $carbon--standard-easing;
+
+    ul,
+    li,
+    hr,
+    .#{$prefix}--interior-left-nav-collapse__target {
+      opacity: 1;
+    }
+
+    .left-nav-list,
+    .left-nav-list__item-link {
+      background-color: inherit;
+    }
+
+    .left-nav-list__item--expanded > .left-nav-list {
+      padding-top: rem(6px);
+      padding-bottom: rem(6px);
+    }
+
+    .left-nav-list__item--expanded > .left-nav-list__item-link {
+      color: $color__blue-90;
+    }
+
+    .left-nav-line {
+      margin: rem(24px) rem(20px);
+      border: 1px solid $color__gray-1;
+    }
+
+    .left-nav-list {
+      padding-top: 0;
+
+      @include light-ui {
+        background-color: inherit;
+      }
+    }
+
+    .left-nav-list__item--active > .left-nav-list__item-link {
+      position: relative;
+      background-color: transparent;
+
+      &:before {
+        top: 0;
+        position: absolute;
+        background-color: $color__blue-51;
+        height: 100%;
+        left: 0;
+        width: 4px;
+        content: '';
+      }
+    }
+
+    .left-nav-list__item {
+      margin-bottom: rem(5px);
+    }
+
+    .left-nav-list__item-link,
+    .left-nav-list--nested .left-nav-list__item-link {
+      padding: rem(9px) rem(20px);
+    }
+
+    .left-nav-list--nested .left-nav-list__item-link {
+      @include typescale('omega');
+      padding-left: rem(40px);
+    }
+
+    .#{$prefix}--interior-left-nav-collapse {
+      cursor: pointer;
+      background-color: rgba($color__blue-51, 0.1);
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      margin-top: auto;
+      margin-bottom: rem(90px);
+      padding: rem(14px) rem(16px);
+
+      &--v6 {
+        margin-bottom: rem(50px);
+      }
+
+      &:hover,
+      &:focus {
+        background-color: rgba($color__blue-51, 0.3);
+      }
+    }
+
+    .#{$prefix}--interior-left-nav-collapse__target {
+      margin-left: rem(10px);
+      margin-right: rem(10px);
+    }
+
+    .#{$prefix}--interior-left-nav-collapse__link {
+      @include typescale('zeta');
+      display: flex;
+      align-items: center;
+      text-decoration: none;
+      padding: 0.25rem;
+
+      &:focus {
+        @include focus-outline('border');
+      }
+    }
+
+    .#{$prefix}--interior-left-nav-collapse__arrow {
+      transform: rotate(0);
+      fill: $color__blue-51;
+      height: 12px;
+      width: 12px;
+    }
+  }
+
+  .#{$prefix}--interior-left-nav--collapsing,
+  .#{$prefix}--interior-left-nav--collapsed {
+    width: rem(48px);
+    transition: background-color 300ms $carbon--standard-easing, width 300ms $carbon--standard-easing;
+    cursor: pointer;
+    background-color: rgba($color__blue-51, 0.1);
+
+    &:hover,
+    &:focus {
+      background-color: rgba($color__blue-51, 0.3);
+    }
+
+    ul,
+    li,
+    hr,
+    .#{$prefix}--interior-left-nav-collapse__target {
+      opacity: 0;
+      transition: opacity 300ms $carbon--standard-easing;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+
+    .#{$prefix}--interior-left-nav-collapse {
+      background-color: transparent;
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
+
+    .#{$prefix}--interior-left-nav-collapse__arrow {
+      transform: rotate(180deg);
+      transition: transform 300ms $carbon--standard-easing;
+    }
+  }
+
+  .#{$prefix}--interior-left-nav--collapsed {
+    ul,
+    li,
+    hr,
+    .#{$prefix}--interior-left-nav-collapse__target {
+      display: none;
+    }
+
+    .#{$prefix}--interior-left-nav-collapse {
+      justify-content: center;
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+
+  .#{$prefix}--interior-left-nav--expanding {
+    width: rem(200px);
+    transition: width 300ms $carbon--standard-easing;
+    background-color: #fff;
+
+    ul,
+    li,
+    hr,
+    .#{$prefix}--interior-left-nav-collapse__target {
+      opacity: 1;
+      transition: opacity $transition--expansion $carbon--standard-easing;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+
+    .#{$prefix}--interior-left-nav-collapse__arrow {
+      transform: rotate(0deg);
+      transition: transform 300ms $carbon--standard-easing;
+    }
+  }
+}
+
+@include exports('interior-left-nav') {
+  @include interior-left-nav;
+}
diff --git a/demo/scss/demo.scss b/demo/scss/demo.scss
@@ -1,5 +1,5 @@
 // Used for sidebar in dev environment
-@import 'carbon-addons-cloud/scss/components/InteriorLeftNav/interior-left-nav';
+@import 'interior-left-nav';
 @import '../../src/globals/scss/styles';
 @import '../../src/globals/scss/functions';
 @import './_vars.scss';

diff --git a/gulpfile.js b/gulpfile.js
@@ -353,11 +353,6 @@ gulp.task('sass:dev', () =>
     .pipe(
       sass({
         includePaths: ['node_modules'],
-        importer: (url, prev, done) => {
-          done({
-            file: url.replace(/^carbon-components\/scss\//, `${path.resolve(__dirname, 'src')}/`),
-          });
-        },
         outputStyle: 'expanded',
       }).on('error', sass.logError)
     )