Compile CSS from Sass using Webpack by podliashanyk · Pull Request #2849 · Uninett/nav

podliashanyk · 2024-02-29T14:54:53Z

Implemented changes:

Closes #2871, and #2719

Best reviewed commit-by-commit. Furthermore this PR could be split into several smaller PRs.

Further work:

Depends on #2855, #2859

codecov · 2024-02-29T15:00:31Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 60.42%. Comparing base (c24b90a) to head (19d7c58).
Report is 339 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #2849      +/-   ##
==========================================
- Coverage   60.46%   60.42%   -0.04%     
==========================================
  Files         605      605              
  Lines       43801    43708      -93     
  Branches       48       48              
==========================================
- Hits        26483    26412      -71     
+ Misses      17306    17284      -22     
  Partials       12       12

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

github-actions · 2024-03-05T12:20:20Z

Test results

9 files 9 suites 8m 30s ⏱️
2 137 tests 2 137 ✅ 0 💤 0 ❌
4 013 runs 4 013 ✅ 0 💤 0 ❌

Results for commit 19d7c58.

♻️ This comment has been updated with latest results.

sonarqubecloud · 2024-03-05T13:23:53Z

Quality Gate passed

Issues
3 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

hmpf · 2024-03-08T10:48:47Z

This is a continuation of #2859? I'd rather not review this one until that one is merged and this one updated accordingly.

podliashanyk · 2024-03-08T11:06:11Z

This is a continuation of #2859? I'd rather not review this one until that one is merged and this one updated accordingly.

Thats right, this one is blocked by #2859. There will be a new rebase when #2859 is merged 😌

sonarqubecloud · 2024-10-04T11:29:18Z

Quality Gate passed

Issues
2 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

github-actions · 2024-10-04T11:29:56Z

🦙 MegaLinter status: ✅ SUCCESS

Descriptor	Linter	Files	Fixed	Errors	Elapsed time
✅ PYTHON	black	992		0	11.04s
✅ PYTHON	ruff	987		0	0.1s

See detailed report in MegaLinter reports

MegaLinter is graciously provided by

lunkwill42 · 2024-10-14T14:06:16Z

I also notice there is a bunch of deprecation warnings issues by webpack when building the style sheets. Maybe we should make an issue to follow up on these as well...

lunkwill42 · 2024-10-14T14:17:27Z

I'll add that I believe setuptools_scm works just fine without setup.py these days, which means that we could potentially get fully rid of setup.py now...

podliashanyk · 2024-11-07T09:07:42Z

I also notice there is a bunch of deprecation warnings issues by webpack when building the style sheets. Maybe we should make an issue to follow up on these as well...

We have issues about it: #2872 and #3167

podliashanyk · 2024-11-07T09:26:04Z

Update NAV installation docs (and release notes). Building NAV from source will now require at least Node.js and npm. The instructions need to include information on how to build the required stylesheets. Before this PR, the docs omits this step, because it is done implicitly by setup.py when using pip to install.

Will do 👍

We need to look into how we could re-introduce this as an automatic part of the build process. We still use setuptools as our build tool (as specified in pyproject.toml), but we're not married to this.

Ensure these changes will work with the Debian package build process (i.e. are we able to run webpack satisfactorily on Debian Bullseye during a normal package build)

I have added some issues regarding webpack's warnings and suggestions. Will you add issues for no. 2 and 3 or should I go ahead with it? :)

Also not quite sure what to think about the new frontend directory. Anyone else on the team have thoughts? @hmpf @stveit @johannaengland ?

Yes, please ❤️

lunkwill42

Me like, but the bit about the sass-watcher should rather go somewhere in doc/hacking/hacking.rst, as it's not something normal users would be interested in.

doc/howto/generic-install-from-source.rst

lunkwill42

Yeah, I think this will do!

Now, all that remains to be seen is if we can get the Debian package build process up to snuff :)

changelog.d/2849.changed.md

The essence of this config: Sass files will be compiled into CSS files into the same folder (/static/css/) as it was done in the original implementation (with libsass and setuptools). The resulting files in /static/css will have same layout and names as with the previous solution, except for /static/css/foundation folder. It is dropped completely since it was empty when built with setuptools. This is expected since /sass/foundation folder contains only Sass partials. Named webpack configuration is used in the config. This is to drop the need of having multiple webpack config files per name/target/purpose.

* Fixes failing assets urls. Read more about problem here https://webpack.js.org/loaders/sass-loader/#problems-with-url. In our case asset urls must be relative to each given entry path (each generated CSS file came from a separate entry). Sass files (entries) have different path depth which introduces another problem - there can't be 1 variable that would satisfy all entries. Furthermore, some assets are defined in the same Sass file AND are used by several entries of varying depth. squash Fix correct asset name and path * Remove redundant imports Otherwise webpack will fail due to assets url not being valid relative to entry path * Fix correct import Otherwise webpack would not build CSS file from entries Also merges duplicate selector definitions into single definition. There were no overlaps in the merged definitions, so no unexpected CSS behaviour would occur. But merging duplicate definitions is better for code maintainability in general.

Also whitelists make cmd for testing

Co-authored-by: Morten Brekkevold <morten.brekkevold@sikt.no>

* Updates docs about sass-watcher process in docker * Adds docs about hacking CSS * Adds docs on how to build CSS from Sass when building NAV from source

sonarqubecloud · 2024-11-12T13:59:40Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

podliashanyk self-assigned this Feb 29, 2024

podliashanyk force-pushed the build-sass-with-webpack branch from ea992a2 to e6c4790 Compare March 1, 2024 08:52

lunkwill42 mentioned this pull request Mar 1, 2024

Install Node/NPM in docker dev environment #2855

Merged

podliashanyk force-pushed the build-sass-with-webpack branch 3 times, most recently from 36a822e to f7563ea Compare March 5, 2024 12:05

podliashanyk force-pushed the build-sass-with-webpack branch from 23a0962 to f181d52 Compare March 5, 2024 13:23

podliashanyk force-pushed the build-sass-with-webpack branch from f181d52 to 60bd9be Compare March 7, 2024 15:59

podliashanyk requested review from hmpf, johannaengland, lunkwill42 and stveit March 7, 2024 16:14

podliashanyk marked this pull request as ready for review March 7, 2024 16:14

podliashanyk force-pushed the build-sass-with-webpack branch from 60bd9be to f36092e Compare March 8, 2024 10:43

podliashanyk mentioned this pull request Mar 8, 2024

Use Webpack's watch mode or module replacement functionality #2871

Closed

podliashanyk added refactor dependencies Pull requests that update a dependency file frontend modernisation labels Mar 8, 2024

podliashanyk added the blocked label Mar 8, 2024

podliashanyk mentioned this pull request Oct 2, 2024

We need to replace libsass #2719

Closed

podliashanyk force-pushed the build-sass-with-webpack branch from f36092e to f7ec850 Compare October 4, 2024 11:28

podliashanyk removed the blocked label Oct 4, 2024

podliashanyk mentioned this pull request Nov 7, 2024

Optimize webpack CSS build #3167

Open

podliashanyk requested a review from lunkwill42 November 7, 2024 12:55

lunkwill42 requested changes Nov 8, 2024

View reviewed changes

doc/howto/generic-install-from-source.rst Outdated Show resolved Hide resolved

lunkwill42 requested changes Nov 8, 2024

View reviewed changes

doc/howto/generic-install-from-source.rst Outdated Show resolved Hide resolved

podliashanyk force-pushed the build-sass-with-webpack branch from adc801c to a76978a Compare November 8, 2024 11:43

podliashanyk requested a review from lunkwill42 November 8, 2024 11:46

lunkwill42 approved these changes Nov 8, 2024

View reviewed changes

lunkwill42 reviewed Nov 8, 2024

View reviewed changes

changelog.d/2849.changed.md Outdated Show resolved Hide resolved

podliashanyk linked an issue Nov 8, 2024 that may be closed by this pull request

We need to replace libsass #2719

Closed

lunkwill42 mentioned this pull request Nov 8, 2024

Remove setup.py once and for all #3176

Merged

podliashanyk added 3 commits November 12, 2024 14:40

Add make commands for building css from sass via webpack

3ad9018

podliashanyk force-pushed the build-sass-with-webpack branch 2 times, most recently from c39cd60 to e1cebe3 Compare November 12, 2024 13:49

podliashanyk and others added 7 commits November 12, 2024 14:58

Switch to using sassbuild and sasswatch commands in docker

3c372d2

Use sassbuild command in tests

988707e

Also whitelists make cmd for testing

Remove build_sass from setup.py

d53016d

Remove libsass dependencies

a8fb8e0

Make build system include everything in the static directory

c3b23d1

Co-authored-by: Morten Brekkevold <morten.brekkevold@sikt.no>

Update existing docs and add new docs

ecff385

* Updates docs about sass-watcher process in docker * Adds docs about hacking CSS * Adds docs on how to build CSS from Sass when building NAV from source

Update changelog

19d7c58

podliashanyk force-pushed the build-sass-with-webpack branch from e1cebe3 to 19d7c58 Compare November 12, 2024 13:58

podliashanyk merged commit 9245694 into master Nov 12, 2024

podliashanyk deleted the build-sass-with-webpack branch November 12, 2024 14:11

Conversation

podliashanyk commented Feb 29, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Implemented changes:

Further work:

Uh oh!

codecov bot commented Feb 29, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

github-actions bot commented Mar 5, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Test results

Uh oh!

sonarqubecloud bot commented Mar 5, 2024

Quality Gate passed

Uh oh!

hmpf commented Mar 8, 2024

Uh oh!

podliashanyk commented Mar 8, 2024

Uh oh!

sonarqubecloud bot commented Oct 4, 2024

Quality Gate passed

Uh oh!

github-actions bot commented Oct 4, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦙 MegaLinter status: ✅ SUCCESS

Uh oh!

lunkwill42 commented Oct 14, 2024

Uh oh!

lunkwill42 commented Oct 14, 2024

Uh oh!

podliashanyk commented Nov 7, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

podliashanyk commented Nov 7, 2024

Uh oh!

lunkwill42 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

lunkwill42 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

sonarqubecloud bot commented Nov 12, 2024

Quality Gate passed

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

podliashanyk commented Feb 29, 2024 •

edited

Loading

codecov bot commented Feb 29, 2024 •

edited

Loading

github-actions bot commented Mar 5, 2024 •

edited

Loading

github-actions bot commented Oct 4, 2024 •

edited

Loading

podliashanyk commented Nov 7, 2024 •

edited

Loading