Pull theme specific styling to a dedicated theme.scss

[senadir]

Currently, we store our styles in two places, styles.scss and editor.scss, but sometimes, we have some cases wherein isolation, a component works fine, but shows deference results in both the editor and theme frontend, this would have been fine if out components are used in a single place, but most components are used both frontend and backend, and if we wish to publish them in the future, we can’t put everything in styles.scss.

Example of a broken experience in TwentyTwenty, the white background on the step number is necessary to create the disconnected line design, but since 2020 introduces another background color that is not white, we need to account for it.

What I'm suggesting:

• creating a separate theme.scss file that is not present in the editor and is responsible for handling quirky theme cases.

[issue-label-bot]

Issue-Label Bot is automatically applying the label type: feature request to this issue, with a confidence of 0.90. Please mark this comment with 👍 or 👎 to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

[haszari]

I agree that we're going to need a coordinated approach to how our "base" styles interact with themes, and a separate scss module may be a useful part of that. There's extensive discussion of this area in Gutenberg core: WordPress/gutenberg#9534

Drive by idea for the connected line / circled numbers – can we implement this with a margin or extra div around the number? Or padding (inset) on the div for the line? Maybe there's a way we can implement this without needing to know background color.

[senadir]

Drive by idea for the connected line / circled numbers – can we implement this with a margin or extra div around the number? Or padding (inset) on the div for the line? Maybe there's a way we can implement this without needing to know background color.

I implemented that design with another method that doesn’t require the use of a background color
https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/c2cc6da77d4430c95ca78df670354cdfac5487ac/assets/js/base/components/checkout/form-step/style.scss#L66-L77

[nerrad]

@senadir since you found a solution, do we need to still explore adding a theme.scss file? I'd prefer to stay away from having workarounds for specific themes because that introduces something that has to be regularly maintained as themes change. It also introduces weight around what themes we'd officially support with such a file.

Are you okay with closing this issue for now and we can revisit in the future if needed?

[senadir]

I'm with you on supporting themes and adding compatibility weight, we might still want some custom styling for the frontend but I see no need for that right now since styles.scss should do it and editor.scss to override it