Support styled(Component)(({ theme }) => `

[oliviertassinari]

I think it would be great to support this pattern styled(Component)(({ theme }) => . Today, it doesn't work:

https://github.com/hudochenkov/postcss-styled-syntax/assets/3165635/bd24c10d-8f8f-4012-8e76-7b4c71f0f61a

This is pretty much the same request as in https://github.com/styled-components/vscode-styled-components/issues/194.

[hudochenkov]

There could be more complexity hidden, that an example. Function could return template literals conditionally, or assign it to a variable, or use explicit return.

const StyledDiv = styled.div((props) => {
    if (props.isDisabled) {
        return `
            background-color: #f9f9f9;
        `;
    }

    return `
        background-color: blue;
    `;
});

const StyledDiv2 = styled.div((props) => {
    let styles = `
        background-color: blue;
    `;

    if (props.isDisabled) {
        styles = `
            background-color: #f9f9f9;
        `;
    }

    return styles;
});

Additionally, I doubt VS Code extension would highlight examples above. Not that it would be blocker, but worth to keep in mind.

[oliviertassinari]

Function could return template literals conditionally, or assign it to a variable, or use explicit return.

I guess it's for these use cases that we need to use the css helper.

I doubt VS Code extension would highlight examples above. Not that it would be blocker, but worth to keep in mind.

I see this not correctly highlighted/autocompleted by the VS Code extension:

const StyledDiv = styled.div((props) => {
    return `
        background-color: #f9f9f9;
    `;
});

but this one is correctly highlighted/autocompleted:

const StyledDiv = styled.div((props) => `
    background-color: #f9f9f9;
`);

[hudochenkov]

Alright, let's support only implicit return of template literal for an arrow function. I could take a look in a few weeks. PR is always welcome :)