stylexy v1.0.0

stylexy

This module allows to pass a styled prop to React components injecting them with additional styles.

This module should be used with libraries that make use of a styled and css functions together. Popular examples are @emotion/styled and styled-components.

Main use case for this is when a more complex component consisting of a few simpler ones passses each one of them their own styled prop, populating the styles passed from above.

Installation

$ npm i --save-dev stylexy
# or
$ yarn add -D stylexy

react and react-dom should be installed in your package too.

Usage

// styled.ts

import StyledProxy from 'stylexy';

import styled from '@emotion/styled';
import { css } from '@emotion/core';

// Proxies all calls from `@emotion/styled`
// to a custom function
export default StyledProxy(styled, css);

// large.component.tsx

export const Large = (
    { styled }: {
        styled: {
            small?: SerializedStyled;
            smaller?: SerializedStyles;
        }
    }
) => {
    return (
        <div>
            <Small styled={styled?.small} />

            <Smaller $color="yellow" styled={styled?.smaller} />
        </div>
    )
};

// parent.component.tsx

export const Parent = () => {
    return (
        <LargeComponent
            styled={
                small: css`
                    color: black;
                `,
                smaller: ({ $color }) => css`
                    color: ${$color};
                `
            }
        />
    );
};