React-styleguidist: Font color in examples being overwritten in Safari

[corygibbons]

I'm noticing that since v6.1.0 font colors inside of component examples are being overwritten by theme.color.base. From what I can tell it only seems to be an issue in Safari (tested in 11.0.2)

Code editor is being overwritten as well.

https://github.com/corygibbons/styleguidist-example/tree/font-color

Chrome (working):

Safari (broken):

[sapegin]

Thanks for bug reports! I’ll have a look. (Feel free to send a pull request if have time to do so ;–)

[SaraVieira]

I can verify this even though I believe this is a safari bug

I had to do -webkit-text-fill to be able to override and put the actual colors

[sapegin]

@SaraVieira Have you tried to debug what’s the issue?

[sapegin]

I thinks that’s the reason:

https://github.com/iamstarkov/initize/blob/7eb1fcf721645bbc02f4b3bcba45de3856859bd4/all.js#L40

[sapegin]

We have a bigger issue: syntax highlighting in CodeMirror doesn’t work at all in Safari in Styleguidist 6.1.

[sapegin]

And it happens only in JSS 9 (f16a8d3b6b26b47ee3322720ad52427b53b36274). @kof any ideas?

[SaraVieira]

I try to debug it in collaboration with Fez and this were the findings :

https://twitter.com/NikkitaFTW/status/942754647009349632

https://github.com/yldio/joyent-portal/pull/943

[sapegin]

Nope, we’re not going to add a giant hack like this ;-|

[SaraVieira]

Duuude no, please don't! Even I was ashamed of that PR

This is just a link for historical porpuses and the reason I think this is a safari bug

[kof]

Any online example that demonstrates the bug?

[sapegin]

@kof The repo in the ticket description, any example in this repo. Reverting JSS and all plugins back to 8.x fixes the issue.

[SaraVieira]

Old version of our styleguide before the fix
https://styleguide-wwgijwjrui.now.sh/

@kof

[kof]

Yes, -webkit-text-fill-color causes this, now the question is why suddenly? I don't think initize has changed in this between those versions.

[kof]

actually what version of initize has been used before?

[sapegin]

It wasn’t used: https://github.com/cssinjs/jss-isolate/commit/c918ac2c3c3a18a15ab5a61b5328fc38022fde8e

[kof]

So it is the update to the latest jss-isolate!

1. What we can do now - overwrite those trouble making props during jss-isolate setup:

jss.use(isolate({
  reset: ['all', {
    boxSizing: 'border-box'
  }]
}))

1. Create a separate, isolated issue regarding those props on jss-isolate. Ideally find all of the problematic props. I am still not sure why they behave differently on safari. We will probably have to remove them from initize.

[sapegin]

We actually don’t set all and have a custom list:

https://github.com/styleguidist/react-styleguidist/blob/2556b519a9b8be1540818b2ffad4f108bed69466/src/styles/setupjss.js#L19-L33

As I understand docs, it shouldn’t use the all list in this case.

[kof]

Oh yes, in that case it extends inherited initials object with your object https://github.com/cssinjs/jss-isolate/blob/master/src/index.js#L29 and those problematic props are comming from the inherited list are https://github.com/iamstarkov/initize/blob/master/inherited.js

[kof]

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-fill-color is not standardized yet

[kof]

Initize is generating those props from mdn database, I will have to check if we have flag for non-standard properties and remove them all in one go, otherwise will just have to blacklist them specifically.

[sapegin]

It’s in both lists:

https://github.com/iamstarkov/initize/blob/7eb1fcf721645bbc02f4b3bcba45de3856859bd4/all.js#L40

https://github.com/iamstarkov/initize/blob/7eb1fcf721645bbc02f4b3bcba45de3856859bd4/inherited.js#L11

Is that intended?

[kof]

yes, "all" means inherited properties and non-inherited in one list, you require the list you want.

[kof]

Fixed css-initials package, removed all non-standard props.

[kof]

released css-initials and jss-isolate

[kof]

please update jss-isolate to 5.1.0 and I hope this can be closed

[swashcap]

Experiencing some _super strange_ Safari styling and found this issue. Could someone publish the package so this fix is available?

[austingreendev]

Publishing a patch for this would be very helpful. Currently viewing components in Safari is pretty unpredictable.

[sapegin]

Out in 6.2.0!

@swashcap @austin94