Add ESLint rule for no process.env and no import.meta.env outside of specified files

Author: webstackdev

eslint.config.ts

@@ -67,19 +67,23 @@ export default [
       '@typescript-eslint/no-non-null-assertion': 'off',
       '@typescript-eslint/no-unsafe-assignment': 'off',
       '@typescript-eslint/no-unsafe-call': 'off',
+      '@typescript-eslint/no-unsafe-function-type': level,
       '@typescript-eslint/no-unsafe-member-access': 'off',
       '@typescript-eslint/no-unsafe-return': 'off',
       '@typescript-eslint/no-unused-vars': [
         level,
         { varsIgnorePattern: '^_', argsIgnorePattern: '^_|^this$' },
       ],
+      '@typescript-eslint/no-empty-object-type': level,
       '@typescript-eslint/no-var-requires': level,
       '@typescript-eslint/no-unnecessary-type-assertion': 'off',
+      '@typescript-eslint/no-wrapper-object-types': level,
       '@typescript-eslint/restrict-template-expressions': 'off',
       '@typescript-eslint/triple-slash-reference': 'off',
+      /** Issue with Prettier https://github.com/prettier/eslint-plugin-prettier/issues/65: */
       'arrow-body-style': 'off',
-      camelcase: [level],
-      curly: 'off',
+      'camelcase': [level],
+      'curly': 'off',
       'import/no-unresolved': [
         level,
         {
@@ -105,14 +109,36 @@ export default [
           'svg': 'always',
         },
       ],
+      'import/no-restricted-paths': [
+        level,
+        {
+          zones: [
+            {
+              target: 'src/components/',
+              from: 'src/lib/',
+              message: 'The src/lib directory is for build-time code only.',
+            },
+            {
+              target: 'src/layouts/',
+              from: 'src/lib/',
+              message: 'The src/lib directory is for build-time code only.',
+            },
+            {
+              target: 'src/pages/',
+              from: 'src/lib/',
+              message: 'The src/lib directory is for build-time code only.',
+            },
+          ],
+        },
+      ],
       'import/order': 'off',
       'jsdoc/check-indentation': level,
       'jsdoc/check-line-alignment': level,
       'jsdoc/check-syntax': level,
       'jsdoc/check-tag-names': [
         level,
         {
-          definedTags: ['NOTE:', 'jest-environment', 'jest-environment-options'],
+          definedTags: ['NOTE:', 'jest-environment'],
           jsxTags: true,
         },
       ],
@@ -131,6 +157,7 @@ export default [
       'jsdoc/valid-types': 'off',
       'new-cap': [level, { newIsCap: true, capIsNew: false }],
       'no-new': level,
+      'no-process-env': level,
       'no-restricted-globals': ['error'].concat(restrictedGlobals),
       'no-restricted-imports': [
         'error', {
@@ -150,13 +177,14 @@ export default [
       'no-unused-expressions': [level, { allowShortCircuit: true, allowTernary: true }],
       'no-unused-vars': [level, { varsIgnorePattern: '^_', argsIgnorePattern: '^_|^this$' }],
       'no-useless-escape': 'off',
+      /** Issue with Prettier https://github.com/prettier/eslint-plugin-prettier/issues/65: */
       'prefer-arrow-callback': 'off',
       'prefer-object-spread': level,
       'prefer-spread': level,
       'security/detect-non-literal-fs-filename': 'off',
       'security/detect-object-injection': 'off',
       'security/detect-unsafe-regex': 'off',
-      semi: ['error', 'never'],
+      'semi': ['error', 'never'],
     },
   },
   {
@@ -202,4 +230,49 @@ export default [
       camelcase: 'off',
     },
   },
+  {
+    files: [
+      '.eslintrc.js',
+      'astro.config.ts',
+      'playwright.config.ts',
+      'vitest.setup.ts',
+      'scripts/build/**/*'
+    ],
+    rules: {
+      // All files except Astro config should use import.meta.env.ENV_VAR
+      'no-process-env': 'off',
+    },
+  },
+  {
+    files: [
+      'src/components/**/*',
+      'src/layouts/**/*',
+      'src/pages/**/*',
+    ],
+    rules: {
+      'no-restricted-syntax': [
+        level,
+        {
+          'selector': 'MetaProperty[meta.name="import"][property.name="meta"]',
+          'message': 'Do not use import.meta.env directly. Use methods in src/components/scripts/utils like isCI(), isDev(), etc.'
+        }
+      ],
+    },
+  },
+  {
+    files: [
+      'src/lib/config/environmentServer.ts',
+      'src/lib/config/siteUrlServer.ts',
+      'src/components/scripts/utils/environmentClient.ts',
+      'src/components/scripts/utils/siteUrlClient.ts',
+    ],
+    rules: {
+      'no-restricted-syntax': [
+        'off',
+        {
+          'selector': 'MetaProperty[meta.name="import"][property.name="meta"]',
+        }
+      ],
+    },
+  },
 ]

package-lock.json

@@ -26,12 +26,12 @@
     "not IE 11"
   ],
   "scripts": {
-    "build": "NODE_ENV=production npm run build:favicons && npx astro build",
-    "build:dev": "NODE_ENV=development npm run build:favicons && npx astro build",
+    "build": "cross-env NODE_ENV=production npm run build:favicons && npx astro build",
+    "build:dev": "cross-env NODE_ENV=development npm run build:favicons && npx astro build",
     "build:favicons": "npx ts-node ./scripts/build/favicon.ts",
     "check": "npx astro check",
     "clean": "npx rimraf dist && npx rimraf .astro",
-    "dev": "npm run sync && npm run build:favicons && NODE_ENV=development npx astro dev",
+    "dev": "npm run sync && npm run build:favicons && cross-env NODE_ENV=development npx astro dev",
     "format": "npm run format:json && npm run format:code && npm run format:style",
     "format:code": "npx prettier --write \"@types/**/*.{js,ts}\" \"scripts/**/*.{js,ts}\" \"src/**/*.{js,ts,tsx,astro}\" --plugin=prettier-plugin-astro",
     "format:json": "npx prettier --write '**/*.json' --cache --ignore-path .gitignore",
@@ -42,10 +42,10 @@
     "lint:style": "npx stylelint \"src/**/*.{css,astro}\"",
     "preview": "npm run build:favicons && npx astro build && astro preview",
     "sync": "npx astro sync",
-    "test": "NODE_ENV=test npm run test:unit && npm run test:e2e",
-    "test:coverage": "NODE_ENV=test npx vitest run --coverage",
-    "test:e2e": "NODE_ENV=test npx playwright test",
-    "test:unit": "NODE_ENV=test npx vitest run",
+    "test": "cross-env NODE_ENV=test npm run test:unit && npm run test:e2e",
+    "test:coverage": "cross-env NODE_ENV=test npx vitest run --coverage",
+    "test:e2e": "cross-env NODE_ENV=test npx playwright test",
+    "test:unit": "cross-env NODE_ENV=test npx vitest run",
     "upgrade": "npx @astrojs/upgrade",
     "prepare": "husky"
   },
@@ -75,7 +75,9 @@
     "astro": "5.15.5",
     "astro-icon": "^1.1.5",
     "astro-vtbot": "^2.1.9",
+    "cross-env": "^10.1.0",
     "dotenv": "17.2.3",
+    "email-validator": "^2.0.4",
     "embla-carousel": "^8.6.0",
     "embla-carousel-autoplay": "^8.6.0",
     "focus-trap": "7.6.6",
@@ -108,6 +110,7 @@
     "zod": "4.1.12"
   },
   "devDependencies": {
+    "@eslint-community/eslint-plugin-eslint-comments": "^4.5.0",
     "@eslint/js": "9.39.1",
     "@playwright/test": "1.56.1",
     "@testing-library/dom": "10.4.1",

package.json

@@ -59,7 +59,7 @@ describe('AvatarManager', () => {
 
       // Constructor should only run once (if in development mode)
       // In production, console.log won't be called
-      if (process.env['NODE_ENV'] === 'development') {
+      if (import.meta.env.DEV) {
         expect(consoleLogSpy).toHaveBeenCalledTimes(1)
       }
     })

src/components/Avatar/__tests__/server.spec.ts

@@ -60,15 +60,15 @@ class AvatarManagerClass {
       if (filename && imageData) {
         // Deep freeze the image metadata to prevent modifications
         map[filename] = Object.freeze({ ...imageData })
-      } else if (process.env['NODE_ENV'] === 'development') {
+      } else if (import.meta.env.DEV) {
         console.warn(`[AvatarManager] Failed to process avatar at path: ${path}`)
       }
     }
 
     // Freeze the map to prevent modifications
     this.avatarMap = Object.freeze(map)
 
-    if (process.env['NODE_ENV'] === 'development') {
+    if (import.meta.env.DEV) {
       console.log(`[AvatarManager] Initialized with ${Object.keys(this.avatarMap).length} avatars`)
     }
   }