cannot parse grid values 1/-1

[caraya]

• Operating System (or Browser): macOS Catalina 10.15
• Node Version: 12.18.3
• postcss-values-parser Version: 2.0 this is bundled with another package (precss), I did not install values parser on its own.

Some shorthand placement CSS grid rules with a -1 value cause errors. The value is a valid grid shorthand declaration so I'm suspecting a bug on the parser.

How Do We Reproduce?

npm i -D autoprefixer gulp gulp-postcss gulp-rename gulp-sourcemaps postcss postcss-cssnext postcss-lab-function postcss-scss postcss-short precss 

gulpfile.js

const gulp = require('gulp');
const rename = require('gulp-rename');
// Sourcemaps
const sourcemaps = require('gulp-sourcemaps');
// PostCSS and related plugins
const postcss = require('gulp-postcss');
const scss = require('postcss-scss');


const processors = [
  require('precss'),
  require('postcss-lab-function'),
  require('autoprefixer')
]

gulp.task('default', function() {
  return gulp.src('src/original/*.scss')
  .pipe(sourcemaps.init())
  .pipe(postcss(processors,  { parser: scss }))
  .pipe(rename({ suffix: '.css' }))
  .pipe(sourcemaps.write('.'))
  .pipe(gulp.dest('src/css'))
})

CSS

This is the specific rule that causes the error. It is valid shorthand CSS grid placement syntax (start on the first column and end on the first column in reverse order). There are other column placement rules in the stylesheet and they all work

/* Width of "full-wide" blocks */
.wp-block[data-align="full"] {
  grid-column: 1/-1;
}

Expected Behavior

The rule would be converted or passed as valid.

Actual Behavior

it produces the following error:

[11:42:12] Using gulpfile ~/code/theme-css-changes/gulpfile.js
[11:42:12] Starting 'default'...
[11:42:12] 'default' errored after 256 ms
[11:42:12] ParserError in plugin "gulp-postcss"
Message:
    Syntax Error at line: 1, column 3
Details:
    postcssNode: grid-column: 1/-1
    fileName: /Users/carlos/code/theme-css-changes/src/original/editor-styles.scss
    domainEmitter: [object Object]
    domainThrown: false

Stack:
ParserError: Syntax Error at line: 1, column 3
    at /Users/carlos/code/theme-css-changes/src/original/editor-styles.scss:34:3
    at Parser.error (/Users/carlos/code/theme-css-changes/node_modules/postcss-env-function/node_modules/postcss-values-parser/lib/parser.js:127:11)
    at Parser.operator (/Users/carlos/code/theme-css-changes/node_modules/postcss-env-function/node_modules/postcss-values-parser/lib/parser.js:183:18)
    at Parser.parseTokens (/Users/carlos/code/theme-css-changes/node_modules/postcss-env-function/node_modules/postcss-values-parser/lib/parser.js:245:14)
    at Parser.loop (/Users/carlos/code/theme-css-changes/node_modules/postcss-env-function/node_modules/postcss-values-parser/lib/parser.js:132:12)
    at Parser.parse (/Users/carlos/code/theme-css-changes/node_modules/postcss-env-function/node_modules/postcss-values-parser/lib/parser.js:51:17)
    at getReplacedValue (/Users/carlos/code/theme-css-changes/node_modules/postcss-env-function/index.cjs.js:109:37)
    at /Users/carlos/code/theme-css-changes/node_modules/postcss-env-function/index.cjs.js:271:35
    at /Users/carlos/code/theme-css-changes/node_modules/postcss/lib/container.js:56:18
    at Rule.each (/Users/carlos/code/theme-css-changes/node_modules/postcss/lib/container.js:42:16)
    at Rule.walk (/Users/carlos/code/theme-css-changes/node_modules/postcss/lib/container.js:53:17)

[shellscape]

Would be happy to review a PR which resolved this issue.

[liujingbreak]

For postcss-values-parser@2.0.1 I have a similar issue about incorrectly recognizing nagetive number as 2 tokens:

Evaluate below expression

require('postcss-values-parser)('2*-1').tokens

result is

[
    [
      'word', '2',
      1,      1,
      1,      1,
      0
    ],
    [ 'operator', '*', 1, 2, 1, 3, 1 ],
    [ 'operator', '-', 1, 3, 1, 4, 2 ],
    [
      'word', '1',
      1,      4,
      1,      4,
      3
    ],
    [
      ')', ')', 1, 5,
      1,   4,   4
    ]
  ]

-1 is recognized as "operator" and "word"

Unfortunatly, this breaks project that is consist of create-react-app v4.0.3 (latest stable version) and Material web library

└─┬ react-scripts@4.0.3
  └─┬ postcss-preset-env@6.7.0
    ├─┬ postcss-color-functional-notation@2.0.1
    │ └── postcss-values-parser@2.0.1
    ├─┬ postcss-color-gray@5.0.0
    │ └── postcss-values-parser@2.0.1 deduped
    ├─┬ postcss-color-hex-alpha@5.0.3
    │ └── postcss-values-parser@2.0.1 deduped
    ├─┬ postcss-color-mod-function@3.0.3
    │ └── postcss-values-parser@2.0.1 deduped
    ├─┬ postcss-color-rebeccapurple@4.0.1
    │ └── postcss-values-parser@2.0.1 deduped
    ├─┬ postcss-custom-properties@8.0.11
    │ └── postcss-values-parser@2.0.1 deduped
    ├─┬ postcss-double-position-gradients@1.0.0
    │ └── postcss-values-parser@2.0.1 deduped
    ├─┬ postcss-env-function@2.0.2
    │ └── postcss-values-parser@2.0.1 deduped
    ├─┬ postcss-image-set-function@3.0.1
    │ └── postcss-values-parser@2.0.1 deduped
    ├─┬ postcss-lab-function@2.0.1
    │ └── postcss-values-parser@2.0.1 deduped
    └─┬ postcss-place@4.0.1
      └── postcss-values-parser@2.0.1 deduped

[caraya]

What happens if you close the quotation mark on our statement?

require('postcss-values-parser)('2*-1').tokens

[liujingbreak]

What happens if you close the quotation mark on our statement?

require('postcss-values-parser)('2*-1').tokens

My bad, the missing 'quote' mark is just a copy-paste typo of dummy code in my comment, the original code to repreduce this issue is

require('postcss-values-parser)('calc(var(--mdc-layout-grid-gutter-desktop, 24px)/2*-1)').tokens

It can be repreduced @caraya, thanks for pointing out typo.

And I found my issue is same as #138

[shellscape]

This is resolved in the major/css-tree branch, which will be released as v7.