{"_id":"env.style","_rev":"3-4e18df8842d18dc35bf7691628860fba","name":"env.style","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"env.style","version":"1.0.0","keywords":[],"author":"","license":"ISC","_id":"env.style@1.0.0","maintainers":[{"name":"quaddepos","email":"ryan@styxs.nl"}],"dist":{"shasum":"aa4024de438531b91da7ab06b5800871970f1b71","tarball":"https://registry.npmjs.org/env.style/-/env.style-1.0.0.tgz","fileCount":1,"integrity":"sha512-Eshpz5p90pQbQi6W1Aq+2oT+B/YZJf2w1jE5Ec+awBXL0D4i0IyTl9WM1CR3RnrxIXWUGGaO9QT6oZEWaTrosw==","signatures":[{"sig":"MEYCIQCLnv8cNA3I0M80qU2RhopJueHf3TCTcDHUU74fILvsiwIhANKwiC2C1RM4eG8RVqfOPpJtBbqJle/xnM5MBjGFtyI5","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":245},"main":"index.js","type":"commonjs","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"quaddepos","email":"ryan@styxs.nl"},"_npmVersion":"11.16.0","description":"","directories":{},"_nodeVersion":"24.7.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/env.style_1.0.0_1783268088111_0.18719452050815466","host":"s3://npm-registry-packages-npm-production"},"deprecated":"placeholder, use >=1.0.1"},"1.0.1":{"name":"env.style","version":"1.0.1","keywords":["nextjs","vite","vite-plugin","favicon","environment","dx","staging","preview"],"license":"MIT","_id":"env.style@1.0.1","maintainers":[{"name":"quaddepos","email":"ryan@styxs.nl"}],"homepage":"https://github.com/QuadDepo/env.style#readme","bugs":{"url":"https://github.com/QuadDepo/env.style/issues"},"dist":{"shasum":"88b376fdd2261fd6dde4d6d2cd571827cd4792ef","tarball":"https://registry.npmjs.org/env.style/-/env.style-1.0.1.tgz","fileCount":14,"integrity":"sha512-w7lsNdYNbPHgAszFVLIZfuh/3A/MPTDoo3QvsISH3THy6mO7CP29ROugPmCl/f7V7NosaT5Z5OTBmVDDBJhbzg==","signatures":[{"sig":"MEQCIA77Gh5v0fEs4aFdgQ/FAsqdFA85jMl5JxD2omCJkrQVAiA/tChBWz7l5HIOEMlsQS0WVMgJyCIKxmwuTBAh6qZfBA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/env.style@1.0.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":39622},"main":"./dist/index.cjs","pnpm":{"onlyBuiltDependencies":["esbuild","sharp"]},"type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=18.17.0"},"exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./vite":{"import":{"types":"./dist/vite.d.ts","default":"./dist/vite.js"},"require":{"types":"./dist/vite.d.cts","default":"./dist/vite.cjs"}}},"gitHead":"6eec0bdc8fa293cac50fcfd1e4e46c64dbda5235","scripts":{"lint":"biome check .","test":"vitest run","build":"tsup src/index.ts src/vite.ts --format esm,cjs --dts","format":"biome format --write .","typecheck":"tsc --noEmit","test:visual":"node scripts/visual-test.ts","prepublishOnly":"pnpm build"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:efb3cad7-ad43-44a0-88a9-001271674c35"}},"repository":{"url":"git+https://github.com/QuadDepo/env.style.git","type":"git"},"_npmVersion":"11.16.0","description":"Environment-tinted favicons for Next.js and Vite — see at a glance whether a tab is dev, preview, staging, or production.","directories":{},"sideEffects":false,"_nodeVersion":"24.18.0","dependencies":{"sharp":"^0.35.3","decode-ico":"^0.4.1"},"_hasShrinkwrap":false,"packageManager":"pnpm@10.19.0","devDependencies":{"next":"^16.2.10","tsup":"^8.5.1","vite":"^8.1.3","vitest":"^4.1.9","typescript":"^5.9.3","@types/node":"^26.1.0","@biomejs/biome":"^2.5.2"},"peerDependencies":{"next":">=13","vite":">=5"},"peerDependenciesMeta":{"next":{"optional":true},"vite":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/env.style_1.0.1_1783282851244_0.4214531548198275","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2026-07-05T16:14:48.062Z","modified":"2026-07-05T20:22:09.314Z","1.0.0":"2026-07-05T16:14:48.244Z","1.0.1":"2026-07-05T20:20:51.405Z"},"bugs":{"url":"https://github.com/QuadDepo/env.style/issues"},"license":"MIT","homepage":"https://github.com/QuadDepo/env.style#readme","keywords":["nextjs","vite","vite-plugin","favicon","environment","dx","staging","preview"],"repository":{"url":"git+https://github.com/QuadDepo/env.style.git","type":"git"},"description":"Environment-tinted favicons for Next.js and Vite — see at a glance whether a tab is dev, preview, staging, or production.","maintainers":[{"name":"quaddepos","email":"ryan@styxs.nl"}],"readme":"# env.style 🎨\n\nFive browser tabs, all the same favicon — dev, preview, production — and you keep\nediting the wrong one. `env.style` tints your existing favicon per environment at build\ntime, Vercel-style: same mark, different color.\nProduction is never touched.\n\n## Install\n\n```bash\npnpm add env.style\n# or: npm install env.style\n```\n\n## Usage\n\n### Next.js\n\n```ts\n// next.config.ts\nimport { withEnvStyles } from 'env.style'\n\nexport default withEnvStyles(nextConfig)\n```\n\nThat's the only change needed. No layout edits, no manual favicon files.\n\n### Vite\n\n```ts\n// vite.config.ts\nimport { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nimport { envStyle } from 'env.style/vite'\n\nexport default defineConfig({\n  plugins: [react(), envStyle()],\n})\n```\n\n## Default colors\n\n| environment  | color              |\n|--------------|--------------------|\n| development  | `#3b82f6` blue     |\n| preview      | `#f59e0b` amber    |\n| anything else| `#6b7280` gray     |\n| production   | never touched      |\n\nEnvironment names are plain strings: whatever detection yields (e.g.\n`ENV_STYLES_ENV=staging`, or a Vercel custom environment via `VERCEL_TARGET_ENV`) is\nused as the `color` key. Any env without a color gets the gray fallback — except\n`production`, which is never touched.\n\n## Options\n\n- `enabled?: boolean` — kill switch for the whole tool. Default `true`.\n- `color?: Partial<Record<string, string>>` — override the tint color per environment.\n- `environment?: string` — force the environment instead of detecting it.\n- `excludeColors?: string[]` — keep pixels near these colors untinted (e.g. white\n  backgrounds or marks in an icon that shouldn't shift).\n- `icon?: string | Partial<Record<string, string>>` — path to a ready-made icon, or a\n  per-environment map of paths (e.g. `{ staging: 'staging-icon.png' }`), served as-is\n  for styled environments. Tinting and `excludeColors` are skipped entirely. An env\n  missing from the map falls back to normal tinting.\n\n```ts\nexport default withEnvStyles(nextConfig, {\n  color: { staging: '#ff00ff' },\n  excludeColors: ['#fff'],\n})\n```\n\n## How it works\n\n- Detects the environment: `environment` option → `ENV_STYLES_ENV` → `VERCEL_TARGET_ENV`\n  → `VERCEL_ENV`. If none is set, Next.js falls back to `NODE_ENV`; Vite falls back to\n  the command (dev server = development, `vite build` = production — set\n  `ENV_STYLES_ENV` to tint a build).\n- Tints your existing favicon with `sharp` and writes it to `public/__envstyle/`, which\n  self-gitignores.\n- Next.js: serves the tinted icon at your normal favicon URLs via `beforeFiles`\n  rewrites, with `Cache-Control: no-store` so stale icons don't linger after switching\n  envs.\n- Vite: rewrites `<link rel=\"icon\">` tags in `index.html` to point at the tinted icon\n  (injecting one if none exists) and serves it with `no-store` from dev-server\n  middleware.\n\n## Known limits\n\n- Environment is resolved at build time — a single build promoted across environments\n  won't restyle.\n- CDN-only favicons aren't intercepted; on Next.js, custom metadata `icons` paths\n  aren't either.\n- Icon source changes need a dev server or build restart to pick up.\n\n## Development\n\n- `pnpm test` — unit tests (vitest); `pnpm typecheck` — TypeScript.\n- `pnpm test:visual` — fetches real brand favicons and writes a before/after tint\n  gallery to `.tmp/visual/index.html` (needs network; Node >= 22.18 to run the `.ts`\n  script directly).\n- Runnable examples: `cd examples/nextjs && pnpm install && pnpm dev` (same for\n  `examples/vite-react`) — the tab favicon should render tinted green.\n\n## License\n\nMIT\n","readmeFilename":"README.md"}