@10stars/config 16.0.2 → 16.1.0

package/oxlint.config.browser.json

@@ -17,6 +17,18 @@
         "ignore": ["sx"]
       }
     ],
-    "react/react-in-jsx-scope": "off"
+    "react/react-in-jsx-scope": "off",
+    "no-restricted-imports": [
+      "error",
+      {
+        "paths": [
+          {
+            "name": "@vanilla-extract/css",
+            "importNames": ["style"],
+            "message": "Do not use 'style' from '@vanilla-extract/css'. Use 'theme.layerStyle(import.meta, ...)' instead so the rule lands in a cascade layer"
+          }
+        ]
+      }
+    ]
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@10stars/config",
-  "version": "16.0.2",
+  "version": "16.1.0",
   "private": false,
   "bin": {
     "config": "./src/index.ts"
@@ -26,6 +26,7 @@
     "@types/node": "^26.1.0",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
+    "@typescript/native-preview": "7.0.0-dev.20260704.1",
     "husky": "^9.1.7",
     "oxfmt": "0.57.0",
     "oxlint": "^1.72.0",

package/src/index.ts

@@ -6,8 +6,9 @@ import path from "node:path"
 import { resetColorIndex } from "./colors"
 import { checkIsMonorepo, dedupeSingletons, linkPackages } from "./link-packages"
 import { setupOverrides } from "./manage-overrides"
-import { patchVanillaExtract } from "./patch-vanilla-extract"
 import { runConcurrently, type CommandConfig } from "./runner"
+import { setupSideEffects } from "./vanilla-extract/manage-side-effects"
+import { patchVanillaExtract } from "./vanilla-extract/patch-vanilla-extract"
 import { setupVSCode } from "./vscode-config"
 
 const cwd = process.env.PWD!
@@ -39,13 +40,11 @@ const getOxlintCommonCmd = async () => {
   return `${paths} ${quiet} --ignore-pattern '**/node_modules/**' --ignore-pattern '**/dist/**'`
 }
 
-const typecheckAndWatch = () => exec(`tsc --project ./tsconfig.json --noEmit --watch`)
-
 const actions = {
   prepare: {
     info: `Runs husky and links packages`,
     action: async () => {
-      await patchVanillaExtract(cwd) // patch VE before the CI guard: builds (incl. CI) need the `css.ts`-only filter in node_modules
+      const veInstalled = await patchVanillaExtract(cwd) // patch VE before the CI guard: builds (incl. CI) need the `css.ts`-only filter in node_modules
 
       if (process.env.CI) return
 
@@ -57,6 +56,7 @@ const actions = {
       exec(`husky`) // husky is intended only for local development (not in CI)
       await setupVSCode(cwd) // create/update .vscode directory with standardized extensions.json and settings.json
       await setupOverrides(cwd) // sync standardized package.json overrides
+      await setupSideEffects(cwd, veInstalled) // CSS-protect VE repos; `sideEffects: false` for non-VE libs
 
       const config = await getConfig()
       if (config?.linkPackages) {
@@ -70,13 +70,9 @@ const actions = {
       }
     },
   },
-  typecheckWatch: {
-    info: "Typecheck code (in watch mode)",
-    action: typecheckAndWatch,
-  },
   ts: {
-    info: `alias for 'typecheckWatch'`,
-    action: typecheckAndWatch,
+    info: `Typecheck code (in watch mode)`,
+    action: () => exec(`tsgo --project ./tsconfig.json --noEmit --watch`), // watch uses tsgo (native-preview) for the FSEvents watcher fix absent from typescript@7.0.1-rc; non-watch typecheck stays on tsc
   },
   typecheck: {
     info: `Typecheck code (no watch)`,

package/src/vanilla-extract/manage-side-effects.ts

@@ -0,0 +1,63 @@
+import { execSync } from "node:child_process"
+import fs from "node:fs/promises"
+import path from "node:path"
+
+import type * as TF from "type-fest"
+
+// VE `css.ts` modules and raw `.css` files inject styles purely as a side effect — a global reset,
+// theme-var override or `@font-face` is imported for that effect alone (no used exports). A
+// `sideEffects: false` package tree-shakes such a bare import away, shipping an unstyled build (and,
+// on SSR, a hydration mismatch — React #418 — since the server-rendered markup no longer matches).
+// Listing them keeps them alive. `css.ts` mirrors the single-filename VE convention (see
+// patch-vanilla-extract); `.tsx`/`.js` css variants aren't used in these repos.
+const CSS_SIDE_EFFECTS = [`**/css.ts`, `**/*.css`]
+
+/**
+ * Standardise `package.json#sideEffects` so tree-shaking is explicit across the monorepo.
+ *
+ * VE packages (`veInstalled`): guarantee the CSS patterns are present — `false` becomes the CSS
+ * array, an existing array gains any missing patterns. The array still treats every non-CSS module
+ * as side-effect-free, so JS tree-shaking is identical to `false`; it only rescues CSS. `true`/absent
+ * are left alone: they already keep every module (CSS included), and forcing an array would newly
+ * tree-shake the package's non-CSS side-effect imports.
+ *
+ * Non-VE packages: an absent field defaults the bundler to "everything has side effects" (no
+ * tree-shaking). Set `false` to opt these libraries in, matching the rest of the monorepo. A package
+ * that genuinely relies on a side-effect import must declare it itself (`["glob"]` or `true`) —
+ * any explicit value is always respected, so opting out is a one-line change in that package.
+ */
+export const setupSideEffects = async (cwd: string, veInstalled: boolean) => {
+  const pkgPath = path.join(cwd, `package.json`)
+
+  let pkgJson: TF.PackageJson
+  try {
+    pkgJson = JSON.parse(await fs.readFile(pkgPath, `utf8`))
+  } catch (error) {
+    console.error(`Error reading or parsing package.json:`, error)
+    return
+  }
+
+  const current = pkgJson.sideEffects
+  let next: boolean | string[]
+
+  if (veInstalled) {
+    if (current === false) {
+      next = [...CSS_SIDE_EFFECTS]
+    } else if (Array.isArray(current)) {
+      next = [...current, ...CSS_SIDE_EFFECTS.filter((pattern) => !current.includes(pattern))]
+    } else {
+      return // `true`/absent already keep every module (incl. CSS) — nothing to protect
+    }
+  } else if (current === undefined) {
+    next = false // non-VE library opts into tree-shaking; an explicit `[…]`/`true` is respected below
+  } else {
+    return // non-VE with an explicit value — respect it
+  }
+
+  if (JSON.stringify(current) === JSON.stringify(next)) return
+
+  pkgJson.sideEffects = next
+  await fs.writeFile(pkgPath, JSON.stringify(pkgJson, null, 2) + `\n`)
+  console.info(`Written sideEffects: ${pkgPath}`)
+  execSync(`bunx oxfmt ${pkgPath}`, { cwd, stdio: `inherit` })
+}

package/src/{patch-vanilla-extract.ts → vanilla-extract/patch-vanilla-extract.ts}

@@ -17,8 +17,10 @@ const PATCHED = String.raw`/(?:^|[/\\])css\.(js|cjs|mjs|jsx|ts|tsx)(\?used)?$/`
  * node_modules. Idempotent, and a no-op for repos without VE (e.g. backend-only). If VE is present
  * but the filter definition can't be found, it throws: a silent miss would stop every `css.ts` from
  * compiling, so a VE build change must surface at install time rather than as missing styles.
+ *
+ * @returns whether VE is installed here — the caller uses it to gate `css.ts` side-effect handling.
  */
-export const patchVanillaExtract = async (cwd: string) => {
+export const patchVanillaExtract = async (cwd: string): Promise<boolean> => {
   const nodeModules = path.join(cwd, `node_modules`)
   const glob = new Bun.Glob(`**/@vanilla-extract/integration/dist/*.js`)
 
@@ -42,16 +44,18 @@ export const patchVanillaExtract = async (cwd: string) => {
     patched.push(rel)
   }
 
-  if (!integrationFound) return // VE not installed here
+  if (!integrationFound) return false // VE not installed here
 
   if (!definitionFound) {
     throw new Error(
       `@10stars/config: found @vanilla-extract/integration but not its cssFileFilter definition — ` +
-        `the VE build likely changed. Update ORIGINAL in src/patch-vanilla-extract.ts.`,
+        `the VE build likely changed. Update ORIGINAL in src/vanilla-extract/patch-vanilla-extract.ts.`,
     )
   }
 
   if (patched.length) {
     console.info(`Patched @vanilla-extract file filter to css.ts (${patched.length} file(s))`)
   }
+
+  return true
 }