What tool produces the warning tagged [vite:css] Parse error on line 1:

[blyedev]

I have found that an invalid css line slipped through a code review onto an evergreen branch and I want to prevent that.

90 |  @media (width <= 1440px) {
91 |    .calendly-layer .calendly-wrapper {
92 |      margin-right: calc(
   |      ^^^^^^^^^^^^^^^^^^^
93 |        100px - ((1440px - 100vw) / )
   |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
94 |      ); /* TODO: fix as originally intended */
   |  ^^^^^^^ (x2)

As much as i have spent the last few days deep diving on stylelint and postcss I could not for the life of me find what part of vite tooling produced this warning so i could replicate it in a linting job wihtout having to build the project every time. Stylelilnt can enforce almost anything but funnily enough an invalid calc function is not within their capabilities.

EDIT: I know this is postcss but the question is how can i replicate it without building the project

[hi-ogawa]

Can you create a repro? I asked bolt.new to create one but I didn't see any warning https://stackblitz.com/edit/sb1-fslskl?file=style.css

[blyedev]

I accidentally commented my own post instead of as a reply I hope you were still notified, if not here's this message.

[blyedev]

I'm gonna be honest i have no idea how to use this tool. This error happened in a default nuxt app with css and ts no further customization. Any invalid calc statement on nuxt build triggered this. Now I know this may be a nuxt issue but the only thing that might be at fault is their configuration of vite given that the error im pretty sure comes from your file and I do not have the knowledge to dig through it. Specifically this file

1425 | let msg = `[vite:css] ${warning.text}`

I have generated a fresh project via npx nuxt init, chose npm, and initialized a git repo. I only changed app.vue to the following:

<template>
  <div>
    <NuxtRouteAnnouncer />
    <NuxtWelcome class="test" />
  </div>
</template>

<style lang="css" scoped>
.test {
  max-height: calc(1000vh / );
}
</style>

It yields this error message:

 WARN  [vite:css] Parse error on line 1:                                                                                                                                                                                            15:52:31
1000vh /
--------^
Expecting "CALC", "LPAREN", "ADD", "SUB", "FUNCTION", "LENGTH", "ANGLE", "TIME", "FREQ", "RES", "UNKNOWN_DIMENSION", "EMS", "EXS", "CHS", "REMS", "VHS", "SVHS", "LVHS", "DVHS", "VWS", "SVWS", "LVWS", "DVWS", "VMINS", "SVMINS", "LVMINS", "DVMINS", "VMAXS", "SVMAXS", "LVMAXS", "DVMAXS", "VBS", "SVBS", "LVBS", "DVBS", "VIS", "SVIS", "LVIS", "DVIS", "CQWS", "CQHS", "CQIS", "CQBS", "CQMINS", "CQMAXS", "PERCENTAGE", "NUMBER", "math_expression", "function", "dimension", "number", got unexpected end of input
1  |  
2  |  .test {
3  |    max-height: calc(1000vh / );
   |    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
4  |  }
5  |  

transforming (3) node_modules/nuxt/dist/app/entry.js

It seems to match the afformentioned file and print statement.

[hi-ogawa]

The warning is originally from some postcss plugins and Vite is resurfacing it for them. It looks like nuxt uses cssnano postcss plugin and that's the one adding the warning https://stackblitz.com/edit/sb1-t6qpzx?file=postcss.config.cjs

It's probably better to ask on Nuxt or cssnano if you need some help on this.

[blyedev]

Thank you for all your help, I will continue on in their repo!