[Bug]: Error parsing `calc-size`

[Antonio-Laguna]

Describe the bug

Using

block-size: calc-size(auto, size);

Creates this error

Import trace for requested module:
./components/raven/global/Footer/styles.module.css
./components/raven/global/Footer/index.tsx
./app/not-found.tsx

./components/raven/global/Footer/styles.module.css
Warning

(127:2) postcss-calc: Lexical error on line 1: Unrecognized text.

  Erroneous area:
1: auto, size
^..^

Import trace for requested module:
./components/raven/global/Footer/styles.module.css

Expected behaviour

Expected not to fail

Steps to reproduce

Try to parse any block with that line:

.foo {
  block-size: calc-size(auto, size);
}

Version

10.0.2

Environment

System:
    OS: macOS 15.1.1
    CPU: (12) arm64 Apple M2 Max
    Memory: 100.92 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh

Package details

├─┬ @10up/stylelint-config@3.0.0
│ ├─┬ stylelint-order@6.0.4
│ │ ├─┬ postcss-sorting@8.0.2
│ │ │ └── postcss@8.4.47 deduped
│ │ └── postcss@8.4.47 deduped
│ └─┬ stylelint-stylistic@0.4.5
│   └── postcss@8.4.47 deduped
├─┬ @csstools/postcss-global-data@3.0.0
│ └── postcss@8.4.47 deduped
├─┬ @storybook/nextjs@8.4.2
│ ├─┬ css-loader@6.11.0
│ │ ├─┬ icss-utils@5.1.0
│ │ │ └── postcss@8.4.47 deduped
│ │ ├─┬ postcss-modules-extract-imports@3.1.0
│ │ │ └── postcss@8.4.47 deduped
│ │ ├─┬ postcss-modules-local-by-default@4.0.5
│ │ │ └── postcss@8.4.47 deduped
│ │ ├─┬ postcss-modules-scope@3.2.0
│ │ │ └── postcss@8.4.47 deduped
│ │ ├─┬ postcss-modules-values@4.0.0
│ │ │ └── postcss@8.4.47 deduped
│ │ └── postcss@8.4.47 deduped
│ ├─┬ postcss-loader@8.1.1
│ │ └── postcss@8.4.47 deduped
│ ├── postcss@8.4.47 deduped
│ └─┬ resolve-url-loader@5.0.0
│   └── postcss@8.4.47 deduped
├─┬ cssnano@7.0.6
│ ├─┬ cssnano-preset-default@7.0.6
│ │ ├─┬ css-declaration-sorter@7.2.0
│ │ │ └── postcss@8.4.47 deduped
│ │ ├─┬ cssnano-utils@5.0.0
│ │ │ └── postcss@8.4.47 deduped
│ │ ├─┬ postcss-calc@10.0.2
│ │ │ └── postcss@8.4.47 deduped
│ │ ├─┬ postcss-colormin@7.0.2
│ │ │ └── postcss@8.4.47 deduped
│ │ ├─┬ postcss-convert-values@7.0.4
│ │ │ └── postcss@8.4.47 deduped
│ │ ├─┬ postcss-discard-comments@7.0.3
│ │ │ └── postcss@8.4.47 deduped
│ │ ├─┬ postcss-discard-duplicates@7.0.1
│ │ │ └── postcss@8.4.47 deduped
│ │ ├─┬ postcss-discard-empty@7.0.0
│ │ │ └── postcss@8.4.47 deduped
│ │ ├─┬ postcss-discard-overridden@7.0.0
│ │ │ └── postcss@8.4.47 deduped
│ │ ├─┬ postcss-merge-longhand@7.0.4
│ │ │ ├── postcss@8.4.47 deduped
│ │ │ └─┬ stylehacks@7.0.4
│ │ │   └── postcss@8.4.47 deduped
│ │ ├─┬ postcss-merge-rules@7.0.4
│ │ │ └── postcss@8.4.47 deduped
│ │ ├─┬ postcss-minify-font-values@7.0.0
│ │ │ └── postcss@8.4.47 deduped
│ │ ├─┬ postcss-minify-gradients@7.0.0
│ │ │ └── postcss@8.4.47 deduped
│ │ ├─┬ postcss-minify-params@7.0.2
│ │ │ └── postcss@8.4.47 deduped
│ │ ├─┬ postcss-minify-selectors@7.0.4
│ │ │ └── postcss@8.4.47 deduped
│ │ ├─┬ postcss-normalize-charset@7.0.0
│ │ │ └── postcss@8.4.47 deduped
│ │ ├─┬ postcss-normalize-display-values@7.0.0
│ │ │ └── postcss@8.4.47 deduped
│ │ ├─┬ postcss-normalize-positions@7.0.0
│ │ │ └── postcss@8.4.47 deduped
│ │ ├─┬ postcss-normalize-repeat-style@7.0.0
│ │ │ └── postcss@8.4.47 deduped
│ │ ├─┬ postcss-normalize-string@7.0.0
│ │ │ └── postcss@8.4.47 deduped
│ │ ├─┬ postcss-normalize-timing-functions@7.0.0
│ │ │ └── postcss@8.4.47 deduped
│ │ ├─┬ postcss-normalize-unicode@7.0.2
│ │ │ └── postcss@8.4.47 deduped
│ │ ├─┬ postcss-normalize-url@7.0.0
│ │ │ └── postcss@8.4.47 deduped
│ │ ├─┬ postcss-normalize-whitespace@7.0.0
│ │ │ └── postcss@8.4.47 deduped
│ │ ├─┬ postcss-ordered-values@7.0.1
│ │ │ └── postcss@8.4.47 deduped
│ │ ├─┬ postcss-reduce-initial@7.0.2
│ │ │ └── postcss@8.4.47 deduped
│ │ ├─┬ postcss-reduce-transforms@7.0.0
│ │ │ └── postcss@8.4.47 deduped
│ │ ├─┬ postcss-svgo@7.0.1
│ │ │ └── postcss@8.4.47 deduped
│ │ ├─┬ postcss-unique-selectors@7.0.3
│ │ │ └── postcss@8.4.47 deduped
│ │ └── postcss@8.4.47 deduped
│ └── postcss@8.4.47 deduped
├─┬ madge@6.1.0
│ ├─┬ detective-postcss@6.1.3
│ │ ├─┬ postcss-values-parser@6.0.2
│ │ │ └── postcss@8.4.47 deduped
│ │ └── postcss@8.4.47 deduped
│ └─┬ precinct@8.3.1
│   └─┬ detective-postcss@4.0.0
│     └── postcss@8.4.47 deduped
├─┬ next@14.2.16
│ └── postcss@8.4.31
├─┬ postcss-import@16.1.0
│ └── postcss@8.4.47 deduped
├─┬ postcss-mixins@11.0.3
│ ├─┬ postcss-js@4.0.1
│ │ └── postcss@8.4.47 deduped
│ ├─┬ postcss-simple-vars@7.0.1
│ │ └── postcss@8.4.47 deduped
│ ├── postcss@8.4.47 deduped
│ └─┬ sugarss@4.0.1
│   └── postcss@8.4.47 deduped
├─┬ postcss-preset-env@10.0.8
│ ├─┬ @csstools/postcss-cascade-layers@5.0.1
│ │ └── postcss@8.4.47 deduped
│ ├─┬ @csstools/postcss-color-function@4.0.4
│ │ ├─┬ @csstools/utilities@2.0.0
│ │ │ └── postcss@8.4.47 deduped
│ │ └── postcss@8.4.47 deduped
│ ├─┬ @csstools/postcss-color-mix-function@3.0.4
│ │ └── postcss@8.4.47 deduped
│ ├─┬ @csstools/postcss-content-alt-text@2.0.3
│ │ └── postcss@8.4.47 deduped
│ ├─┬ @csstools/postcss-exponential-functions@2.0.3
│ │ └── postcss@8.4.47 deduped
│ ├─┬ @csstools/postcss-font-format-keywords@4.0.0
│ │ └── postcss@8.4.47 deduped
│ ├─┬ @csstools/postcss-gamut-mapping@2.0.4
│ │ └── postcss@8.4.47 deduped
│ ├─┬ @csstools/postcss-gradients-interpolation-method@5.0.4
│ │ └── postcss@8.4.47 deduped
│ ├─┬ @csstools/postcss-hwb-function@4.0.4
│ │ └── postcss@8.4.47 deduped
│ ├─┬ @csstools/postcss-ic-unit@4.0.0
│ │ └── postcss@8.4.47 deduped
│ ├─┬ @csstools/postcss-initial@2.0.0
│ │ └── postcss@8.4.47 deduped
│ ├─┬ @csstools/postcss-is-pseudo-class@5.0.1
│ │ └── postcss@8.4.47 deduped
│ ├─┬ @csstools/postcss-light-dark-function@2.0.6
│ │ └── postcss@8.4.47 deduped
│ ├─┬ @csstools/postcss-logical-float-and-clear@3.0.0
│ │ └── postcss@8.4.47 deduped
│ ├─┬ @csstools/postcss-logical-overflow@2.0.0
│ │ └── postcss@8.4.47 deduped
│ ├─┬ @csstools/postcss-logical-overscroll-behavior@2.0.0
│ │ └── postcss@8.4.47 deduped
│ ├─┬ @csstools/postcss-logical-resize@3.0.0
│ │ └── postcss@8.4.47 deduped
│ ├─┬ @csstools/postcss-logical-viewport-units@3.0.2
│ │ └── postcss@8.4.47 deduped
│ ├─┬ @csstools/postcss-media-minmax@2.0.3
│ │ └── postcss@8.4.47 deduped
│ ├─┬ @csstools/postcss-media-queries-aspect-ratio-number-values@3.0.3
│ │ └── postcss@8.4.47 deduped
│ ├─┬ @csstools/postcss-nested-calc@4.0.0
│ │ └── postcss@8.4.47 deduped
│ ├─┬ @csstools/postcss-normalize-display-values@4.0.0
│ │ └── postcss@8.4.47 deduped
│ ├─┬ @csstools/postcss-oklab-function@4.0.4
│ │ └── postcss@8.4.47 deduped
│ ├─┬ @csstools/postcss-progressive-custom-properties@4.0.0
│ │ └── postcss@8.4.47 deduped
│ ├─┬ @csstools/postcss-relative-color-syntax@3.0.4
│ │ └── postcss@8.4.47 deduped
│ ├─┬ @csstools/postcss-scope-pseudo-class@4.0.1
│ │ └── postcss@8.4.47 deduped
│ ├─┬ @csstools/postcss-stepped-value-functions@4.0.3
│ │ └── postcss@8.4.47 deduped
│ ├─┬ @csstools/postcss-text-decoration-shorthand@4.0.1
│ │ └── postcss@8.4.47 deduped
│ ├─┬ @csstools/postcss-trigonometric-functions@4.0.3
│ │ └── postcss@8.4.47 deduped
│ ├─┬ @csstools/postcss-unset-value@4.0.0
│ │ └── postcss@8.4.47 deduped
│ ├─┬ autoprefixer@10.4.20
│ │ └── postcss@8.4.47 deduped
│ ├─┬ css-blank-pseudo@7.0.1
│ │ └── postcss@8.4.47 deduped
│ ├─┬ css-has-pseudo@7.0.1
│ │ └── postcss@8.4.47 deduped
│ ├─┬ css-prefers-color-scheme@10.0.0
│ │ └── postcss@8.4.47 deduped
│ ├─┬ postcss-attribute-case-insensitive@7.0.1
│ │ └── postcss@8.4.47 deduped
│ ├─┬ postcss-clamp@4.1.0
│ │ └── postcss@8.4.47 deduped
│ ├─┬ postcss-color-functional-notation@7.0.4
│ │ └── postcss@8.4.47 deduped
│ ├─┬ postcss-color-hex-alpha@10.0.0
│ │ └── postcss@8.4.47 deduped
│ ├─┬ postcss-color-rebeccapurple@10.0.0
│ │ └── postcss@8.4.47 deduped
│ ├─┬ postcss-custom-media@11.0.4
│ │ └── postcss@8.4.47 deduped
│ ├─┬ postcss-custom-properties@14.0.3
│ │ └── postcss@8.4.47 deduped
│ ├─┬ postcss-custom-selectors@8.0.3
│ │ └── postcss@8.4.47 deduped
│ ├─┬ postcss-dir-pseudo-class@9.0.1
│ │ └── postcss@8.4.47 deduped
│ ├─┬ postcss-double-position-gradients@6.0.0
│ │ └── postcss@8.4.47 deduped
│ ├─┬ postcss-focus-visible@10.0.1
│ │ └── postcss@8.4.47 deduped
│ ├─┬ postcss-focus-within@9.0.1
│ │ └── postcss@8.4.47 deduped
│ ├─┬ postcss-font-variant@5.0.0
│ │ └── postcss@8.4.47 deduped
│ ├─┬ postcss-gap-properties@6.0.0
│ │ └── postcss@8.4.47 deduped
│ ├─┬ postcss-image-set-function@7.0.0
│ │ └── postcss@8.4.47 deduped
│ ├─┬ postcss-lab-function@7.0.4
│ │ └── postcss@8.4.47 deduped
│ ├─┬ postcss-logical@8.0.0
│ │ └── postcss@8.4.47 deduped
│ ├─┬ postcss-nesting@13.0.1
│ │ └── postcss@8.4.47 deduped
│ ├─┬ postcss-opacity-percentage@3.0.0
│ │ └── postcss@8.4.47 deduped
│ ├─┬ postcss-overflow-shorthand@6.0.0
│ │ └── postcss@8.4.47 deduped
│ ├─┬ postcss-page-break@3.0.4
│ │ └── postcss@8.4.47 deduped
│ ├─┬ postcss-place@10.0.0
│ │ └── postcss@8.4.47 deduped
│ ├─┬ postcss-pseudo-class-any-link@10.0.1
│ │ └── postcss@8.4.47 deduped
│ ├─┬ postcss-replace-overflow-wrap@4.0.0
│ │ └── postcss@8.4.47 deduped
│ ├─┬ postcss-selector-not@8.0.1
│ │ └── postcss@8.4.47 deduped
│ └── postcss@8.4.47 deduped
├── postcss@8.4.47
└─┬ stylelint@15.11.0
  ├─┬ postcss-safe-parser@6.0.0
  │ └── postcss@8.4.47 deduped
  └── postcss@8.4.47 deduped

Additional context

No response

[Antonio-Laguna]

Happy to open a PR to fix this

[ludofischer]

Happy to open a PR to fix this

I will merge it if you do, do you know what is causing the issue?

[Matherss]

same error with
block-size: calc-size(auto, size);

[Antonio-Laguna]

@Matherss yes, it's just not handling this fine. I have this working locally but didn't have time to clean up, will try to submit a PR this week :)

[imploding]

+1 This tripped me up last week too. I've been seeing more calc-size() discussion now that it's graduated out of chrome canary.

Setting interpolate-size: allow-keywords; might work in place of some calc-size scenarios, but not guaranteed.