Skip to content

bug(theme): applying density "mat.all-component-densities(-3);" and "mat.chips-density(-3)" crashes compilation #26613

Closed
@CrlsMrls

Description

@CrlsMrls

Description

In version 15 Angular Material Components, it is not possible to apply density globally for values lower than -2. Based on the error, the chips generate this crash.

The Sass compilation crashes when adding any of the following two lines:

  • @include mat.chips-density(-3)
  • @include mat.all-component-densities(-3)

Reproduction

Use material theming as described in https://material.angular.io/guide/theming and apply density to all components with -3 or lower values.

I created an application to check how densities affect the Angular Material Components.
Source code: https://github.com/CrlsMrls/angular-material-component-densities
Application running at: https://angular-material-density.netlify.app/

This repository currently uses the latest version 15.1.4 (I will try to keep it updated).

Steps to reproduce:

  1. git clone https://github.com/CrlsMrls/angular-material-component-densities.git
  2. cd angular-material-component-densities && npm install
  3. npx ng serve
  4. Open your browser on http://localhost:4200/ -> application works as expected
  5. Change file ./src/styles.scss line 34 from @include mat.all-component-densities(0); to @include mat.all-component-densities(-3); -> application crashes

Expected Behavior

Application does not crash when applying lower density values to chips or to all components.

Actual Behavior

Any of those settings generates the following error:

./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: "mdc-density: height must be between 24px and 32px (inclusive), but received 20px."
    ╷
632 │     $height: density.prop-value(
    │ ┌────────────^
633 │ │     $density-config: $density-config,
634 │ │     $density-scale: $density-scale,
635 │ │     $property-name: height,
636 │ │   );
    │ └───^
    ╵
  @material/chips/_chip-theme.scss 632:12                      density()
  node_modules/@angular/material/chips/_chips-theme.scss 97:5  density()
  src/styles.scss 42:3                                         root stylesheet

And application does not work.

Environment

Angular: 15.1.4
CDK/Material: 15.1.4
Browser(s): Chrome Version 110.0.5481.77 (Official Build) (arm64) and Safari Version 16.2
Operating System: macOS

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: material/chipsarea: theming

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions