Invalid CSS when extending theme with semanticTokens (colors and shadows) about panda

[omarkhatibco]

@isBatak I just found it,

it generates 2 css vars for the shadow but one without any class

    {
        --shadows-e1: 0px 1px 2px rgba(0, 0, 0, .3), 0px 1px 3px 1px rgba(0, 0, 0, .15);
        --shadows-e2: 0px 1px 2px rgba(0, 0, 0, .3), 0px 2px 6px 2px rgba(0, 0, 0, .15);
        --shadows-e3: 0px 4px 8px 3px rgba(0, 0, 0, .15), 0px 1px 3px rgba(0, 0, 0, .3);
        --shadows-e4: 0px 6px 10px 4px rgba(0, 0, 0, .15), 0px 2px 3px rgba(0, 0, 0, .3);
        --shadows-e5: 0px 8px 12px 6px rgba(0, 0, 0, .15), 0px 4px 4px rgba(0, 0, 0, .3) 
    }
    .dark{
        --shadows-e1: 0px 1px 3px 1px rgba(0, 0, 0, .15), 0px 1px 2px rgba(0, 0, 0, .3);
        --shadows-e2: 0px 2px 6px 2px rgba(0, 0, 0, .15), 0px 1px 2px rgba(0, 0, 0, .3);
        --shadows-e3: 0px 4px 8px 3px rgba(0, 0, 0, .15), 0px 1px 3px rgba(0, 0, 0, .3);
        --shadows-e4: 0px 6px 10px 4px rgba(0, 0, 0, .15), 0px 2px 3px rgba(0, 0, 0, .3);
        --shadows-e5: 0px 8px 12px 6px rgba(0, 0, 0, .15), 0px 4px 4px rgba(0, 0, 0, .3) 
    }

and the first part is already exists under the root selector

[isBatak]

@omarkhatibco

one more thing I just noticed inside the generated index.css, that the last line of all generated css vars are missing a semicolon

This is how PostCSS stringifier works https://github.com/postcss/postcss/blob/main/lib/stringifier.js and Panda is using the same one. Also, ; is just a separator so omitting the last one is a valid CSS Syntax Module Level 3, judging by this conversation https://stackoverflow.com/questions/11062615/will-css-3-still-allow-omitting-final-semicolons. Honestly, I could not find a correct explanation in the specification but I checked it with the validator and it's valid syntax. So I would not bother with it.

Btw I'm working on other issues you mentioned. It's quite complex issue but I have a feeling I'm pretty close to the solution :D

[omarkhatibco]

@isBatak thank you for the explanation.

Tbh, I get a warning fron vitejs each time I build the app, but since it's fine I can just ignore it

[isBatak]

@omarkhatibco can you share the warning?

[omarkhatibco]

@isBatak
here is the error:

I know this is not helpful, so here is the repo: https://github.com/omarkhatibco/pandacss-test
just run pnpm build

[isBatak]

I would not say it's because of ;... I'm more suspicious of this part

{
  --shadows-e1: 0px 1px 2px rgba(0, 0, 0, 0.3);
}

{
  --shadows-e1: 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
}

[isBatak]

@omarkhatibco Could you try this instead of array

e1: {
    value: {
      base: '0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15)',
      _dark: '0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px rgba(0, 0, 0, 0.3)',
    },
  },

[omarkhatibco]

@isBatak, yup this solved the problem in line 463

[isBatak]

@omarkhatibco what about line 455?
Also, my suggestion is just a workaround and test to confirm that issue is not in in the ;.
Array syntax should also work... I'm writing a test as we speak.

[omarkhatibco]

@isBatak the error in line 455 is still here, I'm trying to know which one is that, but yeah array syntax was broken and I forget to open a ticket