From 9ad70020444049793a8a44632eba421b1708bc80 Mon Sep 17 00:00:00 2001 From: NicolasMerget Date: Wed, 29 Nov 2023 16:10:20 +0100 Subject: [PATCH] chore: remove as * from scss and documentation --- docs/how-to-develop-a-component.md | 6 +- output/angular/README.md | 2 +- output/react/README.md | 2 +- output/vue/vue3/README.md | 2 +- .../new/component/db-ui-components.ejs.t | 2 +- .../mitosis/new/db-ui-components-use.ejs.t | 2 +- .../src/components/input/docs/Angular.md | 2 +- .../src/components/input/docs/HTML.md | 2 +- .../src/components/input/docs/React.md | 2 +- .../src/components/input/docs/Vue.md | 2 +- .../src/components/input/input.scss | 3 - .../src/styles/db-ui-42-rollup.scss | 2 +- .../src/styles/db-ui-42-webpack.scss | 2 +- .../src/styles/db-ui-components.scss | 58 +++++++++---------- 14 files changed, 43 insertions(+), 46 deletions(-) diff --git a/docs/how-to-develop-a-component.md b/docs/how-to-develop-a-component.md index 0112f81775b5..8bd64d087e15 100644 --- a/docs/how-to-develop-a-component.md +++ b/docs/how-to-develop-a-component.md @@ -19,12 +19,12 @@ ### Styling with SCSS -Starting with `packages/components/src/components/my-awesome-component/my-awesome-component.scss` there are some thing you should know: +Starting with `packages/components/src/components/my-awesome-component/my-awesome-component.scss` there are something you should know: -1. The most important dependency are the `variables.global` included via `@use "@db-ui/foundations/build/scss/variables.global" as *;`. They enable you to use e.g. `$db-spacing-fixed-md` for paddings, margins etc. +1. The most important dependency are the `variables` included via `@use "@db-ui/foundations/build/scss/variables";`. They enable you to use e.g. `$db-spacing-fixed-md` for paddings, margins etc. 2. A lot of times you have to force another `font-size` / `line-height`, you can do it with `@use "@db-ui/foundations/build/scss/tonality/font;` and the corresponding placeholder extend: `@extend %db-overwrite-font-size-sm;`. 3. Some components have an 'adaptive' styling. We exclude it in an own file `@use "@db-ui/components/build/scss/styles/component";` so you might use this dependency. As a reference look at another component e.g. [`packages/components/src/components/button/button.scss`](../packages/components/src/components/button/button.scss). -4. If you have to set a specific color (informational, warning, etc.) directly you can use `@use "@db-ui/foundations/build/scss/color-placeholder" as *;`, but we also provide a file to cover all variants with `@use "@db-ui/foundations/build/scss/color/color-variants" as *;`. You can take a look at the `alert` component for an example `packages/components/src/components/alert/alert.scss` you might use the `@each` to reduce the amount of code for color-variants. +4. If you have to set a specific color (informational, warning, etc.) directly you can use `@use "@db-ui/foundations/build/scss/colors";`. You can take a look at the `alert` component for an example `packages/components/src/components/alert/alert.scss` you might use the `@each` to reduce the amount of code for color-variants. 5. To set a fixed icon you might use `@use "@db-ui/foundations/build/scss/icon/icons.helpers" as icons;` as dependency and e.g. `@include icons.icon("arrow_forward"), "after");`. For a dynamic icon you could prefer integrating it in HTML code with the `data-icon` attribute. ### Component structure with HTML diff --git a/output/angular/README.md b/output/angular/README.md index f7e5cd31e38e..3a6c506521d7 100644 --- a/output/angular/README.md +++ b/output/angular/README.md @@ -23,7 +23,7 @@ Import the styles in scss or css. Based on your technology the file names could ```scss styles.scss // styles.scss -@use "@db-ui/components/build/styles/db-ui-42-webpack" as *; +@forward "@db-ui/components/build/styles/db-ui-42-webpack"; ``` diff --git a/output/react/README.md b/output/react/README.md index 88a33b63ca5d..431f7803d070 100644 --- a/output/react/README.md +++ b/output/react/README.md @@ -24,7 +24,7 @@ Import the styles in scss or css. Based on your technology the file names could ```scss // index.scss -@use "@db-ui/components/build/styles/db-ui-42-rollup" as *; +@forward "@db-ui/components/build/styles/db-ui-42-rollup"; ``` diff --git a/output/vue/vue3/README.md b/output/vue/vue3/README.md index 5cad70269ff5..a321edaa5e8a 100644 --- a/output/vue/vue3/README.md +++ b/output/vue/vue3/README.md @@ -23,7 +23,7 @@ Import the styles in scss or css. Based on your technology the file names could ```scss // style.scss -@use "@db-ui/components/build/styles/db-ui-42-rollup" as *; +@forward "@db-ui/components/build/styles/db-ui-42-rollup"; ``` ```ts diff --git a/packages/components/_templates/mitosis/new/component/db-ui-components.ejs.t b/packages/components/_templates/mitosis/new/component/db-ui-components.ejs.t index 2ccd34a6289e..dc44bfc2662c 100644 --- a/packages/components/_templates/mitosis/new/component/db-ui-components.ejs.t +++ b/packages/components/_templates/mitosis/new/component/db-ui-components.ejs.t @@ -3,4 +3,4 @@ inject: true to: src/styles/db-ui-components.scss before: angular-workaround --- -@use "../components/<%= name %>/<%= name %>" as *; +@forward "../components/<%= name %>/<%= name %>"; diff --git a/packages/components/_templates/mitosis/new/db-ui-components-use.ejs.t b/packages/components/_templates/mitosis/new/db-ui-components-use.ejs.t index b1b5feebef72..65eaff4634c6 100644 --- a/packages/components/_templates/mitosis/new/db-ui-components-use.ejs.t +++ b/packages/components/_templates/mitosis/new/db-ui-components-use.ejs.t @@ -4,4 +4,4 @@ to: src/styles/db-ui-components.scss prepend: true skip_if: components/<%= name %> --- -@use "../components/<%= name %>/<%= name %>" as *; +@forward "../components/<%= name %>/<%= name %>"; diff --git a/packages/components/src/components/input/docs/Angular.md b/packages/components/src/components/input/docs/Angular.md index 4218d40e99d9..b3772d366e3e 100644 --- a/packages/components/src/components/input/docs/Angular.md +++ b/packages/components/src/components/input/docs/Angular.md @@ -3,7 +3,7 @@ Load SCSS globally within `styles.scss` in your app: ```scss -@use "@db-ui/components/build/styles/db-ui-42-webpack" as *; +@forward "@db-ui/components/build/styles/db-ui-42-webpack"; ``` Load component within `app.module.ts`: diff --git a/packages/components/src/components/input/docs/HTML.md b/packages/components/src/components/input/docs/HTML.md index c7da98e48fa8..c0300f54bbc7 100644 --- a/packages/components/src/components/input/docs/HTML.md +++ b/packages/components/src/components/input/docs/HTML.md @@ -3,7 +3,7 @@ Load SCSS globally somewhere in your app: ```scss -@use "@db-ui/components/build/styles/db-ui-42" as *; +@forward "@db-ui/components/build/styles/db-ui-42"; ``` Use it: diff --git a/packages/components/src/components/input/docs/React.md b/packages/components/src/components/input/docs/React.md index 233f6d447592..cc2fd6ef9c52 100644 --- a/packages/components/src/components/input/docs/React.md +++ b/packages/components/src/components/input/docs/React.md @@ -3,7 +3,7 @@ Load SCSS globally in a `index.scss` file inside `main.tsx`/`main.jsx` within your app: ```scss -@use "@db-ui/components/build/styles/db-ui-42-rollup" as *; +@forward "@db-ui/components/build/styles/db-ui-42-rollup"; ``` Import component: diff --git a/packages/components/src/components/input/docs/Vue.md b/packages/components/src/components/input/docs/Vue.md index bcc670283c1d..d19815dbf45f 100644 --- a/packages/components/src/components/input/docs/Vue.md +++ b/packages/components/src/components/input/docs/Vue.md @@ -3,7 +3,7 @@ Load SCSS globally in a `index.scss` file and import it in your `main.ts`/`main.js` file in your app: ```scss -@use "@db-ui/components/build/styles/db-ui-42-rollup" as *; +@forward "@db-ui/components/build/styles/db-ui-42-rollup"; ``` Use component: diff --git a/packages/components/src/components/input/input.scss b/packages/components/src/components/input/input.scss index db7deb385d5e..456a205f9745 100644 --- a/packages/components/src/components/input/input.scss +++ b/packages/components/src/components/input/input.scss @@ -1,6 +1,3 @@ -// TODO: Why do we need the default assets here? -@use "@db-ui/foundations/build/scss/default.assets-paths" as *; - @use "@db-ui/foundations/build/scss/variables"; @use "@db-ui/foundations/build/scss/icons"; @use "@db-ui/foundations/build/scss/tonality"; diff --git a/packages/components/src/styles/db-ui-42-rollup.scss b/packages/components/src/styles/db-ui-42-rollup.scss index a46b47e68186..f88c66c55a6e 100644 --- a/packages/components/src/styles/db-ui-42-rollup.scss +++ b/packages/components/src/styles/db-ui-42-rollup.scss @@ -1,4 +1,4 @@ /* This is a predefined beginner friendly bundle for rollup apps */ -@use "@db-ui/foundations/build/scss/rollup.assets-paths" as *; +@use "@db-ui/foundations/build/scss/rollup.assets-paths"; @forward "./db-ui-42"; diff --git a/packages/components/src/styles/db-ui-42-webpack.scss b/packages/components/src/styles/db-ui-42-webpack.scss index 2e08501e8558..4468c66a67bf 100644 --- a/packages/components/src/styles/db-ui-42-webpack.scss +++ b/packages/components/src/styles/db-ui-42-webpack.scss @@ -1,4 +1,4 @@ /* This is a predefined beginner friendly bundle for webpack apps */ -@use "@db-ui/foundations/build/scss/webpack.assets-paths" as *; +@use "@db-ui/foundations/build/scss/webpack.assets-paths"; @forward "./db-ui-42"; diff --git a/packages/components/src/styles/db-ui-components.scss b/packages/components/src/styles/db-ui-components.scss index 6b79bb2251e3..0ae5d3958c64 100644 --- a/packages/components/src/styles/db-ui-components.scss +++ b/packages/components/src/styles/db-ui-components.scss @@ -1,35 +1,35 @@ -@use "@db-ui/foundations/build/scss/db-ui-foundations" as *; -@use "../components/button/button" as *; -@use "../components/icon/icon" as *; -@use "../components/tab/tab" as *; -@use "../components/tab-bar/tab-bar" as *; -@use "../components/divider/divider" as *; -@use "../components/card/card" as *; -@use "../components/input/input" as *; -@use "../components/brand/brand" as *; -@use "../components/header/header" as *; -@use "../components/page/page" as *; -@use "../components/link/link" as *; -@use "../components/section/section" as *; -@use "../components/infotext/infotext" as *; -@use "../components/alert/alert" as *; -@use "../components/checkbox/checkbox" as *; -@use "../components/radio/radio" as *; -@use "../components/code-docs/code-docs" as *; -@use "../components/tag/tag" as *; -@use "../components/drawer/drawer" as *; -@use "../components/select/select" as *; -@use "../components/navigation-item/navigation-item" as *; -@use "../components/textarea/textarea" as *; -@use "../components/badge/badge" as *; +@forward "@db-ui/foundations/build/scss/db-ui-foundations"; +@forward "../components/button/button"; +@forward "../components/icon/icon"; +@forward "../components/tab/tab"; +@forward "../components/tab-bar/tab-bar"; +@forward "../components/divider/divider"; +@forward "../components/card/card"; +@forward "../components/input/input"; +@forward "../components/brand/brand"; +@forward "../components/header/header"; +@forward "../components/page/page"; +@forward "../components/link/link"; +@forward "../components/section/section"; +@forward "../components/infotext/infotext"; +@forward "../components/alert/alert"; +@forward "../components/checkbox/checkbox"; +@forward "../components/radio/radio"; +@forward "../components/code-docs/code-docs"; +@forward "../components/tag/tag"; +@forward "../components/drawer/drawer"; +@forward "../components/select/select"; +@forward "../components/navigation-item/navigation-item"; +@forward "../components/textarea/textarea"; +@forward "../components/badge/badge"; -@use "../components/accordion/accordion" as *; +@forward "../components/accordion/accordion"; -@use "../components/accordion-item/accordion-item" as *; -@use "../components/main-navigation/main-navigation" as *; +@forward "../components/accordion-item/accordion-item"; +@forward "../components/main-navigation/main-navigation"; -@use "../components/popover/popover" as *; -@use "../components/tooltip/tooltip" as *; +@forward "../components/popover/popover"; +@forward "../components/tooltip/tooltip"; @forward "dialog-init"; // angular-workaround