Add CSS postprocessor to support variables

[zolhorvath]

Why (Motivation)

To speed up (and simplify) development I think that having a CSS preprocessor(#52) or a CSS postprocessor(#53) would be useful, especially for storing main variables like colors, dimensions (e.g. input-border width, border radius).

This PR adds a PostCSS-based postprocessor for this project.

Technical summary

Basics

• Stylesheets in ./css/ are copied to ./source/css/. At the end of the processing, these are compiled into the ./dist-css/ directory.
• Seven's own library paths are changed to use the processed CSS files.
• The legacy ./css directory is kept to make further git merges as easy as possible.
  If a new CSS file gets in by a merge, it should be copied to ./source/css/ and it's reference should be changed in the .info.yml or in the .libraries.yml.

Scaffolding

New CSS scaffolding tasks are following the logic of the js tasks:

• yarn build:css:
  Process sources without source maps.
• yarn build:css-dev:
  Process sources with (external) source maps.
• yarn watch:css:
  Watches source assets and applies distributive task if any of them changes.
• yarn watch:css-dev:
  Watches source assets and applies development task if any of them changes.

Miscellaneous Notes

• CSS postprocessing:
  Current config supports less browsers than the stylelint config:
  • firefox >= 16 instead of firefox >= 5
  • opera >= 15 instead of opera >= 12
    These where added to package.json.

Workarounds

core/misc should be symlinked two level above this project's folder.
For instance, if this theme is placed to [docroot]/themes/custom/seven, then [docroot]/core/misc should be symlinked to [docroot]/themes/misc.

[kiran-kadam911]

@zolhorvath Please add at least one reviewer to get your code review and merge.

[zolhorvath]

@kiran-kadam911 Sadly, I cannot add reviewers.

[zolhorvath]

@lauriii

From #52's review:

1. Fine

2. The dir of the sources can be anything. But in favor of the existing image url references, I'd prefer to keep the dist folder at the same level where the legacy css directory is. What would happen if we want the processed CSS be placed to css/dist instead?

   Right now there are only 7 occurences of url(../../images/[*]) and 6 of url(../../../images/[*]) in the project. These are referencing images which are inside Seven's root. To prevent breaking them, I see two options:

   1. Change these references to url(../../../images/[*]) now, and at the end of the project change them back. The latter one is only needed if we want to keep the original CSS dir tree.
   2. (Automatically) symlink ./images to .css/images while we add the symlink to .gitignore. (so calling ln -s ../images css/images for css:build and css:watch tasks)

   I agree that your suggestion would be nicer than the current structure, but with the current solution we'll have less issues even at the beginning and at the finishing of the project and will be able to keep the legacy ./css directory clean (without the two or three new subdir like ./css/src, ./css/dist and optionally ./css/images).

   I almost forgot that Seven's using assets from core/misc as well (17 times).

3. Okay

[lauriii]

Thank you!

I think the option 1 sounds good 👍

[zolhorvath]

I'm on this :)

[zolhorvath]

@lauriii Could you please re-check?

[lauriii]

Why are we linting the compiled CSS files?

[zolhorvath]

Changed to css/src/**/*.css.

[lauriii]

Looks good! Thanks for making all the requested changes 😊

[kiran-kadam911]

@zolhorvath If we are going to use CSS-Preprocessor then we need to install an SCSS parser for PostCSS right?
If yes then currently it's missing we need to install it.

@lauriii please guide/suggest.

[lauriii]

@kiran-kadam911 This PR already introduced a dependency to https://github.com/postcss/postcss-custom-properties which will allow us to use variables. I don't think we should introduce a dependency to SCSS parser at least now.

[kiran-kadam911]

@lauriii

From #52's review:

1. Fine

2. The dir of the sources can be anything. But in favor of the existing image url references, I'd prefer to keep the dist folder at the same level where the legacy css directory is. What would happen if we want the processed CSS be placed to css/dist instead?
   Right now there are only 7 occurences of url(../../images/[*]) and 6 of url(../../../images/[*]) in the project. These are referencing images which are inside Seven's root. To prevent breaking them, I see two options:

   1. Change these references to url(../../../images/[*]) now, and at the end of the project change them back. The latter one is only needed if we want to keep the original CSS dir tree.
   2. (Automatically) symlink ./images to .css/images while we add the symlink to .gitignore. (so calling ln -s ../images css/images for css:build and css:watch tasks)

   I agree that your suggestion would be nicer than the current structure, but with the current solution we'll have less issues even at the beginning and at the finishing of the project and will be able to keep the legacy ./css directory clean (without the two or three new subdir like ./css/src, ./css/dist and optionally ./css/images).
   I almost forgot that Seven's using assets from core/misc as well (17 times).

3. Okay

@zolhorvath as per current theme structure for Seven's assets from core/misc we need to change (../../../../misc/) to (../../../../../misc/) to reach that location in 17 matches. Currently its breaking the path.