tailwindcss-grid
tailwindcss-grid copied to clipboard
Using an array of strings on `grids` option causes unexpected behavior
Consider these options
module.exports = {
// ...
plugins: [
require('tailwindcss-grid')({
grids: ['2','3','12']
})
]
And this snippet from index.js
..._.range(1, _.max(grids) + 1).map(span => ({
[`.col-span-${span}`]: {
gridColumnStart: `span ${span}`,
},
})),
First_.max
behaves unexpectedly finding the highest number within the grids
array. It returns '3'
instead of the expected 12
.
Here's a REPL showing the issue.
Secondly, in this situation, the plus sign in the snippet _.max(grids) + 1
acts as a string operator instead of anarithmetic operator. So the resulting expression is _.range(1, 31)
. So you end up with 30 .col-span-##
classes.
Personally I would just convert strings to integers. Since you're already using lodash
_.toSafeInteger(value)
would suffice. Or throwing an error during compile time. Not sure what would be best.
@PaulMorel Thanks for flagging this, obviously the solution is to use an array if ints as per the docs. If you'd like to PR for throwing an error that'd be great.
@chrisrowe For sure. I'll see what I can come up with.