amateras 0.0.1 → 0.1.1

package/README.md

@@ -1,12 +1,12 @@
 # Amateras
 Amateras is a DOM Utility library.
 
-## Build DOM tree in JS
+## Build DOM Tree in JS
 ```ts
 import 'amateras';
 
 $(document.body).content([
-    $('h1').attr({ class: 'title' }).content('Hello, World')
+    $('h1').class('title').content('Hello, World')
 ])
 ```
 
@@ -80,4 +80,11 @@ function NameCard(name: string, avatarURL: string) {
 $(document.body).content([
     $(NameCard, 'The dancing man', 'https://media.tenor.com/x8v1oNUOmg4AAAAM/rickroll-roll.gif')
 ])
-```
+```
+
+## Packages
+|-|-|
+|Package name|Size|Size(gzip)|Description|
+|amateras|5.56 kB|2.35 kB|Core
+|amateras/html|0.66 kB|0.28 kB|Import HTMLElement types and methods|
+|[amateras/css](./ext/css/README.md)|3.74 kB|1.40 kB|Style in JS|

package/ext/css/README.md

@@ -0,0 +1,109 @@
+# amateras/css
+
+## Usage
+```ts
+import 'amateras';
+import 'amateras/css';
+```
+
+## Define Style
+```ts
+const style = $.css({
+    backgroundColor: 'black',
+    margin: 0,
+
+    'p': {
+        color: 'blue'
+
+        '@media (max-width: 800px)': {
+            color: 'red'
+        }
+    }
+})
+
+$(document.body).css(style).content([
+    $('p').content('Text with blue color.')
+]);
+```
+
+## Define Style in Method Chain
+```ts
+$(document.body).content([
+    $('h1').css({ color: 'red' }).content('This is a title with red color!')
+])
+```
+
+## Define Variables
+
+### Single Variable
+```ts
+const largeText = $.css.variables('1.2rem');
+
+$.css({
+    fontSize: largeText
+})
+```
+
+### Variable Group
+```ts
+const text = $.css.variables({
+    small: '0.8rem',
+    medium: '1rem',
+    large: '1.2rem'
+})
+
+$.css({
+    fontSize: text.large
+})
+```
+
+## Define Keyframes
+```ts
+const keyframes = $.css.keyframes({
+    fadeIn: {
+        '0%': { opacity: 0 },
+        '100%': { opacity: 1 }
+    },
+    fadeOut: {
+        from: { opacity: 1 },
+        to: { opacity: 0 }
+    }
+})
+
+$.css({
+    animation: keyframes.fadeIn
+})
+```
+
+## Define CSS Rules with Selectors
+```ts
+$.CSS({
+    'html': {
+        fontSize: '18px',
+        fontFamily: 'Noto Sans',
+
+        'body': {
+            margin: 0,
+
+            '.title': {
+                color: 'red'
+            }
+        }
+    },
+
+    '@media (max-width: 800px)': {
+        'html': {
+            fontSize: '1rem',
+
+            '@media (orientation: landscape)': {
+                fontSize: '1.2rem'
+            },
+        }
+    },
+})
+
+$(document.body).content([
+    $('h1').class('title').content('A red color title.')
+])
+
+```

package/ext/css/package.json

@@ -0,0 +1,9 @@
+{
+    "name": "@amateras/css",
+    "peerDependencies": {
+        "amateras": "../../"
+    },
+    "imports": {
+      "#structure/*": "./src/structure/*.ts"
+    }
+}

package/ext/css/src/index.ts

@@ -0,0 +1,442 @@
+import { _instanceof, _Object_assign, _Object_entries, _Object_fromEntries, isObject, isUndefined } from "amateras/lib/native";
+import { randomId } from "amateras/lib/randomId";
+import { $Element } from "amateras/node/$Element";
+import { $CSSDeclaration } from "#structure/$CSSDeclaration";
+import { $CSSMediaRule } from "#structure/$CSSMediaRule";
+import { $CSSRule } from "#structure/$CSSRule";
+import { $CSSStyleRule } from "#structure/$CSSStyleRule";
+import { $CSSKeyframesRule } from "#structure/$CSSKeyframesRule";
+import { $CSSVariable } from "#structure/$CSSVariable";
+import { $CSSKeyframeRule } from "#structure/$CSSKeyframeRule";
+
+declare module 'amateras/core' {
+    export namespace $ {
+        export function css(options: $CSSOptions): $CSSStyleRule
+        export function CSS(options: $CSSSelectorType | $CSSMediaSelectorType<false> | $CSSKeyframesSelectorType): void
+
+        export namespace css {
+            export function variables(value: string): $CSSVariable;
+            export function variables<T extends $CSSVariableType>(options: T, conditions?: $CSSVariableConditionType<T>): { [key in keyof T]: $CSSVariable }
+            export function keyframes<T extends { [key: string]: $CSSKeyframesType }>(options: T): { [key in keyof T]: $CSSKeyframesRule };
+            export const stylesheet: CSSStyleSheet;
+        }
+    }
+}
+
+declare module 'amateras/node/$Element' {
+    export interface $Element {
+        css(...options: $CSSOptions[]): this;
+    }
+}
+
+const generatedIds = new Set<string>();
+function generateId(lettercase?: 'any' | 'lower' | 'upper'): string { 
+    const id = randomId({lettercase: lettercase});
+    if (generatedIds.has(id)) return generateId(lettercase);
+    generatedIds.add(id);
+    return id;
+}
+
+const stylesheet = new CSSStyleSheet();
+document.adoptedStyleSheets.push(stylesheet);
+
+function processCSSOptions<T extends $CSSStyleRule | $CSSKeyframeRule>(
+    rule: T, 
+    options: $CSSDeclarationType | $CSSSelectorType | $CSSMediaSelectorType<boolean>, 
+    context: string[] = [],
+): T {
+    for (const [key, value] of _Object_entries(options)) {
+        if (isUndefined(value)) continue;
+        if (isObject(value) && !_instanceof(value, $CSSKeyframesRule) && !_instanceof(value, $CSSVariable)) 
+            rule.addRule( createRule(key, value, context) );
+        else {
+            const declaration = new $CSSDeclaration(key, `${value}`);
+            rule.declarations.set(declaration.key, declaration);
+        }
+    }
+    return rule;
+}
+
+function createRule(selector: string, options: $CSSOptions, context: string[] = [], global = false) {
+    if (selector.startsWith('@media')) return createMediaRule(selector.replace('@media ', ''), options, context, global);
+    if (selector.startsWith('@keyframes')) return createKeyframesRule(selector.replace('@keyframes ', ''), options as $CSSKeyframesType)
+    return createStyleRule(options, [...context, selector]);
+}
+
+function createStyleRule<T extends $CSSRule>(options: T, context?: string[]): T;
+function createStyleRule<T extends $CSSOptions>(options: T, context?: string[]): $CSSStyleRule;
+function createStyleRule<T extends $CSSOptions>(options: T, context: string[] = []) {
+    if (_instanceof(options, $CSSRule)) return options;
+    return processCSSOptions(new $CSSStyleRule(context), options, context);
+}
+
+function createMediaRule(condition: string, options: $CSSOptions, context: string[] = [], global: boolean) {
+    const rule = new $CSSMediaRule(condition);
+    // create media rule from $.CSS
+    if (global) _Object_entries(options).forEach(([key, value]) => rule.addRule( createRule(key, value, context) ))
+    // create from $.css
+    else rule.addRule( createStyleRule(options, context) );
+    return rule;
+}
+
+function createKeyframesRule(name: string, options: $CSSKeyframesType) {
+    const rule = new $CSSKeyframesRule(name);
+    _Object_entries(options).forEach(([key, value]) => {
+        rule.addRule( processCSSOptions(new $CSSKeyframeRule(key), value) );
+    })
+    return rule;
+}
+
+function insertRule(rule: $CSSRule, recursive = false) {
+    if (_instanceof(rule, $CSSStyleRule) && !CSS.supports(`selector(${rule.selector})`)) return rule;
+    stylesheet.insertRule(rule.css, stylesheet.cssRules.length);
+    if (_instanceof(rule, $CSSKeyframesRule)) return rule;
+    if (!_instanceof(rule, $CSSMediaRule)) rule.rules.forEach(rule => insertRule(rule));
+    else if (!recursive) rule.mediaRules.forEach(rule => insertRule(rule, true));
+    return rule;
+}
+
+_Object_assign($, {
+    css(options: $CSSOptions) {
+        if (_instanceof(options, $CSSRule)) return options;
+        const className = `.${generateId()}`;
+        const rule = createStyleRule(options, [className]);
+        rule.className = className;
+        return insertRule( rule );
+    },
+    CSS(options: $CSSSelectorType | $CSSMediaRule) {
+        return _Object_entries(options).map(([selector, declarations]) => {
+            return insertRule( createRule(selector, declarations, [], true) );
+        })
+    }
+})
+
+_Object_assign($.css, {
+    stylesheet: stylesheet,
+    variables<T extends $CSSVariableType | string>(options: T, conditions?: $CSSVariableConditionType<T>) {
+        if (isObject(options)) {
+            const variables = _Object_fromEntries(_Object_entries(options).map(([key, value]) => [
+                key, 
+                new $CSSVariable(`${key.replaceAll(/([A-Z])/g, ((_, $1) => `-${$1.toLowerCase()}`))}_${generateId('lower')}`, `${value}`)
+            ]))
+
+            const conditionObj = conditions ? _Object_entries(conditions).map(([condition, _options]) => [
+                condition,
+                _Object_fromEntries(_Object_entries(_options).map(([key, value]) => [`--${variables[key]?.key}`, `${value}`] as const))
+            ] as const) : [];
+
+            $.CSS({':root': {
+                ..._Object_fromEntries(_Object_entries(variables).map(([_, varobj]) => [`--${varobj.key}`, varobj.value])),
+                ..._Object_fromEntries(conditionObj)
+            }})
+
+            return variables;
+        } else {
+            const variable = new $CSSVariable(generateId('lower'), options);
+            $.CSS({':root': {[`--${variable.key}`]: variable.value}});
+            return variable;
+        }
+    },
+    keyframes(options: $CSSKeyframesType) {
+        return _Object_fromEntries( _Object_entries(options).map(([name, value]) => {
+            return [name, insertRule( createKeyframesRule(`${name}_${generateId()}`, value) )];
+        }) )
+    }
+})
+
+_Object_assign($Element.prototype, {
+    css(this: $Element, ...options: $CSSOptions[]) {
+        options.forEach(options => {
+            const rule = $.css(options);
+            this.addClass(rule.context[0]?.slice(1) as string);
+        })
+        return this;
+    }
+})
+
+export * from "#structure/$CSSDeclaration";
+export * from "#structure/$CSSKeyframeRule";
+export * from "#structure/$CSSKeyframesRule";
+export * from "#structure/$CSSMediaRule";
+export * from "#structure/$CSSRule";
+export * from "#structure/$CSSStyleRule";
+export * from "#structure/$CSSVariable";
+
+type $CSSOptions = $CSSDeclarationType | $CSSSelectorType | $CSSStyleRule | $CSSMediaSelectorType<true>;
+type $CSSValueType = '' | 'unset' | 'initial' | 'inherit' | string & {} | number | $CSSVariable
+type $CSSDeclarationType = { [key in keyof $CSSDeclarationMap]?: $CSSDeclarationMap[key] }
+type $CSSSelectorType = { [key: string & {}]: $CSSOptions }
+type $CSSMediaSelectorType<Nested extends boolean> = { [key: `@media ${string}`]: Nested extends true ? $CSSOptions : $CSSSelectorType | $CSSMediaSelectorType<Nested> }
+type $CSSVariableType<T = any> = { [key in keyof T]: $CSSValueType }
+type $CSSVariableConditionType<T extends $CSSVariableType | string> = T extends string ? { [key: string]: $CSSValueType } : { [key: string]: $CSSVariableType<T> }
+type $CSSKeyframesSelectorType = { [key: `@keyframes ${string}`]: $CSSKeyframesType }
+type $CSSKeyframesType = { [key: `${number}%`]: $CSSDeclarationType } | { from?: $CSSDeclarationType, to?: $CSSDeclarationType }
+
+type $CSSDeclarationMap = {
+    [key in keyof CSSStyleDeclaration]: $CSSValueType;
+} | {
+    alignContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'normal';
+    alignItems?: 'normal' | 'stretch' | 'center' | 'flex-start' | 'flex-end' | 'baseline';
+    alignSelf?: 'auto' | 'normal' | 'stretch' | 'center' | 'flex-start' | 'flex-end' | 'baseline';
+    all?: 'initial' | 'inherit' | 'unset';
+    animation?: string | $CSSKeyframesRule;
+    animationDelay?: string;
+    animationDirection?: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
+    animationDuration?: string;
+    animationFillMode?: 'none' | 'forwards' | 'backwards' | 'both';
+    animationIterationCount?: 'infinite' | number;
+    animationName?: string | $CSSKeyframesRule;
+    animationPlayState?: 'running' | 'paused';
+    animationTimingFunction?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear' | 'step-start' | 'step-end';
+    animationComposition?: 'replace' | 'add' | 'accumulate';
+    backdropFilter?: string;
+    backfaceVisibility?: 'visible' | 'hidden';
+    background?: string;
+    backgroundAttachment?: 'scroll' | 'fixed' | 'local';
+    backgroundBlendMode?: 'normal' | 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten' | 'color-dodge' | 'color-burn' | 'hard-light' | 'soft-light' | 'difference' | 'exclusion' | 'hue' | 'saturation' | 'color' | 'luminosity';
+    backgroundClip?: 'border-box' | 'padding-box' | 'content-box' | 'text';
+    backgroundColor?: string;
+    backgroundImage?: string;
+    backgroundOrigin?: 'border-box' | 'padding-box' | 'content-box';
+    backgroundPosition?: string;
+    backgroundRepeat?: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' | 'space' | 'round';
+    backgroundSize?: 'auto' | 'cover' | 'contain';
+    border?: string;
+    borderBottom?: string;
+    borderBottomColor?: string;
+    borderBottomLeftRadius?: string;
+    borderBottomRightRadius?: string;
+    borderBottomStyle?: 'none' | 'hidden' | 'dotted' | 'dashed' | 'solid' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset';
+    borderBottomWidth?: string;
+    borderCollapse?: 'collapse' | 'separate';
+    borderColor?: string;
+    borderImage?: string;
+    borderImageOutset?: string;
+    borderImageRepeat?: 'stretch' | 'repeat' | 'round' | 'space';
+    borderImageSlice?: string;
+    borderImageSource?: string;
+    borderImageWidth?: string;
+    borderLeft?: string;
+    borderLeftColor?: string;
+    borderLeftStyle?: 'none' | 'hidden' | 'dotted' | 'dashed' | 'solid' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset';
+    borderLeftWidth?: string;
+    borderRadius?: string;
+    borderRight?: string;
+    borderRightColor?: string;
+    borderRightStyle?: 'none' | 'hidden' | 'dotted' | 'dashed' | 'solid' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset';
+    borderRightWidth?: string;
+    borderSpacing?: string;
+    borderStyle?: 'none' | 'hidden' | 'dotted' | 'dashed' | 'solid' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset';
+    borderTop?: string;
+    borderTopColor?: string;
+    borderTopLeftRadius?: string;
+    borderTopRightRadius?: string;
+    borderTopStyle?: 'none' | 'hidden' | 'dotted' | 'dashed' | 'solid' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset';
+    borderTopWidth?: string;
+    borderWidth?: string;
+    bottom?: string;
+    boxShadow?: string;
+    boxSizing?: 'content-box' | 'border-box';
+    breakAfter?: 'auto' | 'avoid' | 'always' | 'all' | 'avoid-page' | 'page' | 'left' | 'right' | 'recto' | 'verso' | 'column' | 'avoid-column';
+    breakBefore?: 'auto' | 'avoid' | 'always' | 'all' | 'avoid-page' | 'page' | 'left' | 'right' | 'recto' | 'verso' | 'column' | 'avoid-column';
+    breakInside?: 'auto' | 'avoid' | 'avoid-page' | 'avoid-column';
+    captionSide?: 'top' | 'bottom';
+    caretColor?: string;
+    clear?: 'none' | 'left' | 'right' | 'both';
+    clip?: string;
+    clipPath?: string;
+    color?: string;
+    columnCount?: 'auto' | number;
+    columnFill?: 'balance' | 'auto';
+    columnGap?: string;
+    columnRule?: string;
+    columnRuleColor?: string;
+    columnRuleStyle?: 'none' | 'hidden' | 'dotted' | 'dashed' | 'solid' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset';
+    columnRuleWidth?: string;
+    columnSpan?: 'none' | 'all';
+    columnWidth?: string;
+    columns?: string;
+    content?: string;
+    counterIncrement?: string;
+    counterReset?: string;
+    cursor?: 'auto' | 'default' | 'none' | 'context-menu' | 'help' | 'pointer' | 'progress' | 'wait' | 'cell' | 'crosshair' | 'text' | 'vertical-text' | 'alias' | 'copy' | 'move' | 'no-drop' | 'not-allowed' | 'e-resize' | 'n-resize' | 'ne-resize' | 'nw-resize' | 's-resize' | 'se-resize' | 'sw-resize' | 'w-resize' | 'ew-resize' | 'ns-resize' | 'nesw-resize' | 'nwse-resize' | 'col-resize' | 'row-resize' | 'all-scroll' | 'zoom-in' | 'zoom-out' | 'grab' | 'grabbing';
+    direction?: 'ltr' | 'rtl';
+    display?: 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'inline-grid' | 'flow-root' | 'none' | 'contents' | 'table' | 'table-row' | 'table-cell' | 'table-column' | 'table-column-group' | 'table-header-group' | 'table-footer-group' | 'table-row-group' | 'list-item';
+    emptyCells?: 'show' | 'hide';
+    filter?: string;
+    flex?: string;
+    flexBasis?: string;
+    flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+    flexFlow?: string;
+    flexGrow?: number;
+    flexShrink?: number;
+    flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
+    float?: 'left' | 'right' | 'none';
+    font?: string;
+    fontFamily?: string;
+    fontFeatureSettings?: string;
+    fontKerning?: 'auto' | 'normal' | 'none';
+    fontLanguageOverride?: string;
+    fontOpticalSizing?: 'auto' | 'none';
+    fontSize?: string;
+    fontSizeAdjust?: string;
+    fontStretch?: 'normal' | 'ultra-condensed' | 'extra-condensed' | 'condensed' | 'semi-condensed' | 'semi-expanded' | 'expanded' | 'extra-expanded' | 'ultra-expanded';
+    fontStyle?: 'normal' | 'italic' | 'oblique';
+    fontSynthesis?: string;
+    fontVariant?: 'normal' | 'small-caps';
+    fontVariantCaps?: 'normal' | 'small-caps' | 'all-small-caps' | 'petite-caps' | 'all-petite-caps' | 'unicase' | 'titling-caps';
+    fontVariantEastAsian?: string;
+    fontVariantLigatures?: string;
+    fontVariantNumeric?: string;
+    fontVariantPosition?: 'normal' | 'sub' | 'super';
+    fontWeight?: 'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+    gap?: string;
+    grid?: string;
+    gridArea?: string;
+    gridAutoColumns?: string;
+    gridAutoFlow?: 'row' | 'column' | 'dense' | 'row dense' | 'column dense';
+    gridAutoRows?: string;
+    gridColumn?: string;
+    gridColumnEnd?: string;
+    gridColumnGap?: string;
+    gridColumnStart?: string;
+    gridGap?: string;
+    gridRow?: string;
+    gridRowEnd?: string;
+    gridRowGap?: string;
+    gridRowStart?: string;
+    gridTemplate?: string;
+    gridTemplateAreas?: string;
+    gridTemplateColumns?: string;
+    gridTemplateRows?: string;
+    height?: string;
+    hyphens?: 'none' | 'manual' | 'auto';
+    imageRendering?: 'auto' | 'crisp-edges' | 'pixelated';
+    isolation?: 'auto' | 'isolate';
+    justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
+    justifyItems?: 'normal' | 'stretch' | 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'left' | 'right';
+    justifySelf?: 'auto' | 'normal' | 'stretch' | 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'left' | 'right';
+    left?: string;
+    letterSpacing?: 'normal';
+    lineHeight?: 'normal' | number;
+    listStyle?: string;
+    listStyleImage?: string;
+    listStylePosition?: 'inside' | 'outside';
+    listStyleType?: 'disc' | 'circle' | 'square' | 'decimal' | 'georgian' | 'trad-chinese-informal' | 'none';
+    margin?: string;
+    marginBottom?: string;
+    marginLeft?: string;
+    marginRight?: string;
+    marginTop?: string;
+    mask?: string;
+    maskClip?: string;
+    maskComposite?: string;
+    maskImage?: string;
+    maskMode?: string;
+    maskOrigin?: string;
+    maskPosition?: string;
+    maskRepeat?: string;
+    maskSize?: string;
+    maskType?: string;
+    maxHeight?: string;
+    maxWidth?: string;
+    minHeight?: string;
+    minWidth?: string;
+    mixBlendMode?: 'normal' | 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten' | 'color-dodge' | 'color-burn' | 'hard-light' | 'soft-light' | 'difference' | 'exclusion' | 'hue' | 'saturation' | 'color' | 'luminosity';
+    objectFit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
+    objectPosition?: string;
+    opacity?: number;
+    order?: number;
+    outline?: string;
+    outlineColor?: string;
+    outlineOffset?: string;
+    outlineStyle?: 'none' | 'hidden' | 'dotted' | 'dashed' | 'solid' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset';
+    outlineWidth?: string;
+    overflow?: 'visible' | 'hidden' | 'scroll' | 'auto';
+    overflowWrap?: 'normal' | 'break-word' | 'anywhere';
+    overflowX?: 'visible' | 'hidden' | 'scroll' | 'auto';
+    overflowY?: 'visible' | 'hidden' | 'scroll' | 'auto';
+    overscrollBehavior?: 'auto' | 'contain' | 'none';
+    overscrollBehaviorX?: 'auto' | 'contain' | 'none';
+    overscrollBehaviorY?: 'auto' | 'contain' | 'none';
+    padding?: string;
+    paddingBottom?: string;
+    paddingLeft?: string;
+    paddingRight?: string;
+    paddingTop?: string;
+    pageBreakAfter?: 'auto' | 'always' | 'avoid' | 'left' | 'right';
+    pageBreakBefore?: 'auto' | 'always' | 'avoid' | 'left' | 'right';
+    pageBreakInside?: 'auto' | 'avoid';
+    paintOrder?: string;
+    perspective?: string;
+    perspectiveOrigin?: string;
+    placeContent?: string;
+    placeItems?: string;
+    placeSelf?: string;
+    pointerEvents?: 'auto' | 'none';
+    position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
+    quotes?: string;
+    resize?: 'none' | 'both' | 'horizontal' | 'vertical' | 'block' | 'inline';
+    right?: string;
+    rotate?: string;
+    rowGap?: string;
+    scale?: string;
+    scrollBehavior?: 'auto' | 'smooth';
+    shapeRendering?: 'auto' | 'optimizeSpeed' | 'crispEdges' | 'geometricPrecision';
+    stopColor?: string;
+    stopOpacity?: string;
+    stroke?: string;
+    strokeDasharray?: string;
+    strokeDashoffset?: string;
+    strokeLinecap?: 'butt' | 'round' | 'square';
+    strokeLinejoin?: 'miter' | 'round' | 'bevel';
+    strokeMiterlimit?: string;
+    strokeOpacity?: string;
+    strokeWidth?: string;
+    tabSize?: string;
+    tableLayout?: 'auto' | 'fixed';
+    textAlign?: 'left' | 'right' | 'center' | 'justify' | 'start' | 'end';
+    textAlignLast?: 'auto' | 'left' | 'right' | 'center' | 'justify' | 'start' | 'end';
+    textAnchor?: 'start' | 'middle' | 'end';
+    textCombineUpright?: 'none' | 'all';
+    textDecoration?: string;
+    textDecorationColor?: string;
+    textDecorationLine?: 'none' | 'underline' | 'overline' | 'line-through' | 'grammar-error' | 'spelling-error';
+    textDecorationStyle?: 'solid' | 'double' | 'dotted' | 'dashed' | 'wavy';
+    textDecorationThickness?: string;
+    textDecorationSkipInk?: 'auto' | 'none';
+    textEmphasis?: string;
+    textIndent?: string;
+    textJustify?: 'auto' | 'inter-word' | 'inter-character' | 'none';
+    textOrientation?: 'mixed' | 'upright' | 'sideways';
+    textOverflow?: 'clip' | 'ellipsis';
+    textRendering?: 'auto' | 'optimizeSpeed' | 'optimizeLegibility' | 'geometricPrecision';
+    textShadow?: string;
+    textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase';
+    textUnderlineOffset?: string;
+    textUnderlinePosition?: 'auto' | 'under' | 'left' | 'right';
+    top?: string;
+    touchAction?: 'auto' | 'none' | 'pan-x' | 'pan-y' | 'manipulation';
+    transform?: string;
+    transformBox?: 'border-box' | 'fill-box' | 'view-box';
+    transformOrigin?: string;
+    transformStyle?: 'flat' | 'preserve-3d';
+    transition?: string;
+    transitionDelay?: string;
+    transitionDuration?: string;
+    transitionProperty?: string;
+    transitionTimingFunction?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear' | 'step-start' | 'step-end';
+    translate?: string;
+    unicodeBidi?: 'normal' | 'embed' | 'isolate' | 'bidi-override' | 'isolate-override' | 'plaintext';
+    userSelect?: 'auto' | 'none' | 'text' | 'contain' | 'all';
+    verticalAlign?: 'baseline' | 'sub' | 'super' | 'text-top' | 'text-bottom' | 'middle' | 'top' | 'bottom';
+    visibility?: 'visible' | 'hidden' | 'collapse';
+    whiteSpace?: 'normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line' | 'break-spaces';
+    width?: string;
+    willChange?: string;
+    wordBreak?: 'normal' | 'break-all' | 'keep-all' | 'break-word';
+    wordSpacing?: string;
+    wordWrap?: 'normal' | 'break-word';
+    writingMode?: 'horizontal-tb' | 'vertical-rl' | 'vertical-lr';
+    zIndex?: 'auto' | number;
+};

package/ext/css/{$CSSDeclaration.ts → src/structure/$CSSDeclaration.ts}

@@ -9,4 +9,8 @@ export class $CSSDeclaration {
     get property() {
         return this.key.replaceAll(/([A-Z])/g, (_, s1) => `-${s1}`).toLowerCase();
     }
+
+    toString() {
+        return `${this.property}: ${this.value};`
+    }
 }

package/ext/css/src/structure/$CSSKeyframeRule.ts

@@ -0,0 +1,13 @@
+import { $CSSStyleRule } from "#structure/$CSSStyleRule";
+
+export class $CSSKeyframeRule extends $CSSStyleRule {
+    keyframe: string
+    constructor(keyframe: string) {
+        super();
+        this.keyframe = keyframe;
+    }
+
+    get css(): string {
+        return `${this.keyframe} { ${Array.from(this.declarations).map(([_, dec]) => `${dec}`).join(' ')} }`
+    }
+}

package/ext/css/src/structure/$CSSKeyframesRule.ts

@@ -0,0 +1,17 @@
+import { $CSSRule } from "#structure/$CSSRule";
+
+export class $CSSKeyframesRule extends $CSSRule {
+    name: string;
+    constructor(name: string) {
+        super();
+        this.name = name;
+    }
+    
+    toString(): string {
+        return this.name;
+    }
+
+    get css() {
+        return `@keyframes ${this.name} { ${Array.from(this.rules).map(rule => rule.css).join(' ')} }`
+    }
+}

package/ext/css/src/structure/$CSSMediaRule.ts

@@ -0,0 +1,30 @@
+import { _Array_from, _instanceof } from "amateras/lib/native";
+import { $CSSRule } from "#structure/$CSSRule";
+import { $CSSStyleRule } from "./$CSSStyleRule";
+
+export class $CSSMediaRule extends $CSSRule {
+    condition: string;
+    constructor(condition: string) {
+        super();
+        this.condition = condition;
+    }
+
+    get css(): string {
+        function findOwnerMediaRule(rule: $CSSRule, contextRules: $CSSMediaRule[]) {
+            const ownerRule = rule.ownerRule;
+            if (!ownerRule) return contextRules;
+            if (_instanceof(ownerRule, $CSSMediaRule)) return findOwnerMediaRule(ownerRule, [ownerRule, ...contextRules]);
+            else return findOwnerMediaRule(ownerRule, contextRules);
+        }
+        
+        function findChildRules(rule: $CSSRule, rules: $CSSStyleRule[] = []) {
+            _Array_from(rule.rules).forEach((_rule => {
+                if (!_instanceof(_rule, $CSSStyleRule)) return;
+                rules.push(_rule);
+                return findChildRules(_rule, rules);
+            }))
+            return rules
+        }
+        return `@media ${findOwnerMediaRule(this, [this]).map(rule => rule.condition).join(' and ')} { ${findChildRules(this).map(rule => rule.css).join(' ')} }`
+    }
+}

package/ext/css/src/structure/$CSSRule.ts

@@ -0,0 +1,25 @@
+import { _instanceof } from "amateras/lib/native";
+import { $CSSMediaRule } from "#structure/$CSSMediaRule";
+
+export abstract class $CSSRule {
+    rules = new Set<$CSSRule>();
+    ownerRule: $CSSRule | null = null;
+    constructor() {}
+
+    abstract get css(): string;
+    
+    get mediaRules() {
+        const rules: $CSSMediaRule[] = []
+        this.rules.forEach(rule => {
+            if (_instanceof(rule, $CSSMediaRule)) rules.push(rule);
+            rules.push(...rule.mediaRules)
+        })
+        return rules;
+    }
+
+    addRule(rule: $CSSRule) {
+        this.rules.add(rule);
+        rule.ownerRule = this;
+        return this;
+    }
+}

package/ext/css/src/structure/$CSSStyleRule.ts

@@ -0,0 +1,23 @@
+import type { $CSSDeclaration } from "#structure/$CSSDeclaration";
+import { $CSSRule } from "#structure/$CSSRule";
+import { _Array_from, _instanceof } from "amateras/lib/native";
+
+export class $CSSStyleRule extends $CSSRule {
+    context: string[] = [];
+    declarations = new Map<string, $CSSDeclaration>();
+    className: string = '';
+    constructor(context: string[] = []) {
+        super();
+        this.context = context;
+    }
+
+    get css(): string {
+        return `${this.selector} { ${_Array_from(this.declarations).map(([_, dec]) => `${dec}`).join(' ')} }`
+    }
+
+    get selector() {
+        const ctx: string[][] = [];
+        this.context.forEach((part, i) => ctx.push(part.split(',').map(sel => ctx[i - 1] ? ctx[i - 1]!.map(prefix => `${prefix} ${sel.trim()}`) : [sel.trim()]).flat()))
+        return ctx.at(-1)?.join(', ')
+    }
+}

package/ext/css/src/structure/$CSSVariable.ts

@@ -0,0 +1,12 @@
+export class $CSSVariable {
+    key: string;
+    value: string;
+    constructor(key: string, value: string) {
+        this.key = key;
+        this.value = value;
+    }
+
+    toString() {
+        return `var(--${this.key})`
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amateras",
-  "version": "0.0.1",
+  "version": "0.1.1",
   "description": "Amateras is a DOM Utility library.",
   "module": "index.ts",
   "type": "module",
@@ -31,7 +31,12 @@
     "./lib/*": "./src/lib/*.ts",
     "./structure/*": "./src/structure/*.ts",
     "./html": "./ext/html/html.ts",
-    "./css": "./ext/css/css.ts",
-    "./css/*": "./ext/css/*.ts"
+    "./css": "./ext/css/src/index.ts"
+  },
+  "workspaces": [
+    "./ext/*"
+  ],
+  "peerDependencies": {
+    "@amateras/css": "./ext/css"
   }
-}
+}

package/src/core.ts

@@ -3,6 +3,7 @@ import { Signal } from "#structure/Signal";
 import { $Element } from "#node/$Element";
 import { $Node, type $NodeContentTypes } from '#node/$Node';
 import '#node/node';
+import { _instanceof, _Object_defineProperty, _Object_entries, isFunction, isObject, isString, isUndefined } from '#lib/native';
 
 const tagNameMap: {[key: string]: Constructor<$Node>} = {}
 export function $<K extends (...args: any[]) => $Node>(fn: K, ...args: Parameters<K>): ReturnType<K>;
@@ -14,16 +15,16 @@ export function $<K extends Element>(element: K): $Element<K>;
 export function $<K extends keyof HTMLElementTagNameMap>(tagname: K): $Element<HTMLElementTagNameMap[K]>
 export function $(tagname: string): $Element<HTMLElement>
 export function $(resolver: string | HTMLElement | $Node | Function | TemplateStringsArray, ...args: any[]) {
-    if (resolver instanceof $Node) return resolver;
-    if (typeof resolver === 'string' && tagNameMap[resolver]) return new tagNameMap[resolver]();
-    if (typeof resolver === 'function') 
+    if (_instanceof(resolver, $Node)) return resolver;
+    if (isString(resolver) && tagNameMap[resolver]) return new tagNameMap[resolver]();
+    if (isFunction(resolver)) 
         if (resolver.prototype?.constructor) return resolver.prototype.constructor(...args); 
         else return resolver(...args);
     if (resolver instanceof Array) {
         const iterate = args.values();
         return resolver.map(str => [str ?? undefined, iterate.next().value]).flat().filter(item => item);
     }
-    if (resolver instanceof Node && resolver.$ instanceof $Node) return resolver.$;
+    if (_instanceof(resolver, Node) && _instanceof(resolver.$, $Node)) return resolver.$;
     return new $Element(resolver);
 }
 
@@ -35,15 +36,15 @@ export namespace $ {
         const signal = new Signal<T>(value);
         const signalFn = function (newValue?: T) {
             if (!arguments.length) return signal.value();
-            if (newValue !== undefined) signal.value(newValue);
+            if (!isUndefined(newValue)) signal.value(newValue);
             return signalFn;
         }
-        Object.defineProperty(signalFn, 'signal', { value: signal });
-        if (value instanceof Object) {
-            for (const [key, val] of Object.entries(value)) {
+        _Object_defineProperty(signalFn, 'signal', { value: signal });
+        if (isObject(value)) {
+            for (const [key, val] of _Object_entries(value)) {
                 const val$ = $.signal(val);
                 val$.signal.subscribe(newValue => { value[key as keyof typeof value] = newValue; signal.emit() });
-                Object.defineProperty(signalFn, `${key}$`, {value: val$});
+                _Object_defineProperty(signalFn, `${key}$`, {value: val$});
             }
         }
         return signalFn as unknown as SignalFunction<T>
@@ -67,7 +68,7 @@ export namespace $ {
             subscribed = true;
             return result;
         }
-        Object.defineProperty(computeFn, 'signal', { value: signalFn.signal });
+        _Object_defineProperty(computeFn, 'signal', { value: signalFn.signal });
         return computeFn as ComputeFunction<T>
     }
 
@@ -77,7 +78,11 @@ export namespace $ {
     }
 
     export function orArrayResolver<T>(item: OrArray<T>): T[] {
-        return item instanceof Array ? item : [item];
+        return _instanceof(item, Array) ? item : [item];
+    }
+
+    export function span(content: string) {
+        return $('span').content(content);
     }
 }
 export type $ = typeof $;

package/src/lib/assign.ts

@@ -1,4 +1,5 @@
 import { Signal } from "../structure/Signal";
+import { _instanceof, _Object_defineProperty, isUndefined } from "./native";
 
 export function assign(target: any, {set, get, fn}: { 
     set?: string[], 
@@ -10,7 +11,7 @@ export function assign(target: any, {set, get, fn}: {
     }
     const list = [...filterAndMap('get', get), ...filterAndMap('set', set), ...filterAndMap('fn', fn)] as [string, string][];
     for (const [type, prop] of list) {
-        Object.defineProperty(target.prototype, prop, {
+        _Object_defineProperty(target.prototype, prop, {
             ...(type === 'get' ? {
                 get() { return this.node[prop as any] }
             } : {
@@ -19,8 +20,8 @@ export function assign(target: any, {set, get, fn}: {
                     // set
                     value: function (this, args: any) {
                         if (!arguments.length) return this.node[prop];
-                        const set = (value: any) => value !== undefined && (this.node[prop] = value);
-                        if (args instanceof Signal) args = args.subscribe(set).value();
+                        const set = (value: any) => !isUndefined(value) && (this.node[prop] = value);
+                        if (_instanceof(args, Signal)) args = args.subscribe(set).value();
                         set(args)
                         return this;
                     }

package/src/lib/assignHelper.ts

@@ -1,11 +1,12 @@
 import type { $Node } from "#node/$Node";
 import { assign } from "./assign";
+import { _Object_entries, _Object_getOwnPropertyDescriptors } from "./native";
 
 export function assignHelper(targets: [object: Constructor<Node>, target: Constructor<$Node>, tagname?: string][]) {
     for (const [object, target, tagname] of targets) {
         const {set, get, fn} = { set: [] as string[], get: [] as string[], fn: [] as string[] }
         // assign native object properties to target
-        for (const [prop, value] of Object.entries(Object.getOwnPropertyDescriptors(object.prototype))) {
+        for (const [prop, value] of _Object_entries(_Object_getOwnPropertyDescriptors(object.prototype))) {
             if (prop in target.prototype) continue;
             if (value.get && !value.set) get.push(prop);
             else if (value.value) fn.push(prop);

package/src/lib/native.ts

@@ -0,0 +1,34 @@
+// Object
+export const _Object_fromEntries = Object.fromEntries;
+export const _Object_entries = Object.entries;
+export const _Object_assign = Object.assign;
+export const _Object_values = Object.values;
+export const _Object_defineProperty = Object.defineProperty;
+export const _Object_getOwnPropertyDescriptors = Object.getOwnPropertyDescriptors;
+// Array
+export const _Array_from = Array.from;
+// typeof
+export function _typeof(target: any, type: 'string' | 'number' | 'object' | 'boolean' | 'function' | 'bigint' | 'symbol' | 'undefined') {
+    return typeof target === type;
+}
+export function isString(target: any): target is string {
+    return _typeof(target, 'string');
+}
+export function isNumber(target: any): target is number {
+    return _typeof(target, 'number')
+}
+export function isObject(target: any): target is object {
+    return _typeof(target, 'object')
+}
+export function isFunction(target: any): target is Function {
+    return _typeof(target, 'function')
+}
+export function isUndefined(target: any): target is undefined {
+    return _typeof(target, 'undefined')
+}
+export function isNull(target: any): target is null {
+    return target === null;
+}
+export function _instanceof<T>(target: any, instance: abstract new (...args: any[]) => T): target is T {
+    return target instanceof instance;
+}

package/src/lib/randomId.ts

@@ -1,9 +1,11 @@
+import { _Array_from } from "./native";
+
 const LOWER = 'abcdefghijklmnopqrstuvwxyz';
 const UPPER = LOWER.toUpperCase();
-export function randomId(options?: {length?: number, case?: 'any' | 'lower' | 'upper'}): string { 
-    options = {length: 5, case: 'any', ...options};
-    const char = options.case === 'any' ? LOWER + UPPER : options.case === 'lower' ? LOWER : UPPER;
-    return Array.from({length: options.length as number}, (_, i) => { 
+export function randomId(options?: {length?: number, lettercase?: 'any' | 'lower' | 'upper'}): string { 
+    options = {length: 5, lettercase: 'any', ...options};
+    const char = options.lettercase === 'any' ? LOWER + UPPER : options.lettercase === 'lower' ? LOWER : UPPER;
+    return _Array_from({length: options.length as number}, (_, i) => { 
         const rand = Math.round(Math.random() * char.length); return char[rand] 
     }).join(''); 
 }

package/src/node/$Element.ts

@@ -1,11 +1,12 @@
 import { Signal } from "#structure/Signal";
 import { $Node } from "#node/$Node";
+import { _Array_from, _instanceof, _Object_entries, _Object_fromEntries, isUndefined } from "#lib/native";
 
 export class $Element<Ele extends Element = Element> extends $Node {
     listeners = new Map<Function, (event: Event) => void>;
     declare node: Ele
     constructor(resolver: Ele | string) {
-        super(resolver instanceof Element ? resolver : document.createElement(resolver) as unknown as Ele)
+        super(_instanceof(resolver, Element) ? resolver : document.createElement(resolver) as unknown as Ele)
         //@ts-expect-error
         this.node.$ = this;
     }
@@ -13,10 +14,10 @@ export class $Element<Ele extends Element = Element> extends $Node {
     attr(): {[key: string]: string};
     attr(obj: {[key: string]: string | number | boolean | Signal<any>}): this;
     attr(obj?: {[key: string]: string | number | boolean | Signal<any>}) {
-        if (!arguments.length) return Object.fromEntries(Array.from(this.node.attributes).map(attr => [attr.name, attr.value]));
-        if (obj) for (let [key, value] of Object.entries(obj)) {
-            const set = (value: any) => value !== undefined && this.node.setAttribute(key, `${value}`)
-            if (value instanceof Signal) value = value.subscribe(set).value();
+        if (!arguments.length) return _Object_fromEntries(_Array_from(this.node.attributes).map(attr => [attr.name, attr.value]));
+        if (obj) for (let [key, value] of _Object_entries(obj)) {
+            const set = (value: any) => isUndefined(value) && this.node.setAttribute(key, `${value}`)
+            if (_instanceof(value, Signal)) value = value.subscribe(set).value();
             set(value);
         }
         return this;

package/src/node/$Node.ts

@@ -1,3 +1,4 @@
+import { _Array_from, _instanceof, isFunction, isNull, isObject, isUndefined } from "#lib/native";
 import { Signal } from "#structure/Signal";
 
 export class $Node {
@@ -9,14 +10,14 @@ export class $Node {
     }
 
     content(children: $NodeContentResolver<this>) {
-        this.node.childNodes.forEach(node => node.remove());
+        _Array_from(this.node.childNodes).forEach(node => node.remove());
         return this.insert(children);
     }
 
     insert(resolver: $NodeContentResolver<this>, position = -1) {
-        if (resolver instanceof Function) {
+        if (isFunction(resolver)) {
             const content = resolver(this);
-            if (content instanceof Promise) content.then(content => $Node.insertChild(this.node, content, position))
+            if (_instanceof(content, Promise)) content.then(content => $Node.insertChild(this.node, content, position))
             else $Node.insertChild(this.node, content, position);
         } else $Node.insertChild(this.node, resolver, position);
         return this;
@@ -36,7 +37,7 @@ export class $Node {
     static insertChild(node: Node, children: OrArray<OrPromise<$NodeContentTypes>>, position = -1) {
         children = $.orArrayResolver(children);
         // get child node at position
-        const positionChild = Array.from(node.childNodes).filter(node => node.nodeType !== node.TEXT_NODE).at(position);
+        const positionChild = _Array_from(node.childNodes).filter(node => node.nodeType !== node.TEXT_NODE).at(position);
         // insert node helper function for depend position
         const append = (child: Node | undefined | null) => {
             if (!child) return;
@@ -44,7 +45,7 @@ export class $Node {
             else node.insertBefore(child, position < 0 ? positionChild.nextSibling : positionChild);
         }
         // process nodes
-        for (const child of children) if (child !== undefined) append($Node.processContent(child))
+        for (const child of children) !isUndefined(child) && append($Node.processContent(child))
     }
 
     static processContent(content: $NodeContentTypes): Node;
@@ -53,19 +54,19 @@ export class $Node {
     static processContent(content: OrPromise<$NodeContentTypes>): Node;
     static processContent(content: OrPromise<$NodeContentTypes | undefined | null>): Node | undefined | null
     static processContent(content: OrPromise<$NodeContentTypes | undefined | null>) {
-        if (content === undefined) return undefined;
-        if (content === null) return null;
+        if (isUndefined(content)) return;
+        if (isNull(content)) return content;
         // is $Element
-        if (content instanceof $Node) return content.node;
+        if (_instanceof(content, $Node)) return content.node;
         // is Promise
-        if (content instanceof Promise) {
+        if (_instanceof(content, Promise)) {
             const async = $('async').await(content, ($async, $child) => $async.replace($child));
             return async.node;
         }
         // is SignalFunction
-        if (content instanceof Function && (content as $.SignalFunction<any>).signal instanceof Signal) {
+        if (isFunction(content) && _instanceof((content as $.SignalFunction<any>).signal ,Signal)) {
             const text = new Text();
-            const set = (value: any) => text.textContent = value instanceof Object ? JSON.stringify(value) : value;
+            const set = (value: any) => text.textContent = isObject(value) ? JSON.stringify(value) : value;
             (content as $.SignalFunction<any>).signal.subscribe(set);
             set((content as $.SignalFunction<any>)());
             return text;

package/src/structure/Signal.ts

@@ -1,3 +1,5 @@
+import { isUndefined } from "#lib/native";
+
 export class Signal<T> {
     #value: T;
     subscribers = new Set<(value: T) => void>();
@@ -15,7 +17,7 @@ export class Signal<T> {
             return this.#value;
         }
         if (resolver instanceof Function) this.value(resolver(this.#value));
-        else if (resolver !== undefined) {
+        else if (!isUndefined(resolver)) {
             this.#value = resolver;
             this.emit();
         }

package/ext/css/$CSSMediaRule.ts

@@ -1,13 +0,0 @@
-import { $CSSRule } from "#css/$CSSRule";
-
-export class $CSSMediaRule extends $CSSRule {
-    condition: string;
-    constructor(condition: string) {
-        super();
-        this.condition = condition;
-    }
-
-    toString() {
-        return `@media ${this.condition} { ${[...this.rules.values()].map(rule => rule.toString()).join('\n')} }`
-    }
-}

package/ext/css/$CSSRule.ts

@@ -1,7 +0,0 @@
-export abstract class $CSSRule {
-    rules = new Set<$CSSRule>();
-    constructor() {
-    }
-
-    abstract toString(): string;
-}

package/ext/css/$CSSStyleRule.ts

@@ -1,20 +0,0 @@
-import type { $CSSDeclaration } from "#css/$CSSDeclaration";
-import { $CSSRule } from "#css/$CSSRule";
-
-export class $CSSStyleRule extends $CSSRule {
-    context: string[] = [];
-    declarations = new Map<string, $CSSDeclaration>();
-    className: string = '';
-    constructor(context: string[] = []) {
-        super();
-        this.context = context;
-    }
-
-    toString() {
-        return `${this.selector} { ${[...this.declarations.values()].map(dec => `${dec.property}: ${dec.value};`).join('\n')} }`
-    }
-
-    get selector() {
-        return this.context.join(' ');
-    }
-}

package/ext/css/css.ts

@@ -1,101 +0,0 @@
-import { $CSSDeclaration } from "#css/$CSSDeclaration";
-import { $CSSMediaRule } from "#css/$CSSMediaRule";
-import { $CSSRule } from "#css/$CSSRule";
-import { $CSSStyleRule } from "#css/$CSSStyleRule";
-import { randomId } from "#lib/randomId";
-import { $Element } from "#node/$Element";
-
-declare module '#core' {
-    export namespace $ {
-        export function css(options: $CSSOptions): $CSSStyleRule
-        export function CSS(options: $CSSSelector | $CSSMediaSelector): void
-    }
-}
-
-declare module '#node/$Element' {
-    export interface $Element {
-        css(...options: $CSSOptions[]): this;
-    }
-}
-
-Object.defineProperty($, 'css', {
-    value: function (options: $CSSOptions) {
-        if (options instanceof $CSSRule) return options;
-        const className = $CSS.generateClassName();
-        const rule = $CSS.createStyleRule(options, [className]);
-        rule.className = className;
-        return $CSS.insertRule( rule );
-    }
-})
-
-Object.defineProperty($, 'CSS', {
-    value: function (options: $CSSSelector | $CSSMediaRule) {
-        return Object.entries(options).map(([selector, declarations]) => {
-            return $CSS.insertRule( $CSS.createRule(selector, declarations) );
-        })
-    }
-})
-
-Object.defineProperty($Element.prototype, 'css', {
-    value: function (this: $Element, ...options: $CSSOptions[]) {
-        options.forEach(options => {
-            const rule = $.css(options);
-            this.addClass(rule.context[0]?.slice(1) as string);
-        })
-        return this;
-    }
-})
-
-export namespace $CSS {
-    export const stylesheet = new CSSStyleSheet();
-    const generatedIds = new Set<string>();
-    document.adoptedStyleSheets.push($CSS.stylesheet);
-    export function generateClassName(): string { 
-        const id = randomId();
-        if (generatedIds.has(id)) return generateClassName();
-        generatedIds.add(id);
-        return `.${id}`;
-    }
-
-    export function createStyleRule<T extends $CSSRule>(options: T, context?: string[]): T;
-    export function createStyleRule<T extends $CSSOptions>(options: T, context?: string[]): $CSSStyleRule;
-    export function createStyleRule<T extends $CSSOptions>(options: T, context: string[] = []) {
-        if (options instanceof $CSSRule) return options;
-        const rule = new $CSSStyleRule(context);
-        for (const [key, value] of Object.entries(options)) {
-            if (value === undefined) continue;
-            if (value instanceof Object) rule.rules.add( createRule(key, value, context) )
-                 else {
-                const declaration = new $CSSDeclaration(key, value);
-                rule.declarations.set(declaration.key, declaration);
-            }
-        }
-        return rule;
-    }
-
-    export function createRule(selector: string, options: $CSSOptions, context: string[] = []) {
-        if (selector.startsWith('@media')) return createMediaRule(selector.replace('@media ', ''), options, context);
-        else return createStyleRule(options, [...context, selector],);
-    }
-
-    export function createMediaRule(key: string, options: $CSSOptions, context: string[] = []) {
-        const rule = new $CSSMediaRule(key);
-        rule.rules.add(createStyleRule(options, context));
-        return rule;
-    }
-    
-    export function insertRule(rule: $CSSRule) {
-        if (rule instanceof $CSSStyleRule && !CSS.supports(`selector(${rule.selector})`)) return rule;
-        $CSS.stylesheet.insertRule(rule.toString(), $CSS.stylesheet.cssRules.length);
-        if (rule instanceof $CSSMediaRule) return;
-        rule.rules.forEach(rule => insertRule(rule))
-        return rule;
-    }
-}
-
-type $CSSOptions = $CSSDeclarations | $CSSSelector | $CSSRule | $CSSMediaSelector;
-type $CSSDeclarations = { [key in keyof CSSStyleDeclaration]?: string | number }
-type $CSSSelector = { [key: string & {}]: $CSSOptions }
-type $CSSMediaSelector = { [key: `@${string}`]: $CSSOptions }
-
-console.debug(document.adoptedStyleSheets[0])