Not working with PostCSS 8 / Webpack 4 / TailwindCSS

[lewebsimple]

I can't get this to work with the latest PostCSS and Webpack 4.

postcss.config.js

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('postcss-preset-env'),
    require('flex-gap-polyfill')(),
  ],
};

I get the following error:

JisonLexerError: Lexical error on line 1: Unrecognized text.

  Erroneous area:
1: -auto * var(--fgp-gap_percentage-decimal_row)
^...^

[gavinmcfarland]

Hi, thanks for raising this issue. Admittedly I've not had chance to try this with PostCSS 8. I'll investigate this issue shortly.

[gavinmcfarland]

@lewebsimple I just want to check something. Are you by any chance using margin: auto; with the gap property in any way? This might be a bug/limitation which I'm recently become aware of but not had chance to make better. It shouldn't be causing it to error but PostCSS 8 might have some stricter linting rules. I will investigate it further when I get chance. For now if it is related to that, you might have to use margin: auto; on a separate wrapper container if possible.

[yoanmalie]

Hello, I have the same issue but I can't find any margin: auto used with the gap.

Here the full error:

Unknown error from PostCSS plugin. Your current PostCSS version is 8.1.0, but cssnano uses 7.0.34. Perhaps this is the source of the error below.
[18:24:15] Error:  JisonLexerError in plugin "gulp-postcss"
Message:
    Lexical error on line 1: Unrecognized text.

  Erroneous area:
1: -auto * var(--fgp-gap_percentage-decimal_row)
^...^
Details:
    hash: [object Object]
    postcssNode: --fgp-gap_percentage-to-pixels_column:calc(-auto * var(--fgp-gap_percentage-decimal_row)) !important
    fileName: /Users/yoan/Projets/my-project/src/assets/css/styles.css

Stack:
JisonLexerError: Lexical error on line 1: Unrecognized text.

  Erroneous area:
1: -auto * var(--fgp-gap_percentage-decimal_row)
^...^
    at Object.parseError (/Users/yoan/Projets/my-project/node_modules/postcss-calc/dist/parser.js:1200:15)
    at Object.lexer_parseError [as parseError] (/Users/yoan/Projets/my-project/node_modules/postcss-calc/dist/parser.js:2333:44)
    at Object.lexer_next [as next] (/Users/yoan/Projets/my-project/node_modules/postcss-calc/dist/parser.js:3328:22)
    at Object.lexer_fastLex [as fastLex] (/Users/yoan/Projets/my-project/node_modules/postcss-calc/dist/parser.js:3403:18)
    at fastLex (/Users/yoan/Projets/my-project/node_modules/postcss-calc/dist/parser.js:1603:27)
    at Parser.parse (/Users/yoan/Projets/my-project/node_modules/postcss-calc/dist/parser.js:1677:30)
    at /Users/yoan/Projets/my-project/node_modules/postcss-calc/dist/lib/transform.js:33:30
    at walk (/Users/yoan/Projets/my-project/node_modules/postcss-value-parser/lib/walk.js:7:16)
    at ValueParser.walk (/Users/yoan/Projets/my-project/node_modules/postcss-value-parser/lib/index.js:18:3)
    at transformValue (/Users/yoan/Projets/my-project/node_modules/postcss-calc/dist/lib/transform.js:24:50)
[18:24:15] 'styles:build' errored after 3.07 s
[18:24:15] Error: premature close
    at onclosenexttick (/Users/yoan/Projets/my-project/node_modules/end-of-stream/index.js:53:86)
    at processTicksAndRejections (internal/process/task_queues.js:75:11)

[gavinmcfarland]

Hi @yoanmalie. Thanks for this. I'll take a look at it this weekend. I think the issue might be being caused by the use of percentage gaps and possibly the container has a width of auto. The polyfill uses the width set on the container to help aid in calculating the correct gap spacing. It might be in this case that a fallback might be required, but I'll investigate it further at the weekend or the end of this week.

[gavinmcfarland]

Ok I think I know what the issue is, hoping to have a fix ready by the end of the week.

Basically the plugin is generating invalid CSS in certain scenarios when `width: auto' exists in the stylesheet but I didn't spot this before PostCSS 8.

[gavinmcfarland]

Hi @yoanmalie @lewebsimple I've published a minor fix which I hope will resolve the error you're seeing. Please update to version 1.0.4 and let me know if it resolves the issue you are experiencing.

[gavinmcfarland]

Closing this issue now as should be fixed in 2.0.1.