feat: better knighted css loading.

Author: knightedcodemonkey

README.md

@@ -36,6 +36,27 @@ browser acts as the runtime host for editing, render, lint, and typecheck flows.
 - use AI chat with tab-aware proposals and apply/undo controls
 - switch theme and collapse the preview panel while preserving fast feedback loops
 
+## CSS Query Imports In Editor Tabs
+
+`@knighted/develop` supports `@knighted/css` query syntax in workspace tabs, including:
+
+- `./styles/button.module.css?knighted-css`
+- `./button.tsx?knighted-css&combined`
+
+For Lit + React-in-Shadow-DOM flows, a minimal pattern is:
+
+1. In `button.tsx`, export your React component and import CSS Modules normally.
+2. In `lit-host.ts`, import from `./button.tsx?knighted-css&combined` and use `knightedCss`.
+3. Apply `unsafeCSS(knightedCss)` in `static styles` so styles render inside the shadow root.
+
+Example imports:
+
+- `import { ReactButton, knightedCss } from './button.tsx?knighted-css&combined'`
+- `import { LitElement, css, html, unsafeCSS } from 'lit'`
+
+`knightedCssModules` is optional for this flow and is not required when you only need
+the compiled CSS text plus your component exports.
+
 ## Why this shape
 
 The app started as a focused compile-and-preview loop and has grown into a

playwright/rendering-modes/core.spec.ts

@@ -369,6 +369,128 @@ test('css module imports expose class map for module tabs', async ({ page }) =>
     .not.toContain('.item:active')
 })
 
+test('workspace modules support ?knighted-css&combined imports', async ({ page }) => {
+  await waitForInitialRender(page)
+
+  await ensurePanelToolsVisible(page, 'component')
+  await ensurePanelToolsVisible(page, 'styles')
+
+  await page.getByRole('button', { name: 'Open tab App.tsx' }).click()
+  await page.getByRole('combobox', { name: 'Render mode' }).selectOption('react')
+
+  await renameWorkspaceTab(page, {
+    from: 'app.css',
+    to: 'button.module.css',
+  })
+
+  await page.getByRole('button', { name: 'Open tab button.module.css' }).click()
+  await page.getByRole('combobox', { name: 'Style mode' }).selectOption('module')
+
+  await setWorkspaceTabSource(page, {
+    fileName: 'button.module.css',
+    kind: 'styles',
+    source: ['.btn {', '  color: rgb(7, 89, 160);', '  font-weight: 700;', '}'].join(
+      '\n',
+    ),
+  })
+
+  await addWorkspaceTab(page, { type: 'script' })
+  await renameWorkspaceTab(page, {
+    from: 'module.tsx',
+    to: 'button.tsx',
+  })
+
+  await setWorkspaceTabSource(page, {
+    fileName: 'button.tsx',
+    source: [
+      "import styles from '../styles/button.module.css'",
+      '',
+      'type ButtonProps = {',
+      '  label: string',
+      '}',
+      '',
+      'export const ReactButton = ({ label }: ButtonProps) => (',
+      '  <button type="button" className={styles.btn}>{label}</button>',
+      ')',
+    ].join('\n'),
+  })
+
+  await setComponentEditorSource(
+    page,
+    [
+      "import { ReactButton, knightedCss } from './button.tsx?knighted-css&combined'",
+      '',
+      'const App = () => (',
+      '  <>',
+      '    <style>{knightedCss}</style>',
+      '    <ReactButton label="Combined query works" />',
+      '  </>',
+      ')',
+    ].join('\n'),
+  )
+
+  await expect(page.getByRole('status', { name: 'App status' })).toHaveText('Rendered')
+  await expect(page.locator('#preview-host pre.preview-runtime-error')).toHaveCount(0)
+  await expect(
+    getPreviewFrame(page).getByRole('button', { name: 'Combined query works' }),
+  ).toHaveCSS('color', 'rgb(7, 89, 160)')
+})
+
+test('workspace style tabs support ?knighted-css query exports', async ({ page }) => {
+  await waitForInitialRender(page)
+
+  await ensurePanelToolsVisible(page, 'component')
+  await ensurePanelToolsVisible(page, 'styles')
+
+  await page.getByRole('button', { name: 'Open tab app.css' }).click()
+  await renameWorkspaceTab(page, {
+    from: 'app.css',
+    to: 'button.module.css',
+  })
+  await page.getByRole('combobox', { name: 'Style mode' }).selectOption('module')
+
+  await setWorkspaceTabSource(page, {
+    fileName: 'button.module.css',
+    kind: 'styles',
+    source: [
+      '.btn {',
+      '  color: rgb(14, 110, 173);',
+      '  border: 1px solid rgb(14, 110, 173);',
+      '}',
+    ].join('\n'),
+  })
+
+  await page.getByRole('button', { name: 'Open tab App.tsx' }).click()
+  await setComponentEditorSource(
+    page,
+    [
+      "import styles, { knightedCss } from '../styles/button.module.css?knighted-css'",
+      '',
+      'const App = () => (',
+      '  <>',
+      '    <style>{knightedCss}</style>',
+      '    <button',
+      '      type="button"',
+      '      className={styles.btn}',
+      '      data-css-length={String(knightedCss.length)}',
+      '    >',
+      '      Style query works',
+      '    </button>',
+      '  </>',
+      ')',
+    ].join('\n'),
+  )
+
+  await expect(page.getByRole('status', { name: 'App status' })).toHaveText('Rendered')
+  await expect(page.locator('#preview-host pre.preview-runtime-error')).toHaveCount(0)
+
+  const previewButton = getPreviewFrame(page).getByRole('button', {
+    name: 'Style query works',
+  })
+  await expect(previewButton).toHaveCSS('color', 'rgb(14, 110, 173)')
+  await expect(previewButton).toHaveAttribute('data-css-length', /[1-9]\d*/)
+})
+
 test('preview styles require explicit import from entry graph', async ({ page }) => {
   await waitForInitialRender(page)