css-gridish
css-gridish copied to clipboard
ExtraBreakpointWidth index out of bounds
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.
getting the same error on run as well
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"
}
}