update tailwind and eslint config to be compatible with Next.js App R…

…outer, `@theguild/components` v8 and Nextra 4 (#615) * upd * aa * chore(dependencies): updated changesets for modified dependencies * fix `require.resolve` * more * more * more * more * lint fixes * ignore default export from manifest * fixes * chore(dependencies): updated changesets for modified dependencies * remove @type * use `--nextra-primary-lightness` feature --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
the-guild-org · Nov 5, 2024 · a3d8e2f · a3d8e2f
1 parent a2b3340
commit a3d8e2f
Show file tree

Hide file tree

Showing 27 changed files with 4,182 additions and 2,634 deletions.
diff --git a/.changeset/@theguild_eslint-config-615-dependencies.md b/.changeset/@theguild_eslint-config-615-dependencies.md
@@ -0,0 +1,20 @@
+---
+"@theguild/eslint-config": patch
+---
+dependencies updates:
+  - Updated dependency [`@rushstack/eslint-patch@1.10.4` ↗︎](https://www.npmjs.com/package/@rushstack/eslint-patch/v/1.10.4) (from `^1.10.4`, in `dependencies`)
+  - Updated dependency [`@typescript-eslint/eslint-plugin@8.13.0` ↗︎](https://www.npmjs.com/package/@typescript-eslint/eslint-plugin/v/8.13.0) (from `^7.18.0`, in `dependencies`)
+  - Updated dependency [`@typescript-eslint/parser@8.13.0` ↗︎](https://www.npmjs.com/package/@typescript-eslint/parser/v/8.13.0) (from `^7.18.0`, in `dependencies`)
+  - Updated dependency [`eslint-config-prettier@9.1.0` ↗︎](https://www.npmjs.com/package/eslint-config-prettier/v/9.1.0) (from `^9.1.0`, in `dependencies`)
+  - Updated dependency [`eslint-import-resolver-typescript@3.6.3` ↗︎](https://www.npmjs.com/package/eslint-import-resolver-typescript/v/3.6.3) (from `^3.6.1`, in `dependencies`)
+  - Updated dependency [`eslint-plugin-import@2.31.0` ↗︎](https://www.npmjs.com/package/eslint-plugin-import/v/2.31.0) (from `^2.29.1`, in `dependencies`)
+  - Updated dependency [`eslint-plugin-jsonc@2.16.0` ↗︎](https://www.npmjs.com/package/eslint-plugin-jsonc/v/2.16.0) (from `^2.11.1`, in `dependencies`)
+  - Updated dependency [`eslint-plugin-jsx-a11y@6.10.2` ↗︎](https://www.npmjs.com/package/eslint-plugin-jsx-a11y/v/6.10.2) (from `^6.8.0`, in `dependencies`)
+  - Updated dependency [`eslint-plugin-mdx@3.1.5` ↗︎](https://www.npmjs.com/package/eslint-plugin-mdx/v/3.1.5) (from `^3.0.0`, in `dependencies`)
+  - Updated dependency [`eslint-plugin-n@17.12.0` ↗︎](https://www.npmjs.com/package/eslint-plugin-n/v/17.12.0) (from `^17.0.0`, in `dependencies`)
+  - Updated dependency [`eslint-plugin-promise@7.1.0` ↗︎](https://www.npmjs.com/package/eslint-plugin-promise/v/7.1.0) (from `^7.0.0`, in `dependencies`)
+  - Updated dependency [`eslint-plugin-react@7.37.2` ↗︎](https://www.npmjs.com/package/eslint-plugin-react/v/7.37.2) (from `^7.33.2`, in `dependencies`)
+  - Updated dependency [`eslint-plugin-react-hooks@5.0.0` ↗︎](https://www.npmjs.com/package/eslint-plugin-react-hooks/v/5.0.0) (from `^4.6.0`, in `dependencies`)
+  - Updated dependency [`eslint-plugin-sonarjs@2.0.4` ↗︎](https://www.npmjs.com/package/eslint-plugin-sonarjs/v/2.0.4) (from `^1.0.0`, in `dependencies`)
+  - Updated dependency [`eslint-plugin-unicorn@56.0.0` ↗︎](https://www.npmjs.com/package/eslint-plugin-unicorn/v/56.0.0) (from `^55.0.0`, in `dependencies`)
+  - Updated dependency [`eslint-plugin-yml@1.15.0` ↗︎](https://www.npmjs.com/package/eslint-plugin-yml/v/1.15.0) (from `^1.11.0`, in `dependencies`)
diff --git a/.changeset/@theguild_tailwind-config-615-dependencies.md b/.changeset/@theguild_tailwind-config-615-dependencies.md
@@ -0,0 +1,12 @@
+---
+"@theguild/tailwind-config": patch
+---
+dependencies updates:
+  - Removed dependency [`autoprefixer@^10.4.19` ↗︎](https://www.npmjs.com/package/autoprefixer/v/10.4.19) (from `dependencies`)
+  - Removed dependency [`cssnano@^7.0.0` ↗︎](https://www.npmjs.com/package/cssnano/v/7.0.0) (from `dependencies`)
+  - Removed dependency [`postcss@^8.4.38` ↗︎](https://www.npmjs.com/package/postcss/v/8.4.38) (from `dependencies`)
+  - Removed dependency [`postcss-import@^16.1.0` ↗︎](https://www.npmjs.com/package/postcss-import/v/16.1.0) (from `dependencies`)
+  - Removed dependency [`tailwindcss@^3.4.3` ↗︎](https://www.npmjs.com/package/tailwindcss/v/3.4.3) (from `dependencies`)
+  - Added dependency [`postcss-import@^16.1.0` ↗︎](https://www.npmjs.com/package/postcss-import/v/16.1.0) (to `peerDependencies`)
+  - Added dependency [`postcss-lightningcss@^1.0.1` ↗︎](https://www.npmjs.com/package/postcss-lightningcss/v/1.0.1) (to `peerDependencies`)
+  - Added dependency [`tailwindcss@^3.4.14` ↗︎](https://www.npmjs.com/package/tailwindcss/v/3.4.14) (to `peerDependencies`)
diff --git a/.changeset/serious-badgers-punch.md b/.changeset/serious-badgers-punch.md
@@ -0,0 +1,5 @@
+---
+'@theguild/prettier-config': major
+---
+
+add `"type": "module"` in `package.json` and export prettier config as ESM
diff --git a/.changeset/sixty-hounds-reflect.md b/.changeset/sixty-hounds-reflect.md
@@ -0,0 +1,9 @@
+---
+'@theguild/tailwind-config': minor
+---
+
+- use ESM config for `postcss`
+- use `postcss-lightningcss` instead of `autoprefixer` and `cssnano`
+- BREAKING CHANGE: require `peerDependencies` to be installed `postcss-import`, `postcss-lightningcss` and `tailwindcss`
+- update tailwindcss `content` property to include Next.js' `app` directory
+- add `type: "module"` in `package.json` 
diff --git a/.changeset/violet-cars-double.md b/.changeset/violet-cars-double.md
@@ -0,0 +1,5 @@
+---
+'@theguild/eslint-config': minor
+---
+
+ignore `import/no-default-export` for `**/app/**/{layout,page,not-found}.tsx` and `**/app/**/_meta.{ts,tsx}`
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -1,21 +1,26 @@
 module.exports = {
   extends: [
     '@theguild',
+    '@theguild/eslint-config/react',
     '@theguild/eslint-config/json',
     '@theguild/eslint-config/yml',
     '@theguild/eslint-config/mdx',
   ],
-  parserOptions: {
-    project: ['tsconfig.json', 'tsconfig.eslint.json'],
-  },
   env: {
     node: true,
   },
   overrides: [
     {
       files: 'packages/eslint-config/**',
       rules: {
-        '@typescript-eslint/no-var-requires': 'off',
+        '@typescript-eslint/no-require-imports': 'off',
+      },
+    },
+    {
+      files: 'packages/prettier-config/README.md/*.js',
+      rules: {
+        'unicorn/prefer-export-from': 'off',
+        'import/no-default-export': 'off',
       },
     },
   ],

diff --git a/.prettierrc.cjs b/.prettierrc.cjs
diff --git a/packages/eslint-config/package.json b/packages/eslint-config/package.json
@@ -24,22 +24,22 @@
     "typescript": "^5"
   },
   "dependencies": {
-    "@rushstack/eslint-patch": "^1.10.4",
-    "@typescript-eslint/eslint-plugin": "^7.18.0",
-    "@typescript-eslint/parser": "^7.18.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsonc": "^2.11.1",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-mdx": "^3.0.0",
-    "eslint-plugin-n": "^17.0.0",
-    "eslint-plugin-promise": "^7.0.0",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-sonarjs": "^1.0.0",
-    "eslint-plugin-unicorn": "^55.0.0",
-    "eslint-plugin-yml": "^1.11.0"
+    "@rushstack/eslint-patch": "1.10.4",
+    "@typescript-eslint/eslint-plugin": "8.13.0",
+    "@typescript-eslint/parser": "8.13.0",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-import-resolver-typescript": "3.6.3",
+    "eslint-plugin-import": "2.31.0",
+    "eslint-plugin-jsonc": "2.16.0",
+    "eslint-plugin-jsx-a11y": "6.10.2",
+    "eslint-plugin-mdx": "3.1.5",
+    "eslint-plugin-n": "17.12.0",
+    "eslint-plugin-promise": "7.1.0",
+    "eslint-plugin-react": "7.37.2",
+    "eslint-plugin-react-hooks": "5.0.0",
+    "eslint-plugin-sonarjs": "2.0.4",
+    "eslint-plugin-unicorn": "56.0.0",
+    "eslint-plugin-yml": "1.15.0"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/eslint-config/src/base.js b/packages/eslint-config/src/base.js
@@ -2,7 +2,6 @@ const { RESTRICTED_SYNTAX, RESTRICTED_GLOBALS, RESTRICTED_MODULES } = require('.
 
 /** @type {import('eslint').Linter.Config} */
 module.exports = {
-  parser: '@typescript-eslint/parser',
   extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
   plugins: ['sonarjs', 'unicorn', 'promise', 'import', 'n'],
   rules: {

diff --git a/packages/eslint-config/src/constants.js b/packages/eslint-config/src/constants.js
@@ -1,27 +1,31 @@
 const RESTRICTED_SYNTAX = [
   {
     // ❌ readFile(…, { encoding: … })
-    selector: `CallExpression[callee.name=/readFileSync|readFile|writeFileSync|writeFile/] > .arguments:last-child[type=ObjectExpression][properties.length=1] Property[key.name=encoding]`,
-    message: `Specify encoding as last argument instead of object with encoding key`,
+    selector:
+      'CallExpression[callee.name=/readFileSync|readFile|writeFileSync|writeFile/] > .arguments:last-child[type=ObjectExpression][properties.length=1] Property[key.name=encoding]',
+    message: 'Specify encoding as last argument instead of object with encoding key',
   },
   {
     // ❌ readFile(…, {})
-    selector: `CallExpression[callee.name=/readFileSync|readFile|writeFileSync|writeFile/] > .arguments:last-child[type=ObjectExpression][properties.length=0]`,
+    selector:
+      'CallExpression[callee.name=/readFileSync|readFile|writeFileSync|writeFile/] > .arguments:last-child[type=ObjectExpression][properties.length=0]',
     message: 'Specify encoding as last argument',
   },
   {
     // ❌ readFileSync(…).toString(…)
-    selector: `CallExpression[callee.name=readFileSync][parent.property.name=toString]`,
-    message: `toString is redundant, specify encoding as last argument`,
+    selector: 'CallExpression[callee.name=readFileSync][parent.property.name=toString]',
+    message: 'toString is redundant, specify encoding as last argument',
   },
   {
     // ❌ ….readFile(…, { encoding: … })
-    selector: `CallExpression[callee.type=MemberExpression][callee.property.name=/readFileSync|readFile|writeFileSync|writeFile/] > .arguments:last-child[type=ObjectExpression][properties.length=1] Property[key.name=encoding]`,
-    message: `Specify encoding as last argument instead of object with encoding key`,
+    selector:
+      'CallExpression[callee.type=MemberExpression][callee.property.name=/readFileSync|readFile|writeFileSync|writeFile/] > .arguments:last-child[type=ObjectExpression][properties.length=1] Property[key.name=encoding]',
+    message: 'Specify encoding as last argument instead of object with encoding key',
   },
   {
     // ❌ ….readFile(…, {})
-    selector: `CallExpression[callee.type=MemberExpression][callee.property.name=/readFileSync|readFile|writeFileSync|writeFile/] > .arguments:last-child[type=ObjectExpression][properties.length=0]`,
+    selector:
+      'CallExpression[callee.type=MemberExpression][callee.property.name=/readFileSync|readFile|writeFileSync|writeFile/] > .arguments:last-child[type=ObjectExpression][properties.length=0]',
     message: 'Specify encoding as last argument',
   },
   {

diff --git a/packages/eslint-config/src/index.js b/packages/eslint-config/src/index.js
@@ -18,6 +18,9 @@ module.exports = {
       // Rules which require type info and exclude virtual ts files extracted by `eslint-plugin-mdx`
       files: TS_FILE,
       excludedFiles: [CODE_BLOCK],
+      parserOptions: {
+        projectService: true,
+      },
       rules: {
         '@typescript-eslint/prefer-optional-chain': 'error',
       },
@@ -51,16 +54,7 @@ module.exports = {
       rules: { 'import/extensions': ['error', 'never'] },
     },
     {
-      files: [
-        'vite.config.ts',
-        'jest.config.js',
-        '*.d.ts',
-        'website/theme.config.tsx',
-        'tsup.config.ts',
-        'postcss.config.ts',
-        'tailwind.config.ts',
-        'next-sitemap.config.js',
-      ],
+      files: ['vite.config.ts', 'jest.config.js', '*.d.ts', 'tsup.config.ts', 'prettier.config.js'],
       rules: { 'import/no-default-export': 'off' },
     },
     {

diff --git a/packages/eslint-config/src/react-base.js b/packages/eslint-config/src/react-base.js
@@ -1,11 +1,6 @@
 const { REACT_RESTRICTED_SYNTAX } = require('./constants.js');
 
 const RESTRICTED_IMPORTS = [
-  {
-    name: 'react',
-    importNames: ['FC', 'FunctionComponent'],
-    message: 'Just type props and `ReactElement` as return type',
-  },
   {
     name: 'react',
     importNames: ['PropsWithChildren'],

diff --git a/packages/eslint-config/src/react.js b/packages/eslint-config/src/react.js
@@ -10,10 +10,16 @@ module.exports = {
     },
     {
       files: [
-        '**/pages/**', // Next.js pages directory use default export
-        'next.config.{js,mjs}',
+        '**/pages/**', // Next.js' `pages` directory use default export
+        '**/app/**/{layout,page,not-found,manifest}.{ts,tsx}', // Next.js' `layout`/`page`/`not-found` components use default export
+        '**/app/**/_meta.{ts,tsx}', // Nextra's `_meta` file uses default export
+        'next.config.{js,mjs,ts}',
         '**/*.stories.tsx',
         '.storybook/main.ts',
+        'website/theme.config.tsx',
+        'postcss.config.js',
+        'tailwind.config.ts',
+        'next-sitemap.config.js',
       ],
       rules: {
         'import/no-default-export': 'off',

diff --git a/packages/prettier-config/README.md b/packages/prettier-config/README.md
@@ -11,6 +11,8 @@ pnpm add -D prettier @theguild/prettier-config
 ## Usage
 
 ```js
-// .prettierrc.cjs
-module.exports = require('@theguild/prettier-config')
+// prettier.config.js
+import prettierConfig from '@theguild/prettier-config'
+
+export default prettierConfig
 ```
diff --git a/packages/prettier-config/index.cjs → packages/prettier-config/index.js b/packages/prettier-config/index.cjs → packages/prettier-config/index.js
@@ -1,4 +1,5 @@
-module.exports = {
+// eslint-disable-next-line import/no-default-export
+export default {
   trailingComma: 'all', // default to `all` in v3
   printWidth: 100,
   singleQuote: true,

diff --git a/packages/prettier-config/package.json b/packages/prettier-config/package.json
@@ -1,6 +1,7 @@
 {
   "name": "@theguild/prettier-config",
   "version": "2.0.7",
+  "type": "module",
   "description": "The Guild's shared Prettier config",
   "repository": {
     "url": "the-guild-org/shared-config",
@@ -10,7 +11,7 @@
   "license": "MIT",
   "private": false,
   "exports": {
-    ".": "./index.cjs",
+    ".": "./index.js",
     "./package.json": "./package.json"
   },
   "keywords": [

diff --git a/packages/tailwind-config/package.json b/packages/tailwind-config/package.json
@@ -1,6 +1,7 @@
 {
   "name": "@theguild/tailwind-config",
   "version": "0.5.0",
+  "type": "module",
   "description": "The Guild's shared Tailwind config",
   "repository": {
     "url": "the-guild-org/shared-config",
@@ -10,21 +11,21 @@
   "license": "MIT",
   "private": false,
   "exports": {
+    "./package.json": "./package.json",
     ".": {
-      "default": "./dist/tailwind.config.mjs",
-      "types": "./dist/tailwind.config.d.mts"
+      "types": "./dist/tailwind.config.d.ts",
+      "import": "./dist/tailwind.config.js",
+      "require": "./dist/tailwind.config.js"
     },
     "./postcss.config": {
-      "default": "./dist/postcss.config.js",
-      "types": "./dist/postcss.config.d.ts"
-    },
-    "./package.json": "./package.json"
+      "types": "./dist/postcss.config.d.ts",
+      "import": "./dist/postcss.config.js",
+      "require": "./dist/postcss.config.js"
+    }
   },
-  "types": "./dist/tailwind.config.d.mts",
   "files": [
     "dist",
-    "README.md",
-    "LICENSE"
+    "README.md"
   ],
   "keywords": [
     "tailwind",
@@ -34,17 +35,16 @@
     "build": "tsup",
     "prepublishOnly": "pnpm build"
   },
-  "dependencies": {
-    "@tailwindcss/container-queries": "^0.1.1",
-    "autoprefixer": "^10.4.19",
-    "cssnano": "^7.0.0",
-    "postcss": "^8.4.38",
+  "peerDependencies": {
     "postcss-import": "^16.1.0",
-    "tailwindcss": "^3.4.3"
+    "postcss-lightningcss": "^1.0.1",
+    "tailwindcss": "^3.4.14"
+  },
+  "dependencies": {
+    "@tailwindcss/container-queries": "^0.1.1"
   },
   "devDependencies": {
-    "postcss-load-config": "6.0.1",
-    "tsup": "^8.0.2"
+    "tsup": "8.0.2"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/tailwind-config/src/postcss.config.ts b/packages/tailwind-config/src/postcss.config.ts
@@ -1,13 +1,8 @@
-import { Config } from 'postcss-load-config';
-
-const config: Config = {
+/* eslint-disable import/no-default-export */
+export default {
   plugins: {
     'postcss-import': {},
     tailwindcss: {},
-    autoprefixer: {},
-    ...(process.env.NODE_ENV === 'production' && { cssnano: {} }),
+    'postcss-lightningcss': { browsers: '>= .25% and not dead' },
   },
 };
-
-export default config;
-export { type Config };