Merge pull request #214 from UW-Macrostrat/hyperstyles

Fix vike hyperstyles plugin

Author: davenquinn

scripts/publish-helpers/update-package-json-files.ts

@@ -12,6 +12,7 @@ const manualPackagesToFix = [
   "@macrostrat/style-system",
   "@macrostrat/web-components-bundler",
   "@macrostrat/hyperstyle-loader",
+  "@macrostrat/vite-plugin-hyperstyles",
 ];
 
 const packageJSONKeyOrder = [

toolchain/vite-plugin-hyperstyles/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [2.0.0] - 2026-02-01
+
+- Add `magic-string` to attempt to create source maps for transformed files.
+- Improve `@macrostrat/vite-plugin-hyperstyles/client` type file to not create
+  typescript errors.
+
 ## [1.1.1] - 2026-01-29
 
 - Change layout of `package.json`

toolchain/vite-plugin-hyperstyles/README.md

@@ -1,3 +1,76 @@
 # Vite-Plugin-Hyperstyles
 
-A Vite plugin that allows you to use styled hyperscript easily.
+A Vite plugin that allows you to easily style your hyperscript using
+module-scoped CSS.
+
+## Usage
+
+```css
+/* styles.modules.css */
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.title {
+  color: blue;
+  font-size: 20px;
+}
+
+.description {
+  color: gray;
+  font-size: 16px;
+}
+```
+
+```typescript
+import h from "./styles.modules.css";
+
+// Class name scopes are applied automatically
+const element = h("div.container", [
+  h("h1.title", "Hello, World!"),
+  h(
+    "p.description",
+    { className: h.description },
+    "This is a styled hyperscript example.",
+  ),
+]);
+```
+
+This replaces the slightly more verbose syntax that can be used without the
+plugin:
+
+```typescript
+import hyper from "@macrostrat/hyper";
+import styles from "./styles.modules.css";
+
+const h = hyper.styled(styles);
+...
+```
+
+## Configuration
+
+In your `vite.config.ts`, add the plugin:
+
+```typescript
+import { defineConfig } from "vite";
+import hyperStyles from "@macrostrat/vite-plugin-hyperstyles";
+
+export default defineConfig({
+  plugins: [hyperStyles()],
+});
+```
+
+If you're using Typescript, you'll want to add a type declaration for the
+enhanced hyperscript function to your TSConfig
+
+```json
+{
+  "compilerOptions": {
+    // ...
+    "types": ["@macrostrat/vite-plugin-hyperstyles/client", "vite/client"]
+    // Note: order matters; ensure vite/client comes after this plugin
+  }
+}
+```

toolchain/vite-plugin-hyperstyles/client.d.ts

@@ -0,0 +1,45 @@
+/** Replacement for vite/client declaration that handles hyperscript-enhanced stylesheets
+ * from the vite-plugin-hyperstyles module
+ */
+type CSSModuleClasses = { readonly [key: string]: string };
+
+declare module "*.module.css" {
+  import type { Hyper } from "@macrostrat/hyper";
+  const h: Hyper & CSSModuleClasses;
+  export default h;
+}
+declare module "*.module.scss" {
+  import type { Hyper } from "@macrostrat/hyper";
+  const h: Hyper & CSSModuleClasses;
+  export default h;
+}
+declare module "*.module.sass" {
+  import type { Hyper } from "@macrostrat/hyper";
+  const h: Hyper & CSSModuleClasses;
+  export default h;
+}
+declare module "*.module.less" {
+  import type { Hyper } from "@macrostrat/hyper";
+  const h: Hyper & CSSModuleClasses;
+  export default h;
+}
+declare module "*.module.styl" {
+  import type { Hyper } from "@macrostrat/hyper";
+  const h: Hyper & CSSModuleClasses;
+  export default h;
+}
+declare module "*.module.stylus" {
+  import type { Hyper } from "@macrostrat/hyper";
+  const h: Hyper & CSSModuleClasses;
+  export default h;
+}
+declare module "*.module.pcss" {
+  import type { Hyper } from "@macrostrat/hyper";
+  const h: Hyper & CSSModuleClasses;
+  export default h;
+}
+declare module "*.module.sss" {
+  import type { Hyper } from "@macrostrat/hyper";
+  const h: Hyper & CSSModuleClasses;
+  export default h;
+}

toolchain/vite-plugin-hyperstyles/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/vite-plugin-hyperstyles",
-  "version": "1.1.1",
+  "version": "2.0.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/UW-Macrostrat/web-components.git",
@@ -14,7 +14,9 @@
   "types": "dist/index.d.ts",
   "files": [
     "src",
-    "dist"
+    "dist",
+    "README.md",
+    "client.d.ts"
   ],
   "sideEffects": false,
   "exports": {
@@ -29,13 +31,16 @@
         "default": "./dist/index.cjs"
       }
     },
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./client": "./client.d.ts",
+    "./client.d.ts": "./client.d.ts"
   },
   "scripts": {
     "build": "bundle-library ."
   },
   "dependencies": {
     "@macrostrat/hyper": "^3.0.6",
+    "magic-string": "^0.30.21",
     "vite": "^5||^6.1.6||^7"
   },
   "devDependencies": {

toolchain/vite-plugin-hyperstyles/src/index.ts

@@ -1,23 +1,37 @@
-import { Plugin } from "vite";
+import type { Plugin } from "vite";
+import MagicString from "magic-string";
 
-const cssModuleMatcher = /\.module\.(css|scss|sass|styl)$/;
+const cssModuleMatcher = /\.module\.(css|scss|sass|less|styl|stylus|pcss|sss)$/;
 
 export default function hyperStyles(): Plugin {
   return {
     name: "hyper-styles",
     enforce: "post",
     // Post-process the output to add the hyperStyled import
     transform(code, id) {
-      const code1 = code.replace("export default", "const styles =");
-      if (cssModuleMatcher.test(id)) {
-        //const code2 = code1 + "\nexport default styles\n";
-        return `import hyper from "@macrostrat/hyper";
-        ${code1}
+      if (!cssModuleMatcher.test(id)) {
+        return;
+      }
+
+      const code0 = new MagicString(code);
+      // Just add sourcemaps
+      ///dd https://github.com/Rich-Harris/magic-string/issues/13
+      code0.replace("export default ", "const styles = ");
+      code0.prepend(`import hyper from "@macrostrat/hyper";\n`);
+      code0.append(`
         let h = hyper.styled(styles);
         // Keep backwards compatibility with the existing default style object.
         Object.assign(h, styles);
-        export default h;`;
-      }
+        export default h;`);
+
+      // Generate source map
+      const map = code0.generateMap();
+      const codeString = code0.toString();
+
+      return {
+        code: codeString,
+        map,
+      };
     },
   };
 }

toolchain/vite-plugin-hyperstyles/styles.d.ts

@@ -1629,6 +1629,7 @@ __metadata:
     "@macrostrat/hyper": "npm:^3.0.6"
     "@macrostrat/web-components-bundler": "workspace:*"
     "@types/node": "npm:^22.14.1"
+    magic-string: "npm:^0.30.21"
     vite: "npm:^5||^6.1.6||^7"
   languageName: unknown
   linkType: soft