font-feature-settings are not properly working with styled-components v5.0.0-rc.2

[iamskok]

I use createGlobalStyle to include Inter var font and apply various font-feature-settings properties. With styled-component v4 everything works as expected, but after upgrading to v5 font-feature-settings are behaving oddly.

import { createGlobalStyle } from 'styled-components'
import { normalize } from 'polished'

export default createGlobalStyle`
  ${normalize()}

  @import url('https://rsms.me/inter/inter.css');

  html {
    font-family: ${({ theme }) => theme.fonts.defaultLegacy};
  }

  @supports (font-variation-settings: normal) {
    html {
      font-family: ${({ theme }) => theme.fonts.default};
      font-feature-settings: "tnum", "zero", "frac", "cpsp", "salt", "ss02";
    }
  }
`

Screenshots

• v4 screenshot
• v5 screenshot

Environment

## System:
 - OS: macOS Mojave 10.14.6
 - CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
 - Memory: 155.12 MB / 16.00 GB
 - Shell: 5.3 - /bin/zsh
## Binaries:
 - Node: 11.14.0 - ~/.nvm/versions/node/v11.14.0/bin/node
 - Yarn: 1.19.2 - ~/.nvm/versions/node/v11.14.0/bin/yarn
 - npm: 6.11.3 - ~/.nvm/versions/node/v11.14.0/bin/npm
## npmPackages:
 - babel-plugin-styled-components: ^1.10.6 => 1.10.6
 - styled-components: ^5.0.0-rc.2 => 5.0.0-rc.2

[andyngo]

@iamskok This seems like a bug with @import in createGlobalStyle as far as I'm aware of. Ran into this myself and there's an ongoing thread here about it: https://github.com/styled-components/styled-components/issues/2670

Also, if you look at the v4 vs v5 screenshots, you'll notice that everything after @import is not loaded correctly. Instead of loading Inter I believe the typeface in the v5 screenshot is San Francisco / -apple-system / BlinkMacSystemFont. I don't think this is a font-feature-settings issue.

[quantizor]

Any chance you could provide a reproduction codesandbox?

[xsigik]

I find out when I use "@supports" with v5, my global styles in dev build are missing, it may be related.

[quantizor]

Can you provide a reproduction codesandbox?

On Thu, Jan 2, 2020 at 4:26 PM Jakub Valenta notifications@github.com wrote:

I find out when I use "@supports https://github.com/supports" with v5, my global styles in dev build are missing, it may be related.

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/styled-components/styled-components/issues/2920?email_source=notifications&email_token=AAELFVSBUISDPNDLD4Y2LT3Q3ZLXHA5CNFSM4JXDHP3KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEH7PFDY#issuecomment-570356367, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAELFVXMQOJTBJ7U5TEHYX3Q3ZLXHANCNFSM4JXDHP3A .

[robilars-amazon]

I was curious about this as well and made a codesandbox https://codesandbox.io/s/nostalgic-sun-zi7lj

Does not seem to reproduce the bug.

[xsigik]

@probablyup finally, we made a reproduction #2946

[quantizor]

If it's the same bug as #2946, you can try out styled-components@5.0.0-cgsmem which includes the fix. It'll go out with rc4