Importing function for Styled Component breaks @compiled/react

[athammer]

Describe the bug

Versions: "@compiled/react": "^0.11.0", (tried 10.4 and 0.9.1) "@compiled/webpack-loader": "^0.9.2", (tried 0.8.7 and 7.6) "next": "12.2.5",

I've tried every codesandbox none of them have Compiled in a working state(?), and tried to recreate locally and in stackblitz with a simple Next.js but that also didn't work it had the same error as all the codesandbox examples - not sure what that is about? This was the error

Anyways the issue seems to be when I try to import a function that returns a string containing a media query it gives me the error

  @compiled/compiled-loader - Unhandled exception

  SyntaxError: C:\Users\aaron\Documents\repos\betpixels\src\pages\index.tsx: Unexpected token, expected "," (3:16)

If I run the same function in the same file I'm using it, it works perfectly however when it's imported from another file I get the error above.

The code for the styled components is

const MiddleColumn = styled.div`
	padding: 0 10px;
	${breakpoints('wideScreenOnly')(`
		padding: 0 10px;
	`)}
`;

I've changed this to just an empty string to test and it still wouldn't work unless it was in the same file the code for the breakpoint function is...

export const viewports = {
	phoneOnly: 480 as const,
	tabletPortraitOnly: [481, 768] as const,
	tabletLandscapeOnly: [769, 1024] as const,
	mobileOnly: 1024 as const,
	//desktopOnly: [1025, 1200] - we develop for desktop first so we should never use this
	wideScreenOnly: 1201 as const,
};

export const breakpoints = (key: keyof typeof viewports) => {
	return (styles: TemplateStringsArray | String) => {
		switch (key) {
			case 'phoneOnly':
			case 'mobileOnly':
				return `@media (max-width: ${viewports[key]}px) { ${styles} }`;
			case 'tabletLandscapeOnly':
			case 'tabletPortraitOnly':
				return `@media (min-width: ${viewports[key][0]}px and max-width: ${viewports[key][1]}px) { ${styles} }`;
			case 'wideScreenOnly':
				return `@media (min-width: ${viewports[key]}px) { ${styles} }`;
			default:
				console.warn('We are not using a media query correctly');
				return '';
		}
	};
};

module exports

const moduleExports = {
	reactStrictMode: process.env.VERCEL_ENV !== 'production',
	experimental: {
		nextScriptWorkers: true,
	},
	webpack: (config) => {
		// Important: return the modified config
		// https://compiledcssinjs.com/docs/css-extraction-webpack

		config.module.rules.push({
			test: /\.(js|ts|tsx)$/,
			exclude: /node_modules/,
			use: [
				{
					loader: '@compiled/webpack-loader',
				},
			],
		});

		return config;
	},
};
module.exports = moduleExports 

To Reproduce

Could someone provide me with a working codesandbox, stackblitz with @compiled/react and I'll provide an example repo. I'll try again tomorrow as well though.

Expected behavior Importing a function that returns a string should be able to be inserted in a Styled component

Screenshots https://i.gyazo.com/def789c7af1c18f842a18805aec06354.png

• OS: Windows 11
• Browser: Chrome but unrelated to browser
• Version [e.g. 22]: 104.0.5112.102 (Official Build) (64-bit)

Additional context

[athammer]

reopening - thought I fixed it but issue is still occurring. Does Compiled not support using imported functions that return strings for composition? I guess that would make sense as it's occurring at runtime - maybe this is more of a feature request?

[athammer]

Going to close this for now again as it seems to be recognized in the limitation section as importing anything can be viewed as not static. However it still doesn't work even if we import a static string.

This makes things like reusable media query useless sadly :(

I think Linaria has a decent error message for this https://i.gyazo.com/ae4c0c78a0505209171b076d2fced917.png

[JakeLane]

Hey @athammer , yeah unfortunately we do have issues reporting static evaluation limitations in the dev loop. This is something we plan to work on so I'll reopen the issue for now.

Long term, we aim to make Compiled dev loop have optimal performance as the default. This will probably mean fallback function call behaviour will be opt-in or warned by tooling.

[athammer]

This would be amazing. I went pretty far down the rabbit hole trying to figure out what was wrong but eventually I figured it out and yeah it seems to be how static evaluation is done. Sadly this is a blocker for me as it prevents me from using exports such as media breakpoints but once that gets fixed I'll 100% move back as the DX for setup was suuuuper nice.

Thank you for taking the time to look at this issue :)

edit: i'll try to update this to make this issue more about static evaluations in a bit