✨ basic theming

danieldelcore · Oct 7, 2020 · 2abbda1 · 2abbda1
1 parent f3bc373
commit 2abbda1
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 7 deletions.
diff --git a/examples/v4-proto.tsx b/examples/v4-proto.tsx
@@ -12,12 +12,14 @@ const theme = createTheme({
 });
 
 const styles = css('button', {
-    backgroundColor: 'var(--theme-default)',
+    backgroundColor: 'var(--default)',
     color: 'red',
-}).modifier('primary', {
-    backgroundColor: 'var(--theme-primary)',
-    color: 'blue',
-});
+})
+    .modifier('primary', {
+        backgroundColor: 'var(--primary)',
+        color: 'blue',
+    })
+    .theme({ default: 'blue', primary: 'red' });
 
 interface ButtonProps {
     primary?: boolean;

diff --git a/packages/core/src/css.ts b/packages/core/src/css.ts
@@ -2,12 +2,22 @@ import { CSSProperties } from 'react';
 import { Definition } from './types';
 import hash from './hash';
 
+function parseTheme(theme: Record<string, any>) {
+    return Object.keys(theme).reduce<CSSProperties>((accum, key) => {
+        // TODO: this can be nested - beware
+        //@ts-ignore
+        accum[`--${key}`] = theme[key];
+        return accum;
+    }, {});
+}
+
 function css(id: string, styles: CSSProperties) {
     const elementId = `${id}-${hash(JSON.stringify(styles))}`;
     const styleMap: Definition[] = [
         {
             id,
             className: elementId,
+            type: 'element',
             styles,
         },
     ];
@@ -17,12 +27,25 @@ function css(id: string, styles: CSSProperties) {
         modifier: (modifierId: string, modifierStyles: CSSProperties) => {
             styleMap.push({
                 id: modifierId,
+                type: 'modifier',
                 className: `${elementId}--${modifierId}-${hash(
                     JSON.stringify(modifierStyles),
                 )}`,
                 styles: modifierStyles,
             });
 
+            return self;
+        },
+        theme: (theme: Record<string, any>) => {
+            console.log('here');
+
+            styleMap.push({
+                id: `theme-${id}`,
+                type: 'theme',
+                className: `theme-${id}`,
+                styles: parseTheme(theme),
+            });
+
             return self;
         },
     };

diff --git a/packages/core/src/jsx.tsx b/packages/core/src/jsx.tsx
@@ -31,7 +31,7 @@ const jsx = <
     const { css, theme, primary, ...rest } = props;
     const definitions = css
         ._get()
-        .filter(({ id }, index) => index === 0 || !!(props as any)[id]);
+        .filter(({ id, type }) => type !== 'modifier' || !!(props as any)[id]);
     const classes = definitions
         .map(({ className }) => className)
         .join(' ')
@@ -43,14 +43,16 @@ const jsx = <
         const styleSheet = sheet(headElement, 'data-trousers');
 
         definitions
-            .filter(({ className }) => !styleSheet.has(`.${className}`))
+            .filter(({ className }) => !styleSheet.has(className))
             .forEach(({ className, styles }) => {
                 console.log(styles);
 
                 if (!styleSheet.has(className)) {
                     const styleString = parse(styles);
                     const prefixedStyles = prefix(`.${className}`, styleString);
 
+                    console.log('mounting', className);
+
                     styleSheet.mount(className, prefixedStyles, false);
                 }
             });

diff --git a/packages/core/src/sheet.ts b/packages/core/src/sheet.ts
@@ -39,6 +39,7 @@ const sheet = (targetEl: HTMLElement, attributeId: string) => {
     const has = (id: string) => styleMap.has(id);
 
     const mount = (id: string, styles: string, isGlobal?: boolean) => {
+        // TODO: maybe a map isn't the best thing to use here
         styleMap.set(id, '');
 
         try {

diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
@@ -2,6 +2,7 @@ import { CSSProperties } from 'react';
 
 export interface Definition {
     id: string;
+    type: 'element' | 'modifier' | 'theme';
     className: string;
     styles: CSSProperties;
 }