Merge pull request #1876 from belgattitude/eslint-tailwind

Add eslint-plugin-tailwind + eslint caches

.changeset/empty-knives-compare.md

@@ -0,0 +1,5 @@
+---
+"@your-org/eslint-config-bases": minor
+---
+
+Add support for eslint-plugin-tailwind

.changeset/grumpy-colts-run.md

@@ -0,0 +1,13 @@
+---
+"nextjs-app": minor
+"remix-app": minor
+"vite-app": minor
+"@your-org/api-gateway": minor
+"@your-org/common-i18n": minor
+"@your-org/core-lib": minor
+"@your-org/db-main-prisma": minor
+"@your-org/eslint-config-bases": minor
+"@your-org/ui-lib": minor
+---
+
+Enable eslint global cache

.github/workflows/ci-e2e-nextjs-app.yml

@@ -72,7 +72,6 @@ jobs:
             ${{ github.workspace }}/apps/nextjs-app/.next/cache
             ${{ github.workspace }}/.cache
             ${{ github.workspace }}/**/tsconfig.tsbuildinfo
-            ${{ github.workspace }}/**/.eslintcache
 
           key: ${{ runner.os }}-nextjs-app-${{ hashFiles('**/yarn.lock') }}-${{ hashFiles('apps/nextjs-app/src/**.[jt]sx?', 'apps/nextjs-app/src/**.json') }}
           restore-keys: |

.github/workflows/ci-nextjs-app.yml

@@ -65,7 +65,6 @@ jobs:
             ${{ github.workspace }}/apps/nextjs-app/.next/cache
             ${{ github.workspace }}/.cache
             ${{ github.workspace }}/**/tsconfig.tsbuildinfo
-            ${{ github.workspace }}/**/.eslintcache
 
           key: ${{ runner.os }}-nextjs-nextjs-app-${{ hashFiles('**/yarn.lock') }}-${{ hashFiles('apps/nextjs-app/src/**.[jt]sx?', 'apps/nextjs-app/src/**.json') }}
           restore-keys: |
@@ -85,7 +84,7 @@ jobs:
       - name: Linter
         working-directory: apps/nextjs-app
         run: |
-          yarn lint --cache
+          yarn lint
 
       - name: Unit tests
         working-directory: apps/nextjs-app

.github/workflows/ci-packages.yml

@@ -67,7 +67,6 @@ jobs:
           path: |
             ${{ github.workspace }}/.cache
             ${{ github.workspace }}/**/tsconfig.tsbuildinfo
-            ${{ github.workspace }}/**/.eslintcache
 
           key: ${{ runner.os }}-packages-cache-${{ hashFiles('**/yarn.lock') }}-${{ hashFiles('packages/**.[jt]sx?', 'packages/**.json') }}
           restore-keys: |
@@ -86,7 +85,7 @@ jobs:
       # Lint packages that have changed (--include & --since)
       - name: Linter
         run: |
-          yarn workspaces foreach -tv --include '@your-org/*' --since=origin/main --recursive run lint --cache
+          yarn workspaces foreach -tv --include '@your-org/*' --since=origin/main --recursive run lint
           yarn workspaces foreach -tv --include '@your-org/*' --since=origin/main --recursive run lint-styles
 
       # Test packages that have changed (--include & --since)

.github/workflows/ci-remix-app.yml

@@ -67,7 +67,7 @@ jobs:
       - name: Linter
         working-directory: apps/remix-app
         run: |
-          yarn lint --cache
+          yarn lint
           yarn lint-styles
 
       - name: Unit tests

.github/workflows/ci-vite-app.yml

@@ -67,7 +67,7 @@ jobs:
       - name: Linter
         working-directory: apps/vite-app
         run: |
-          yarn lint --cache
+          yarn lint
 
       - name: Unit tests
         working-directory: apps/vite-app

README.md

@@ -381,8 +381,9 @@ Some convenience scripts can be run in any folder of this repo and will call the
 | `yarn g:test-unit`           | Run unit tests in all apps & packages                                                                                                |
 | `yarn g:test-e2e`            | Run unit tests in all apps & packages                                                                                                |
 | `yarn g:build`               | Clean every caches and dist folders in all apps & packages                                                                           |
-| `yarn g:clean`               | Add a changeset                                                                                                                      |
+| `yarn g:clean`               | Clean apps/packages builds                                                                                                           |
 | `yarn g:check-dist`          | Ensure build dist files passes es2017 (run `g:build` first).                                                                         |
+| `yarn clean:global-cache`    | Clean tooling caches (eslint, jest...)                                                                                               |
 | `yarn deps:check --dep dev`  | Will print what packages can be upgraded globally (see also [.ncurc.yml](https://github.com/sortlist/packages/blob/main/.ncurc.yml)) |
 | `yarn deps:update --dep dev` | Apply possible updates (run `yarn install && yarn dedupe` after)                                                                     |
 | `yarn check:install`         | Verify if there's no dependency missing in packages                                                                                  |

apps/nextjs-app/.eslintrc.js

@@ -16,6 +16,7 @@ module.exports = {
     '@your-org/eslint-config-bases/regexp',
     '@your-org/eslint-config-bases/jest',
     '@your-org/eslint-config-bases/react',
+    '@your-org/eslint-config-bases/tailwind',
     '@your-org/eslint-config-bases/rtl',
     '@your-org/eslint-config-bases/graphql-schema',
     // Add specific rules for nextjs

apps/nextjs-app/package.json

@@ -27,7 +27,7 @@
     ]
   },
   "scripts": {
-    "clean": "rimraf --no-glob ./.next ./out ./coverage ./tsconfig.tsbuildinfo ./.eslintcache",
+    "clean": "rimraf --no-glob ./.next ./out ./coverage ./tsconfig.tsbuildinfo",
     "dev": "next",
     "build": "next build",
     "build-fast": "cross-env NEXTJS_IGNORE_TYPECHECK=1 NEXTJS_IGNORE_ESLINT=1 NEXTJS_DISABLE_SENTRY=1 NEXTJS_SENTRY_UPLOAD_DRY_RUN=1 next build",
@@ -45,7 +45,7 @@
     "test-unit-watch": "vitest watch --ui",
     "test-e2e": "cross-env E2E_WEBSERVER_MODE=BUILD_AND_START playwright test",
     "typecheck": "tsc --project ./tsconfig.json --noEmit",
-    "lint": "eslint . --ext .ts,.tsx,.js,.jsx,.mdx,.graphql --cache",
+    "lint": "eslint . --ext .ts,.tsx,.js,.jsx,.mdx,.graphql --cache --cache-location ../../.cache/eslint/nextjs-app.eslintcache",
     "fix-all-files": "eslint . --ext .ts,.tsx,.js,.jsx,.mdx,.graphql --fix",
     "?postinstall": "@todo: the prisma generate seems to be required, but is installed at the root",
     "postinstall": "test -n \"$SKIP_POSTINSTALL\" || yarn workspace @your-org/db-main-prisma run prisma generate"

apps/nextjs-app/src/components/Banner.tsx

@@ -8,7 +8,7 @@ type Props = {
 export const Banner: FC<Props> = () => {
   return (
     <div className="bg-indigo-600">
-      <div className="py-3 px-3 sm:px-6 lg:px-8 mx-auto max-w-7xl">
+      <div className="p-3 mx-auto max-w-7xl sm:px-6 lg:px-8">
         <div className="flex flex-wrap justify-between items-center">
           <div className="flex flex-1 items-center w-0">
             <span className="flex p-2 bg-indigo-800 rounded-lg">
@@ -21,18 +21,18 @@ export const Banner: FC<Props> = () => {
               </span>
             </p>
           </div>
-          <div className="flex-shrink-0 order-3 sm:order-2 mt-2 sm:mt-0 w-full sm:w-auto">
+          <div className="shrink-0 order-3 mt-2 w-full sm:order-2 sm:mt-0 sm:w-auto">
             <a
               href="#"
               className="flex justify-center items-center py-2 px-4 text-sm font-medium text-indigo-600 bg-white hover:bg-indigo-50 rounded-md border border-transparent shadow-sm"
             >
               Learn more
             </a>
           </div>
-          <div className="flex-shrink-0 order-2 sm:order-3 sm:ml-3">
+          <div className="shrink-0 order-2 sm:order-3 sm:ml-3">
             <button
               type="button"
-              className="flex p-2 -mr-1 sm:-mr-2 hover:bg-indigo-500 rounded-md focus:ring-2 focus:ring-white focus:outline-none"
+              className="flex p-2 -mr-1 hover:bg-indigo-500 rounded-md focus:outline-none focus:ring-2 focus:ring-white sm:-mr-2"
             >
               <span className="sr-only">Dismiss</span>
               <XIcon className="w-6 h-6 text-white" aria-hidden="true" />

apps/nextjs-app/src/features/demo/components/PoemCard.tsx

@@ -20,7 +20,7 @@ export const PoemCard: FC<Props> = (props) => {
     <div className="overflow-hidden max-w-sm rounded shadow-lg">
       <div className="h-56 aspect-w-16 aspect-h-9 lg:aspect-none">
         <img
-          className="object-cover object-center w-full lg:w-full h-full lg:h-full"
+          className="object-cover object-center w-full h-full lg:w-full lg:h-full"
           src={image ?? ''}
           alt={title}
         />

apps/nextjs-app/src/features/home/blocks/cta/CtaBlock.tsx

@@ -6,14 +6,14 @@ type Props = {
 export const CtaBlock: FC<Props> = () => {
   return (
     <div className="bg-gray-50">
-      <div className="lg:flex lg:justify-between lg:items-center py-12 lg:py-16 px-4 sm:px-6 lg:px-8 mx-auto max-w-7xl">
-        <h2 className="text-3xl sm:text-4xl font-extrabold tracking-tight text-gray-900">
+      <div className="py-12 px-4 mx-auto max-w-7xl sm:px-6 lg:flex lg:justify-between lg:items-center lg:py-16 lg:px-8">
+        <h2 className="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
           <span className="block">Ready to dive in?</span>
           <span className="block text-indigo-600">
             Start your free trial today.
           </span>
         </h2>
-        <div className="flex lg:flex-shrink-0 mt-8 lg:mt-0">
+        <div className="flex mt-8 lg:shrink-0 lg:mt-0">
           <div className="inline-flex rounded-md shadow">
             <a
               href="#"

apps/nextjs-app/src/features/home/blocks/features/FeaturesBlock.tsx

@@ -52,21 +52,21 @@ export const FeaturesBlock: FC<Props> = () => {
   return (
     <Ctn>
       <div className="py-12 bg-white" style={{ width: '100%' }}>
-        <div className="px-4 sm:px-6 lg:px-8 mx-auto max-w-7xl">
+        <div className="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
           <div className="lg:text-center">
             <h2 className="text-base font-semibold tracking-wide text-indigo-600 uppercase">
               Transactions
             </h2>
-            <p className="mt-2 text-3xl sm:text-4xl font-extrabold tracking-tight leading-8 text-gray-900">
+            <p className="mt-2 text-3xl font-extrabold tracking-tight leading-8 text-gray-900 sm:text-4xl">
               A better way to send money
             </p>
-            <p className="lg:mx-auto mt-4 max-w-2xl text-xl text-gray-500">
+            <p className="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
               {lorem}
             </p>
           </div>
 
           <div className="mt-10">
-            <dl className="md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10 space-y-10 md:space-y-0">
+            <dl className="space-y-10 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10 md:space-y-0">
               {features.map((feature) => (
                 <div key={feature.name} className="relative">
                   <dt>

apps/nextjs-app/src/features/home/blocks/hero/HeroBlock.tsx

@@ -11,9 +11,9 @@ export const HeroBlock: FC<Props> = () => {
 
   return (
     <section className="text-gray-600 body-font">
-      <div className="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
-        <div className="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
-          <h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">
+      <div className="container flex flex-col items-center py-24 px-5 mx-auto md:flex-row">
+        <div className="flex flex-col items-center mb-16 text-center md:items-start md:pr-16 md:mb-0 md:w-1/2 md:text-left lg:grow lg:pr-24">
+          <h1 className="mb-4 text-3xl font-medium text-gray-900 sm:text-4xl title-font">
             Before they sold out&nbsp;
             <br className="hidden lg:inline-block" />
             readymade gluten
@@ -25,15 +25,15 @@ export const HeroBlock: FC<Props> = () => {
             hexagon try-hard chambray.
           </p>
           <div className="flex justify-center">
-            <button className="inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg">
+            <button className="inline-flex py-2 px-6 text-lg text-white bg-indigo-500 hover:bg-indigo-600 rounded border-0 focus:outline-none">
               Button
             </button>
-            <button className="ml-4 inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 rounded text-lg">
+            <button className="inline-flex py-2 px-6 ml-4 text-lg text-gray-700 bg-gray-100 hover:bg-gray-200 rounded border-0 focus:outline-none">
               Button
             </button>
           </div>
         </div>
-        <div className="lg:max-w-lg lg:w-full md:w-1/2 w-5/6">
+        <div className="w-5/6 md:w-1/2 lg:w-full lg:max-w-lg">
           <Image
             width={720}
             height={600}

apps/nextjs-app/src/features/system/pages/ErrorPage.tsx

@@ -17,14 +17,14 @@ export const ErrorPage: FC<Props> = (props) => {
       <Head>
         <title>Error {statusCode}</title>
       </Head>
-      <div className="container text-2xl md:text-xl bg-white">
-        <div className="flex flex-col items-center justify-center w-screen h-screen">
+      <div className="container text-2xl bg-white md:text-xl">
+        <div className="flex flex-col justify-center items-center w-screen h-screen">
           <h1 className="m-5 text-5xl text-black md:text-4xl">Woops !</h1>
           <p className="text-2xl text-black md:text-2xl">
             Something went wrong. Please try again later.
           </p>
         </div>
-        <div className="absolute bottom-0 right-0 p-5 border-solid border-2 border-indigo-400 rounded-lg text-left m-5 text-gray-700 text-sm">
+        <div className="absolute right-0 bottom-0 p-5 m-5 text-sm text-left text-gray-700 rounded-lg border-2 border-indigo-400 border-solid">
           <p data-testid="error-status-code">Code: {statusCode}</p>
           <p>Message: {message}</p>
           <p>Error id: {errorId}</p>

apps/nextjs-app/src/features/system/pages/NotFoundPage.tsx

@@ -17,14 +17,14 @@ export const NotFoundPage: FC<Props> = (props) => {
       <Head>
         <title>{title}</title>
       </Head>
-      <div className="flex flex-col items-center justify-center w-screen h-screen bg-white">
+      <div className="flex flex-col justify-center items-center w-screen h-screen bg-white">
         <h1
           data-testid="not-found-title"
           className="text-5xl text-black md:text-4xl lg:text-5xl"
         >
           {title}
         </h1>
-        <p className="text-center mt-5 no-underline hover:underline text-xl">
+        <p className="mt-5 text-xl text-center no-underline hover:underline">
           <a href={'/'}>{t('system:links.backToHome')}</a>
         </p>
       </div>

apps/remix-app/.eslintrc.js

@@ -21,6 +21,7 @@ module.exports = {
     '@your-org/eslint-config-bases/regexp',
     '@your-org/eslint-config-bases/jest',
     '@your-org/eslint-config-bases/react',
+    '@your-org/eslint-config-bases/tailwind',
     '@your-org/eslint-config-bases/rtl',
     '@your-org/eslint-config-bases/graphql-schema',
     // Specific rules for remix

apps/remix-app/package.json

@@ -20,15 +20,15 @@
     "dev": "npm-run-all --parallel --print-label watch-tailwind remix-dev",
     "watch-tailwind": "tailwindcss -o ./src/tailwind.css --watch",
     "remix-dev": "remix dev",
-    "clean": "rimraf --no-glob ./.cache ./coverage ./src/tailwind.css ./tsconfig.tsbuildinfo ./.eslintcache && jest --clear-cache",
+    "clean": "rimraf --no-glob ./.cache ./coverage ./src/tailwind.css ./tsconfig.tsbuildinfo",
     "?share-static-symlink": "echo 'Use this command to link assets... from shared static folder'",
     "share-static-symlink": "rimraf ./public/shared-assets && symlink-dir ../../static/assets ./public/shared-assets",
     "?share-static-hardlink": "echo 'Use this command to link assets... from shared static folder'",
     "share-static-hardlink": "rimraf ./public/shared-assets && syncdir ../../static/assets ./public/shared-assets --copy",
     "test": "yarn test-unit",
     "test-unit": "jest --config jest.config.js",
     "typecheck": "tsc --project ./tsconfig.json --noEmit",
-    "lint": "eslint . --ext .ts,.tsx,.js,.jsx,.mdx,.graphql --cache",
+    "lint": "eslint . --ext .ts,.tsx,.js,.jsx,.mdx,.graphql --cache --cache-location ../../.cache/eslint/remix-app.eslintcache",
     "lint-styles": "stylelint 'src/**/*.css'",
     "fix-all-files": "eslint . --ext .ts,.tsx,.js,.jsx,.mdx,.graphql --fix"
   },

apps/remix-app/src/features/system/pages/NotFoundPage.tsx

@@ -9,14 +9,14 @@ export const NotFoundPage: FC<Props> = (props) => {
   const title = props.title || 'Not Found';
   return (
     <>
-      <div className="flex flex-col items-center justify-center w-screen h-screen bg-white">
+      <div className="flex flex-col justify-center items-center w-screen h-screen bg-white">
         <h1
           data-testid="not-found-title"
           className="text-5xl text-black md:text-4xl lg:text-5xl"
         >
           {title}
         </h1>
-        <p className="text-center mt-5 no-underline hover:underline text-xl">
+        <p className="mt-5 text-xl text-center no-underline hover:underline">
           <a href={'/'}>Back to home</a>
         </p>
       </div>

apps/vite-app/package.json

@@ -11,7 +11,7 @@
     "test": "yarn test-unit",
     "test-unit": "echo 'No test present yet'",
     "typecheck": "tsc --project ./tsconfig.json --noEmit",
-    "lint": "eslint . --ext .ts,.tsx,.js,.jsx --cache",
+    "lint": "eslint . --ext .ts,.tsx,.js,.jsx --cache --cache-location ../../.cache/eslint/vite-app.eslintcache",
     "fix-all-files": "eslint . --ext .ts,.tsx,.js,.jsx --fix"
   },
   "dependencies": {

package.json

@@ -28,7 +28,7 @@
     "packages/*"
   ],
   "scripts": {
-    "g:clean": "rimraf '.cache/*' && yarn workspaces foreach -ptv run clean",
+    "g:clean": "yarn clean:global-cache && yarn workspaces foreach -ptv run clean",
     "g:build": "yarn workspaces foreach -p --topological-dev -v run build",
     "g:build-changed": "yarn workspaces foreach --topological-dev --no-private -v --since=origin/main run build",
     "g:test-unit": "yarn workspaces foreach -ptv run test-unit",
@@ -43,6 +43,7 @@
     "g:release": "yarn g:build && changeset publish",
     "g:share-static-symlink": "yarn workspaces foreach -pv --include '*-app' run share-static-symlink",
     "g:share-static-hardlink": "yarn workspaces foreach -pv --include '*-app' run share-static-hardlink",
+    "clean:global-cache": "rimraf --no-glob ./.cache",
     "apps:build": "yarn workspaces foreach -ptv --include '*-app' run build",
     "apps:clean": "yarn workspaces foreach -ptv --include '*-app' run clean",
     "packages:build": "yarn workspaces foreach -ptv --include '@your-org/*' run build",

packages/api-gateway/package.json

@@ -20,8 +20,8 @@
   "types": "dist/index.d.ts",
   "scripts": {
     "build-graphql-mesh": "mesh build",
-    "clean": "rimraf --no-glob ./dist ./coverage ./tsconfig.tsbuildinfo ./.eslintcache && jest --clear-cache",
-    "lint": "eslint . --ext .ts,.tsx,.js,.jsx",
+    "clean": "rimraf --no-glob ./dist ./coverage ./tsconfig.tsbuildinfo",
+    "lint": "eslint . --ext .ts,.tsx,.js,.jsx --cache --cache-location ../../.cache/eslint/api-gateway.eslintcache",
     "typecheck": "tsc --project ./tsconfig.json --noEmit",
     "test": "jest --config jest.config.js --passWithNoTests",
     "fix-all-files": "eslint . --ext .ts,.tsx,.js,.jsx --fix"

packages/common-i18n/package.json

@@ -22,8 +22,8 @@
     }
   },
   "scripts": {
-    "clean": "rimraf --no-glob ./dist ./coverage ./tsconfig.tsbuildinfo ./.eslintcache && jest --clear-cache",
-    "lint": "eslint . --ext .ts,.tsx,.js,.jsx",
+    "clean": "rimraf --no-glob ./dist ./coverage ./tsconfig.tsbuildinfo",
+    "lint": "eslint . --ext .ts,.tsx,.js,.jsx --cache --cache-location ../../.cache/eslint/common-i18n.eslintcache",
     "typecheck": "tsc --project ./tsconfig.json --noEmit"
   },
   "devDependencies": {

packages/core-lib/package.json

@@ -22,8 +22,8 @@
     "build": "rimraf --no-glob ./dist && cross-env NODE_ENV=production microbundle --tsconfig ./tsconfig.build.json --jsx React.createElement --jsxFragment React.Fragment -f cjs,es --no-compress",
     "build-react17jsx": "microbundle --tsconfig ./tsconfig.build.json --jsx jsx --jsxImportSource react --globals react/jsx-runtime=jsx --compress",
     "dev": "microbundle watch",
-    "clean": "rimraf --no-glob ./dist ./coverage ./tsconfig.tsbuildinfo ./.eslintcache && jest --clear-cache",
-    "lint": "eslint . --ext .ts,.tsx,.js,.jsx",
+    "clean": "rimraf --no-glob ./dist ./coverage ./tsconfig.tsbuildinfo",
+    "lint": "eslint . --ext .ts,.tsx,.js,.jsx --cache --cache-location ../../.cache/eslint/core-lib.eslintcache",
     "typecheck": "tsc --project ./tsconfig.json --noEmit",
     "test": "run-s test-unit",
     "test-unit": "jest --config jest.config.js",