Support for CSS custom properties and CSS grids

[dangelion]

Hi
thanks for this boilerplate, awesome! It gets better any time

In this time I’m reading a lot about these 2 modern concepts: CSS custom properties and CSS grids. Well, it results that if working with a little bit IE11 in mind they are ready to be used, now. So I was asking how can add support for them.
I mean:

1. Autoprefixer 9+ at today delivers prefixes and others for supporting CSS Grids in IE (source). It needs to be enabled in Webpack
2. For CSS custom properties there are some polyfills (link, link) but it could be more interesting this postcss module for Webpack postcss-custom-properties

I'm not a master of Webpack, you can help me to implement those in you boilerplate?
Could be interesting to add them as new features?
Thanks

[pnikolov]

@dangelion

In the latest release v5.0.0 - Webpack 5 Support you can see that autoprefixer version 10 is enabled by default and is respecting the browserslist section in the package.json file. So your build code will be automatically prefixed according to the declared browsers support of your code.

Regarding the CSS custom properties - can you give an example use case of this feature?

[dangelion]

@pnikolov thanks.
About CSS variables, they're not supported by IE11 but this package will automatically adds fallback, like this:

:root {
  --color: red;
}
 
h1 {
  color: var(--color);
}

compiles to:

:root {
  --color: red;
}
 
h1 {
  color: red;
  color: var(--color);
}

This will let us using as today the CSS variables. What do you think?

[pnikolov]

@dangelion
We are used to using SASS variables, so that is why the setup template does not have fallback for the CSS variables for IE. I see that postcss-custom-properties can be used to achieve this. I will explore the configuration to evaluate whether it will be hard to add such support.