CIF-1548 - Generate CSS API file

[herzog31]

Description

• Added script to generate CSS "API" file which includes all classes but no styles. This can be used as starting point for styles in a new project.
• Generated files are called *-template.css.
• The file is published as part of the npm package.
• Documentation updated in CIF-1548 - Add customization instructions for CSS template aem-cif-guides-venia#41.

Screenshots (if appropriate):

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• I have signed the Adobe Open Source CLA.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes and the overall coverage did not decrease.
• All unit tests pass on CircleCi.
• I ran all tests locally and they pass.

[codecov]

Codecov Report

Merging #380 into master will not change coverage.
The diff coverage is n/a.

@@            Coverage Diff            @@
##             master     #380   +/-   ##
=========================================
  Coverage     84.81%   84.81%           
  Complexity      924      924           
=========================================
  Files           179      179           
  Lines          4570     4570           
  Branches        614      614           
=========================================
  Hits           3876     3876           
  Misses          557      557           
  Partials        137      137           

Flag	Coverage Δ	Complexity Δ
#integration	68.16% <ø> (ø)	686.00 <ø> (ø)
#jest	77.29% <ø> (ø)	0.00 <ø> (ø)
#karma	94.32% <ø> (ø)	0.00 <ø> (ø)
#unittests	86.07% <ø> (ø)	892.00 <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update ce1abc4...32d9ca9. Read the comment docs.

[dplaton]

We need to document this feature in the README - what are CSS API files and how to use them.

[cjelger]

I'm not sure what you exactly want to achieve: only generate the files when we release (but they wouldn't be committed in the repo, right?) so that they are included in the NPM package? (sorry I haven't checked the recent changes to create the NPM package).

[herzog31]

The templates are created in the dist folder which is published as npm package as part of the release. It's also generated for normal builds, but since the dist folder is part of .gitignore, it will never be committed.

[cjelger]

Aren't "normal builds" building with webpack:dev? Also if we do that for React Components, do we also want to do the same for the css styles of the HTL components?

[herzog31]

Aren't "normal builds" building with webpack:dev?

Correct :)

Also if we do that for React Components, do we also want to do the same for the css styles of the HTL components?

Those files already exist in https://github.com/adobe/aem-cif-guides-venia/tree/main/ui.frontend/src/main/styles. We could automate the generation of those files too, but it would work differently, since we would need to commit them directly to the venia project + archetype.