Merge pull request #7972 from QwikDev/fix-css-properties

fix(repl): CSS types

Author: wmertens

packages/docs/src/repl/ui/monaco.tsx

@@ -7,6 +7,7 @@ import { getColorPreference } from '../../components/theme-toggle/theme-toggle';
 import { bundled, getDeps, getNpmCdnUrl } from '../bundler/bundled';
 import { isServer } from '@builder.io/qwik';
 import { QWIK_PKG_NAME_V1, QWIK_PKG_NAME_V2 } from '../repl-constants';
+import cssTypes from '../../../../qwik/node_modules/csstype/index.d.ts?raw';
 
 export const initMonacoEditor = async (
   containerElm: any,
@@ -213,6 +214,7 @@ export const addQwikLibs = async (version: string) => {
     '/node_modules/@builder.io/qwik/dist/jsx-runtime.d.ts'
   );
   typescriptDefaults.addExtraLib(CLIENT_LIB);
+  typescriptDefaults.addExtraLib(cssTypes, '/node_modules/csstype/index.d.ts');
 };
 
 const loadDeps = async (pkgVersion: string) => {

packages/qwik/src/core/render/jsx/types/jsx-types.unit.tsx

@@ -1,12 +1,11 @@
 import { assertType, describe, expectTypeOf, test } from 'vitest';
+import { component$, type PropsOf, type PublicProps } from '../../../component/component.public';
 import { $, type PropFunction } from '../../../qrl/qrl.public';
-import type { EventHandler, QRLEventHandlerMulti } from './jsx-qwik-attributes';
+import type { JSX } from '../jsx-runtime';
+import type { QwikHTMLElements, QwikSVGElements, Size } from './jsx-generated';
 import type { FunctionComponent, JSXOutput } from './jsx-node';
+import type { EventHandler, JSXChildren, QRLEventHandlerMulti } from './jsx-qwik-attributes';
 import type { QwikIntrinsicElements } from './jsx-qwik-elements';
-import type { JSXChildren } from './jsx-qwik-attributes';
-import { component$, type PropsOf, type PublicProps } from '../../../component/component.public';
-import type { QwikHTMLElements, QwikSVGElements, Size } from './jsx-generated';
-import type { JSX } from '../jsx-runtime';
 
 describe('types', () => {
   // Note, these type checks happen at compile time. We don't need to call anything, so we do ()=>()=>. We just need to
@@ -327,4 +326,21 @@ describe('types', () => {
 
     expectTypeOf<PropsOf<17>>().toEqualTypeOf<never>();
   });
+
+  test('CSSProperties', () => () => {
+    return (
+      <div
+        style={{
+          color: 'red',
+          backgroundColor: 'blue',
+          // Using a CSS variable
+          '--my-variable': '10px',
+          // Using a number value
+          marginTop: 10,
+          // Using a string value
+          padding: '5px',
+        }}
+      />
+    );
+  });
 });