Implement eslint rules

Author: owjs3901

apps/next/src/app/page.tsx

@@ -43,7 +43,7 @@ export default function HomePage() {
         text typo
       </Text>
       <Text color="$text">text</Text>
-      <Box color={enabled ? 'green' : 'blue'} fontSize={[32]} pr="20px">
+      <Box color={enabled ? 'green' : 'blue'} fontSize={32} pr="20px">
         hello
       </Box>
       <Box fontSize={[12, 32]}>hello</Box>

benchmark/next-devup-ui-single/src/app/page.tsx

@@ -34,7 +34,7 @@ export default function HomePage() {
         <Box>hello</Box>
       </Box>
       <Text color="$text">text</Text>
-      <Box color={enabled ? 'green' : 'blue'} fontSize={[32]} pr="20px">
+      <Box color={enabled ? 'green' : 'blue'} fontSize={32} pr="20px">
         hello
       </Box>
       <Box fontSize={[12, 32]}>hello</Box>

benchmark/next-devup-ui/src/app/page.tsx

@@ -34,7 +34,7 @@ export default function HomePage() {
         <Box>hello</Box>
       </Box>
       <Text color="$text">text</Text>
-      <Box color={enabled ? 'green' : 'blue'} fontSize={[32]} pr="20px">
+      <Box color={enabled ? 'green' : 'blue'} fontSize={32} pr="20px">
         hello
       </Box>
       <Box fontSize={[12, 32]}>hello</Box>

eslint.config.mjs

@@ -1,13 +1,13 @@
+import devupUIEslintPlugin from '@devup-ui/eslint-plugin'
 import { configs } from 'eslint-plugin-devup'
 import eslintPlugin from 'eslint-plugin-eslint-plugin'
 import jsonc from 'eslint-plugin-jsonc'
 import * as mdx from 'eslint-plugin-mdx'
 import globals from 'globals'
-
 export default [
   {
     ignores: [
-      'coverage',
+      '**/coverage',
       'target',
       'benchmark/next-panda-css/styled-system',
       'bindings/devup-ui-wasm/pkg',
@@ -75,4 +75,8 @@ export default [
     ...eslintPlugin.configs.recommended,
     // files: ['packages/eslint-plugin/**/*.{js,jsx,ts,tsx}'],
   },
+  {
+    ignores: ['**/*.md'],
+  },
+  ...devupUIEslintPlugin.configs.recommended,
 ]

package.json

@@ -16,6 +16,7 @@
   "devDependencies": {
     "@changesets/cli": "^2.29.7",
     "@devup-ui/vite-plugin": "workspace:*",
+    "@devup-ui/eslint-plugin": "workspace:*",
     "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "14.6.1",

packages/eslint-plugin/src/__tests__/index.test.ts

@@ -6,6 +6,11 @@ describe('export index', () => {
       configs: {
         recommended: expect.any(Object),
       },
+      default: {
+        configs: {
+          recommended: expect.any(Object),
+        },
+      },
     })
   })
 })

packages/eslint-plugin/src/index.ts

@@ -4,3 +4,7 @@ export * as rules from './rules'
 export const configs = {
   recommended,
 }
+
+export default {
+  configs,
+}

packages/eslint-plugin/src/rules/css-utils-literal-only/__tests__/index.test.ts

@@ -2,7 +2,7 @@ import { RuleTester } from '@typescript-eslint/rule-tester'
 
 import { cssUtilsLiteralOnly } from '../index'
 
-describe.each(['css', 'globalCss', 'keyframes'])(
+describe.each(['css' /* 'globalCss', 'keyframes'*/])(
   'css-utils-literal-only rule',
   (code) => {
     const ruleTester = new RuleTester({
@@ -41,6 +41,14 @@ describe.each(['css', 'globalCss', 'keyframes'])(
           code: `import { ${code} as B } from "@devup-ui/react";\nB({w: ["1"]})`,
           filename: 'src/app/page.tsx',
         },
+        {
+          code: `import { ${code} as B } from "@devup-ui/react";\nB({_hover: {w: ["1"]}})`,
+          filename: 'src/app/page.tsx',
+        },
+        {
+          code: `import { ${code} as B } from "@devup-ui/react";\nB({ w: v ? 1 : null})`,
+          filename: 'src/app/page.tsx',
+        },
       ],
       invalid: [
         {
@@ -79,6 +87,15 @@ describe.each(['css', 'globalCss', 'keyframes'])(
             },
           ],
         },
+        {
+          code: `import { ${code} as B } from "@devup-ui/react";\nB({w: v ? 1 : v})`,
+          filename: 'src/app/layout.tsx',
+          errors: [
+            {
+              messageId: 'cssUtilsLiteralOnly',
+            },
+          ],
+        },
       ],
     })
   },

packages/eslint-plugin/src/rules/css-utils-literal-only/index.ts

@@ -51,11 +51,29 @@ export const cssUtilsLiteralOnly = createRule({
       Identifier(node) {
         if (!devupContext) return
 
-        const an = context.sourceCode.getAncestors(node)
-        const property = an.find(
+        const ancestors = context.sourceCode.getAncestors(devupContext)
+        const an = context.sourceCode.getAncestors(node).slice(ancestors.length)
+        const properties = an.filter(
           (ancestor) => ancestor.type === AST_NODE_TYPES.Property,
         )
-        if (!property || [...an, node].indexOf(property.value) === -1) return
+        if (
+          !properties.length ||
+          properties.some(
+            (property) => [...an, node].indexOf(property.key) !== -1,
+          )
+        )
+          return
+        const conditionals = an.filter(
+          (ancestor) => ancestor.type === AST_NODE_TYPES.ConditionalExpression,
+        )
+        if (
+          conditionals.length &&
+          conditionals.some(
+            (conditional) => [...an, node].indexOf(conditional.test) !== -1,
+          )
+        ) {
+          return
+        }
 
         context.report({
           node,

packages/eslint-plugin/src/rules/no-duplicate-value/__tests__/index.test.ts

@@ -27,6 +27,14 @@ describe('no-duplicate-value rule', () => {
         code: 'import { Box } from "other-package";\n<Box w={[1, null, 2, 3]} />',
         filename: 'src/app/page.tsx',
       },
+      {
+        code: 'import { Box } from "@devup-ui/react";\n<Box w={[1, null, null, 2, 3]} />',
+        filename: 'src/app/page.tsx',
+      },
+      {
+        code: 'import { Box } from "@devup-ui/react";\n<Box w={[null, null, null, 3]} />',
+        filename: 'src/app/page.tsx',
+      },
       {
         code: 'import { css } from "other-package";\ncss()',
         filename: 'src/app/page.tsx',