@k8slens/typescript 7.3.1 → 8.0.0

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+## [8.0.0](https://github.com/lensapp/lens-desktop-monorepo/compare/@k8slens/typescript@7.3.1...@k8slens/typescript@8.0.0) (2026-09-28)
+
+
+### ⚠ BREAKING CHANGES
+
+* **package-build:** a stylesheet imported from a dependency is no longer left as
+an external import for the application bundle; the importing package must
+declare the dependency and register the stylesheet through its Feature.
+
+(cherry picked from commit e3e75ae5fcd7ea07e7bc321c4975054707495de9)
+(cherry picked from commit f757b83783c931cd10fa1a73e132a223ebbd0c06)
+* **package-build:** lens-package-build no longer emits dist/index.css. A package
+that imports a stylesheet must depend on @k8slens/stylesheet-contracts and
+register the stylesheet glob in its Feature.
+
+(cherry picked from commit cb0cd7e1b1a9f8b66b18856ac0d936708f76e583)
+(cherry picked from commit f11a1cba32aa588339fedfb2c5332a16c7023090)
+
+### Features
+
+* **package-build:** Compile stylesheets into stylesheet injectables ([cc49c82](https://github.com/lensapp/lens-desktop-monorepo/commit/cc49c829f443d5461b4837cef87c2ec788f9549f))
+* **package-build:** Compile the stylesheets of dependencies into stylesheet injectables ([e58869f](https://github.com/lensapp/lens-desktop-monorepo/commit/e58869f8e51e024ef1092c2d34e72467e2b63d92))
+* **typescript:** Type the class names of css modules ([764fa1b](https://github.com/lensapp/lens-desktop-monorepo/commit/764fa1b4a6149afa5381edd97165ce458db4e25f))
+
+
+### Bug Fixes
+
+* **typescript:** Read a css module's declaration instead of checking for it first ([d3d5358](https://github.com/lensapp/lens-desktop-monorepo/commit/d3d53585230582837bc1d7c7330697b27ddc2687))
+
 ## [7.3.1](https://github.com/lensapp/lens-desktop-monorepo/compare/@k8slens/typescript@7.3.0...@k8slens/typescript@7.3.1) (2026-09-25)
 
 

package/bin/build-types

@@ -21,6 +21,7 @@ const pipeline = async (value, ...fns) => {
   return acc;
 };
 const yargs = require("yargs");
+const { generateCssModuleTypes } = require("../lib/css-module-types");
 
 const exec = util.promisify(child_process.exec);
 const exists = util.promisify(existsWithCallback);
@@ -113,10 +114,15 @@ const main = async () => {
       })
       .parseSync(process.argv);
 
+    // Before either tsc: a css module's classes are typed by a generated sibling
+    // declaration, which has to exist for the compiler to prefer it over the
+    // loose wildcard.
+    await generateCssModuleTypes([process.cwd()]);
+
     if (parsedArgs.checkTypesTests) {
       await typeCheckTestFiles();
     } else {
-        const packageJson = json5.parse(await readFile("./package.json", "utf-8"));
+      const packageJson = json5.parse(await readFile("./package.json", "utf-8"));
 
       await checkTsconfig(parsedArgs);
       await compileTypes();

package/bin/css-module-types

@@ -0,0 +1,22 @@
+#!/usr/bin/env node
+
+// lens-css-module-types [directory ...]
+//
+// Generates a typed declaration next to every css module under the given
+// directories (the current one by default). lens-types-build runs this for the
+// package it builds; the monorepo root runs it over every workspace before its
+// solution-wide type build.
+const { generateCssModuleTypes } = require("../lib/css-module-types");
+
+const directories = process.argv.slice(2);
+
+generateCssModuleTypes(directories.length > 0 ? directories : [process.cwd()])
+  .then(({ files, written }) => {
+    if (written > 0) {
+      console.log(`css module types: ${written} of ${files} declarations written`);
+    }
+  })
+  .catch((error) => {
+    console.error(error.message ?? error);
+    process.exit(1);
+  });

package/config/types/mocks.d.ts

@@ -7,37 +7,45 @@ declare module "win-ca/api";
 
 // Support import for custom module extensions
 // https://www.typescriptlang.org/docs/handbook/modules.html#wildcard-module-declarations
+// Every stylesheet module exports `stylesheet`: the stylesheet as an injectable,
+// emitted by lens-package-build. A Feature registers its own through the
+// stylesheet glob below; a stylesheet imported from a dependency is re-exported
+// from an *.injectable.ts file so that the Feature registers it too.
 declare module "*.module.scss" {
   const classes: { [key: string]: string };
   export default classes;
+  export const stylesheet: object;
 }
 declare module "*.module.css" {
   const classes: { [key: string]: string };
   export default classes;
+  export const stylesheet: object;
 }
 declare module "*.(ts|tsx)" {
   const modules: object[];
   export default modules;
   export const filenames: string[];
 }
+// The stylesheet glob of a Feature: lens-package-build compiles every matching
+// file into a module exporting a stylesheet injectable (and, for a css module,
+// its class names as the default export).
+declare module "*.(scss|css)" {
+  const modules: object[];
+  export default modules;
+  export const filenames: string[];
+}
 declare module "*.(yml|yml.hb)" {
   const modules: { default: string }[];
   export default modules;
   export const filenames: string[];
 }
 declare module "*.scss" {
-  const content: string;
-  export = content;
+  export const stylesheet: object;
 }
 declare module "*.css" {
-  const content: string;
-  export = content;
+  export const stylesheet: object;
 }
 
-// Packages expose their bundled stylesheet through a "./styles" (or "./tailwind-styles") export
-// that resolves to a plain .css file, so it carries no type declarations of its own.
-declare module "*/styles";
-declare module "*/tailwind-styles";
 
 // Declare everything what's bundled as webpack's type="asset/resource"
 // Should be mocked for tests support in jestConfig.moduleNameMapper (currently in "/package.json")

package/lib/css-module-types.js

@@ -0,0 +1,134 @@
+const fs = require("fs");
+const path = require("path");
+const { pathToFileURL } = require("url");
+const sass = require("sass");
+const postcss = require("postcss");
+const postcssModules = require("postcss-modules");
+
+const isModuleFile = /\.module\.(scss|css)$/;
+const skippedDirectories = new Set(["node_modules", "dist", "coverage", "__fixtures__", ".nx", ".git"]);
+
+/**
+ * Every css module under `directory`, skipping what is never source.
+ */
+const findModuleFiles = (directory, found = []) => {
+  for (const entry of fs.readdirSync(directory, { withFileTypes: true })) {
+    if (entry.isDirectory()) {
+      if (!skippedDirectories.has(entry.name)) {
+        findModuleFiles(path.join(directory, entry.name), found);
+      }
+    } else if (isModuleFile.test(entry.name)) {
+      found.push(path.join(directory, entry.name));
+    }
+  }
+
+  return found;
+};
+
+// `@import "~some-package/some/file"` reaches into a dependency; find the package
+// the way node would from the stylesheet's own directory. The same resolution
+// lives in @k8slens/package-build's stylesheet plugin, which cannot be shared
+// from here without a dependency cycle between the two build tools.
+const findInNodeModules = (packageName, from) => {
+  for (let directory = from; ; directory = path.dirname(directory)) {
+    const candidate = path.join(directory, "node_modules", packageName);
+
+    if (fs.existsSync(candidate)) {
+      return candidate;
+    }
+
+    if (path.dirname(directory) === directory) {
+      return undefined;
+    }
+  }
+};
+
+const tildeImporter = (from) => ({
+  findFileUrl: (url) => {
+    if (!url.startsWith("~")) {
+      return null;
+    }
+
+    const specifier = url.slice(1);
+    const segments = specifier.split("/");
+    const packageNameLength = specifier.startsWith("@") ? 2 : 1;
+    const packageRoot = findInNodeModules(segments.slice(0, packageNameLength).join("/"), from);
+
+    return packageRoot ? pathToFileURL(path.join(packageRoot, ...segments.slice(packageNameLength))) : null;
+  },
+});
+
+/**
+ * The class names a css module exports, in source order.
+ */
+const classNamesOf = async (file) => {
+  const { css } = sass.compile(file, { logger: sass.Logger.silent, importers: [tildeImporter(path.dirname(file))] });
+
+  let classNames = {};
+
+  await postcss([
+    postcssModules({
+      generateScopedName: "[local]",
+      getJSON: (_cssFileName, json) => {
+        classNames = json;
+      },
+    }),
+  ]).process(css, { from: file, map: false });
+
+  return Object.keys(classNames);
+};
+
+const declarationFor = (file, classNames) =>
+  [
+    `// Generated by lens-types-build from ${path.basename(file)}. Do not edit: it is regenerated on every`,
+    "// type build and ignored by git. Each class the stylesheet defines is a property here.",
+    "declare const classes: {",
+    ...classNames.map((name) => `  readonly ${JSON.stringify(name)}: string;`),
+    "};",
+    "export default classes;",
+    "export const stylesheet: object;",
+    "",
+  ].join("\n");
+
+// Read rather than checked first, so that the file cannot come or go between the two.
+const readIfExists = (file) => {
+  try {
+    return fs.readFileSync(file, "utf8");
+  } catch (error) {
+    if (error.code === "ENOENT") {
+      return undefined;
+    }
+
+    throw error;
+  }
+};
+
+/**
+ * Writes a `<name>.module.scss.d.ts` (or `.module.css.d.ts`) next to every css
+ * module under the given directories, naming exactly the classes it defines,
+ * so that a typo in `styles.someClass` is a type error rather than an
+ * unstyled element. TypeScript prefers the sibling declaration over the
+ * loose `*.module.scss` wildcard, which stays as the fallback for a module
+ * whose declaration has not been generated yet. Unchanged files are left
+ * alone, so incremental type builds stay incremental.
+ */
+const generateCssModuleTypes = async (directories) => {
+  const files = directories.flatMap((directory) => findModuleFiles(path.resolve(directory)));
+  let written = 0;
+
+  for (const file of files) {
+    const declarationPath = `${file}.d.ts`;
+    const declaration = declarationFor(file, await classNamesOf(file));
+
+    if (readIfExists(declarationPath) === declaration) {
+      continue;
+    }
+
+    fs.writeFileSync(declarationPath, declaration);
+    written++;
+  }
+
+  return { files: files.length, written };
+};
+
+module.exports = { generateCssModuleTypes, findModuleFiles, classNamesOf, declarationFor };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k8slens/typescript",
-  "version": "7.3.1",
+  "version": "8.0.0",
   "lens": {
     "env": "agnostic",
     "layer": "infrastructure",
@@ -19,10 +19,12 @@
   "type": "commonjs",
   "bin": {
     "lens-types-build": "bin/build-types",
-    "lens-types-check": "bin/types-check"
+    "lens-types-check": "bin/types-check",
+    "lens-css-module-types": "bin/css-module-types"
   },
   "files": [
     "bin",
+    "lib",
     "config",
     "CHANGELOG.md"
   ],
@@ -32,6 +34,9 @@
   "dependencies": {
     "json5": "^2.2.3",
     "lodash": "^4.17.21",
+    "postcss": "^8.5.18",
+    "postcss-modules": "^6.0.1",
+    "sass": "^1.89.0",
     "typescript-native": "npm:typescript@~7.0.2",
     "yargs": "^17.7.2"
   },

package/config/types/styles.d.ts

@@ -1,13 +0,0 @@
-// Support import for custom module extensions
-// https://www.typescriptlang.org/docs/handbook/modules.html#wildcard-module-declarations
-
-declare module "*.module.scss" {
-  const classes: { [key: string]: string };
-  export default classes;
-}
-
-declare module "*.scss" {
-  const content: string;
-  export = content;
-}
-