Error when css contains grid syntax

[vukers]

I am using next@9.4.5-canary.30, which now uses cssnano-simple@1.0.4 and subsequently cssnano-preset-simple@^1.1.3.

I am seeing the following error when building via next build, as well as in a repro environment that simply uses "postcss" and "cssnano-preset-simple":

f.charCodeAt is not a function

In searching for the root cause, I found that the error occurs whenever the following line is found in any css file:

grid-column: span 2;

Here are additional findings:

• this works when used with the slash syntax: grid-column: span 2 / 1
• this works when used in quotes: grid-column: "span 2" (though I'm not sure that's actually valid grid syntax)
• this works when used with cssnano preset set to "default" instead of "simple"
• this worked innext@9.4.5-canary.23, when "cssnano-simple" was loaded via the dist/ folder instead of the package.

[vukers]

Additional finding:

• this works when used with cssnano-preset-simple@1.1.1
• this works when used with cssnano-preset-advanced

[4cm4k1]

Hi,

I experience this issue as well because I use a component library whose CSS uses grid. I had asked about it in Next.js' discussions. The person who answered helped point me in the right direction, but the note about enabling grid with a custom PostCSS config in the Next.js docs did not work:

Note: To support Grid Layout, you need to enable grid: "autoplace" for Autoprefixer. See "Customizing Plugins" below.

So right now I am working around this by setting my resolutions to this (reproducible example with custom PostCSS config, just remove resolutions from package.json before running npm/yarn install).

[Timer]

Please file this bug upstream at https://github.com/cssnano/cssnano!

[AbeCole]

this works when used with the slash syntax: grid-column: span 2 / 1

Relatively new to CSS grid but my understanding is "grid-column: span 2" is not the same as "grid-column: span 2 / 1". I know this is probably a config/library compatibility issue that needs resolving at it's root, but is there currently any work around that allows us to still have the same end result as "grid-column: span 2"?

[4cm4k1]

Hi @Timer, I went ahead and opened an issue with cssnano, and I am curious what you think about proposed solutions here: cssnano/cssnano#927 (comment)

Basically, they could reorder the plugins in cssnano-preset-default, but that would be a potential breaking change for some cases.

Alternatively, the postcss-normalize-string plugin could check for Array type to avert the error in this particular case.

Thanks!

[Timer]

Unfortunately I don't know enough about cssnano to know which approach would be better. I wonder why reordering is considered breaking?

[Timer]

🎉 This issue has been resolved in version 1.1.5 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[WhoAteDaCake]

I'm still having this issue with

"cssnano-preset-simple": "1.1.5",
 "next": "10.0.3",