XCSS prop no js lint (#1547)

* feat: add no-js-xcss

* chore: changeset

* chore: fix

* chore: resolve code review comments

Author: itsdouges

.changeset/wild-berries-add.md

@@ -0,0 +1,5 @@
+---
+'@compiled/eslint-plugin': patch
+---
+
+Adds new supplementary lint rule for xcss prop `no-js-xcss`.

packages/eslint-plugin/src/configs/recommended.ts

@@ -6,6 +6,7 @@ export const recommended = {
     '@compiled/no-exported-css': 'error',
     '@compiled/no-exported-keyframes': 'error',
     '@compiled/no-invalid-css-map': 'error',
+    '@compiled/no-js-xcss': 'error',
     '@compiled/no-keyframes-tagged-template-expression': 'error',
     '@compiled/no-styled-tagged-template-expression': 'error',
     '@compiled/no-suppress-xcss': 'error',

packages/eslint-plugin/src/index.ts

@@ -6,6 +6,7 @@ import { noEmotionCssRule } from './rules/no-emotion-css';
 import { noExportedCssRule } from './rules/no-exported-css';
 import { noExportedKeyframesRule } from './rules/no-exported-keyframes';
 import { noInvalidCssMapRule } from './rules/no-invalid-css-map';
+import { noJavaScriptXCSSRule } from './rules/no-js-xcss';
 import { noKeyframesTaggedTemplateExpressionRule } from './rules/no-keyframes-tagged-template-expression';
 import { noStyledTaggedTemplateExpressionRule } from './rules/no-styled-tagged-template-expression';
 import { noSuppressXCSS } from './rules/no-suppress-xcss';
@@ -18,6 +19,7 @@ export const rules = {
   'no-exported-css': noExportedCssRule,
   'no-exported-keyframes': noExportedKeyframesRule,
   'no-invalid-css-map': noInvalidCssMapRule,
+  'no-js-xcss': noJavaScriptXCSSRule,
   'no-keyframes-tagged-template-expression': noKeyframesTaggedTemplateExpressionRule,
   'no-styled-tagged-template-expression': noStyledTaggedTemplateExpressionRule,
   'no-suppress-xcss': noSuppressXCSS,

packages/eslint-plugin/src/rules/no-js-xcss/README.md

@@ -0,0 +1,19 @@
+# `no-js-xcss`
+
+Disallows using xcss prop inside JavaScript files.
+
+Components that use xcss prop have explicitly declared what styles via the type system they should and should not accept, consumers must adhere to this API. Without TypeScript it's impossible to ensure this is met.
+
+👎 Examples of **incorrect** code for this rule:
+
+```js
+// my-component.jsx
+<Button xcss={{ fill: 'var(--ds-text)' }} />
+```
+
+👍 Examples of **correct** code for this rule:
+
+```js
+// my-component.tsx
+<Button xcss={{ color: 'var(--ds-text)' }} />
+```

packages/eslint-plugin/src/rules/no-js-xcss/__tests__/rule.test.ts

@@ -0,0 +1,29 @@
+import { typeScriptTester as tester } from '../../../test-utils';
+import { noJavaScriptXCSSRule } from '../index';
+
+tester.run('no-js-xcss', noJavaScriptXCSSRule, {
+  valid: [
+    {
+      filename: 'my-component.tsx',
+      code: `
+      <Component xcss={{ fill: 'red' }} />
+    `,
+    },
+  ],
+  invalid: [
+    {
+      filename: 'my-component.js',
+      code: `
+      <Component xcss={{ fill: 'red' }} />
+    `,
+      errors: [{ messageId: 'no-js-xcss' }],
+    },
+    {
+      filename: 'my-component.jsx',
+      code: `
+      <Component xcss={{ fill: 'red' }} />
+    `,
+      errors: [{ messageId: 'no-js-xcss' }],
+    },
+  ],
+});

packages/eslint-plugin/src/rules/no-js-xcss/index.ts

@@ -0,0 +1,29 @@
+import type { Rule } from 'eslint';
+
+export const noJavaScriptXCSSRule: Rule.RuleModule = {
+  meta: {
+    docs: {
+      recommended: true,
+      description:
+        'The xcss prop is predicated on adhering to the type contract. Using it without TypeScript breaks this contract and thus is not allowed.',
+      url: 'https://github.com/atlassian-labs/compiled/tree/master/packages/eslint-plugin/src/rules/no-js-xcss',
+    },
+    messages: {
+      'no-js-xcss':
+        'Using xcss in JavaScript risks incidents and unintended behaviour when code changes — only use inside TypeScript files',
+    },
+    type: 'problem',
+  },
+  create(context) {
+    return {
+      'JSXAttribute[name.name=/[xX]css$/]': (node: Rule.Node) => {
+        if (node.type === 'JSXAttribute' && !context.filename.endsWith('.tsx')) {
+          context.report({
+            node: node.name,
+            messageId: 'no-js-xcss',
+          });
+        }
+      },
+    };
+  },
+};