Warn or error on a css call outside of the config's include

[JoshuaKGoldberg]

Description

If a css() call is made in a file outside of Panda's configured include, it'd be nice to have some indication that that will do nothing. A lint rule? Extension indication?

Problem Statement/Justification

I filed #1917 because I didn't realize I was calling css() in a file outside the include specified in the panda.config.ts. No errors or warnings showed up in the CLI or editor. It took @segunadebayo kindly looking through the PR to get to #1917 (comment).

Proposed Solution or API

There's already an editor extension, maybe that can give these complaints? If it sees a css() in a file outside the configured include, it can give a yellow squiggly complaint on the call?

Alternatives

Alternately or additionally, how about an ESLint rule? I'd be happy to help make an eslint-plugin-panda-css or the like. This would let users define cleanliness nitpicks such as not including unnecessary []s in values or other best practices.

Additional Information

No response

[segunadebayo]

That's a great idea.

The ESLint Plugin will be a good place for this idea. It's list on the roadmap here https://panda-css.canny.io/feature-request/p/eslint-plugin

[astahmer]

since you (@JoshuaKGoldberg) mentioned that you might be interested in contributing, this is the branch in which @anubra266 is actively working on the ESLint plugin

https://github.com/chakra-ui/panda/tree/eslint-plugin/packages/eslint-plugin

[JoshuaKGoldberg]

Cool, great to see! I probably won't get around to sending code in unprompted but if there are spot points you want to bring up I'm happy to help.

https://github.com/chakra-ui/panda/blob/42be3e13e223ac9ff293bc143b52fd6712d11708/packages/eslint-plugin/src/utils.ts in particular is of interest to typescript-eslint/typescript-eslint#7605 -> typescript-eslint/typescript-eslint#5444.

[anubra266]

@JoshuaKGoldberg I've got a spot point I'd love your support with in the eslint plugin.
We've got to load the panda config in the eslint plugin. This is asynchronous. I'm trying out synckit to get around this but no progress yet.

[JoshuaKGoldberg]

Yeah that is tricky. Context for onlooker visibility: eslint/eslint#15394 indicates that async rules will likely happen over the next few years but not in the current architecture. sveltejs/eslint-plugin-svelte#636 is another example of a plugin looking at synckit.

Putting on my todo list to take a look soon! I've never tried this myself but it's a good thing I should get familiar with.

[anubra266]

Found this for synckit too https://github.com/unocss/unocss/blob/main/packages/eslint-plugin

[JoshuaKGoldberg]

Ok we paired today and took a look! The issue is that synckit is being told to load a path relative to the package like dist/worker.ts:

panda/packages/eslint-plugin/src/utils/index.ts

Lines 16 to 18 in 14b339e

	export const distDir = fileURLToPath(new URL('../../dist', import.meta.url))
	export const syncAction = createSyncFn(join(distDir, 'worker.ts')) as typeof run

But tsup is generating only dist/index.{js,mjs} files that can be run:

panda/packages/eslint-plugin/package.json

Lines 26 to 27 in 14b339e

	"build": "tsup src/index.ts --format=esm,cjs --dts",
	"build-fast": "tsup src/index.ts --format=esm,cjs --no-dts",

Switching tsup to instead treat at least worker.ts as an entry so that something like dist/utils/worker.js gets generated fixes the issue. See commit with lots of logs here: 9de90d3.