search

QuickBase / babel-plugin-styled-components-css-namespace

A babel plugin to add css namespaces (and increase specificity) of styled-component classes.
MIT License
118 stars 32 forks source link

track the position of each template expression so they don't get shuffled #50

Closed tinynumbers closed 5 years ago

tinynumbers commented 5 years ago

This PR fixes an issue that occurs when processing CSS that includes psuedo-classes that have embedded template literal expressions.

The PostCSS processing pulls the pseudo-classes out of the main style block into blocks following. This can lead to a situation where the expressions are put back into the CSS in the wrong order.

Example:

export default styled.div`
  background: ${expr1};

  &:hover {
    ${expr2};
  }

  ${expr3};
`;

...will wind up as...

export default styled.div`
&& {
  background: ${expr1};

  ${expr2}; /* wrong expression! */
}

&&:hover {
  ${expr3}; /* wrong expression! */
}

The fix tracks the expression sequence by including an index in the "fake expression" placeholder. Those indices are then used to make sure the expressions are re-inserted in the correct sequence in the final CSS template literal.

tinynumbers commented 5 years ago

Thanks for the quick review @nvanselow - any idea the turnaround to get this into a release version?

nvanselow commented 5 years ago

Probably by end of day. I have to take care of a few other items on my todo list, but I'll get this tagged and out as soon as I can.

nvanselow commented 5 years ago

rc4 with this fix has been released to npm. https://www.npmjs.com/package/@quickbaseoss/babel-plugin-styled-components-css-namespace