Improves style generation and defaults (#70)

* feat: integrate css-js-gen dependency and update styles in expressive-code-twoslash

- Added css-js-gen as a workspace dependency in package.json.
- Updated styles in styles.ts to utilize css-js-gen for CSS generation.
- Enhanced color handling for various UI elements to improve theme support.
- Refactored CSS styles for better maintainability and readability.
- Updated installation documentation to reflect changes in configuration options.

* feat: enhance styles with fallback colors and add changeset for css-js-gen package

* fix: update code block syntax for clarity in installation instructions

* feat: expand CSS Object types to include new types from csstype and update related functions

* fix: update CSSRule interface to include string and number types for better flexibility

Author: Adammatthiesen

.changeset/green-chicken-invite.md

@@ -0,0 +1,5 @@
+---
+"expressive-code-twoslash": minor
+---
+
+Introduces new css-js-gen package for stylesheet creation, and improves CSS styles

.changeset/hungry-onions-brake.md

@@ -0,0 +1,5 @@
+---
+"css-js-gen": patch
+---
+
+Expands CSS Object types to include the new types from csstype

docs/src/content/docs/getting-started/installation.mdx

@@ -138,8 +138,6 @@ For more information on how to add to your Next.js config, see the [Expressive C
 
 </Tabs>
 
-
-
 ### Config Options
 
 Default config options shown.
@@ -157,7 +155,7 @@ ecTwoSlash({
   languages: ["ts", "tsx", "vue"],
   includeJsDoc: true,
 // @annotate: allowNonStandardJsDocTags is required for like this to work
-	allowNonStandardJsDocTags: true,
+  allowNonStandardJsDocTags: true,
   twoslashOptions: {
     compilerOptions: {
       moduleResolution: 100 satisfies ts.ModuleResolutionKind.Bundler,

packages/css-js-gen/src/index.ts

@@ -4,14 +4,13 @@ import type {
 	CSSObject,
 	CSSProperties,
 	CSSRule,
-	CSSValue,
 	StylesheetReturn,
 } from "./types.ts";
 
 /**
  * Check if a value is a plain CSS property value
  */
-function isCSSValue(value: unknown): value is CSSValue {
+function isCSSValue(value: unknown): value is string | number {
 	return typeof value === "string" || typeof value === "number";
 }
 
@@ -108,7 +107,7 @@ const UNITLESS_PROPERTIES = new Set([
 /**
  * Format a CSS property name and value
  */
-function formatProperty(property: string, value: CSSValue): string {
+function formatProperty(property: string, value: string | number): string {
 	let formattedValue: string | number = value;
 
 	if (typeof value === "number" && value !== 0) {
@@ -133,7 +132,7 @@ function generateProperties(
 
 	const props = Object.entries(properties)
 		.filter(([, value]) => isCSSValue(value))
-		.map(([prop, value]) => `${indentation}${formatProperty(prop, value as CSSValue)}`)
+		.map(([prop, value]) => `${indentation}${formatProperty(prop, value as string | number)}`)
 		.join(newline);
 
 	return props;
@@ -144,7 +143,7 @@ function generateProperties(
  */
 function generateRule(
 	selector: string,
-	rule: CSSRule | CSSProperties,
+	rule: CSSRule | CSSProperties | CSS.Properties | CSS.PropertiesHyphen,
 	indent: string,
 	level: number,
 	options: Required<CSSGeneratorOptions>,
@@ -430,6 +429,5 @@ export type {
 	CSSObject,
 	CSSProperties,
 	CSSRule,
-	CSSValue,
 	StylesheetReturn,
 } from "./types.ts";

packages/css-js-gen/src/types.ts

@@ -1,29 +1,29 @@
 import type * as CSS from "csstype";
 
 /**
- * CSS property values can be strings, numbers, or CSS variable references
+ * CSS properties with camelCase and kebab-case notations
  */
-export type CSSValue = string | number;
+export interface CSSPropertiesOptions extends CSS.Properties, CSS.PropertiesHyphen {}
 
 /**
  * Standard CSS properties with kebab-case notation
  */
 export type CSSProperties = {
-	[property: string]: CSSValue;
+	[property: string]: string | number | CSSProperties | CSSPropertiesOptions;
 };
 
 /**
  * A CSS rule can contain properties and nested selectors
  */
 export interface CSSRule {
-	[key: string]: CSSValue | CSSRule | CSSProperties | CSS.Properties | CSS.PropertiesHyphen;
+	[key: string]: string | number | CSSRule | CSSProperties | CSSPropertiesOptions;
 }
 
 /**
  * CSS object structure supporting nested selectors and media queries
  */
 export interface CSSObject {
-	[selector: string]: CSSRule | CSSProperties;
+	[selector: string]: CSSRule | CSSProperties | CSSPropertiesOptions;
 }
 
 /**

packages/expressive-code-twoslash/package.json

@@ -42,6 +42,7 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"css-js-gen": "workspace:^",
 		"mdast-util-from-markdown": "catalog:mdast",
 		"mdast-util-gfm": "catalog:mdast",
 		"mdast-util-to-hast": "catalog:mdast",