Refused to apply inline style

[DFreds]

Issue Type

• Bug (https://github.com/bootstrap-styled/v4/blob/master/.github/CONTRIBUTING.md#bug-reports)
• Feature (https://github.com/bootstrap-styled/v4/blob/master/.github/CONTRIBUTING.md#feature-requests)
• Neither

Description

I'm using this for some React components in my Ruby on Rails project. As part of my Rails project, I'm trying to remove unsafe-inline in my content security policy.

Rails.application.config.content_security_policy do |policy|
  policy.default_src :self, :https
  policy.font_src    :self, :https
  policy.img_src     :self, :https
  policy.object_src  :none
  policy.script_src  :self, :https
  policy.style_src   :self, :https, :unsafe_inline # removing this
  policy.frame_ancestors :none
end

However, the Label and InputGroup components are giving me this console error when I disallow unsafe-inline:

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' https:". Either the 'unsafe-inline' keyword, a hash ('sha256-2+CqpQgEgZrUUkpgssMJqKnG0ebD01jKGzeWGRdcr7w='), or a nonce ('nonce-...') is required to enable inline execution.

styled-components.browser.esm.js:152

This includes just having an entirely empty being rendered.

Frankly, I'm not sure if this is fixable on this end or if it should be on styled-components end. I thought I'd start here though since you're using that library.

Versions

• Node/NPM: v12.18.2
• OS: OS X 10.15.6
• v4: 3.4.0

[DFreds]

Also, it appears version 5 of styled-components is backwards compatible per their release notes. Perhaps updating it is enough, but I don't know that for sure yet.

[kopax]

This repo needs new maintainer as I have no time to take care of it. PR are also welcomed.