Clearfix Compatibility about polished

[bhough]

Thanks for digging into this further @kmctown. This may be an issue with styled-components not handling the object version correctly. This is what I get as output from our version:

{"&::after":{"clear":"both","content":"","display":"table"}}

My guess is styled-components is not handling the empty string correctly. @mxstbr @geelen thoughts?

[mxstbr]

I don't think this is a bug in styled-components (let's double check what other CSS-in-JS libs do here) but we should do this instead:

{
  "&::after": {
    "clear": "both",
    // Notice: Quotes inside quotes
    "content": "''",
    "display": "table"
  }
}

I think that'd fix it?

[bhough]

Closed by #157

[nikgraf]

Looks good to me. @bhough @mxstbr any objections?

[bhough]

Our implementation is the accepted approach for all browsers (IE8+) and uses the minimum amount of properties and selectors to reduce potential impact on pseudo elements. I'm not sure I like the idea of of expanding that to accommodate one specific (albeit popular) library.

[kmctown]

Thanks for the feedback. Closing this...something else weird is going on. I created the following function in a util lib:

export function clearFix() {
  return `
    &:after {
      display: table;
      content: "";
      clear: both;
    }
  `;
}

And dropped it into styled-components the same way:

const El = styled.div`
...
${clearFix()}
...
`

And it works, where the clearFix from polished doesn't. Does that make any sense?

[bhough]

Looks like the difference between the one we use and your example above is we use &::after (double colon) where you are using a single colon. https://developer.mozilla.org/en-US/docs/Web/CSS/::after

Could be some browsers aren't liking the :: colon version and we need to move to using the CSS2 version.

[kmctown]

Right, I tried it both ways. The :: colon version works as well -- as long as I'm returning the string.

export function clearFix() {
  return `
    &::after {
      display: table;
      content: "";
      clear: both;
    }
  `;
}

⬆️ That works as well. Swapping out to the polished version breaks it. For whatever reason, chrome is not liking content: '' when using the version from polished.

Here is a screenshot from Chrome devtools when using the function that returns the string:

And here is what it looks like when using the polished version:

[nikgraf]

sweet 👍