Customizer custom colors preview overriden by style.css

[claudiulodro]

Describe the bug
In the Customizer, when I have a custom color selected, I get a flash of the color when the page is first loaded for .5 seconds, and then it all gets replaced with the default Newspack color. Selecting a custom color doesn't show the color in the Customizer, and it's always mighty blue all the time. On the site frontend, the custom color works great.

In the inspector, if I examine e.g. a Search button I see the default color is active:
style.css

.button, button, input[type="button"], input[type="reset"], input[type="submit"] {
    background: #2A7DE1;
    ...
}

At a lower priority (striked through in the inspector), my custom color is inactive:
http://{site}/?customize_changeset_uuid={uuid}&customize_theme=newspack-theme&customize_messenger_channel=preview-0

.main-navigation .sub-menu, .sticky-post, .entry .entry-content .wp-block-button .wp-block-button__link:not(.has-background), .entry .button, button, input[type="button"], input[type="reset"], input[type="submit"], .entry .entry-content > .has-primary-background-color, .entry .entry-content > *[class^="wp-block-"].has-primary-background-color, .entry .entry-content > *[class^="wp-block-"] .has-primary-background-color, .entry .entry-content > *[class^="wp-block-"].is-style-solid-color, .entry .entry-content > *[class^="wp-block-"].is-style-solid-color.has-primary-background-color, .entry .entry-content .wp-block-file .wp-block-file__button {
    background-color: #eab700; /* My custom color */
}

Potentially related to #52? (The issue happens without a style pack active in my testing, though)

To Reproduce
Steps to reproduce the behavior:

1. Go to Customizer
2. Set a custom color. Observe it doesn't preview.
3. Save. Refresh the page. Observe custom color is overriden by style.css.

Expected behavior
I expected the custom color preview to preview normally.

[laurelfulford]

This might be related to #52 -- the issue hangs around even after you've switched back to the default style pack, as long as it's been changed at some point in the past -- it's due to my clunky code for the Customizer.

@claudiulodro do you remember if you switched the style pack at any point on this test site?

[claudiulodro]

Not sure. I should be getting my new computer today, so I'll give it a test on a clean slate and see.

[laurelfulford]

Thanks! (And yay new computer!! 🎉 )

[claudiulodro]

Just tested on the cleanest of new sites, and the issue still happens. It's not because I had a style pack and then removed it.

[laurelfulford]

Thanks for double-checking!

Dang, this could be a bigger issue than I thought.

[claudiulodro]

Did a little more digging into this, and it seems to def. be related to the style packs. If I remove add_action( 'customize_preview_init', array( $this, 'customize_preview' ) ); from Newspack_Style_Packs_Core the customizer colors work great.

The underlying issue to me looks like style.css is getting enqueued twice:

• Once normally
• Once by the style pack JS

The second enqueue (the one by style pack) overrides the customizer styles, since the styles all have the same specificity but the style pack loads style.css after the customizer styles have been applied.

Closing this issue since it seems to be the same as #52. Hope this info helps! :)

[laurelfulford]

Yes -- thanks @claudiulodro!!