css-gridish icon indicating copy to clipboard operation
css-gridish copied to clipboard

ExtraBreakpointWidth index out of bounds

Open tortilaman opened this issue 7 years ago • 2 comments

Here's the error I've been getting:

events.js:183
[0]       throw er; // Unhandled 'error' event
[0]       ^
[0] Error: src/scss/_functions.scss
[0] Error: index out of bounds for `nth($list, $n)`
[0]         on line 24 of src/scss/_functions.scss, in function `nth`
[0]         from line 24 of src/scss/_functions.scss, in function `all-breakpoints`
[0]         from line 21 of src/scss/_variables.scss
[0]         from line 3 of src/scss/_core.scss
[0]         from line 2 of src/scss/gridish-grid-legacy.scss
[0] >>     $extraBreakpointWidth: nth($currentBreakpoint, 2);
[0]
[0]    ---------------------------^

Relevant code: _variables.scss

// Merge standard and custom breakpoints into list
@function all-breakpoints($breakpoints, $extraBreakpoints, $first, $last) {
  $allBreakpoints: $breakpoints;
  @each $currentBreakpoint in $extraBreakpoints {
    $extraBreakpointName: nth($currentBreakpoint, 1);
    $extraBreakpointWidth: nth($currentBreakpoint, 2);

_functions.scss

$prefix: gridish !default;
@if map-get($grid-values, "prefix") and $prefix == "gridish" {
  $prefix: map-get($grid-values, "prefix");
}
$extraBreakpoints: () !default;
$breakpoints: add-padding(map-get($grid-values, "breakpoints"));
$first: nth(nth($breakpoints, 1), 2);
$last: nth(nth($breakpoints, -1), 2);
$includeFlexFallback: false !default;
$rowHeight: map-get($grid-values, "rowHeight");
$rows: map-get($grid-values, "rows");
$extraArtboards: map-get($grid-values, "extraArtboards");
$allBreakpoints: all-breakpoints(
  $breakpoints,
  $extraBreakpoints,
  $first,
  $last
);

Looking through it and using some debug statements, I've found that $extraBreakpoints is empty, which isn't surprising considering the definition is $extraBreakpoints: () !default; and it isn't referenced anywhere else.

I'm not super well versed with sass script though, so I might be missing something here.

tortilaman avatar May 28 '18 22:05 tortilaman

getting the same error on run as well

JacobDFrank avatar Aug 29 '18 06:08 JacobDFrank

Actually fixed this by adding in an empty extraArtboards to my css-gridish.json file

  "prefix": "gridish",
  "breakpoints": {
    "xsmall": {
      "breakpoint": 23.5,
      "columns": 4,
      "gutter": "1.5rem",
      "margin": 0
    },
    "small": {
      "breakpoint": 48,
      "columns": 8,
      "gutter": "1.5rem",
      "margin": 0
    },
    "medium": {
      "breakpoint": 64,
      "columns": 12,
      "gutter": "1.5rem",
      "margin": 0
    },
    "large": {
      "breakpoint": 85,
      "columns": 12,
      "gutter": "1.5rem",
      "margin": 0
    }
  },
  "extraArtboards": {
  },
  "rem": 16,
  "rowHeight": 0.5,
  "rows": 30,
  "paths": {
    "route": "css-gridish"
  }
}

JacobDFrank avatar Aug 29 '18 06:08 JacobDFrank