@jk2908/cxx 0.3.7 → 0.4.1

package/src/types.ts

@@ -1,8 +1,38 @@
-export type Result<ClassName extends string = string> = readonly [
-	css: string,
-	classes: Readonly<Record<ClassName, string>>,
-	href: string,
-]
+import type { ComponentPropsWithRef } from 'react'
+
+export type StyleMode = 'embed' | 'extract'
+
+export type EmbedStyleDescriptor = {
+	mode: 'embed'
+	href: string
+	css: string
+	precedence: string
+}
+
+export type EmbedResult<ClassName extends string = string> = {
+	mode: 'embed'
+	styles: Readonly<Record<ClassName, string>>
+	styleProps: EmbedStyleDescriptor
+}
+
+export type ExtractResult<ClassName extends string = string> = {
+	mode: 'extract'
+	styles: Readonly<Record<ClassName, string>>
+}
+
+export type Result<ClassName extends string = string> =
+	| EmbedResult<ClassName>
+	| ExtractResult<ClassName>
+
+type StyleElementProps = Omit<
+	ComponentPropsWithRef<'style'>,
+	'href' | 'precedence' | 'children'
+> & {
+	href: string
+	precedence: string
+}
+
+export type StyleProps = EmbedStyleDescriptor & StyleElementProps
 
 export type Tags = Map<string, string[]>
 
@@ -14,10 +44,23 @@ export type PluginConfig = {
 	}
 }
 
-export type Tag = <ClassName extends string = string>(
+export type EmbedTag = <ClassName extends string = string>(
+	name: string,
+) => (_: TemplateStringsArray) => EmbedResult<ClassName>
+
+export type ExtractTag = <ClassName extends string = string>(
 	name: string,
-) => (_: TemplateStringsArray) => Result<ClassName>
+) => (_: TemplateStringsArray) => ExtractResult<ClassName>
+
+export type EmbedStyleTag = ((_: TemplateStringsArray) => EmbedResult) & {
+	tag: EmbedTag
+}
+
+export type ExtractStyleTag = ((_: TemplateStringsArray) => ExtractResult) & {
+	tag: ExtractTag
+}
 
-export type Cxx = ((_: TemplateStringsArray) => Result) & {
-	tag: Tag
+export type Cxx = {
+	embed: EmbedStyleTag
+	extract: ExtractStyleTag
 }

package/src/vite/index.ts

@@ -7,9 +7,11 @@ import type { PluginConfig } from '../types.js'
 import {
 	collect,
 	flushTypes,
+	injectStyleImports,
 	refreshFile,
 	seedTypes,
 	SOURCE_EXTENSIONS,
+	writeStyleSheets,
 	writeTypesForFile,
 } from '../build.js'
 import { GENERATED_DIR } from '../config.js'
@@ -121,15 +123,19 @@ export default function cxx(pluginConfig: PluginConfig = {}) {
 
 			if (!SOURCE_EXTENSIONS.has(path.extname(cleanId))) return null
 
-			const { template, tags, map } = collect(code, cleanId, pluginConfig)
+			const result = collect(code, cleanId, pluginConfig)
 
-			if (template === code) return null
+			if (result.template === code) return null
 
-			void writeTypesForFile(resolveWatchFile(cleanId), tags)
+			const file = resolveWatchFile(cleanId)
+			const imports = writeStyleSheets(file, result.sheets)
+			const template = injectStyleImports(result.template, imports)
+
+			void writeTypesForFile(file, result.tags)
 
 			return {
 				code: template,
-				map,
+				map: result.map,
 			}
 		},
 		configureServer(server: ViteDevServer) {