css! removes spaces with multi-values.

[simbleau]

Using the css! macro provided by styled_component, I am seeing the spaces omitted which is resulting in faulty css.

The problem is with: border: ${BORDER_WIDTH} solid ${border};

[simbleau]

For anyone who may experience this, just separate your css for the time being, e.g.

        border-width: ${BORDER_WIDTH};
        border-style: solid;
        border-color: ${border};

[futursolo]

This is expected as we current do not have a way to know the spacing between tokens. So inline syntax will make a guess about whether spacing should present until proc_macro_span is stablised which is not 100% accurate.

Trying to insert spacing in the value position also does not work because it can also be used like: width: ${width}px or width: 200${dim}.

You can use the string literal syntax to avoid this issue.

[futursolo]

I am labeling this as documentation as this should be documented until a solution is available.

[WorldSEnder]

It should be made more clear that the whitespace issue does not only apply to descendent selectors. Nowadays, source_text has been stabilized, but there's a warning:

Note: The observable result of a macro should only rely on the tokens and not on this source text. The result of this function is a best effort to be used for diagnostics only.

I'm not 100% sure if every compiler stage preserves the original source text, or if a synthetized string might mess things up and lead to inconsistent compilations. I'm almost sure that the returned string is not considered a cache key for incremental compilation, so relying on it's value could also lead to non-reproducible builds.