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 :)

[hudochenkov]

Released in 0.7.0. Let me know, if there any issues.

[oliviertassinari]

Very cool, it seems to work

411 errors

Someone at http://github.com/mui/ will have fun to fix the codebase 😁