Problem
The dev toolchain for updating and contributing styles and markup is unnecessarily complicated could be a barrier to contributors. Sass requires a level of expertise beyond vanilla CSS.
Additionally, gulp is increasingly being dropped (and support becoming more of a concern) for packages that don't require the additional layer of interpretation (ie. gulp-sass vs node-sass).
Proposed solution
As we've discussed internally, removing gulp and migrating to node packages is a better long term solution in terms of support and reducing dependencies.
Packages I'm suggesting are:
postcss-cli - adds cli commands
postcss-custom-properties - allows the use of CSS variables (--color-primary: #5c6ac4;) with fallback for unsupported browsers.
postcss-import - allows the use of @import to concatenate CSS files
postcss-simple-vars - allows the use of sass-like variables in CSS - $myvar syntax
We will already be using postcss for autoprefixer (tailwind, purgecss).
The sample package.json is here and the sample postcss.config.js is here.
Alternatives considered
Vanilla CSS
This is unsatisfactory as we don't have the ability to run basic checks. It will leave us in our current (CLF7) state.
Problem
The dev toolchain for updating and contributing styles and markup is unnecessarily complicated could be a barrier to contributors. Sass requires a level of expertise beyond vanilla CSS.
Additionally, gulp is increasingly being dropped (and support becoming more of a concern) for packages that don't require the additional layer of interpretation (ie. gulp-sass vs node-sass).
Proposed solution
As we've discussed internally, removing gulp and migrating to node packages is a better long term solution in terms of support and reducing dependencies.
Packages I'm suggesting are: postcss-cli - adds cli commands postcss-custom-properties - allows the use of CSS variables (
--color-primary: #5c6ac4;) with fallback for unsupported browsers. postcss-import - allows the use of @import to concatenate CSS files postcss-simple-vars - allows the use of sass-like variables in CSS -$myvarsyntaxWe will already be using postcss for autoprefixer (tailwind, purgecss).
The sample package.json is here and the sample postcss.config.js is here.
Alternatives considered
Vanilla CSS This is unsatisfactory as we don't have the ability to run basic checks. It will leave us in our current (CLF7) state.
Additional context
None