[Bug] : Using grid/column syntax breaks compilation

[4cm4k1]

Describe the bug
When I and others attempt to make a production build (./node_modules/.bin/next build) of our Next.js projects, compilation fails with an error, specifically TypeError: f.charCodeAt is not a function, seemingly as a result of using CSS grid and column syntax:

• grid-column: span 2; (Build fails when using CSS grid-column shorthand syntax vercel/next.js#15026 (comment))
• columns: 2 auto; (Build fails when using CSS grid-column shorthand syntax vercel/next.js#15026 (comment))
• in my case, I import '@material/layout-grid/dist/mdc.layout-grid.css'; (How to get more verbose build output? Only production build fails with `TypeError: f.charCodeAt is not a function` vercel/next.js#14907)

Additional notes from @vukers (Timer/cssnano-preset-simple#6 (comment)):

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 in next@9.4.5-canary.23, when "cssnano-simple" was loaded via the dist/ folder instead of the package.
• this works when used with cssnano-preset-simple@1.1.1
• this works when used with cssnano-preset-advanced

To Reproduce
Steps to reproduce the behavior:

1. Clone https://github.com/4cm4k1/personal-website
2. Run yarn install
3. Run yarn build
4. See error

Alternatively, per @vukers again (vercel/next.js#15026 (comment)):

1. Add offending declaration to any CSS file (global or module) (or use a third-party stylesheet with the offending declaration) in a Next.js project, or theoretically another Webpack/CSSNANO-compiled project
2. Run next build
3. See error

$ next build


(node:18663) UnhandledPromiseRejectionWarning: TypeError: f.charCodeAt is not a function
    at /Users/4cm4k1/Code/personal-website/static/css/432b36672b3b1c7f82ae.css:583:7
    at B.exports (/Users/4cm4k1/Code/personal-website/node_modules/cssnano-preset-simple/dist/index.js:1:929448)
    at new ValueParser (/Users/4cm4k1/Code/personal-website/node_modules/cssnano-preset-simple/dist/index.js:1:663327)
    at ValueParser (/Users/4cm4k1/Code/personal-website/node_modules/cssnano-preset-simple/dist/index.js:1:663351)
    at normalize (/Users/4cm4k1/Code/personal-website/node_modules/cssnano-preset-simple/dist/index.js:1:181915)
    at /Users/4cm4k1/Code/personal-website/node_modules/cssnano-preset-simple/dist/index.js:1:182403
    at /Users/4cm4k1/Code/personal-website/node_modules/cssnano-simple/node_modules/postcss/lib/container.js:135:18
    at Rule.each (/Users/4cm4k1/Code/personal-website/node_modules/cssnano-simple/node_modules/postcss/lib/container.js:101:16)
    at Rule.walk (/Users/4cm4k1/Code/personal-website/node_modules/cssnano-simple/node_modules/postcss/lib/container.js:131:17)
    at /Users/4cm4k1/Code/personal-website/node_modules/cssnano-simple/node_modules/postcss/lib/container.js:148:24
    at AtRule.each (/Users/4cm4k1/Code/personal-website/node_modules/cssnano-simple/node_modules/postcss/lib/container.js:101:16)
    at AtRule.walk (/Users/4cm4k1/Code/personal-website/node_modules/cssnano-simple/node_modules/postcss/lib/container.js:131:17)
    at /Users/4cm4k1/Code/personal-website/node_modules/cssnano-simple/node_modules/postcss/lib/container.js:148:24
    at AtRule.each (/Users/4cm4k1/Code/personal-website/node_modules/cssnano-simple/node_modules/postcss/lib/container.js:101:16)
    at AtRule.walk (/Users/4cm4k1/Code/personal-website/node_modules/cssnano-simple/node_modules/postcss/lib/container.js:131:17)
    at /Users/4cm4k1/Code/personal-website/node_modules/cssnano-simple/node_modules/postcss/lib/container.js:148:24
    at Root.each (/Users/4cm4k1/Code/personal-website/node_modules/cssnano-simple/node_modules/postcss/lib/container.js:101:16)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:18663) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:18663) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
Creating an optimized production build

Failed to compile.

TypeError: f.charCodeAt is not a function


> Build error occurred
Error: > Build failed because of webpack errors
    at build (/Users/4cm4k1/Code/personal-website/node_modules/next/dist/build/index.js:15:918)

Expected behavior
Builds successfully.

Screenshots
N/A

Desktop (please complete the following information):

• CSSNANO Version [e.g. 22]: 4.1.10
• Plugins/presets versions:
• Add the output of npx envinfo && npm ls cssnano here:

  System:
    OS: macOS 11.0
    CPU: (8) x64 Intel(R) Core(TM) i7-3820QM CPU @ 2.70GHz
    Memory: 849.02 MB / 16.00 GB
    Shell: 5.8 - /usr/local/bin/zsh
  Binaries:
    Node: 14.6.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.7 - /usr/local/bin/npm
  Managers:
    Cargo: 1.45.0 - /usr/local/bin/cargo
    CocoaPods: 1.9.3 - /usr/local/bin/pod
    Gradle: 6.5.1 - /usr/local/bin/gradle
    Homebrew: 2.4.9 - /usr/local/bin/brew
    pip3: 20.1.1 - /usr/local/bin/pip3
    RubyGems: 3.1.2 - /usr/local/opt/ruby/bin/gem
  Utilities:
    Bazel: 3.4.1 - /usr/local/bin/bazel
    CMake: 3.18.0 - /usr/local/bin/cmake
    Make: 3.81 - /usr/bin/make
    GCC: 4.2.1 - /usr/bin/gcc
    Git: 2.28.0 - /usr/local/bin/git
    Clang: 1200.0.26.2 - /usr/bin/clang
  Servers:
    Apache: 2.4.43 - /usr/sbin/apachectl
  Virtualization:
    Docker: 19.03.12 - /usr/local/bin/docker
  SDKs:
    iOS SDK:
      Platforms: iOS 14.0, DriverKit 20.0, macOS 11.0, tvOS 14.0, watchOS 7.0
    Android SDK:
      API Levels: 28, 29, 30
      Build Tools: 28.0.3, 29.0.3, 30.0.1
      System Images: android-29 | Google Play Intel x86 Atom_64, android-30 | Google Play Intel x86 Atom_64
  IDEs:
    Nano: 4.9.3 - /usr/local/bin/nano
    VSCode: 1.48.0 - /usr/local/bin/code
    Vim: 8.2 - /usr/bin/vim
    Xcode: 12.0/12A8169g - /usr/bin/xcodebuild
  Languages:
    Bash: 5.0.18 - /usr/local/bin/bash
    Go: 1.14.5 - /usr/local/bin/go
    Java: 1.8.0_262 - /usr/bin/javac
    Perl: 5.28.2 - /usr/bin/perl
    PHP: 7.3.18 - /usr/bin/php
    Protoc: 3.12.3 - /usr/local/bin/protoc
    Python: 3.8.5 - /usr/local/opt/python/libexec/bin/python
    Python3: 3.8.5 - /usr/local/bin/python3
    Ruby: 2.7.1 - /usr/local/opt/ruby/bin/ruby
    Rust: 1.45.0 - /usr/local/bin/rustc
  Databases:
    SQLite: 3.28.0 - /Users/4cm4k1/Library/Android/sdk/platform-tools/sqlite3
  Browsers:
    Chrome Canary: 86.0.4215.0
    Firefox Developer Edition: 79.0
    Safari: 14.0

yarn list v1.22.4
warning Filtering by arguments is deprecated. Please use the pattern option instead.
├─ cssnano-preset-default@4.0.7
├─ cssnano-preset-simple@1.1.4
├─ cssnano-simple@1.0.5
├─ cssnano-util-get-arguments@4.0.0
├─ cssnano-util-get-match@4.0.0
├─ cssnano-util-raw-cache@4.0.1
├─ cssnano-util-same-parent@4.0.1
└─ cssnano@4.1.10
✨  Done in 0.98s.

Additional context
N/A

x-ref: vercel/next.js#15026
x-ref: Timer/cssnano-preset-simple#6

[alexander-akait]

PR welcome

[anikethsaha]

Thanks for the report.

This is because our plugins are modifying the AST. so postcss-normalize-string is getting modified AST.
for span 2
The AST[declaration],value is coming as ['span 2'] instead of just span 2.

I tried running all the normalized plugins first before the minify and reduce ones, like this

 [postcssDiscardComments, options.discardComments],
    [postcssNormalizeUrl, options.normalizeUrl],
    [postcssNormalizeString, options.normalizeString],
    [postcssNormalizeRepeatStyle, options.normalizeRepeatStyle],
    [postcssNormalizePositions, options.normalizePositions],
    [postcssNormalizeWhitespace, options.normalizeWhitespace],
    [postcssMinifyGradients, options.minifyGradients],
    [postcssReduceInitial, options.reduceInitial],
    [postcssSvgo, options.svgo],
    [postcssNormalizeDisplayValues, options.normalizeDisplayValues],
    [postcssReduceTransforms, options.reduceTransforms],
    [postcssColormin, options.colormin],
    [postcssNormalizeTimingFunctions, options.normalizeTimingFunctions],
    [postcssCalc, options.calc],
    [postcssConvertValues, options.convertValues],
    [postcssOrderedValues, options.orderedValues],
    [postcssMinifySelectors, options.minifySelectors],
    [postcssMinifyParams, options.minifyParams],
    [postcssNormalizeCharset, options.normalizeCharset],
    [postcssDiscardOverridden, options.discardOverridden],
    [postcssNormalizeUnicode, options.normalizeUnicode],
    [postcssMinifyFontValues, options.minifyFontValues],
    [postcssMergeLonghand, options.mergeLonghand],
    [postcssDiscardDuplicates, options.discardDuplicates],
    [postcssMergeRules, options.mergeRules],
    [postcssDiscardEmpty, options.discardEmpty],
    [postcssUniqueSelectors, options.uniqueSelectors],
    [cssDeclarationSorter, options.cssDeclarationSorter],
    [rawCache, options.rawCache],

In the cssnano-preset-default, it is working fine. But that will be a breaking change and I am not sure whether other cases will be breaking as well.

We can other wise add a check for the whether the value is of type array or not in this line

if (Array.isArray(node[param])) {
  newValue = normalize(node[param][0], preferredQuote);
} else {
  newValue = normalize(node[param], preferredQuote);
}

[Timer]

Why is reordering the plugins considered breaking?

[anikethsaha]

I am not sure whether it will be breaking change for sure or not. But there is a huge possibility that it will be a breaking change.
for eg #886, in this, I changed the position of one plugin and it already looks like the minification result has been changed a lot and creating a wrong output.