`1 / -1` works, but `1/-1` gives syntax error (stage 0)

[hdoro]

Hey there! Thanks for this awesome tool 😁

I'm having a problem with grid-column: even though grid-column: 1/-1 is valid syntax, postcss-preset-env set to stage: 0 will crash unless we give spaces between the numbers and the slash (grid-column: 1 / -1), giving the following error message:

ParserError: "Syntax Error at line: 1, column 3"
    ParserError ParserError.js:14
    value parser.js:127
    value parser.js:183
    value parser.js:245
    value parser.js:132
    value parser.js:51
    getReplacedValue index.cjs.js:109
    _callee49 index.cjs.js:271
    walk container.es6:110
    each container.es6:76
    walk container.es6:107
    walk container.es6:121
    each container.es6:76
    walk container.es6:107
    _callee49 index.cjs.js:267
    runtime runtime.js:62
    runtime runtime.js:288
    runtime runtime.js:114
    asyncGeneratorStep index.cjs.js:12
    _next index.cjs.js:34
iframeConsoleRunner-dc0d50e60903d6825042d06159a8d5ac69a6c0e9bcef91e3380b17617061ce0f.js:1:2025

I've tested this in the online playground, so I'm sure this is not specific to my set-up. A minimal example is the following CSS code, which will break in stage 0 (but not in 1 up):

div {
  grid-column: 1/-1;
}

Let me know how I can be of help \o/

[Semigradsky]

@hcavalieri online playground does not update automatically. So it can be related to certain dependencies versions. Can you try to update your dependencies (postcss especially)? It looks like error in postcss parser.

[arshaw]

I'm getting this error too, with 2px/-2. The bug seems to be related to dividing by ANY negative number within a calc statement and not including whitespace between the / and the -.

Reproduction using latest version: https://codesandbox.io/s/friendly-gates-9l1du?file=/src/index.js

[arshaw]

Also happens with *. Repro: https://codesandbox.io/s/goofy-carson-2ejc2?file=/src/index.js

@allenrabinovich

[danlaush]

Hello, we're having the same issue as well. It seems to come from:

• postcss-preset-env
  • uses postcss-custom-properties
    • uses postcss-values-parser <-- problem source

The issue is fixed in values-parser@3.0.0 (a major update so it uses the same tokenizer as postcss core) and was applied in custom-properties@9.0.0. preset-env is still using custom-properties@8.x. Hopefully it wouldn't be difficult to migrate from 8 to 9, but I don't know.

We use yarn, so in the mean time I was able to solve the issue with selective resolutions in our package.json:

  "resolutions": {
    "postcss-custom-properties": "^9.1.1"
  }

[Joozty]

Unfortunately, even if I put spaces there it still doesn't work. Hopefully, it gets fixed soon :)

[Ranger1230]

I have the same issue when using css variables
Errors: .carousel{--some-value:1;grid-auto-columns:calc(var(--some-value)/var(--some-value));}
Works: .carousel{--some-value:1;grid-auto-columns:calc(var(--some-value)/ var(--some-value));}

File details

package.json

{
  "name": "postcss-prest-env-error",
  "version": "1.0.0",
  "scripts": {
    "postcss:working": "postcss working.css --verbose --output=working-output.css",
    "postcss:problem": "postcss problem.css --verbose --output=problem-output.css"
  },
  "devDependencies": {
    "postcss": "^8.3.9",
    "postcss-cli": "^9.0.1",
    "postcss-load-config": "^3.1.0",
    "postcss-preset-env": "^7.0.1"
  }
}

.browserslistrc

> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11 # For IE 9-11 support, remove 'not'.

postcss.config.js

module.exports = {
    plugins: [
		require('postcss-preset-env')
    ],
}

working.css

.carousel{--some-value:1;grid-auto-columns:calc(var(--some-value)/ var(--some-value));}

problem.css

.carousel{--some-value:1;grid-auto-columns:calc(var(--some-value)/var(--some-value));}

[romainmenke]

@hdoro We migrated every plugin to use postcss-value which doesn't have this issue.

It should be resolved by updating to the latest versions.