tailwindcss-grid icon indicating copy to clipboard operation
tailwindcss-grid copied to clipboard

Using an array of strings on `grids` option causes unexpected behavior

Open PaulMorel opened this issue 5 years ago • 2 comments

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 avatar Jul 23 '19 22:07 PaulMorel

@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 avatar Jul 24 '19 07:07 chrisrowe

@chrisrowe For sure. I'll see what I can come up with.

PaulMorel avatar Jul 24 '19 15:07 PaulMorel