Convert Emotion styles / styled components bans into a custom rule

[karlhorky]

Currently, we are using no-restricted-syntax config blocks to ban creation of Emotion styles or styled components within components. One of the issues with this is the warning messages don't allow us to add clickable links to the description of the error:

• Allow diagnostics messages to have markdown (or formatted text) content microsoft/vscode#54272
• [Feature request] Add link to github page for the hover box microsoft/vscode-eslint#418
• Ability to add links to diagnostics and render them as links in problems view microsoft/vscode#11847

One way to solve this Is moving these checks into a new custom ESLint rule:

eslint-config-upleveled/index.cjs

Lines 195 to 204 in e2b5ce4

	// Currently it is not possible to use Markdown eg. links in ESLint warnings / error messages
	//
	// FIXME: Switch to a custom rule
	// https://github.com/upleveled/eslint-config-upleveled/issues/126
	{
	selector:
	'FunctionDeclaration VariableDeclaration:has(VariableDeclarator > TaggedTemplateExpression > MemberExpression[object.name="styled"][property]), FunctionDeclaration VariableDeclaration:has(VariableDeclarator > TaggedTemplateExpression[tag.name="css"])',
	message:
	'Declaring Emotion styles or a styled component within a React component will cause the element to get recreated, causing loss of state and other problems - see the react/no-unstable-nested-components docs for more info https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unstable-nested-components.md',
	},

Additionally, while we are doing this, we should optimize this rule to only trigger on React components (currently it is triggered on any FunctionDeclaration, which includes any function). One way of detecting a React component would be to use the component utilities from eslint-plugin-react:

https://github.com/jsx-eslint/eslint-plugin-react/blob/c8833f301314dab3e79ef7ac4cf863e4d5fa0019/lib/util/Components.js#L436-L444