createStyles not working properly after release 0.9.0

[Rick-Young]

What package has an issue

@svelteuidev/core

A clear and concise description of what the bug is

After release 0.9.0 it looks like now using the createStyles is not working properly. I have been using classes to style my pages.

Issue: Lost the nested styling around {getStyles()} being set and then accessing the nested styles like "headerLogo" or any other css style wrapped by the {getStyles()}. I now only see that the "&.headerContainer" works

Example HTML code below.

<header class="{getStyles()} headerContainer at_headerContainer"> 
        <Grid>
            <Grid.Col md={4} lg={4}>
                <div class="headerLogo">
                    <a class="logoLink" href="/">
                        <div class="logoImg">

Exampl CSS Styles code:

const useStyles = createStyles((theme) => {
        return {
            root: {
                [`${theme.dark} &`]: {

                },

            },

            '&.headerContainer': {
                backgroundImage:'url(/impression-header.png)',
                backgroundSize: '100%, 100%, contain',
                color: theme.colors.white.value,
                minHeight:'7rem',
                position:'fixed',
                top:'0',
                left:'0',
                width:'100%',
                boxShadow:'0px 2px 4px -1px rgba(0 0 0 /20%), 0px 4px 5px 0px rgba(0 0 0 /14%), 0px 1px 10px 0px rgba(0 0 0 /12%)',
                zIndex:'2000',
                padding:'.5rem',

                '.headerControls': {
                    marginTop:'1rem',
                    float:'right',
                    marginRight:'1.5rem',
                    svg: {
                        width:'1.5rem',
                        height: '1.5rem',
                    },
                },
                '.headerHelp': {
                    display: 'inline-flex',
                    marginRight: '.5rem',
                },
                '.selectLocatization': {
                    width:'100%',
                },
                '.itemLabel': {
                    width:'100%',
                },
                '.mainNav': {
                    fontSize: '1.5rem',
                    marginLeft: '.5rem',
                    li: {
                        marginRight: '1.5rem',
                        display:'flex',
                        alignItems: 'center',
                        '&.navItemMenu': {
                            marginRight: '.5rem',
                        },
                    },
                    a: {
                        textDecoration: 'none',
                        '&.menuLinkItem': {
                            color: theme.colors.black.value,
                        },
                    },
                    'a:hover':{
                        color: '#cecece',
                        textDecoration: 'none',
                        '&.menuLinkItem': {
                            color: theme.colors.black.value,
                        },
                    },
                    '.menulink': {
                        fontSize: '1.5rem',
                        alignItems:'center',
                        padding:'.5rem',
                        color: theme.colors.white.value,
                        '&:hover': {
                            backgroundColor: 'transparent',
                            color: '#cecece',
                        },
                        svg: {
                            width:'1.5rem',
                            height: '1.5rem',
                        },

                    },

                },

            },

            '&.headerLogo': {
                    marginLeft: '.5rem',
                    marginTop: '.5rem',
                '.logoLink': {
                    textDecoration: 'none',
                    display: 'inline-flex',
                },
                '.logoImg': {
                    verticalAlign: 'middle',
                },
                '.siteTitle': {
                    verticalAlign: 'middle',
                    marginLeft:'.5rem',
                    marginTop:'.7rem',
                    fontSize: '1.5rem',
                },
                img: {
                    width: '3rem',
                },    
            },

        };
    });

    $: ({ classes, getStyles } = useStyles());

In which browser(s) did the problem occur?

No response

Steps To Reproduce

1 - Create a new page

2 -import { createStyles } from '@sevltedev/core'

3 - Create a new useStyles based on the theme per the create-styles page

const useStyles = createStyles((theme) => {
        return {
            root: {
                [`${theme.dark} &`]: {

                        },
                       **Note : Add your CSS Styles  here**

        },
        }

4 - Create a header tag and set the class to contain {getStyles()} and some other classes. Example below <header class="{getStyles()} headerContainer at_headerContainer">

5 - Next create some HTML elements inside the header tag and add some class names that you can style. Example below

               <div class="headerLogo">
                    <a class="logoLink" href="/">
                        <div class="logoImg">
                            <img width="3rem" src="image url here" />
                        </div>
                        <div class="siteTitle">
                            Title
                        </div>
                    </a>
                </div>

6 - Set some css styles on some of the elements to see the issue.

Do you know how to fix the issue

Yes

Are you willing to participate in fixing this issue and create a pull request with the fix

Yes

Relevant Assets

No response

[BeeMargarida]

Edited your comment since the highlighting was broken. I'll investigate it this week

[BeeMargarida]

I don't think this is a bug. In the places where you want to override headerLogo and it's other children, you should use & .headerLogo instead of &.headerLogo (notice the space between & and .headerLogo).

So, in this case &.headerContainer is correct, since you want to style the root (which also contains the class headerContainer), but the other needs to contain the space so that it's descendants and not the same element.

You can see the way to do this in the stitches docs here - https://stitches.dev/docs/styling#descendant-selector.

Please let me know if this made sense for you and if you need any help.

[Rick-Young]

You are correct this is not a bug. I didn't look at the stiches document. Once I added the space between the & and the class it work. Thanks for your help!