CSS not generated in var a = function a() { ... }

[yume-chan]

Environment

• wyw-in-js version: 0.5.3
• custom processor: @linaria/atomic
• Bundler (+ version): vite 5.2.11
• Node.js version: v20.12.1
• OS: Windows 11

Description

This is a repost of callstack/linaria#1312

For this code:

import {css} from '@linaria/atomic'

export const a = function a() {
    return css`
        background-color: red;
    `
}

css template string in a() will be replaced with names, but the CSS rules won't be generated.

wyw-in-js/packages/transform/src/utils/getTagProcessor.ts

Lines 371 to 383 in 9a3a33d

	if (parent) {
	if (parent.isVariableDeclarator()) {
	const id = parent.get('id');
	// FIXME: replace with id.isReferencedIdentifier()
	if (id.isIdentifier()) {
	const { referencePaths } = path.scope.getBinding(id.node.name) || {
	referencePaths: [],
	};
	isReferenced = referencePaths.length !== 0;
	}
	}
	}

parent is the const a node, but path.scope.getBinding(id.node.name) returns the function a() node. function a() node has no references so CSS extraction was skipped.

This code is simplified from an output of Solid.js babel plugin, so it can't change.

Reproducible Demo

https://github.com/yume-chan/wyw-css-issue

style.js exports two functions a and b, both of them generates CSS styles using wyw-in-js. main.js applies both classes to <h1>, but only b is effective.