yandex / reshadow

Markup and styles that feel right
https://reshadow.dev
Other
363 stars 15 forks source link

Splitting styles with props and makeup into two layers #86

Open Danilqa opened 5 years ago

Danilqa commented 5 years ago

Hi again! :)

I have another issue:

In an ideal way, I wanna have 2 layers of some view component: makeup and styles. Styles can use props from component: theme, state props, etc. I analyzed use cases in spec. files and create some demo component:

import styled from 'reshadow';
import * as React from 'react';
import { ThemeContext } from '../../../../theme/theme.context';

// It should be in separate file
const getStyles = ({ bgColor }) => css`
    button {
        width: 100px;
        height: 20px;
        background-color: ${bgColor};

        & > title {
            font-size: 16px;
        }

        & > icon {
            font-size: 20px;
        }
    }
`;

export class Button extends React.PureComponent {

    render() {
        return styled(getStyles({ bgColor: '#fc0' }))(
            <button as='div'>
                <title as='div'>{this.props.children}</title>
                <icon/>
            </button>
        );
    }
}

So, with importing css from reshadow/react compiler doesn't crash, but in the runtime there is no css-variable: image

If I try with importing css from reshadow directly I get:

ERROR in ./src/sample-app/common/card/button/button.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
CssSyntaxError: /Users/dsitdikov/Projects/reshadow-research/src/sample-app/common/card/button/button.js:2:5: Unclosed block

May be an alternative way exists?

lttb commented 5 years ago

Hi @Danilqa, thank you for the issue!

At this moment, dynamic values are supported only by styled function, not css function.

I'm sorry that there is no best solution for that case, but I think that we'll ship dynamic css function support for about next 1-2 weeks with some other interesting improvements.

The ways to achieve such behaviour today:

The relevant things that we're going to support in near future:

Danilqa commented 5 years ago

@lttb wonderful, thanks! Looking forward to your updates :)