CODEWITHSUNDEEP
cssangularwebpacksasskendo-ui
Bucket
Bucket

Reputation: 7521

Angular build does not resolve overridden Kendo variables

I just upgraded my app to Angular 11. After running ng run my-app:build I get the following error:

Error: ./projects/my-app/src/styles.scss
Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):
SassError: $color: var(--standard-bd) is not a color.
    ╷
123 │ $button-group-focus-shadow: inset 0 0 0 2px rgba( $button-border, opacity( $button-border ) * 2 );
    │                                                                   ^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  node_modules\@progress\kendo-theme-default\scss\button\_variables.scss 123:67  @import
  node_modules\@progress\kendo-theme-default\scss\button\_index.scss 12:9        @import
  node_modules\@progress\kendo-theme-default\scss\multiselect\_index.scss 7:9    @import
  projects\my-styles\third-party\kendo\_components.scss 2:9                      @import
  projects\my-styles\third-party\kendo\index.scss 5:9                            @use
  projects\my-styles\my-styles.scss 34:1                                         @use
  projects\my-app\src\styles.scss 7:1                                            root stylesheet

$button-border is first declared in projects/node_modules/@progress/kendo-theme-default/scss/button/_variables.scss, and the error is thrown on the call to opacity():

$button-border: rgba( black, .08 ) !default;
...
$button-group-focus-shadow: inset 0 0 0 2px rgba( $button-border, opacity( $button-border ) * 2 );

This variable is overridden in projects/my-styles/third-party/kendo/variables/_button.scss:

$button-border: theme.$standard-bd;

This in turn comes from projects/my-styles/themes/theme.scss so that we can dynamically load different themes:

$standard-bd: var(--standard-bd);

This should resolve to one of several themes file such as projects/my-styles/themes/tokens/states-basictheme.scss, as follows:

.basictheme {
    --standard-bd: var(--color-white);
}

And --color-white is defined in projects/my-styles/themes/tokens/colors-basictheme.scss:

.basictheme {
    --color-white: hsla(0, 100%, 100%, 1);
}

Here's my angular.json:

"my-app": {
  ...
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "stylePreprocessorOptions": {
          "includePaths": [
            "projects/my-styles"
          ]
        },
        "styles": [
          "projects/my-app/src/styles.scss"
        ]
      }
    }
  }
}

Does anyone know how to resolve this?

Upvotes: 0

Views: 1173

Answers (3)

joneff
joneff

Reputation: 1

(disclaimer: I work on kendo ui themes)

The problem is indeed related to using custom properties (css variables) and sass color math: those are incompatible.

The good part is that this can be resolved quite easily: indeed you can set certain variables to be certain values and in terms avoid said compilation issues. Usually, we apply sass color math in variables files and not in the style portion so override variable approach should work in most cases.

As for "why" part of things.. Usually, one would want the surrounding shadow of a button to be somewhat related to the border of that button. So there you have it -- set one variable (button-border) apply it in several places.

Upvotes: 0

Bucket
Bucket

Reputation: 7521

Not the cleanest solution, but adding a post-install step to the build got this to a working state. The idea is to read in the offending Kendo stylesheet and replace the color function.

In this case, we read in node_modules\@progress\kendo-theme-default\scss\button\_variables.scss, and replace any instances of "rgba( $button-border, opacity( $button-border ) * 2 )" with "$button-border".

Since our themes' opacity values for $button-border are constant, replacing this full string was sufficient.

Upvotes: 0

Hans Spieß
Hans Spieß

Reputation: 935

Edit: After fiddling around with https://www.sassmeister.com/ a little bit i have not found a simple solution to the problem, but still i think its all about Css variables and Scss color functions. Read more at https://codyhouse.co/blog/post/how-to-combine-sass-color-functions-and-css-variables

The underlying problem is that Sass cannot pass Css variables holding complex colors into its color related functions like opacity() or rgba(). There are several methods to work around this, of which the easiest one seems to be expressing "white" not as hsla but hex. Somewhere you would convert it with

@function to-hex($color) {
    @return mix($color, $color);
}

.hex {
    background-color: to-hex(hsla(0, 100%, 100%, 1));
}

Upvotes: 1

Related Questions