silverstripe / webpack-config

Reusable webpack bundle declarations for Silverstripe modules
BSD 3-Clause "New" or "Revised" License
16 stars 9 forks source link

Add postcss-custom-properties for CSS Variable backwards compatibility #35

Closed Cheddam closed 5 years ago

Cheddam commented 5 years ago

This PR bakes the postcss-custom-properties plugin into the CSS pipeline, allowing us to use CSS Variables with an automatic fallback to static properties based on their initial value. For example:

:root {
  --color-section-background: red;
}

.section {
  background-color: var(--color-section-background);
}

Will produce:

:root {
  --color-section-background: red;
}

.section {
  background-color: red;
  background-color: var(--color-section-background);
}

This will allow us to incrementally adopt CSS Variables (which are incredibly useful for a range of reasons) without immediately breaking support for older browsers, or manually patching in the fallbacks ourselves (which would require removal by hand when we drop support for said older browsers).

I recognise that we don't want to get into the habit of bloating the base configuration too much, so I can prepare an alternative PR that simply adds a parameter for applying extra plugins to the PostCSS loader configuration, but I'd like to see CSS Variables adopted across core, so I thought I'd start with this.

ScopeyNZ commented 5 years ago

@maxime-rainville See the mentioned PR: https://github.com/silverstripe/silverstripe-login-forms/pull/22

Implements dark mode and uses CSS variables to do so.