Next.js: Build fails when using CSS grid-column shorthand syntax

[vukers]

Bug report

Describe the bug

next build fails with error:

f.charCodeAt is not a function

if any of the CSS contains the following valid rule:

grid-column: span 2;

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Add offending style to any css file (global or module).
2. Run next build
3. See error

Expected behavior

Builds successfully.

System information

• OS: macOS Catalina 10.15.5
• Version of Next.js: 9.4.5-canary.30
• Version of Node.js: 12.16.1

Additional context

This was working up to [email protected]. The version after replaced an import of cssnano-simple from a local version to a npm published version. I have added additional details as an issue on that repository: https://github.com/Timer/cssnano-preset-simple/issues/6

[4cm4k1]

Hey there, just adding a note here that I commented on @vukers' issue on the other repo, and I have an additional repro here. Thanks!

[kush-agra]

I got the same
f.charCodeAt is not a function error after upgrading to next 9.5.0 reverting to 9.4.4 fixed it but was trying to find a solution and thanks op for pinpointing it

I had columns: 2 auto; in my css removing which fixed it

[barinali]

I got the same
f.charCodeAt is not a function error after upgrading to next 9.5.0 reverting to 9.4.4 fixed it but was trying to find a solution and thanks op for pinpointing it

I had columns: 2 auto; in my css removing which fixed it

I think you can refactor columns: 2 auto; with the following;

column-count: 2;
column-width: auto;

This is at least how I have resolved the same problem on my side.

[kush-agra]

I got the same
f.charCodeAt is not a function error after upgrading to next 9.5.0 reverting to 9.4.4 fixed it but was trying to find a solution and thanks op for pinpointing it
I had columns: 2 auto; in my css removing which fixed it

I think you can refactor columns: 2 auto; with the following;

column-count: 2;
column-width: auto;

This is at least how I have resolved the same problem on my side.

Welp that does indeed fix it, weird
Thanks

[nicholaschiang]

+1 on this issue.

I'm using the temporary fix proposed by @4cm4k1 by adding the following to my package.json:

  "resolutions": {
    "cssnano-preset-simple": "1.1.1"
  },

[justincy]

I'm using NPM so resolutions aren't available to me. I had to change my CSS to avoid this issue. I changed grid-column: span 7 to grid-column: 1 / span 7.

[Timer]

This is fixed in next@^9.5.2-canary.3 or newer!