let you style classes

UmbraJS · Jan 3, 2024 · f5b0a09 · f5b0a09
1 parent b059e55
commit f5b0a09
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 16 deletions.
diff --git a/packages/core/engine/index.ts b/packages/core/engine/index.ts
@@ -9,7 +9,7 @@ import { getReadable } from './primitives/color'
 import { umbraGenerate } from './generator'
 
 interface ApplyProps {
-  element?: HTMLElement
+  element?: HTMLElement | string
   formater?: Formater
   alias?: Alias | boolean
 }

diff --git a/packages/core/engine/primitives/attach.ts b/packages/core/engine/primitives/attach.ts
@@ -67,16 +67,17 @@ const defaultAliases = {
 interface Attach {
   input: UmbraInput
   outputs: UmbraOutputs
-  element?: HTMLElement | null
+  element?: string | HTMLElement | null
   alias?: Alias | boolean
 }
 
 //main
 export function attach({ input, outputs, element, alias }: Attach) {
   setColors(outputs.flattened, element)
-  setAliases(alias || input.settings.aliases, element)
+  //setAliases(alias || input.settings.aliases, element)
 
   if (!element) return outputs
+  if (typeof element === 'string') return outputs
   //Ensure that the foreground color is always set to the attached element
   setProperty(element, {
     name: 'color',
@@ -114,46 +115,50 @@ function invalidColor(name: string) {
 }
 
 //attach colors
-function setColors(flattened: FlattenColor[], element?: HTMLElement | null) {
+function setColors(flattened: FlattenColor[], element?: string | HTMLElement | null) {
   const filtered = flattened.filter(({ name }) => !invalidColor(name))
-  element ? setElementColors(element, filtered) : setColorSheet(filtered)
+  const notHTMLElement = typeof element !== 'object'
+  notHTMLElement ? setColorSheet(element, filtered) : setElementColors(element, filtered)
 }
 
-function setColorSheet(flattened: FlattenColor[]) {
+function setColorSheet(element = ':root', flattened: FlattenColor[]) {
   const sheet = new CSSStyleSheet()
-  sheet.replace(`:root {${flattened.map(({ name, color }) => `${name}: ${color};`).join('')}}`)
+  sheet.replace(`${element} {${flattened.map(({ name, color }) => `${name}: ${color};`).join('')}}`)
   document.adoptedStyleSheets = [sheet]
 }
 
-function setElementColors(element: HTMLElement, colors: FlattenColor[]) {
+function setElementColors(element: HTMLElement | null, colors: FlattenColor[]) {
+  if (!element) return
   colors.forEach(({ name, color }) => {
     setProperty(element, { name, color })
   })
 }
 
 //attach aliases
-function setAliases(aliases?: Alias | true, element?: HTMLElement | null) {
+function setAliases(aliases?: Alias | true, element?: string | HTMLElement | null) {
   if (!aliases) return
   const ali = aliases === true ? defaultAliases : aliases
   const aliasesArray = makeAliasArray(ali)
-  element ? setElementAliases(element, aliasesArray) : setAliasesSheet(aliasesArray)
+  const notHTMLElement = typeof element !== 'object'
+  notHTMLElement ? setAliasesSheet(element, aliasesArray) : setElementAliases(element, aliasesArray)
 }
 
-function setAliasesSheet(aliases: AliasObject[]) {
+function setAliasesSheet(element = ':root', aliases: AliasObject[]) {
   function camelToVariable(name: string) {
     return '--' + name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()
   }
 
   const sheet = new CSSStyleSheet()
   sheet.replace(
-    `:root {${aliases
+    `:${element} {${aliases
       .map(({ name, value }) => `${camelToVariable(name)}: var(--${value});`)
       .join('')}}`
   )
-  document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet]
+  document.adoptedStyleSheets = [sheet]
 }
 
-function setElementAliases(element: HTMLElement, aliases: AliasObject[]) {
+function setElementAliases(element: HTMLElement | null, aliases: AliasObject[]) {
+  if (!element) return
   aliases.forEach(({ name, value }) => {
     setProperty(element, {
       name: name,

diff --git a/packages/core/engine/primitives/format.ts b/packages/core/engine/primitives/format.ts
@@ -60,7 +60,7 @@ export const format = ({
 
   return {
     ...outputs,
-    attach: (element?: HTMLElement, alias?: Alias | boolean) => {
+    attach: (element?: HTMLElement | string, alias?: Alias | boolean) => {
       if (!document) return outputs
       return attach({ input, outputs, element, alias })
     }

diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue
@@ -54,7 +54,7 @@ const theme = umbra({
   background: '#000000',
   foreground: '#ffffff',
   accents: [radixBlue, radixRed, radixYellow, success, royal, brown, something, accent]
-}).apply({ alias: true })
+}).apply({ element: 'html' })
 
 const t = ref(theme.input)
 const formated = ref(theme.formated)