Themes root styles not in order

elias-knodel commented 1 year ago

So this is some interesting behavior I found...

I couldn't get the themes working with a defaultFlavour set (I think it was mocha or latte), so I investigated in the generated CSS and saw that my root styles were not on top of the document. CSS literally means Cascading Style Sheet, so this is a bug and shouldn't be happening.

The problem is the variants map, which has a fixed order and doesn't put the defaultFlavour dynamically on top of the other variants (in first place/index inside the map).

I edited the plugin myself and made a fix for this... I could enhance this and contribute later when I have some free time.

// generates the css variables, injected in the addBase() function
const generateColorCss = (defaultFlavour = "", prefix = false) => {
    const result = {};
    variants.map((variant) => {
        // if a prefix is defined, use e.g. '.ctp-mocha' instead of '.mocha'
        const className = prefix ? `.${prefix}-${variant}` : `.${variant}`;

        // if the current variant is defaultFlavour, add to ':root'
        const keyName = variant === defaultFlavour ? ":root" : className;

        result[keyName] = {};
        colours.map((colour) => {
            result[keyName][`--ctp-${colour}`] = parseHexToRGB(
                palette[variant][colour]
            );
        });
    });
    return result;
};

// generates the css variables, injected in the addBase() function
const generateColorCss = (defaultFlavour = "", prefix = false) => {
    const result = {};

    if (variants.includes(defaultFlavour)) {
            const defaultIndex = variants.indexOf(defaultFlavour);
            const rootElement = variants.splice(defaultIndex, 1)[0];
            variants.unshift(rootElement);
    }

    variants.map((variant) => {
        // if a prefix is defined, use e.g. '.ctp-mocha' instead of '.mocha'
        const className = prefix ? `.${prefix}-${variant}` : `.${variant}`;

        // if the current variant is defaultFlavour, add to ':root'
        const keyName = variant === defaultFlavour ? ":root" : className;

        result[keyName] = {};
        colours.map((colour) => {
            result[keyName][`--ctp-${colour}`] = parseHexToRGB(
                palette[variant][colour]
            );
        });
    });
    return result;
};

If someone wants a more detailed description: The variants map looks like this (if I can remember correctly):

latte
frappe
macchiato
mocha

The classes get added to the CSS in this order. If your defaultFlavour is mocha, it gets added as root element.
Now the Problem is this: When you want to apply the latte theme it gets overridden by the mocha root variants, which is not good.

nekowinston commented 1 year ago

Hey there :wave:

Thanks for your issue & reminding me that I haven't published the latest GH commit on NPM, this should be fixed via https://github.com/catppuccin/tailwindcss/commit/0b6ab0ac87f4af273efcdaf99fa164bdd88a3086.

Can you confirm that this behaviour is fixed by this workaround?

Edit: I linked to the wrong comment before

elias-knodel commented 1 year ago

The workaround works like intended 👍🏻 It's just... I'm using a theme switcher plugin and needed to implement a better working solution, so I just wanted to share my findings 😄

nekowinston commented 1 year ago

The commit I linked makes it so that the plugin doesn't inject into :root by default any more, so you will be able to just add the flavour class (mocha, macchiato, frappe, latte) on your <body> element, and theme switching should not cause issues.

I'll release the current commit as an update in a few hours.

nekowinston commented 1 year ago

Sorry that this took me longer to get to than expected. Should be closed with this NPM release: @catppuccin/tailwindcss/v/0.1.1

catppuccin / tailwindcss

Themes root styles not in order #5