Correct use of normalize with object styles

[alexbrt]

Question

Hi 👋, commit 5c684e6 changed the normalize mixin to return a 2-object array of styles. Currently, it's compatible with emotionjs and styled-components template literals but doesn't seem to work with object styles unless used as follows:

const styles = { ...normalize()[0] };

Is this the intended use of normalize with object styles?

[bhough]

@alexbrt The reason for that change was to properly handle the fallback needed for 'abbr[title]''s textDecoration property. To make the current implementation work with object notation you will need to get creative depending on the library you are using. For example, the following should work with emotion and jss: https://cssinjs.org/jss-syntax/?v=v10.4.0#fallbacks

const styles = {
  ...normalize()[0],
  "abbr[title]": {
    textDecoration: [
      normalize()[0]["abbr[title]"]["textDecoration"],
      normalize()[1]["abbr[title]"]["textDecoration"]
    ]
  }
};

Unfortunately, object notation fallbacks don't work the same way in styled-components: styled-components/styled-components#3135 or React itself: facebook/react#2020. Without extra processing, the fallback will just get overwritten. The way you are currently doing it will ignore the value provided in the second array and always use the fallback value. This is probably safe as it is the only property and the difference between the "preferred" value and the fallback is minimal.

[alexbrt]

Got it, thanks! 👍