fix: fix imports of common styles (#2475)

sbb-design-systems · Mar 12, 2024 · fda1960 · fda1960
1 parent 71c1412
commit fda1960
Show file tree

Hide file tree

Showing 21 changed files with 44 additions and 55 deletions.
diff --git a/src/components/button/button-link/button-link.ts b/src/components/button/button-link/button-link.ts
@@ -2,9 +2,7 @@ import type { CSSResultGroup } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
 import { SbbDisabledTabIndexActionMixin, SbbLinkBaseElement } from '../../core/common-behaviors';
-import { SbbButtonCommonElementMixin } from '../common/button-common';
-import commonStyle from '../common/button-common.scss?lit&inline';
-import style from '../common/primary-button.scss?lit&inline';
+import { buttonCommonStyle, buttonPrimaryStyle, SbbButtonCommonElementMixin } from '../common';
 
 /**
  * It displays a button enhanced with the SBB Design in the 'primary' variant, which will behave as a link.
@@ -16,7 +14,7 @@ import style from '../common/primary-button.scss?lit&inline';
 export class SbbButtonLinkElement extends SbbButtonCommonElementMixin(
   SbbDisabledTabIndexActionMixin(SbbLinkBaseElement),
 ) {
-  public static override styles: CSSResultGroup = [commonStyle, style];
+  public static override styles: CSSResultGroup = [buttonCommonStyle, buttonPrimaryStyle];
 }
 
 declare global {

diff --git a/src/components/button/button-static/button-static.ts b/src/components/button/button-static/button-static.ts
@@ -2,9 +2,7 @@ import type { CSSResultGroup } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
 import { SbbActionBaseElement, SbbDisabledMixin } from '../../core/common-behaviors';
-import { SbbButtonCommonElementMixin } from '../common/button-common';
-import commonStyle from '../common/button-common.scss?lit&inline';
-import style from '../common/primary-button.scss?lit&inline';
+import { buttonCommonStyle, buttonPrimaryStyle, SbbButtonCommonElementMixin } from '../common';
 
 /**
  * It displays a static button enhanced with the SBB Design in the 'primary' variant.
@@ -16,7 +14,7 @@ import style from '../common/primary-button.scss?lit&inline';
 export class SbbButtonStaticElement extends SbbButtonCommonElementMixin(
   SbbDisabledMixin(SbbActionBaseElement),
 ) {
-  public static override styles: CSSResultGroup = [commonStyle, style];
+  public static override styles: CSSResultGroup = [buttonCommonStyle, buttonPrimaryStyle];
 }
 
 declare global {

diff --git a/src/components/button/button/button.ts b/src/components/button/button/button.ts
@@ -2,9 +2,7 @@ import type { CSSResultGroup } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
 import { SbbButtonBaseElement, SbbDisabledTabIndexActionMixin } from '../../core/common-behaviors';
-import { SbbButtonCommonElementMixin } from '../common/button-common';
-import commonStyle from '../common/button-common.scss?lit&inline';
-import style from '../common/primary-button.scss?lit&inline';
+import { buttonCommonStyle, buttonPrimaryStyle, SbbButtonCommonElementMixin } from '../common';
 
 /**
  * It displays a button enhanced with the SBB Design in the 'primary' variant.
@@ -16,7 +14,7 @@ import style from '../common/primary-button.scss?lit&inline';
 export class SbbButtonElement extends SbbButtonCommonElementMixin(
   SbbDisabledTabIndexActionMixin(SbbButtonBaseElement),
 ) {
-  public static override styles: CSSResultGroup = [commonStyle, style];
+  public static override styles: CSSResultGroup = [buttonCommonStyle, buttonPrimaryStyle];
 }
 
 declare global {

diff --git a/src/components/button/common/index.ts b/src/components/button/common/index.ts
@@ -1 +1,7 @@
 export * from './button-common';
+
+export { default as buttonCommonStyle } from './button-common.scss?lit&inline';
+export { default as buttonPrimaryStyle } from './primary-button.scss?lit&inline';
+export { default as buttonSecondaryStyle } from './secondary-button.scss?lit&inline';
+export { default as buttonTertiaryStyle } from './tertiary-button.scss?lit&inline';
+export { default as buttonTransparentStyle } from './transparent-button.scss?lit&inline';
diff --git a/src/components/button/secondary-button-link/secondary-button-link.ts b/src/components/button/secondary-button-link/secondary-button-link.ts
@@ -2,9 +2,7 @@ import type { CSSResultGroup } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
 import { SbbDisabledTabIndexActionMixin, SbbLinkBaseElement } from '../../core/common-behaviors';
-import { SbbButtonCommonElementMixin } from '../common/button-common';
-import commonStyle from '../common/button-common.scss?lit&inline';
-import style from '../common/secondary-button.scss?lit&inline';
+import { buttonCommonStyle, buttonSecondaryStyle, SbbButtonCommonElementMixin } from '../common';
 
 /**
  * It displays a button enhanced with the SBB Design in the 'primary' variant, which will behave as a link.
@@ -16,7 +14,7 @@ import style from '../common/secondary-button.scss?lit&inline';
 export class SbbSecondaryButtonLinkElement extends SbbButtonCommonElementMixin(
   SbbDisabledTabIndexActionMixin(SbbLinkBaseElement),
 ) {
-  public static override styles: CSSResultGroup = [commonStyle, style];
+  public static override styles: CSSResultGroup = [buttonCommonStyle, buttonSecondaryStyle];
 }
 
 declare global {

diff --git a/src/components/button/secondary-button-static/secondary-button-static.ts b/src/components/button/secondary-button-static/secondary-button-static.ts
@@ -2,9 +2,7 @@ import type { CSSResultGroup } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
 import { SbbActionBaseElement, SbbDisabledMixin } from '../../core/common-behaviors';
-import { SbbButtonCommonElementMixin } from '../common/button-common';
-import commonStyle from '../common/button-common.scss?lit&inline';
-import style from '../common/secondary-button.scss?lit&inline';
+import { buttonCommonStyle, buttonSecondaryStyle, SbbButtonCommonElementMixin } from '../common';
 
 /**
  * It displays a static button enhanced with the SBB Design in the 'secondary' variant.
@@ -16,7 +14,7 @@ import style from '../common/secondary-button.scss?lit&inline';
 export class SbbSecondaryButtonStaticElement extends SbbButtonCommonElementMixin(
   SbbDisabledMixin(SbbActionBaseElement),
 ) {
-  public static override styles: CSSResultGroup = [commonStyle, style];
+  public static override styles: CSSResultGroup = [buttonCommonStyle, buttonSecondaryStyle];
 }
 
 declare global {

diff --git a/src/components/button/secondary-button/secondary-button.ts b/src/components/button/secondary-button/secondary-button.ts
@@ -2,9 +2,7 @@ import type { CSSResultGroup } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
 import { SbbButtonBaseElement, SbbDisabledTabIndexActionMixin } from '../../core/common-behaviors';
-import { SbbButtonCommonElementMixin } from '../common/button-common';
-import commonStyle from '../common/button-common.scss?lit&inline';
-import style from '../common/secondary-button.scss?lit&inline';
+import { buttonCommonStyle, buttonSecondaryStyle, SbbButtonCommonElementMixin } from '../common';
 
 /**
  * It displays a button enhanced with the SBB Design in the 'secondary' variant.
@@ -16,7 +14,7 @@ import style from '../common/secondary-button.scss?lit&inline';
 export class SbbSecondaryButtonElement extends SbbButtonCommonElementMixin(
   SbbDisabledTabIndexActionMixin(SbbButtonBaseElement),
 ) {
-  public static override styles: CSSResultGroup = [commonStyle, style];
+  public static override styles: CSSResultGroup = [buttonCommonStyle, buttonSecondaryStyle];
 }
 
 declare global {

diff --git a/src/components/button/tertiary-button-link/tertiary-button-link.ts b/src/components/button/tertiary-button-link/tertiary-button-link.ts
@@ -2,9 +2,7 @@ import type { CSSResultGroup } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
 import { SbbDisabledTabIndexActionMixin, SbbLinkBaseElement } from '../../core/common-behaviors';
-import { SbbButtonCommonElementMixin } from '../common/button-common';
-import commonStyle from '../common/button-common.scss?lit&inline';
-import style from '../common/tertiary-button.scss?lit&inline';
+import { buttonCommonStyle, buttonTertiaryStyle, SbbButtonCommonElementMixin } from '../common';
 
 /**
  * It displays a button enhanced with the SBB Design in the 'tertiary' variant, which will behave as a link.
@@ -16,7 +14,7 @@ import style from '../common/tertiary-button.scss?lit&inline';
 export class SbbTertiaryButtonLinkElement extends SbbButtonCommonElementMixin(
   SbbDisabledTabIndexActionMixin(SbbLinkBaseElement),
 ) {
-  public static override styles: CSSResultGroup = [commonStyle, style];
+  public static override styles: CSSResultGroup = [buttonCommonStyle, buttonTertiaryStyle];
 }
 
 declare global {

diff --git a/src/components/button/tertiary-button-static/tertiary-button-static.ts b/src/components/button/tertiary-button-static/tertiary-button-static.ts
@@ -2,9 +2,7 @@ import type { CSSResultGroup } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
 import { SbbActionBaseElement, SbbDisabledMixin } from '../../core/common-behaviors';
-import { SbbButtonCommonElementMixin } from '../common/button-common';
-import commonStyle from '../common/button-common.scss?lit&inline';
-import style from '../common/tertiary-button.scss?lit&inline';
+import { buttonCommonStyle, buttonTertiaryStyle, SbbButtonCommonElementMixin } from '../common';
 
 /**
  * It displays a static button enhanced with the SBB Design in the 'tertiary' variant.
@@ -16,7 +14,7 @@ import style from '../common/tertiary-button.scss?lit&inline';
 export class SbbTertiaryButtonStaticElement extends SbbButtonCommonElementMixin(
   SbbDisabledMixin(SbbActionBaseElement),
 ) {
-  public static override styles: CSSResultGroup = [commonStyle, style];
+  public static override styles: CSSResultGroup = [buttonCommonStyle, buttonTertiaryStyle];
 }
 
 declare global {

diff --git a/src/components/button/tertiary-button/tertiary-button.ts b/src/components/button/tertiary-button/tertiary-button.ts
@@ -2,9 +2,7 @@ import type { CSSResultGroup } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
 import { SbbButtonBaseElement, SbbDisabledTabIndexActionMixin } from '../../core/common-behaviors';
-import { SbbButtonCommonElementMixin } from '../common/button-common';
-import commonStyle from '../common/button-common.scss?lit&inline';
-import style from '../common/tertiary-button.scss?lit&inline';
+import { buttonCommonStyle, buttonTertiaryStyle, SbbButtonCommonElementMixin } from '../common';
 
 /**
  * It displays a button enhanced with the SBB Design in the 'tertiary' variant.
@@ -16,7 +14,7 @@ import style from '../common/tertiary-button.scss?lit&inline';
 export class SbbTertiaryButtonElement extends SbbButtonCommonElementMixin(
   SbbDisabledTabIndexActionMixin(SbbButtonBaseElement),
 ) {
-  public static override styles: CSSResultGroup = [commonStyle, style];
+  public static override styles: CSSResultGroup = [buttonCommonStyle, buttonTertiaryStyle];
 }
 
 declare global {

diff --git a/src/components/button/transparent-button-link/transparent-button-link.ts b/src/components/button/transparent-button-link/transparent-button-link.ts
@@ -2,9 +2,7 @@ import type { CSSResultGroup } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
 import { SbbDisabledTabIndexActionMixin, SbbLinkBaseElement } from '../../core/common-behaviors';
-import { SbbButtonCommonElementMixin } from '../common/button-common';
-import commonStyle from '../common/button-common.scss?lit&inline';
-import style from '../common/transparent-button.scss?lit&inline';
+import { buttonCommonStyle, buttonTransparentStyle, SbbButtonCommonElementMixin } from '../common';
 
 /**
  * It displays a button enhanced with the SBB Design in the 'transparent' variant, which will behave as a link.
@@ -16,7 +14,7 @@ import style from '../common/transparent-button.scss?lit&inline';
 export class SbbTransparentButtonLinkElement extends SbbButtonCommonElementMixin(
   SbbDisabledTabIndexActionMixin(SbbLinkBaseElement),
 ) {
-  public static override styles: CSSResultGroup = [commonStyle, style];
+  public static override styles: CSSResultGroup = [buttonCommonStyle, buttonTransparentStyle];
 }
 
 declare global {

diff --git a/src/components/button/transparent-button-static/transparent-button-static.ts b/src/components/button/transparent-button-static/transparent-button-static.ts
@@ -2,9 +2,7 @@ import type { CSSResultGroup } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
 import { SbbActionBaseElement, SbbDisabledMixin } from '../../core/common-behaviors';
-import { SbbButtonCommonElementMixin } from '../common/button-common';
-import commonStyle from '../common/button-common.scss?lit&inline';
-import style from '../common/transparent-button.scss?lit&inline';
+import { buttonCommonStyle, buttonTransparentStyle, SbbButtonCommonElementMixin } from '../common';
 
 /**
  * It displays a static button enhanced with the SBB Design in the 'transparent' variant.
@@ -16,7 +14,7 @@ import style from '../common/transparent-button.scss?lit&inline';
 export class SbbTransparentButtonStaticElement extends SbbButtonCommonElementMixin(
   SbbDisabledMixin(SbbActionBaseElement),
 ) {
-  public static override styles: CSSResultGroup = [commonStyle, style];
+  public static override styles: CSSResultGroup = [buttonCommonStyle, buttonTransparentStyle];
 }
 
 declare global {

diff --git a/src/components/button/transparent-button/transparent-button.ts b/src/components/button/transparent-button/transparent-button.ts
@@ -2,9 +2,7 @@ import type { CSSResultGroup } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
 import { SbbButtonBaseElement, SbbDisabledTabIndexActionMixin } from '../../core/common-behaviors';
-import { SbbButtonCommonElementMixin } from '../common/button-common';
-import commonStyle from '../common/button-common.scss?lit&inline';
-import style from '../common/transparent-button.scss?lit&inline';
+import { SbbButtonCommonElementMixin, buttonCommonStyle, buttonTransparentStyle } from '../common';
 
 /**
  * It displays a button enhanced with the SBB Design in the 'transparent' variant.
@@ -16,7 +14,7 @@ import style from '../common/transparent-button.scss?lit&inline';
 export class SbbTransparentButtonElement extends SbbButtonCommonElementMixin(
   SbbDisabledTabIndexActionMixin(SbbButtonBaseElement),
 ) {
-  public static override styles: CSSResultGroup = [commonStyle, style];
+  public static override styles: CSSResultGroup = [buttonCommonStyle, buttonTransparentStyle];
 }
 
 declare global {

diff --git a/src/components/card/card-button/card-button.ts b/src/components/card/card-button/card-button.ts
@@ -1,7 +1,7 @@
 import { customElement } from 'lit/decorators.js';
 
 import { SbbButtonBaseElement } from '../../core/common-behaviors';
-import { SbbCardActionCommonElementMixin } from '../common/card-action-common';
+import { SbbCardActionCommonElementMixin } from '../common';
 
 /**
  * It turns the `sbb-card` into a button element.

diff --git a/src/components/card/card-link/card-link.ts b/src/components/card/card-link/card-link.ts
@@ -1,7 +1,7 @@
 import { customElement } from 'lit/decorators.js';
 
 import { SbbLinkBaseElement } from '../../core/common-behaviors';
-import { SbbCardActionCommonElementMixin } from '../common/card-action-common';
+import { SbbCardActionCommonElementMixin } from '../common';
 
 /**
  * It turns the `sbb-card` into a link element.

diff --git a/src/components/header/header-button/header-button.ts b/src/components/header/header-button/header-button.ts
@@ -1,7 +1,7 @@
 import { customElement } from 'lit/decorators.js';
 
 import { SbbButtonBaseElement } from '../../core/common-behaviors';
-import { SbbHeaderActionCommonElementMixin } from '../common/header-action-common';
+import { SbbHeaderActionCommonElementMixin } from '../common';
 
 /**
  * It displays a button element that can be used in the `sbb-header` component.

diff --git a/src/components/header/header-link/header-link.ts b/src/components/header/header-link/header-link.ts
@@ -1,7 +1,7 @@
 import { customElement } from 'lit/decorators.js';
 
 import { SbbLinkBaseElement } from '../../core/common-behaviors';
-import { SbbHeaderActionCommonElementMixin } from '../common/header-action-common';
+import { SbbHeaderActionCommonElementMixin } from '../common';
 
 /**
  * It displays a link element that can be used in the `sbb-header` component.

diff --git a/src/components/menu/menu-link/menu-link.ts b/src/components/menu/menu-link/menu-link.ts
@@ -1,7 +1,7 @@
 import { customElement } from 'lit/decorators.js';
 
 import { SbbLinkBaseElement } from '../../core/common-behaviors';
-import { SbbMenuActionCommonElementMixin } from '../common/menu-action-common';
+import { SbbMenuActionCommonElementMixin } from '../common';
 
 /**
  * It displays a link element that can be used in the `sbb-menu` component.

diff --git a/src/components/navigation/navigation-button/navigation-button.ts b/src/components/navigation/navigation-button/navigation-button.ts
@@ -1,7 +1,7 @@
 import { customElement } from 'lit/decorators.js';
 
 import { SbbButtonBaseElement } from '../../core/common-behaviors';
-import { SbbNavigationActionCommonElementMixin } from '../common/navigation-action-common';
+import { SbbNavigationActionCommonElementMixin } from '../common';
 
 /**
  * It displays a button element that can be used in the `sbb-navigation` component.

diff --git a/src/components/navigation/navigation-link/navigation-link.ts b/src/components/navigation/navigation-link/navigation-link.ts
@@ -1,7 +1,7 @@
 import { customElement } from 'lit/decorators.js';
 
 import { SbbLinkBaseElement } from '../../core/common-behaviors';
-import { SbbNavigationActionCommonElementMixin } from '../common/navigation-action-common';
+import { SbbNavigationActionCommonElementMixin } from '../common';
 
 /**
  * It displays a link element that can be used in the `sbb-navigation` component.

diff --git a/src/components/vite.config.ts b/src/components/vite.config.ts
@@ -67,6 +67,13 @@ export default defineConfig((config) =>
             (!!importer && source.startsWith('../') && !importer.includes('/node_modules/')) ||
             (!!importer && barrelExports.includes(importer) && source.match(/\.\/[a-z-]+/))
           ) {
+            if (source.includes('.scss')) {
+              throw Error(`Do not import scss from another directory.
+               Re export sass via barrel export (index.ts). See button/common/index.ts.
+               Source: ${source}.
+               Importer: ${importer}.`);
+            }
+
             return true;
           }
         },