Skip to content

Commit

Permalink
feat: styled tag using dot notation (#13)
Browse files Browse the repository at this point in the history
  • Loading branch information
RealPeha authored Feb 18, 2022
1 parent e895f3b commit c714346
Show file tree
Hide file tree
Showing 3 changed files with 32 additions and 5 deletions.
13 changes: 9 additions & 4 deletions src/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -54,10 +54,15 @@ type Tagged<T> = <P>(
) => ((props: P & T) => JSX.Element) & {
className: (props: P & T) => string;
};
export declare function styled<T extends keyof JSX.IntrinsicElements>(
tag: T | ((props: JSX.IntrinsicElements[T]) => JSX.Element)
): Tagged<JSX.IntrinsicElements[T]>;
export declare function styled<T>(component: (props: T) => JSX.Element): Tagged<T>;
export interface Styled {
<T extends keyof JSX.IntrinsicElements>(
tag: T | ((props: JSX.IntrinsicElements[T]) => JSX.Element)
): Tagged<JSX.IntrinsicElements[T]>;
<T>(component: (props: T) => JSX.Element): Tagged<T>;
}
export declare const styled: Styled & {
[Tag in keyof JSX.IntrinsicElements]: Tagged<JSX.IntrinsicElements[Tag]>;
};
export declare function createGlobalStyles(
tag: CSSAttribute | TemplateStringsArray | string,
...props: Array<string | number | Function>
Expand Down
10 changes: 9 additions & 1 deletion src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@ export function ThemeProvider(props) {
export function useTheme() {
return useContext(ThemeContext);
}
export function styled(tag) {

function makeStyled(tag) {
let _ctx = this || {};
return (...args) => {
const Styled = props => {
Expand Down Expand Up @@ -68,6 +69,13 @@ export function styled(tag) {
return Styled;
};
}

export const styled = new Proxy(makeStyled, {
get(target, tag) {
return target(tag);
},
})

export function createGlobalStyles() {
const fn = styled.call({ g: 1 }, "div").apply(null, arguments);
return function GlobalStyles(props) {
Expand Down
14 changes: 14 additions & 0 deletions test/test.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,20 @@ describe("Simple Styled", () => {
})
})

test("Creates paragraph properly using dot notation", () => {
const P = styled.p`
padding: 10px;
font-size: 40px;
border: 2px dashed tomato;
`;

createRoot(() => {
const v = (
<P>Content</P>
);
})
})

test("Creates component of styled component properly", () => {
const SuperDiv = styled("div")`
color: red;
Expand Down

0 comments on commit c714346

Please sign in to comment.