Module
x/goober/ts-tests/test-api.tsx
π₯ goober, a less than 1KB π css-in-js alternative with a familiar API
Latest
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170import { h, ComponentChildren } from 'preact';import { forwardRef as preactForwardRef } from 'preact/compat';import { forwardRef as reactForwardRef } from 'react';import { styled, setup, css, glob, keyframes } from '../goober';
// This would be an ambient module declaration in the client's projectdeclare module '../goober' { export interface DefaultTheme { colors: { primary: string; }; }}
setup(h);
const testStyledCss = () => { interface ButtonProps { clicked: boolean; children: ComponentChildren; color?: string; }
const buttonStyles = ({ color }: Pick<ButtonProps, 'color'>) => css``;
const buttonStylesRaw = css``;
const Button = styled('button')<ButtonProps>` background: ${(props) => (props.color ? props.color : 'black')}; `;
const ButtonRaw = styled('button')<ButtonProps>` background: black; `;
const EmptyPropsText = styled('p')``;
const NestedText = styled(EmptyPropsText)``;
const CustomTagged = styled('a-web-component')``;
const Childless = styled('div')``;
const animation = keyframes``;
const Animated = styled('div')``;
const HelloComponent = (props: { name: string }) => <h1>Hello, {props.name}</h1>;
const StyledHello = styled(HelloComponent)``;
const MultipleFunctions = styled('b')<{ isActive: boolean }>` color: ${(props) => (props.isActive ? 'tomato' : 'dodgerblue')}; background-color: ${(props) => (props.isActive ? 'tomato' : 'dodgerblue')}; `;
const StyledObject = styled('button')((props) => ({ background: props.disabled ? 'gray' : 'tomato' }));
const ThemeContainer = styled('div')<{ isActive: boolean }>` color: ${(props) => (props.isActive ? 'tomato' : 'dodgerblue')}; background-color: ${(props) => props.theme.colors.primary}; `;
const BoxWithLogicalAnd = styled('div')<{ border: boolean }>` color: red;
${({ border }) => border && ` border: 1px solid red; `} `;
const BoxWithTernary = styled('div')<{ border: boolean }>` color: red;
${({ border }) => border ? ` border: 1px solid red; ` : ``} `;
Button.displayName = 'displayName';
const TestComp = () => { return ( <div> <Button clicked={false} color="red"> click me </Button> <ButtonRaw clicked={false}>click me</ButtonRaw> <button class={buttonStyles({ color: 'red' })}>click me</button> <button class={buttonStylesRaw}>click me</button> <EmptyPropsText>base text</EmptyPropsText> <NestedText>text</NestedText> <MultipleFunctions isActive={false} /> <CustomTagged as={'custom'}>test</CustomTagged> <Childless /> <StyledHello name="you" /> <StyledObject disabled /> <Animated>test</Animated> <ThemeContainer isActive={true} /> <BoxWithLogicalAnd border /> <BoxWithTernary border /> </div> ); };
const ReactForwardRefTest = styled('div', reactForwardRef);
const PreactForwardRefTest = styled('div', preactForwardRef);};
const testGlob = () => { glob` html, body { background: light; }
* { box-sizing: border-box; } `;
glob(` html, body { background: light; }
* { box-sizing: border-box; } `);
glob({ body: { background: 'light' } });};