@inkdropapp/theme-dev-helpers 0.3.9 → 0.3.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkdropapp/theme-dev-helpers",
-  "version": "0.3.9",
+  "version": "0.3.10",
   "description": "A helper module for creating themes for Inkdrop",
   "keywords": [
     "inkdrop",

package/pnpm-workspace.yaml

@@ -1,6 +1,6 @@
 allowBuilds:
-  esbuild: set this to true or false
-  puppeteer: set this to true or false
+  esbuild: true
+  puppeteer: true
 minimumReleaseAgeExclude:
   - '@inkdropapp/base-ui-theme'
   - '@inkdropapp/css'

package/src/dev-server/variables.tsx

@@ -1,4 +1,4 @@
-import themeVariableNames from '@inkdropapp/base-ui-theme/lib/variable-names.json'
+import themeVariableNames from '@inkdropapp/css/ui.json'
 import { getCSSVariables } from './get-css-variables'
 
 export const VariablesPage = () => {

package/src/generate-palette.ts

@@ -22,6 +22,15 @@ const options = program.opts()
 const outputPath = options.output as string
 const appearance = options.appearance as 'light' | 'dark' | undefined
 
+const baseStyleSheetSpecifiers = [
+  '@inkdropapp/css/reset.css',
+  '@inkdropapp/css/tokens.css',
+  '@inkdropapp/css/ui.css',
+  '@inkdropapp/css/tags.css',
+  '@inkdropapp/css/status.css',
+  '@inkdropapp/base-ui-theme/styles/theme.css'
+]
+
 // Function to extract theme CSS variables
 async function extractPalette(outputPath: string) {
   const themePackageJson = await import(path.join(process.cwd(), 'package.json'))
@@ -39,7 +48,8 @@ async function extractPalette(outputPath: string) {
     .on('pageerror', (error) => console.error(error instanceof Error ? error.message : error))
 
   const baseUrl = pathToFileURL(process.cwd()).toString() + '/'
-  const content = buildPreviewHTML(themePackageJson, baseUrl, appearance)
+  const baseStyleSheetURLs = baseStyleSheetSpecifiers.map((spec) => import.meta.resolve(spec))
+  const content = buildPreviewHTML(themePackageJson, baseUrl, baseStyleSheetURLs, appearance)
 
   await page.goto(baseUrl)
   await page.setContent(content)

package/src/palette.test.ts

@@ -3,46 +3,50 @@ import { buildPreviewHTML, mapThemeVariables } from './palette'
 
 describe('buildPreviewHTML', () => {
   const baseUrl = 'file:///themes/acme/'
+  const baseStyleSheetURLs = [
+    'file:///pkgs/@inkdropapp/css/reset.css',
+    'file:///pkgs/@inkdropapp/base-ui-theme/styles/theme.css'
+  ]
 
-  test('emits the base href so relative links resolve', () => {
-    const html = buildPreviewHTML({ name: 'acme' }, baseUrl)
+  test('emits the base href so relative theme links resolve', () => {
+    const html = buildPreviewHTML({ name: 'acme' }, baseUrl, [])
     expect(html).toContain(`<base href="${baseUrl}" />`)
   })
 
-  test('always includes the Inkdrop base stylesheets', () => {
-    const html = buildPreviewHTML({ name: 'acme' }, baseUrl)
-    expect(html).toContain('node_modules/@inkdropapp/css/reset.css')
-    expect(html).toContain('node_modules/@inkdropapp/css/tokens.css')
-    expect(html).toContain('node_modules/@inkdropapp/css/tags.css')
-    expect(html).toContain('node_modules/@inkdropapp/base-ui-theme/styles/theme.css')
+  test('links each resolved Inkdrop base stylesheet as an absolute URL', () => {
+    const html = buildPreviewHTML({ name: 'acme' }, baseUrl, baseStyleSheetURLs)
+    for (const href of baseStyleSheetURLs) {
+      expect(html).toContain(`<link rel="stylesheet" href="${href}" />`)
+    }
   })
 
   test('links each declared theme stylesheet under styles/', () => {
     const html = buildPreviewHTML(
       { name: 'acme', styleSheets: ['base.css', 'syntax.css'] },
-      baseUrl
+      baseUrl,
+      []
     )
     expect(html).toContain('<link rel="stylesheet" href="styles/base.css" />')
     expect(html).toContain('<link rel="stylesheet" href="styles/syntax.css" />')
   })
 
   test('omits theme stylesheet links when none are declared', () => {
-    const html = buildPreviewHTML({ name: 'acme' }, baseUrl)
+    const html = buildPreviewHTML({ name: 'acme' }, baseUrl, [])
     expect(html).not.toContain('href="styles/')
   })
 
   test('sets the body class to the theme name', () => {
-    const html = buildPreviewHTML({ name: 'acme-dark' }, baseUrl)
+    const html = buildPreviewHTML({ name: 'acme-dark' }, baseUrl, [])
     expect(html).toContain('<body class="acme-dark">')
   })
 
   test('appends an appearance-mode class when an appearance is forced', () => {
-    const html = buildPreviewHTML({ name: 'acme' }, baseUrl, 'dark')
+    const html = buildPreviewHTML({ name: 'acme' }, baseUrl, [], 'dark')
     expect(html).toContain('<body class="acme dark-mode">')
   })
 
   test('adds no appearance class when appearance is omitted', () => {
-    const html = buildPreviewHTML({ name: 'acme' }, baseUrl)
+    const html = buildPreviewHTML({ name: 'acme' }, baseUrl, [])
     expect(html).not.toContain('-mode')
   })
 })

package/src/palette.ts

@@ -17,12 +17,17 @@ export type ThemeAppearance = 'light' | 'dark'
  * compute a theme's CSS custom properties.
  *
  * It pulls in Inkdrop's base CSS plus the theme's own stylesheets so that the
- * computed style of `<body>` resolves every themed variable. A `<base href>` is
- * emitted so the relative `node_modules/` and `styles/` links resolve against
+ * computed style of `<body>` resolves every themed variable. Inkdrop's base
+ * stylesheets are passed in as already-resolved absolute URLs (they live in
+ * this package's own dependencies, not the theme's), while the theme's own
+ * `styles/` links stay relative and resolve against the `<base href>` — i.e.
  * the theme project root.
  *
  * @param theme - The theme package's metadata (`name`, `styleSheets`).
- * @param baseUrl - File URL used as the document `<base href>`.
+ * @param baseUrl - File URL used as the document `<base href>`; the theme's own
+ *   `styles/` links resolve against it.
+ * @param baseStyleSheetURLs - Absolute URLs of Inkdrop's base stylesheets,
+ *   resolved from this package's dependency graph by the caller.
  * @param appearance - Optional forced appearance; adds a `<appearance>-mode`
  *   body class when provided.
  * @returns The full HTML document as a string.
@@ -30,8 +35,13 @@ export type ThemeAppearance = 'light' | 'dark'
 export function buildPreviewHTML(
   theme: ThemePackage,
   baseUrl: string,
+  baseStyleSheetURLs: string[],
   appearance?: ThemeAppearance
 ): string {
+  const baseCSSLinks = baseStyleSheetURLs
+    .map((href) => `<link rel="stylesheet" href="${href}" />`)
+    .join('\n')
+
   const themeCSSLinks = (theme.styleSheets ?? [])
     .map((filePath) => `<link rel="stylesheet" href="styles/${filePath}" />`)
     .join('\n')
@@ -42,10 +52,7 @@ export function buildPreviewHTML(
   <html>
     <head>
       <base href="${baseUrl}" />
-      <link rel="stylesheet" href="node_modules/@inkdropapp/css/reset.css" />
-      <link rel="stylesheet" href="node_modules/@inkdropapp/css/tokens.css" />
-      <link rel="stylesheet" href="node_modules/@inkdropapp/css/tags.css" />
-      <link rel="stylesheet" href="node_modules/@inkdropapp/base-ui-theme/styles/theme.css" />
+      ${baseCSSLinks}
       ${themeCSSLinks}
     </head>
     <body class="${bodyClass}">