Fix css classes with eslint-plugin-tailwindcss (#944)

* add eslint-plugin-tailwindcss * fixes * configure `callees` * sort * fix whitelist * fixes * fixes * fixes * blog * fixes * fixes * fixes for nextra * lint swr-site * lint docs * Fix css classes with `eslint-plugin-tailwindcss` * last fixes for docs * last fix
shuding · Oct 27, 2022 · bd2cefa · bd2cefa
1 parent cce84e8
commit bd2cefa
Show file tree

Hide file tree

Showing 41 changed files with 260 additions and 173 deletions.
diff --git a/.changeset/ninety-queens-act.md b/.changeset/ninety-queens-act.md
@@ -0,0 +1,7 @@
+---
+'nextra': patch
+'nextra-theme-blog': patch
+'nextra-theme-docs': patch
+---
+
+Fix css classes with `eslint-plugin-tailwindcss`
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -1,3 +1,14 @@
+const TAILWIND_CONFIG = {
+  extends: ['plugin:tailwindcss/recommended'],
+  rules: {
+    'tailwindcss/classnames-order': 'error',
+    'tailwindcss/enforces-negative-arbitrary-values': 'error',
+    'tailwindcss/enforces-shorthand': 'error',
+    'tailwindcss/migration-from-tailwind-2': 'error',
+    'tailwindcss/no-custom-classname': 'error'
+  }
+}
+
 module.exports = {
   root: true,
   parser: '@typescript-eslint/parser',
@@ -36,6 +47,56 @@ module.exports = {
           }
         ]
       }
+    },
+    {
+      ...TAILWIND_CONFIG,
+      files: 'packages/nextra-theme-docs/**/*',
+      settings: {
+        tailwindcss: {
+          config: 'packages/nextra-theme-docs/tailwind.config.js',
+          callees: ['cn'],
+          whitelist: ['nextra-breadcrumb', 'nextra-callout', 'nextra-bleed']
+        }
+      }
+    },
+    {
+      ...TAILWIND_CONFIG,
+      files: 'packages/nextra-theme-blog/**/*',
+      settings: {
+        tailwindcss: {
+          config: 'packages/nextra-theme-blog/tailwind.config.js',
+          whitelist: ['subheading-', 'post-item', 'post-item-more']
+        }
+      }
+    },
+    {
+      ...TAILWIND_CONFIG,
+      files: 'packages/nextra/**/*',
+      settings: {
+        tailwindcss: {
+          config: 'packages/nextra-theme-docs/tailwind.config.js'
+        }
+      }
+    },
+    {
+      ...TAILWIND_CONFIG,
+      files: 'examples/swr-site/**/*',
+      settings: {
+        tailwindcss: {
+          config: 'examples/swr-site/tailwind.config.js'
+        }
+      }
+    },
+    {
+      ...TAILWIND_CONFIG,
+      files: 'docs/**/*',
+      settings: {
+        tailwindcss: {
+          config: 'docs/tailwind.config.js',
+          callees: ['cn'],
+          whitelist: ['dash-ring', 'theme-1', 'theme-2', 'theme-3', 'theme-4', 'border-primary-100/10$']
+        }
+      }
     }
   ]
 }
diff --git a/.prettierignore b/.prettierignore
@@ -1,6 +1,4 @@
-dist
-.next
+dist/
+.next/
 pnpm-lock.yaml
-pnpm-workspace.yaml
-.changeset
-.husky
+.changeset/*.md
diff --git a/docs/components/card/index.tsx b/docs/components/card/index.tsx
@@ -21,7 +21,7 @@ export function Card({ children, title, icon, image, arrow, href, ...props }) {
         <a
           className={cn(
             styles.card,
-            'group flex flex-col justify-start text-current rounded-lg overflow-hidden shadow shadow-gray-200 border border-transparent bg-gray-100 no-underline transition-all duration-200',
+            'group flex flex-col justify-start overflow-hidden rounded-lg border border-transparent bg-gray-100 text-current no-underline shadow shadow-gray-200 transition-all duration-200',
             'hover:border-gray-200 hover:shadow-lg hover:shadow-gray-200'
           )}
           {...props}
@@ -30,7 +30,7 @@ export function Card({ children, title, icon, image, arrow, href, ...props }) {
           <span
             className={cn(
               styles.title,
-              'p-4 text-gray-700 gap-1',
+              'gap-1 p-4 text-gray-700',
               'hover:text-gray-900'
             )}
           >
@@ -48,15 +48,15 @@ export function Card({ children, title, icon, image, arrow, href, ...props }) {
       <a
         className={cn(
           styles.card,
-          'group flex flex-col justify-start text-current rounded-lg overflow-hidden shadow shadow-transparent border border-transparent bg-gray-100 no-underline transition-all duration-200',
+          'group flex flex-col justify-start overflow-hidden rounded-lg border border-transparent bg-gray-100 text-current no-underline shadow shadow-transparent transition-all duration-200',
           'hover:border-gray-200 hover:shadow-md hover:shadow-gray-100'
         )}
         {...props}
       >
         <span
           className={cn(
             styles.title,
-            'p-4 text-gray-700 gap-1',
+            'gap-1 p-4 text-gray-700',
             'hover:text-gray-900'
           )}
         >
@@ -71,7 +71,7 @@ export function Card({ children, title, icon, image, arrow, href, ...props }) {
 
 export function Cards({ children, ...props }) {
   return (
-    <div className={cn(styles.cards, 'gap-4 mt-4')} {...props}>
+    <div className={cn(styles.cards, 'mt-4 gap-4')} {...props}>
       {children}
     </div>
   )

diff --git a/docs/components/table/index.tsx b/docs/components/table/index.tsx
@@ -1,29 +1,29 @@
 export function OptionTable({ options }: { options: [string, string, any] }) {
   return (
-    <div className="nx-mt-6 nx-mb-4 nx-pb-4 nx-overflow-x-auto nx-overscroll-x-contain">
-      <table className="nx-border-collapse nx-w-full nx-text-sm">
+    <div className="mt-6 mb-4 overflow-x-auto overscroll-x-contain pb-4">
+      <table className="w-full border-collapse text-sm">
         <thead>
-          <tr className="nx-border-b nx-text-left nx-py-4 dark:nx-border-primary-100/10">
-            <th className="nx-py-2 nx-font-semibold">Option</th>
-            <th className="nx-py-2 nx-pl-6 nx-font-semibold">Type</th>
-            <th className="nx-py-2 nx-pl-6 nx-pr-6 nx-font-semibold">
+          <tr className="dark:border-primary-100/10 border-b py-4 text-left">
+            <th className="py-2 font-semibold">Option</th>
+            <th className="py-2 pl-6 font-semibold">Type</th>
+            <th className="py-2 px-6 font-semibold">
               Description
             </th>
           </tr>
         </thead>
-        <tbody className="nx-text-gray-900 dark:nx-text-gray-100 nx-align-baseline">
+        <tbody className="align-baseline text-gray-900 dark:text-gray-100">
           {options.map(([option, type, description]) => (
             <tr
               key={option}
-              className="nx-border-b nx-border-gray-100 dark:nx-border-zinc-800/50"
+              className="border-b border-gray-100 dark:border-zinc-800/50"
             >
-              <td className="nx-py-2 nx-font-mono nx-font-semibold nx-text-xs nx-leading-6 nx-text-violet-600 nx-whitespace-pre dark:nx-text-violet-500">
+              <td className="whitespace-pre py-2 font-mono text-xs font-semibold leading-6 text-violet-600 dark:text-violet-500">
                 {option}
               </td>
-              <td className="nx-py-2 nx-pl-6 nx-font-mono nx-font-semibold nx-text-xs nx-leading-6 nx-text-slate-500 nx-whitespace-pre dark:nx-text-slate-400">
+              <td className="whitespace-pre py-2 pl-6 font-mono text-xs font-semibold leading-6 text-slate-500 dark:text-slate-400">
                 {type}
               </td>
-              <td className="nx-py-2 nx-pl-6">{description}</td>
+              <td className="py-2 pl-6">{description}</td>
             </tr>
           ))}
         </tbody>

diff --git a/docs/package.json b/docs/package.json
@@ -20,14 +20,7 @@
     "@types/node": "^18.7.8",
     "autoprefixer": "^10.4.8",
     "postcss": "^8.4.16",
-    "prettier": "^2.7.1",
     "tailwindcss": "^3.1.8",
     "typescript": "^4.7.4"
-  },
-  "prettier": {
-    "semi": false,
-    "singleQuote": true,
-    "trailingComma": "none",
-    "arrowParens": "avoid"
   }
 }
diff --git a/examples/swr-site/components/authors.js b/examples/swr-site/components/authors.js
@@ -1,19 +1,19 @@
 export default function Authors({ date, children }) {
   return (
-    <div className="nx-mt-8 nx-mb-16 nx-text-gray-400 nx-text-sm">
+    <div className="mt-8 mb-16 text-sm text-gray-400">
       {date} by {children}
     </div>
   );
 }
 
 export function Author({ name, link }) {
   return (
-    <span className="after:nx-content-[','] last:after:nx-content-['']">
+    <span className="after:content-[','] last:after:content-['']">
       <a
         key={name}
         href={link}
         target="_blank"
-        className="nx-mx-1 nx-text-gray-800 dark:nx-text-gray-100"
+        className="mx-1 text-gray-800 dark:text-gray-100"
       >
         {name}
       </a>

diff --git a/examples/swr-site/components/features.js b/examples/swr-site/components/features.js
@@ -54,8 +54,8 @@ export default () => {
     FEATURES_WITH_TRANSLATIONS[defaultLocale][key]; // Fallback for missing translations
 
   return (
-    <div className="mx-auto max-w-full w-[880px] text-center px-4 mb-10">
-      <p className="text-lg mb-2 text-gray-600 md:!text-2xl">
+    <div className="mx-auto mb-10 w-[880px] max-w-full px-4 text-center">
+      <p className="mb-2 text-lg text-gray-600 md:!text-2xl">
         {TITLE_WITH_TRANSLATIONS[locale]}
       </p>
       <div className={styles.features}>

diff --git a/examples/swr-site/theme.config.tsx b/examples/swr-site/theme.config.tsx
@@ -113,7 +113,7 @@ const config: DocsThemeConfig = {
         <a
           rel="noopener"
           target="_blank"
-          className="flex items-center font-semibold gap-2"
+          className="flex items-center gap-2 font-semibold"
           href={FOOTER_LINK[locale]}
         >
           {FOOTER_LINK_TEXT[locale]}
@@ -124,8 +124,8 @@ const config: DocsThemeConfig = {
   getNextSeoProps() {
     const { locale } = useRouter();
     return {
-      titleTemplate: `%s | SWR (${locale})`
-    }
+      titleTemplate: `%s | SWR (${locale})`,
+    };
   },
   gitTimestamp: ({ timestamp }) => <>Last updated on {timestamp.toString()}</>,
   head() {
@@ -189,7 +189,7 @@ const config: DocsThemeConfig = {
       <>
         <Logo className="h-3" />
         <span
-          className="ltr:ml-2 rtl:mr-2 font-extrabold hidden md:inline select-none"
+          className="hidden select-none font-extrabold ltr:ml-2 rtl:mr-2 md:inline"
           title={"SWR: " + (TITLE[locale] || "")}
         >
           SWR

diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "@edge-runtime/vm": "1.1.0-beta.23",
     "@typescript-eslint/parser": "^5.32.0",
     "eslint": "^8.21.0",
+    "eslint-plugin-tailwindcss": "^3.6.2",
     "eslint-plugin-typescript-sort-keys": "^2.1.0",
     "prettier": "^2.7.1",
     "prettier-plugin-tailwindcss": "^0.1.13",
@@ -31,12 +32,6 @@
     "turbo": "^1.4.2",
     "typescript": "^4.7.4"
   },
-  "prettier": {
-    "semi": false,
-    "singleQuote": true,
-    "trailingComma": "none",
-    "arrowParens": "avoid"
-  },
   "packageManager": "pnpm@7.3.0",
   "workspaces": [
     "packages/*"
@@ -59,7 +54,7 @@
       "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
       "@tailwindcss/typography": "^0.5.4",
       "tsup": "^6.2.1",
-      "concurrently": "^7.3.0", 
+      "concurrently": "^7.3.0",
       "postcss-import": "^14.1.0"
     }
   }

diff --git a/packages/nextra-theme-blog/package.json b/packages/nextra-theme-blog/package.json
@@ -78,11 +78,5 @@
     "react-dom": "^18.2.0",
     "tailwindcss": "^3.1.8",
     "vitest": "^0.21.0"
-  },
-  "prettier": {
-    "semi": false,
-    "singleQuote": true,
-    "trailingComma": "none",
-    "arrowParens": "avoid"
   }
 }
diff --git a/packages/nextra-theme-blog/prettier.config.js b/packages/nextra-theme-blog/prettier.config.js
diff --git a/packages/nextra-theme-blog/src/basic-layout.tsx b/packages/nextra-theme-blog/src/basic-layout.tsx
@@ -9,7 +9,7 @@ export const BasicLayout = ({ children }: { children: ReactNode }) => {
   const ref = useRef<HTMLHeadingElement>(null)
   return (
     <article
-      className="container nx-prose nx-prose-sm dark:nx-prose-dark md:nx-prose"
+      className="nx-container nx-prose-sm nx-prose dark:nx-prose-dark md:nx-prose"
       dir="ltr"
     >
       <Head>

diff --git a/packages/nextra-theme-blog/src/constants.tsx b/packages/nextra-theme-blog/src/constants.tsx
@@ -4,7 +4,7 @@ import { NextraBlogTheme } from './types'
 
 export const DEFAULT_THEME: NextraBlogTheme = {
   footer: (
-    <small className="nx-block nx-mt-32">
+    <small className="nx-mt-32 nx-block">
       CC BY-NC 4.0 {new Date().getFullYear()} © Shu Ding.
     </small>
   ),

diff --git a/packages/nextra-theme-blog/src/meta.tsx b/packages/nextra-theme-blog/src/meta.tsx
@@ -17,17 +17,17 @@ export default function Meta(): ReactElement {
         className="
           nx-select-none
           nx-rounded-md
+          nx-bg-gray-200
           nx-px-1
-          nx-transition-colors
           nx-text-sm
           nx-text-gray-400
-          hover:nx-text-gray-500
-          dark:nx-text-gray-300
-          dark:hover:nx-text-gray-200
-          nx-bg-gray-200
+          nx-transition-colors
           hover:nx-bg-gray-300
+          hover:nx-text-gray-500
           dark:nx-bg-gray-600
+          dark:nx-text-gray-300
           dark:hover:nx-bg-gray-700
+          dark:hover:nx-text-gray-200
         "
       >
         {t}
@@ -45,7 +45,7 @@ export default function Meta(): ReactElement {
       }
     >
       <div className="nx-grow nx-text-gray-400">
-        <div className="nx-flex nx-flex-wrap nx-items-center nx-gap-1 nx-not-prose">
+        <div className="nx-not-prose nx-flex nx-flex-wrap nx-items-center nx-gap-1">
           {author}
           {author && date && ','}
           {date && (
@@ -57,7 +57,7 @@ export default function Meta(): ReactElement {
           {readingTime || tagsEl}
         </div>
         {readingTime && (
-          <div className="nx-flex nx-flex-wrap nx-items-center nx-gap-1 nx-mt-1 nx-not-prose">
+          <div className="nx-not-prose nx-mt-1 nx-flex nx-flex-wrap nx-items-center nx-gap-1">
             {tagsEl}
           </div>
         )}

diff --git a/packages/nextra-theme-docs/package.json b/packages/nextra-theme-docs/package.json
@@ -83,11 +83,5 @@
     "react-dom": "^18.2.0",
     "tailwindcss": "^3.1.8",
     "vitest": "^0.21.0"
-  },
-  "prettier": {
-    "semi": false,
-    "singleQuote": true,
-    "trailingComma": "none",
-    "arrowParens": "avoid"
   }
 }
diff --git a/packages/nextra-theme-docs/prettier.config.js b/packages/nextra-theme-docs/prettier.config.js