Unable to customize css tagged template with string expressions

[avdotion]

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 reshadow css tagged template.

Down here there is an example to customize the width of children that way. Webpack answers with the following:

CssSyntaxError: /Users/avdotion/sandbox/reshadow-issue/src/App.js: reshadow/macro: /Users/avdotion/sandbox/reshadow-issue/src/App.js:2:3: Unclosed block Learn more: https://www.npmjs.com/package/reshadow

import React from 'react';
import {css} from 'reshadow/macro';

import Child from './Child';

const CHILD_WIDTH = '150px';

const childStyles = css`
  |child {
    width: ${CHILD_WIDTH};
    background-color: red;
  }
`;

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>
    child
  </use.child>
);

export default Child;

Please help to figure out how to solve the task with the reshadow tools.

[avdotion]

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:

• First of all, there is unable to customize child by namespace from parent component (matching to native html tags is supporting).
• Secondly, the expression which passed to css function is being parsed immediately.