Problem/Motivation

When using a breakpoint with the bp-min or bp-max mixins that is not defined in $grid-breakpoints, the content is printed out without being wrapped in a media query which will likely lead to unexpected output. This should fail with a useful error instead.

Solution

Print a useful error message so the issue gets fixed immediately.

Error: "[ sm-desktop ] is not defined in $breakpoints. Found: [ xsmall, small, medium, tablet, large, xlarge, xxlarge ]. Make sure the breakpoint you are trying to use is defined."
   ╷
67 │           @include bp.bp-min($breakpoint) {
   │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  libraries/partials/mixins/_typography.scss 67:11  typography-styles()
  libraries/global/settings/typography.scss 64:1    @use
  libraries/global/wysiwyg.scss 17:1   

Issue fork prototype-3414884

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

pixelwhip created an issue. See original summary.

pixelwhip’s picture

Status: Active » Needs review

jldust made their first commit to this issue’s fork.

  • jldust committed 06761b29 on 5.x authored by pixelwhip
    Issue #3414884 by pixelwhip: Add error handling for bp mixins
    
jldust’s picture

Status: Needs review » Fixed

Great catch, this has been merged into the 5.x branch and will be included in the next tagged release.

jldust’s picture

Status: Fixed » Closed (fixed)