Comments leak to production via createGlobalStyles

[fly1ted]

Steps:

1. Open https://codesandbox.io/s/react-goober-forked-2dw5v?file=/src/index.js
2. Open in new window button
3. Chrome dev tools -> Esc -> Search -> type "Test comment"

It maybe coz sandbox runs development env, but I see the same thing in production in my app as well. Goober has the cleaning step here https://github.com/cristianbote/goober/blob/master/src/core/astish.js but that somehow doesn't work.

BTW, when I start typing in search bar "goo" expecting google I now get goober 😄

[fly1ted]

I just realized that Goober cleans the comments just fine, it's the string that's formed from template literal before goober gets in the game. It's tricky to overlook though.

[cristianbote]

Hey @fly1ted! Oh yeah 😬 basically the template string gets compiled/transpiled with the comments in it. I really have no solution to that one, since it's kinda out of my control at that point. Do you have any ideas on how to handle it better?

[fly1ted]

For now, I've coded theme/order dependent global styles as object, while in other places, within my app, I use goober only with object notation. There's a related issue styled-components/babel-plugin-styled-components/issues/12, it's solved with a babel plugin.

const GlobalStyles = createGlobalStyle({
  'body, html, h1, h2, h3, h4, h5, h6, dl, dd, ol, ul, menu, figure, blockquote, p, pre, form, hr, button': {
    margin: 0,
    padding: 0,
    border: 0,
    fontSize: '100%',
    font: 'inherit',
    verticalAlign: 'baseline'
  },
  // https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
  '*, *:before, *:after': {
    boxSizing: 'inherit'
  },
...
}

[ksenginew]

Note we can use JavaScript comments instead

createGlobalStyles`
-    /* Test comment */
+  ${/* Test comment */''}
  html,
  body {
    background: light;
  }
`