refactor: address pr comments.

Author: knightedcodemonkey

playwright/diagnostics.spec.ts

@@ -219,6 +219,29 @@ test('typecheck resolves parent-relative .js import to workspace tsx module tab'
   expect(diagnosticsText).not.toContain("Cannot find module '../components/module.js'")
 })
 
+test('typecheck does not report TS2307 for stylesheet side-effect imports', async ({
+  page,
+}) => {
+  await waitForInitialRender(page)
+
+  await ensurePanelToolsVisible(page, 'component')
+  await setComponentEditorSource(
+    page,
+    ["import '../styles/app.css'", '', 'const App = () => <p>style import</p>', ''].join(
+      '\n',
+    ),
+  )
+
+  await runTypecheck(page)
+  await ensureDiagnosticsDrawerOpen(page)
+  await expect(page.locator('#diagnostics-component')).toContainText(
+    'No TypeScript errors found.',
+  )
+
+  const diagnosticsText = await page.locator('#diagnostics-component').innerText()
+  expect(diagnosticsText).not.toContain("Cannot find module '../styles/app.css'")
+})
+
 test('component diagnostics rows navigate editor to reported line', async ({ page }) => {
   await waitForInitialRender(page)
 

playwright/workspace-tabs.spec.ts

@@ -4,6 +4,7 @@ import {
   ensurePanelToolsVisible,
   reorderWorkspaceTabBefore,
   setWorkspaceTabSource,
+  waitForAppReady,
   waitForInitialRender,
 } from './helpers/app-test-helpers.js'
 
@@ -192,6 +193,21 @@ test('startup restores last active workspace tab after reload', async ({ page })
   await expect(page.locator('#editor-panel-styles')).toHaveAttribute('hidden', '')
 })
 
+test('removed default styles tab stays removed after reload', async ({ page }) => {
+  await waitForInitialRender(page)
+
+  await expect(page.getByRole('button', { name: 'Open tab app.css' })).toHaveCount(1)
+  await page.getByRole('button', { name: 'Remove tab app.css' }).click()
+  await confirmRemoveDialog(page)
+
+  await expect(page.getByRole('button', { name: 'Open tab app.css' })).toHaveCount(0)
+
+  await page.reload()
+  await waitForAppReady(page)
+
+  await expect(page.getByRole('button', { name: 'Open tab app.css' })).toHaveCount(0)
+})
+
 test('workspace tab drag reorder persists across reload', async ({ page }) => {
   await waitForInitialRender(page)
 

src/app.js

@@ -841,6 +841,14 @@ const getWorkspaceTabByKind = kind => {
 const getActiveWorkspaceTab = () =>
   workspaceTabsState.getTab(workspaceTabsState.getActiveTabId())
 
+const getLoadedComponentWorkspaceTab = () =>
+  workspaceTabsState.getTab(loadedComponentTabId) ?? getWorkspaceTabByKind('component')
+
+const getTypecheckSourcePath = () => {
+  const loadedComponentTab = getLoadedComponentWorkspaceTab()
+  return toNonEmptyWorkspaceText(loadedComponentTab?.path) || defaultComponentTabPath
+}
+
 const toStyleModeForTabLanguage = language => {
   const normalized = toNonEmptyWorkspaceText(language)
   if (normalized === 'less') {
@@ -1054,7 +1062,6 @@ const makeUniqueTabPath = ({ basePath, suffix = '' }) => {
 const ensureWorkspaceTabsShape = tabs => {
   const inputTabs = Array.isArray(tabs) ? tabs : []
   const hasComponent = inputTabs.some(tab => tab?.id === 'component')
-  const hasStyles = inputTabs.some(tab => tab?.id === 'styles')
   const nextTabs = [...inputTabs]
 
   if (!hasComponent) {
@@ -1069,18 +1076,6 @@ const ensureWorkspaceTabsShape = tabs => {
     })
   }
 
-  if (!hasStyles) {
-    nextTabs.push({
-      id: 'styles',
-      name: defaultStylesTabName,
-      path: defaultStylesTabPath,
-      language: 'css',
-      role: 'module',
-      content: defaultCss,
-      isActive: false,
-    })
-  }
-
   return nextTabs.map(tab => {
     if (tab?.id === 'component') {
       const normalizedEntryPath = normalizeEntryTabPath(tab.path, {
@@ -1311,6 +1306,8 @@ const applyWorkspaceRecord = async (workspace, { silent = false } = {}) => {
 
     if (typeof stylesTab?.path === 'string' && githubPrStylesPath) {
       githubPrStylesPath.value = stylesTab.path
+    } else if (githubPrStylesPath instanceof HTMLInputElement) {
+      githubPrStylesPath.value = ''
     }
 
     const activeTab = getActiveWorkspaceTab()
@@ -1941,14 +1938,20 @@ const syncTabPathsFromInputs = () => {
     role: 'entry',
     isActive: workspaceTabsState.getActiveTabId() === 'component',
   })
-  workspaceTabsState.upsertTab({
-    id: 'styles',
-    path: stylesPath,
-    name: getPathFileName(stylesPath) || defaultStylesTabName,
-    language: 'css',
-    role: 'module',
-    isActive: workspaceTabsState.getActiveTabId() === 'styles',
-  })
+
+  const defaultStylesTab = workspaceTabsState.getTab('styles')
+  if (defaultStylesTab) {
+    workspaceTabsState.upsertTab({
+      id: 'styles',
+      path: stylesPath,
+      name: getPathFileName(stylesPath) || defaultStylesTabName,
+      language: isStyleTabLanguage(defaultStylesTab.language)
+        ? defaultStylesTab.language
+        : 'css',
+      role: 'module',
+      isActive: workspaceTabsState.getActiveTabId() === 'styles',
+    })
+  }
 
   syncHeaderLabels()
   renderWorkspaceTabs()
@@ -2386,6 +2389,7 @@ const typeDiagnostics = createTypeDiagnosticsController({
   getTypeScriptLibUrls,
   getTypePackageFileUrls,
   getJsxSource: () => getJsxSource(),
+  getTypecheckSourcePath,
   getWorkspaceTabs: () => buildWorkspaceTabsSnapshot(),
   getRenderMode: () => renderMode.value,
   setTypecheckButtonLoading,
@@ -2900,6 +2904,7 @@ if (typecheckButton) {
     typeDiagnostics.triggerTypeDiagnostics({
       userInitiated: true,
       source: getJsxSource(),
+      sourcePath: getTypecheckSourcePath(),
     })
   })
 }

src/modules/render-runtime.js

@@ -56,6 +56,21 @@ export const createRenderRuntimeController = ({
   const workspaceGraphCache = createPreviewWorkspaceGraphCache()
   const styleTabLanguages = new Set(['css', 'less', 'sass', 'module'])
   const stylePathPattern = /\.(?:css|less|sass|scss)$/i
+  const fallbackEntryTab = {
+    id: 'component',
+    name: 'App.tsx',
+    path: 'src/components/App.tsx',
+    language: 'javascript-jsx',
+    role: 'entry',
+  }
+  const fallbackStylesTab = {
+    id: 'styles',
+    name: 'app.css',
+    path: 'src/styles/app.css',
+    language: 'css',
+    role: 'module',
+    content: '',
+  }
 
   const isStyleTab = tab => {
     if (!tab || typeof tab !== 'object') {
@@ -477,13 +492,10 @@ export const createRenderRuntimeController = ({
 
     return [
       {
-        id: 'component',
-        name: 'App.tsx',
-        path: 'src/components/App.tsx',
-        language: 'javascript-jsx',
-        role: 'entry',
+        ...fallbackEntryTab,
         content: getJsxSource(),
       },
+      { ...fallbackStylesTab },
     ]
   }
 

src/modules/type-diagnostics.js

@@ -49,6 +49,23 @@ const domJsxTypes =
   '  interface IntrinsicElements { [elemName: string]: Record<string, unknown> }\n' +
   '}\n'
 
+const styleImportTypes =
+  "declare module '*.css' {\n" +
+  '  const cssText: string\n' +
+  '  export default cssText\n' +
+  '}\n' +
+  "declare module '*.less' {\n" +
+  '  const lessText: string\n' +
+  '  export default lessText\n' +
+  '}\n' +
+  "declare module '*.sass' {\n" +
+  '  const sassText: string\n' +
+  '  export default sassText\n' +
+  '}\n' +
+  "declare module '*.scss' {\n" +
+  '  const scssText: string\n' +
+  '  export default scssText\n' +
+  '}\n'
 const normalizeVirtualFileName = fileName =>
   typeof fileName === 'string' && fileName.startsWith('/') ? fileName.slice(1) : fileName
 
@@ -234,6 +251,7 @@ export const createTypeDiagnosticsController = ({
   getTypeScriptLibUrls,
   getTypePackageFileUrls,
   getJsxSource,
+  getTypecheckSourcePath = () => '',
   getWorkspaceTabs = () => [],
   getRenderMode = () => 'dom',
   defaultTypeScriptLibFileName = 'lib.esnext.full.d.ts',
@@ -800,12 +818,21 @@ export const createTypeDiagnosticsController = ({
     )
   }
 
-  const collectTypeDiagnostics = async (compiler, sourceText) => {
+  const collectTypeDiagnostics = async (
+    compiler,
+    { sourceText, sourcePathOverride = '' },
+  ) => {
     const workspaceComponentTabs = toWorkspaceComponentTabs()
     const resolvedEntryTab = resolveWorkspaceEntryForTypecheck(workspaceComponentTabs)
-    const sourceFileName = resolvedEntryTab?.path || 'component.tsx'
+    const normalizedSourcePathOverride =
+      typeof sourcePathOverride === 'string'
+        ? normalizeRelativePath(sourcePathOverride)
+        : ''
+    const sourceFileName =
+      normalizedSourcePathOverride || resolvedEntryTab?.path || 'component.tsx'
     const typecheckSourceFileName = sourceFileName.replace(/\.(jsx?|mjs|cjs)$/i, '.tsx')
     const jsxTypesFileName = 'knighted-jsx-runtime.d.ts'
+    const styleImportTypesFileName = 'knighted-style-imports.d.ts'
     const renderMode = getRenderMode()
     const isReactMode = renderMode === 'react'
     const libFiles = await ensureTypeScriptLibFiles()
@@ -824,6 +851,7 @@ export const createTypeDiagnosticsController = ({
     }
 
     files.set(typecheckSourceFileName, sourceText)
+    files.set(styleImportTypesFileName, styleImportTypes)
 
     if (!isReactMode) {
       files.set(jsxTypesFileName, domJsxTypes)
@@ -978,7 +1006,7 @@ export const createTypeDiagnosticsController = ({
       resolveModuleNames,
     }
 
-    const rootNames = [typecheckSourceFileName]
+    const rootNames = [typecheckSourceFileName, styleImportTypesFileName]
     if (!isReactMode) {
       rootNames.push(jsxTypesFileName)
     }
@@ -1005,7 +1033,11 @@ export const createTypeDiagnosticsController = ({
 
   const runTypeDiagnostics = async (
     runId,
-    { userInitiated = false, sourceOverride = undefined } = {},
+    {
+      userInitiated = false,
+      sourceOverride = undefined,
+      sourcePathOverride = undefined,
+    } = {},
   ) => {
     incrementTypeDiagnosticsRuns()
     setTypeDiagnosticsPending(false)
@@ -1025,7 +1057,14 @@ export const createTypeDiagnosticsController = ({
 
       const sourceForRun =
         typeof sourceOverride === 'string' ? sourceOverride : getJsxSource()
-      const diagnostics = await collectTypeDiagnostics(compiler, sourceForRun)
+      const sourcePathForRun =
+        typeof sourcePathOverride === 'string' && sourcePathOverride.length > 0
+          ? sourcePathOverride
+          : getTypecheckSourcePath()
+      const diagnostics = await collectTypeDiagnostics(compiler, {
+        sourceText: sourceForRun,
+        sourcePathOverride: sourcePathForRun,
+      })
       const errorCategory = compiler.DiagnosticCategory?.Error
       const errors = diagnostics.filter(
         diagnostic => diagnostic.category === errorCategory,
@@ -1087,11 +1126,16 @@ export const createTypeDiagnosticsController = ({
     }
   }
 
-  const triggerTypeDiagnostics = ({ userInitiated = false, source = undefined } = {}) => {
+  const triggerTypeDiagnostics = ({
+    userInitiated = false,
+    source = undefined,
+    sourcePath = undefined,
+  } = {}) => {
     typeCheckRunId += 1
     void runTypeDiagnostics(typeCheckRunId, {
       userInitiated,
       sourceOverride: source,
+      sourcePathOverride: sourcePath,
     })
   }