Open avdotion opened 4 years ago
These hacks work! 🚩
import React from 'react';
import {css} from 'reshadow/macro';
import Child from './Child';
const buildParsedExpression = body => {
const parsedExpression = [body];
parsedExpression.raw = [body];
return parsedExpression;
};
const CHILD_WIDTH = '150px';
const childStyles = css(buildParsedExpression(`
section {
background-color: red;
width: ${CHILD_WIDTH};
}
`));
const App = () => (
<Child styles={childStyles} />
);
export default App;
import React from 'react';
import styled, {use} from 'reshadow/macro';
const Child = ({styles}) => styled(styles)(
<use.child as="section">
child
</use.child>
);
export default Child;
I see two common problems upper here:
css
function is being parsed immediately.
There is a goal to assign all length in css code by multiplication to fix value. For example, let us take a segment
12px
as a common, then all applicable lengths are in range[ 12, 24, ... ]
. There is a reason to use string expressions in the reshadowcss
tagged template.Down here there is an example to customize the width of children that way. Webpack answers with the following:
Please help to figure out how to solve the task with the
reshadow
tools.