perf: lazy load component styles

baloise · Oct 31, 2022 · 2f90efe · 2f90efe
1 parent 9ac37b1
commit 2f90efe
Show file tree

Hide file tree

Showing 70 changed files with 176 additions and 82 deletions.
diff --git a/packages/components/src/components/bal-accordion/bal-accordion.sass b/packages/components/src/components/bal-accordion/bal-accordion.sass
@@ -1,77 +1,6 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
+
 bal-accordion,
 .bal-accordion
   position: static
   display: block
-
-  // bal-accordion {
-//   display: block;
-//   border-radius: $radius-large;
-
-//   & > bal-button,
-//   & bal-button > button {
-//     border-radius: $radius-large;
-//   }
-
-//   span.trigger-label {
-//     display: flex;
-//     justify-content: center;
-//     align-items: center;
-
-//     span.label {
-//       font-size: $size-normal;
-//       line-height: $size-normal;
-//     }
-//   }
-
-//   bal-icon {
-//     margin-right: 8px;
-//   }
-
-//   .accordion-content.is-info {
-//     border-top: 1px solid $blue-2;
-//   }
-
-//   .accordion-content {
-//     border-bottom-left-radius: $radius-large;
-//     border-bottom-right-radius: $radius-large;
-//   }
-
-//   &.bal-accordion-light {
-//     border-bottom: 2px solid $blue;
-//     border-radius: 0;
-
-//     button {
-//       padding-left: 0;
-//       padding-right: 0;
-//       border: none !important;
-
-//       span.button-label {
-//         flex: 1;
-//         text-align: left;
-//       }
-
-//       bal-icon.icon-right {
-//         margin-right: 0px !important;
-//       }
-
-//       &:hover,
-//       &.is-hovered,
-//       &:focus,
-//       &:focus-visible,
-//       &.is-focused,
-//       &:active,
-//       &.is-active {
-//         background: transparent !important;
-//       }
-//     }
-//   }
-
-//   &:not(.bal-accordion-light) {
-//     .accordion-content {
-//       & > .p-5 {
-//         padding-top: 0 !important;
-//         margin-bottom: 0 !important;
-//       }
-//     }
-//   }
-// }
diff --git a/packages/components/src/components/bal-accordion/bal-accordion.tsx b/packages/components/src/components/bal-accordion/bal-accordion.tsx
@@ -4,6 +4,9 @@ import { Events } from '../../types'
 
 @Component({
   tag: 'bal-accordion',
+  styleUrls: {
+    css: 'bal-accordion.sass',
+  },
 })
 export class Accordion {
   private didInit = false

diff --git a/packages/components/src/components/bal-button/bal-button.sass b/packages/components/src/components/bal-button/bal-button.sass
@@ -1,3 +1,5 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
+
 bal-button,
 .bal-button
   display: inline-block

diff --git a/packages/components/src/components/bal-button/bal-button.tsx b/packages/components/src/components/bal-button/bal-button.tsx
@@ -3,6 +3,9 @@ import { Props } from '../../types'
 
 @Component({
   tag: 'bal-button',
+  styleUrls: {
+    css: 'bal-button.sass',
+  },
 })
 export class Button implements ComponentInterface {
   @Element() el!: HTMLElement

diff --git a/packages/components/src/components/bal-card/bal-card.sass b/packages/components/src/components/bal-card/bal-card.sass
@@ -1,3 +1,5 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
+
 =card-spacing($spacing: 1rem)
   & > :not(bal-badge):not(bal-tag):first-child
     padding-top: $spacing

diff --git a/packages/components/src/components/bal-card/bal-card.tsx b/packages/components/src/components/bal-card/bal-card.tsx
@@ -4,6 +4,9 @@ import { Props } from '../../types'
 
 @Component({
   tag: 'bal-card',
+  styleUrls: {
+    css: 'bal-card.sass',
+  },
 })
 export class BalCard {
   /**

diff --git a/packages/components/src/components/bal-close/bal-close.sass b/packages/components/src/components/bal-close/bal-close.sass
@@ -1,3 +1,5 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
+
 +block(close)
   position: static
   display: inline-block

diff --git a/packages/components/src/components/bal-close/bal-close.tsx b/packages/components/src/components/bal-close/bal-close.tsx
@@ -5,6 +5,9 @@ import { BEM } from '../../utils/bem'
 
 @Component({
   tag: 'bal-close',
+  styleUrls: {
+    css: 'bal-close.sass',
+  },
 })
 export class Close implements ComponentInterface {
   @Element() el!: HTMLElement

diff --git a/packages/components/src/components/bal-data/bal-data.sass b/packages/components/src/components/bal-data/bal-data.sass
@@ -1,3 +1,5 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
+
 +block(data)
   position: relative
   display: flex

diff --git a/packages/components/src/components/bal-data/bal-data.tsx b/packages/components/src/components/bal-data/bal-data.tsx
@@ -3,6 +3,9 @@ import { BEM } from '../../utils/bem'
 
 @Component({
   tag: 'bal-data',
+  styleUrls: {
+    css: 'bal-data.sass',
+  },
 })
 export class Data {
   @Element() element!: HTMLElement

diff --git a/packages/components/src/components/bal-footer/bal-footer.sass b/packages/components/src/components/bal-footer/bal-footer.sass
@@ -1,3 +1,5 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
+
 +block(footer)
   +unselectable
   display: block

diff --git a/packages/components/src/components/bal-footer/bal-footer.tsx b/packages/components/src/components/bal-footer/bal-footer.tsx
@@ -14,6 +14,9 @@ import { BEM } from '../../utils/bem'
 
 @Component({
   tag: 'bal-footer',
+  styleUrls: {
+    css: 'bal-footer.sass',
+  },
 })
 export class Footer implements BalConfigObserver {
   @State() links: FooterLink[] = []

diff --git a/packages/components/src/components/bal-heading/bal-heading.sass b/packages/components/src/components/bal-heading/bal-heading.sass
@@ -1,3 +1,5 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
+
 bal-heading,
 .bal-heading
   display: block

diff --git a/packages/components/src/components/bal-heading/bal-heading.tsx b/packages/components/src/components/bal-heading/bal-heading.tsx
@@ -3,6 +3,9 @@ import { Props } from '../../types'
 
 @Component({
   tag: 'bal-heading',
+  styleUrls: {
+    css: 'bal-heading.sass',
+  },
 })
 export class Heading {
   /**

diff --git a/packages/components/src/components/bal-hint/bal-hint.sass b/packages/components/src/components/bal-hint/bal-hint.sass
@@ -1,3 +1,5 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
+
 +block(hint)
   +unselectable
   display: inline-block

diff --git a/packages/components/src/components/bal-hint/bal-hint.tsx b/packages/components/src/components/bal-hint/bal-hint.tsx
@@ -8,6 +8,9 @@ import { ResizeHandler } from '../../utils/resize'
 
 @Component({
   tag: 'bal-hint',
+  styleUrls: {
+    css: 'bal-hint.sass',
+  },
 })
 export class Hint implements BalConfigObserver {
   @Element() element!: HTMLElement

diff --git a/packages/components/src/components/bal-icon/bal-icon.sass b/packages/components/src/components/bal-icon/bal-icon.sass
@@ -1,3 +1,5 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
+
 =iconSize($size: 1rem)
   width: $size
   max-height: $size

diff --git a/packages/components/src/components/bal-icon/bal-icon.tsx b/packages/components/src/components/bal-icon/bal-icon.tsx
@@ -7,6 +7,9 @@ import { BEM } from '../../utils/bem'
 
 @Component({
   tag: 'bal-icon',
+  styleUrls: {
+    css: 'bal-icon.sass',
+  },
 })
 export class Icon {
   /**

diff --git a/packages/components/src/components/bal-list/bal-list.sass b/packages/components/src/components/bal-list/bal-list.sass
@@ -1,3 +1,5 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
+
 .bal-list,
 .bal-list__item,
 .bal-list__item > a,

diff --git a/packages/components/src/components/bal-list/bal-list.tsx b/packages/components/src/components/bal-list/bal-list.tsx
@@ -4,6 +4,9 @@ import { BEM } from '../../utils/bem'
 
 @Component({
   tag: 'bal-list',
+  styleUrls: {
+    css: 'bal-list.sass',
+  },
 })
 export class List {
   /**

diff --git a/packages/components/src/components/bal-navbar/bal-navbar.sass b/packages/components/src/components/bal-navbar/bal-navbar.sass
@@ -1,3 +1,5 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
+
 +block(navbar)
   +unselectable
   position: relative

diff --git a/packages/components/src/components/bal-navbar/bal-navbar.tsx b/packages/components/src/components/bal-navbar/bal-navbar.tsx
@@ -4,6 +4,9 @@ import { BEM } from '../../utils/bem'
 
 @Component({
   tag: 'bal-navbar',
+  styleUrls: {
+    css: 'bal-navbar.sass',
+  },
 })
 export class Navbar {
   @Element() element!: HTMLElement

diff --git a/packages/components/src/components/bal-navigation/bal-navigation.sass b/packages/components/src/components/bal-navigation/bal-navigation.sass
@@ -1,3 +1,5 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
+
 :root
   --bal-nav-main-mobile-height: 100vh
 

diff --git a/packages/components/src/components/bal-navigation/bal-navigation.tsx b/packages/components/src/components/bal-navigation/bal-navigation.tsx
@@ -10,6 +10,9 @@ import { ResizeHandler } from '../../utils/resize'
 
 @Component({
   tag: 'bal-navigation',
+  styleUrls: {
+    css: 'bal-navigation.sass',
+  },
 })
 export class Navigation implements ComponentInterface {
   @Element() el!: HTMLElement

diff --git a/packages/components/src/components/bal-pagination/bal-pagination.sass b/packages/components/src/components/bal-pagination/bal-pagination.sass
@@ -1,3 +1,5 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
+
 +block(pagination)
   +unselectable
   display: block
@@ -76,7 +78,7 @@
 
       +element(tab)
         flex: 1
-    
+
       &.is-disabled
         li
           pointer-events: none

diff --git a/packages/components/src/components/bal-pagination/bal-pagination.tsx b/packages/components/src/components/bal-pagination/bal-pagination.tsx
@@ -4,6 +4,9 @@ import { Props } from '../../types'
 
 @Component({
   tag: 'bal-pagination',
+  styleUrls: {
+    css: 'bal-pagination.sass',
+  },
 })
 export class Pagination {
   @Element() el!: HTMLBalPaginationElement

diff --git a/packages/components/src/components/bal-popover/bal-popover.sass b/packages/components/src/components/bal-popover/bal-popover.sass
@@ -1,3 +1,5 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
+
 :root
   --bal-popover-backdrop-height: 100vh
   --bal-popover-content-height-top-nav: 100vh
@@ -126,4 +128,4 @@
       font-family: var(--bal-font-family-text)
       font-size: var(--bal-size-small)
       .bal-popover__content__inner
-        padding: var(--bal-space-x-small)
+        padding: var(--bal-space-x-small)
diff --git a/packages/components/src/components/bal-popover/bal-popover.tsx b/packages/components/src/components/bal-popover/bal-popover.tsx
@@ -15,6 +15,9 @@ export interface PopoverPresentOptions {
 
 @Component({
   tag: 'bal-popover',
+  styleUrls: {
+    css: 'bal-popover.sass',
+  },
 })
 export class Popover {
   private popoverId = `bal-po-${PopoverIds++}`

diff --git a/packages/components/src/components/bal-shape/bal-shape.sass b/packages/components/src/components/bal-shape/bal-shape.sass
@@ -1,3 +1,5 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
+
 +block(shape)
   display: block
   overflow: hidden
@@ -19,4 +21,4 @@
   +modifier(is-rotation-180)
     transform: rotate(180deg)
   +modifier(is-rotation-270)
-    transform: rotate(270deg)
+    transform: rotate(270deg)
diff --git a/packages/components/src/components/bal-shape/bal-shape.tsx b/packages/components/src/components/bal-shape/bal-shape.tsx
@@ -5,6 +5,9 @@ import { BaloiseDesignToken } from '@baloise/design-system-tokens'
 
 @Component({
   tag: 'bal-shape',
+  styleUrls: {
+    css: 'bal-shape.sass',
+  },
 })
 export class Shape implements ComponentInterface {
   @Element() el!: HTMLElement

diff --git a/packages/components/src/components/bal-spinner/bal-spinner.tsx b/packages/components/src/components/bal-spinner/bal-spinner.tsx
@@ -6,6 +6,9 @@ import { flatten } from 'lottie-colorify'
 
 @Component({
   tag: 'bal-spinner',
+  styleUrls: {
+    css: 'bal-spinner.sass',
+  },
 })
 export class Spinner {
   animation!: AnimationItem

diff --git a/packages/components/src/components/bal-stage/bal-stage.sass b/packages/components/src/components/bal-stage/bal-stage.sass
@@ -1,3 +1,5 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
+
 +block(stage)
   display: block
   position: relative

diff --git a/packages/components/src/components/bal-stage/bal-stage.tsx b/packages/components/src/components/bal-stage/bal-stage.tsx
@@ -4,6 +4,9 @@ import { BEM } from '../../utils/bem'
 
 @Component({
   tag: 'bal-stage',
+  styleUrls: {
+    css: 'bal-stage.sass',
+  },
 })
 export class Stage implements ComponentInterface {
   /**

diff --git a/packages/components/src/components/bal-table/bal-table.sass b/packages/components/src/components/bal-table/bal-table.sass
@@ -1,3 +1,5 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
+
 +block(table)
   display: block
   position: static

diff --git a/packages/components/src/components/bal-table/bal-table.tsx b/packages/components/src/components/bal-table/bal-table.tsx
@@ -3,6 +3,9 @@ import { BEM } from '../../utils/bem'
 
 @Component({
   tag: 'bal-table',
+  styleUrls: {
+    css: 'bal-table.sass',
+  },
 })
 export class Table implements ComponentInterface {
   @Element() el!: HTMLElement

diff --git a/packages/components/src/components/bal-tabs/bal-tabs.sass b/packages/components/src/components/bal-tabs/bal-tabs.sass
@@ -1,3 +1,4 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
 @import './bal-tabs__steps'
 
 +block(tabs)

diff --git a/packages/components/src/components/bal-tabs/bal-tabs.tsx b/packages/components/src/components/bal-tabs/bal-tabs.tsx
@@ -12,6 +12,9 @@ import { ResizeHandler } from '../../utils/resize'
 
 @Component({
   tag: 'bal-tabs',
+  styleUrls: {
+    css: 'bal-tabs.sass',
+  },
 })
 export class Tabs {
   @Element() el!: HTMLElement