Questions for v7 setup, postcss

[snow vale]

Hi guys, i have encounter some issue after finished my v7 setup for testing, and need some enlighten.
I am using webstorm ide and following the guide from nextjs docs for the installation.

1. I found that light-dark in my module.css is showing as Unknown function 'light-dark' ? But it's actually working.

2. Also in my module.css i unable to use nested like .p { &:hover {} }, is this because of my postcss setup or ide?

module.exports = {
  plugins: {
    'postcss-preset-mantine': {},
    'postcss-simple-vars': {
      variables: {
        'mantine-breakpoint-xs': '36em',
        'mantine-breakpoint-sm': '48em',
        'mantine-breakpoint-md': '62em',
        'mantine-breakpoint-lg': '75em',
        'mantine-breakpoint-xl': '88em',
      },
    },
  },
};

I believe both of the issues above should be related either postcss or ide. Do i need to install extra plugins or anything i missing for the setup? Anyone using webstorm and facing the same issue?

3. If i preset custom colors using createTheme, can i access it with e.g. var(--mantine-color-dark-3)? So far i only get variables that defined by mantine. For color and c, i can use it like customcolor.3. But if in module.css, i have to self define it?

4. If i defined custom size for my Text, will it shown as suggestion like xs, md, etc? Or this behaviour is not supported?

components: {
        Text: Text.extend({
            vars: (_theme, props) => {
                if (props.size === 'xxs') {
                    return {
                        root: {
                            '--text-lh': rem(15),
                            '--text-fz': rem(10),
                        },
                    };
                }
                return { root: {} };
            },
        }),
    },

Thanks.

[snow vale]

Update:
2. can be solved by changing ide setting at Preferences | Languages & Frameworks | Stylesheets | Dialects but unable to solve light-dark as unknown function issue.

[celest abyss]

1-2. I haven't used webstorm so cannot advise anything here. In VS Code there are no functions validations, you just need to install postcss extension for syntax highlighting, maybe it is the same for webstorm?
3. These variables are defined by MantineProvider dynamically and injected with <style /> tag. You can use them in your code.
4. It is not supported

[snow vale]

Yeah, I did installed the extension and it only solved the nested issue, but function like light-dark or rem it remains unknown. Not a big deal, app can run as usual, will continue to research to see if there's a solution. Thanks.

[high dirge]

@snow vale anything you found ? i was able to resolve those bt this plugin https://plugins.jetbrains.com/plugin/15234-tailwind-css-smart-completions

[snow vale]

I didn't use this, i installed PostCSS plugin.

[worn jolt]

3. What I'm doing now is first defining the custom colors in my own global.css:

  --gt-color-brown-0: #fdf0ec;
  --gt-color-brown-1: #f6dfd8;
  --gt-color-brown-2: #efbaa9;
  --gt-color-brown-3: #ec9478;
  --gt-color-brown-4: #e8734e;
  --gt-color-brown-5: #e55f34;
  --gt-color-brown-6: #e55426;
  --gt-color-brown-7: #cb451a;
  --gt-color-brown-8: #b53d16;
  --gt-color-brown-9: #9f320f;

...

And then use these variables when defining the custom colors in the Mantine theme:

export const themeOverride = {
  colors: {
    gtBrown: [
      'var(--gt-color-brown-0)',
      'var(--gt-color-brown-1)',
      'var(--gt-color-brown-2)',
      'var(--gt-color-brown-3)',
      'var(--gt-color-brown-4)',
      'var(--gt-color-brown-5)',
      'var(--gt-color-brown-6)',
      'var(--gt-color-brown-7)',
      'var(--gt-color-brown-8)',
      'var(--gt-color-brown-9)',
    ],
    ...

[celest abyss]

This will not work for light and outline variants – colors defined with var cannot be transformed to rgba