Conversation
…s' with 'CSSProperties' from Preact namespace
📝 WalkthroughWalkthroughThis PR updates the Preact Query devtools package to replace deprecated ChangesType Import Refactor
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Review rate limit: 4/5 reviews remaining, refill in 12 minutes. Comment |
|
View your CI Pipeline Execution ↗ for commit f07a0cf
☁️ Nx Cloud last updated this comment at |
🚀 Changeset Version Preview1 package(s) bumped directly, 23 bumped as dependents. 🟩 Patch bumps
|
size-limit report 📦
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/preact-query-devtools/src/PreactQueryDevtoolsPanel.tsx`:
- Line 6: The import is pulling CSSProperties from 'preact' which is invalid;
update the import in PreachQueryDevtoolsPanel.tsx to import JSX instead of
CSSProperties (e.g., use import type { JSX, VNode } from 'preact') and then
change the usage at the style type (previously referenced as CSSProperties at
line 31) to JSX.CSSProperties; alternatively, if you intend to use the React
compatibility layer, import CSSProperties from 'preact/compat' and keep the
existing usage.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 7898191f-8050-4d33-b60f-8b149922cc53
📒 Files selected for processing (2)
.changeset/cyan-words-hunt.mdpackages/preact-query-devtools/src/PreactQueryDevtoolsPanel.tsx
| import type { DevtoolsErrorType, Theme } from '@tanstack/query-devtools' | ||
| import type { QueryClient } from '@tanstack/preact-query' | ||
| import type { JSX, VNode } from 'preact' | ||
| import type { CSSProperties, VNode } from 'preact' |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Description: Check Preact's type definitions for CSSProperties export
# Check if CSSProperties is exported from main preact module
rg -n "export.*CSSProperties" node_modules/preact/src/ node_modules/preact/*.d.ts 2>/dev/null || echo "Preact source not found in node_modules"
# Also check the package's type definition files
fd -e d.ts -e ts --max-depth 3 . node_modules/preact 2>/dev/null | head -20 | xargs rg -l "CSSProperties" 2>/dev/null || echo "No matches found"Repository: TanStack/query
Length of output: 309
🌐 Web query:
Does Preact 10.28.0 export CSSProperties type from the main 'preact' module? Is JSX.CSSProperties deprecated in Preact?
💡 Result:
No, Preact 10.28.0 does not export a CSSProperties type from the main 'preact' module. The CSSProperties type is defined internally in Preact's type declaration files (e.g., src/jsx.d.ts and src/dom.d.ts) as an interface for style props, extending AllCSSProperties and DOMCSSProperties to support CSS properties, custom properties, strings, numbers, null, and undefined values. It is used in JSX namespace for typing the style attribute (style?: string | CSSProperties | undefined), but there is no explicit export statement for CSSProperties from the main 'preact' module or index.d.ts. There is no evidence that JSX.CSSProperties is deprecated in Preact. References to JSX.CSSProperties appear in user issues (e.g., importing from preact/compat), but Preact's official types use CSSProperties directly in the JSX namespace without a nested JSX.CSSProperties, and no deprecation notices exist in changelogs, releases, or documentation for version 10.28.0.
Citations:
- 1: https://github.com/preactjs/preact/blob/main/src/index.d.ts
- 2: https://github.com/preactjs/preact/blob/21dd6d04/src/dom.d.ts
- 3: https://cdn.jsdelivr.net/npm/preact@10.22.0/src/jsx.d.ts
- 4: Type inference of Omit type not working, CSSProperties in preact/compat preactjs/preact#4427
- 5: inquire about jsx.d.ts type definition preactjs/preact#2067
- 6: preactjs/preact@10.27.2...10.28.0
- 7: https://github.com/preactjs/preact/releases/tag/10.28.0
🏁 Script executed:
cat -n packages/preact-query-devtools/src/PreactQueryDevtoolsPanel.tsx | head -40Repository: TanStack/query
Length of output: 1644
🌐 Web query:
What is the correct import path for CSSProperties in Preact? How should style types be imported from Preact?
💡 Result:
There is no separate "CSSProperties" type that needs to be explicitly imported for use with Preact's style prop in pure Preact projects. The style prop on HTML elements is typed as style?: string | CSSProperties | undefined (or SignalLike<string | CSSProperties | undefined>), where CSSProperties is defined internally in Preact's src/jsx.d.ts or src/dom.d.ts files as: export interface CSSProperties extends AllCSSProperties, DOMCSSProperties { cssText?: string | null; } export type DOMCSSProperties = { [key in keyof Omit<CSSStyleDeclaration, | 'item' | 'setProperty' | 'removeProperty' | 'getPropertyValue' | 'getPropertyPriority'>]?: string | number | null | undefined; }; export type AllCSSProperties = { [key: string]: string | number | null | undefined; }; This provides typed autocomplete for standard CSS properties (derived from CSSStyleDeclaration) plus support for custom properties and values like null/undefined. When using preact/compat (React compatibility layer), CSSProperties can be explicitly imported from "preact/compat", as shown in usage examples from Preact issues. For style types in pure Preact: - Use JSX.CSSProperties after importing JSX namespace, e.g.: import type { JSX } from 'preact'; type StyleType = JSX.CSSProperties; - Or reference via HTML attributes: import type { HTMLAttributes } from 'preact'; (style is on this interface). No external packages like csstype are needed; Preact bundles its own CSS type definitions (inlined from csstype historically). Example usage: const style: JSX.CSSProperties = { color: 'red', '--custom': 'value' };
Citations:
- 1: https://github.com/preactjs/preact/blob/ac1f145877a74e49f4c341e6acbf888a96e60afe/src/jsx.d.ts
- 2: https://cdn.jsdelivr.net/npm/preact@10.22.0/src/jsx.d.ts
- 3: Type inference of Omit type not working, CSSProperties in preact/compat preactjs/preact#4427
- 4: Breaking changes in v10.5.6 - custom css attributes are per type definition not longer allowed preactjs/preact#2862
- 5: https://preactjs.com/guide/v11/typescript
- 6: https://github.com/preactjs/preact/blob/master/src/jsx.d.ts
- 7: https://github.com/preactjs/preact/blob/21dd6d04/src/dom.d.ts
Remove the incorrect CSSProperties import from the preact module.
The import statement at line 6 attempts to import CSSProperties directly from 'preact', but Preact does not export this type from the main module. This will cause a TypeScript compilation error.
Use import type { JSX } from 'preact' instead and reference the type as JSX.CSSProperties at line 31, or import CSSProperties from 'preact/compat' if using the React compatibility layer.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/preact-query-devtools/src/PreactQueryDevtoolsPanel.tsx` at line 6,
The import is pulling CSSProperties from 'preact' which is invalid; update the
import in PreachQueryDevtoolsPanel.tsx to import JSX instead of CSSProperties
(e.g., use import type { JSX, VNode } from 'preact') and then change the usage
at the style type (previously referenced as CSSProperties at line 31) to
JSX.CSSProperties; alternatively, if you intend to use the React compatibility
layer, import CSSProperties from 'preact/compat' and keep the existing usage.
sukvvon
deleted the
refactor/preact-query-devtools-use-preact-cssproperties
branch
1 participant
🎯 Changes
Replace deprecated
JSX.CSSPropertieswithCSSPropertiesfrom the Preact namespace, as recommended by Preact's deprecation message:The
CSSPropertiestype is the same in both locations; this is a type-only refactor with no runtime or user-facing type behavior change.✅ Checklist
pnpm run test:pr.🚀 Release Impact
Summary by CodeRabbit