styled does not minimize some rules

[Coachonko]

This is really not that important imo but I have noticed that rules like these aren't minified in the styled output

export const typographyCSS = css`
  select,
  textarea,
  input,
  button {
    font: inherit;
  }

  select,
  textarea,
  input {
    letter-spacing: inherit;
    word-spacing: inherit;
  }

  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0;
    overflow-wrap: break-word;
  }
`

I expect

button,input,select,textarea{font:inherit}input,select,textarea{letter-spacing:inherit;word-spacing:inherit}h1,h2,h3,h4,h5,h6,p{margin:0;overflow-wrap:break-word}

But styled generates this

select,
  textarea,
  input,
  button{font:inherit;}select,
  textarea,
  input{letter-spacing:inherit;word-spacing:inherit;}p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6{margin:0;overflow-wrap:break-word;}

[atellmer]

Yea, because in this case style parsed as AST where p, is start and { is end of nested rules's name. The name itself is not processed in any way. We can probably come up with something here.

Workaround:

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  overflow-wrap: break-word;
}

You should also know that when using template literals, your js bundle size increases if you use spaces, because template literals cannot be minified without a compiler.

[Coachonko]

Workaround:

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  overflow-wrap: break-word;
}

The name remains unprocessed and this just removes new lines right? I just use a new line for each element in a selector because I am used to how Prettier and editors typically format CSS

[atellmer]

Ok, I will fix it later, think it will be a trivial task like str.replace(/,\s*/g, ',')