akveo / akveo/nebular

mixin nb-for-theme() does not work when customPropertiesMode is enabled

Offen
#3,183 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
TypeScript
Sterne
8.1k
Forks
1.5k
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

### Issue type

**I'm submitting a ...** (check one with "x")

* [X] bug report
* [ ] feature request

### Issue description

**Current behavior:**
mixin `nb-for-theme()` does not apply rules putted in when `$nb-enable-css-custom-properties: true`

**Expected behavior:**
mixin `nb-for-theme()` should work for both modes (css-props/scss-vars)

**Steps to reproduce:**
- make sure that `$nb-enable-css-custom-properties: true`
- use `nb-for-theme()` properly by passing one of registered theme name as `$name` argument and put some rules into body of the mixin to be applied just for this theme
- include the code described above into body of `nb-install()` to apply it within theme installation process

**Related code:**

`nb-for-theme()` relies on `theming-variables.$nb-theme-name` to understand when exactly need to apply rules
``` scss
@mixin nb-for-theme($name) {
@if (theming-variables.$nb-theme-name == $name) {
@content;
}
}
```

---

Lets start step-by-step:

my root file where installation process runs
``` scss
@include nb-install() {
// ...some rules
@include nb-for-theme(fancy-theme-name) {
// ..some rules
}
// ...some rules
}
```

includes `nb-install-global-with-css-props()` or `nb-install-global-with-scss-vars()` by `theming-variables.$nb-enable-css-custom-properties`
``` scss
@mixin nb-install() {
@if (theming-variables.$nb-enable-css-custom-properties) {
@include nb-install-global-with-css-props() {
@content;
}
} @else {
@include nb-install-global-with-scss-vars() {
@content;
}
}
}
```

**1. `$nb-enable-css-custom-properties: false` (scss-vars)**

creates specific host `.nb-theme-#{$theme-name}` for each registered theme and puts rules under it.
``` scss
@mixin nb-install-global-with-scss-vars() {
@each $theme-name in register.nb-get-enabled-themes() {
@include nb-pre-process-context($theme-name);

.nb-theme-#{$theme-name} {
@content;
}
}
}
```

sets **process-context** by including `nb-pre-process-context($theme-name)`
`theming-variables.$nb-theme-name: $theme-name` line **is important** because here context is setting and then reading in `@if (theming-variables.$nb-theme-name == $name)` within `nb-for-theme()` when my rules is projected into `@content` under `.nb-theme-#{$theme-name}` (step above)
``` scss
@mixin nb-pre-process-context($theme-name) {
theming-variables.$nb-theme-process-mode: 'pre-process';

theming-variables.$nb-theme-name: $theme-name;
theming-variables.$nb-processed-theme: get-value.nb-process-theme(register.nb-get-registered-theme($theme-name));
}
```

**2. `$nb-enable-css-custom-properties: true` (css-props)**

projects my rules into `@content` but **process-context is not set** (theming-variables.$nb-theme-name is empty) so when `@if (theming-variables.$nb-theme-name == $name)` checks within `nb-for-theme()` it gets `''` and rules is not applied
``` scss
@mixin nb-install-global-with-css-props() {
@content;

@if (theming-variables.$nb-global-styles-on-install) {
@each $theme-name in register.nb-get-enabled-themes() {
@include nb-install-css-properties($theme-name, register.nb-get-registered-theme($theme-name));
}
}
}
```

Beitragsleitfaden

Beitragsleitfaden öffnen

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.