[4.0-dev] Fixing SCSS issues with division deprecation and math.div() #35648

thednp · 2021-09-22T18:20:15Z

Pull Request for PR #35639 .

Important

This PR could be merged into [4.1-dev] as well.

Summary of Changes

The fontawesome icon library haven't marked their $fa-fw-width variable with !default, see #17482 which uses (20em / 16) expression which is deprecated in dart-sass 2.0 and also largely reported in the fontawesome issues.
Other changes in this PR also address other dart-sass issues, but we don't replace for instance 24 / 16 with math.div(24, 16) as recommended by the compiler, but with 24 * 0.0625 (which is the result of 1/16) and the reason for that is the libsass compiler still largely used and this approach is also widely adopted. I suspect scssPhp also might not have math implemented.
See this PR in fontawesome for more info. Briefly, Bootstrap core devs also continue to support libsass, so should we.

Testing Instructions

Check SASS compiler output. You should see all SCSS compiled. If the npm build is green, there is no need to test anything else.

Actual result BEFORE applying this Pull Request

The SCSS compiler just won't do division via the / (forward slash) operator, the build will simply fail
https://ci.joomla.org/joomla/joomla-cms/47599

Expected result AFTER applying this Pull Request

All SCSS files compiled successful.

Documentation Changes Required

No.

Mirror commit for 4.0-dev from joomla#35645

Co-authored-by: Tobias Zulauf <zero-24@users.noreply.github.com>

* Add a new Icon for com_tags to the quicicon module * Update administrator/language/en-GB/com_tags.ini Co-authored-by: Brian Teeman <brian@teeman.net> Co-authored-by: Brian Teeman <brian@teeman.net>

…omla#31675) * Actionlogs: Added parameter to disable relative timestamps. * Update administrator/components/com_actionlogs/config.xml Co-authored-by: Quy <quy@fluxbb.org> * Apply suggestions from code review Co-authored-by: Quy <quy@fluxbb.org> Co-authored-by: Quy <quy@fluxbb.org>

* log:logDeprecated * use new log method * new log method, improve callStack lookup * phpcs * phpcs * Check deprecation logging on boot * trigger_error everywhere * use namespaced classes

* add Joomla! Accessibility Team to the code owners * add cassiopeia * add everything in the templates

a fix for joomla#35639

thednp · 2021-09-22T18:46:23Z

@brianteeman I've completed the PR for [4.0-dev] it should be a valid build. After this merge, the same changes are required for [4.1-dev] asap. I've updated the description. Please let me know if this PR needs anything.

brianteeman · 2021-09-24T21:14:51Z

I tried to test this but in order to do so I need to be able to replicate the problem that this is fixing.

I have been unable to replicate the problem

thednp · 2021-09-25T06:16:55Z

@brianteeman it may be impossible to replicate the issue right now. The stylelint-scss basically doesn't pick on this issue, because it's more of a warning for deprecated SCSS and the build might fail once in a while, depending on when and how SASS compiler (dart-sass based) "feels" the warning should kick in.

I can try to write a step-by-step guide on how you might replicate the problem, but once "sass": "^1.32.12", goes to "sass": "^2.0.0", this will be 100% a problem for anyone trying to contribute to Joomla.

try and fork the [4.0-dev] branch into [brian-test-scss] branch
edit any SCSS file and try changing for instance 16px -> 17px, commit and see if NPM build is successful
edit 16px -> 16pe, using a wrong unit for the value, commit and see if NPM build is successful
rename a SCSS file so that the compiler cannot find it with its autoresolve capability, commit and see if NPM build is successful

I think that for a minor SCSS consistency can pass through the stylelint-scss but can trigger an entire cascade of warnings that simply stop the build process.

thednp · 2021-10-04T04:22:39Z

@brianteeman @dgrammatiko what's up with this appveyor issue?

wilsonge · 2021-10-24T16:25:40Z

I'm tempted to sit on the FA Fix until they fix upstream (it is 1.5 months out which is a bit annoying per FortAwesome/Font-Awesome#18371 ) - but saves us overriding warnings for the sake of it. Obviously the rest of the fixes are good.

thednp · 2021-10-24T20:52:29Z

Well thanks for someone finally say anything. Cheers

ghazal · 2021-11-14T13:27:11Z

The math.div issue can be resolved locally by applying (and fiddling with) the recommendations in the article mentioned earlier (https://sass-lang.com/documentation/breaking-changes/slash-div), even the fontawesome-free issue.
Obviously though, one has to wait for the official update.

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/35648.}

dgrammatiko · 2021-12-29T15:20:39Z

@wilsonge maybe you should press the green button here?

chmst · 2022-01-31T16:17:29Z

@thednp could you please have a look here and resolve conflicts?

thednp · 2022-01-31T16:21:29Z

@chmst unfortunately this is too late for me to do anything, I don't have write access here anymore.

brianteeman · 2022-01-31T16:27:08Z

You never did - that message is related to who can merge the file into core.

thednp · 2022-01-31T16:31:06Z

Not true, if changes after my PR would have been into less than 3 files, I could resolve conflicts. I used to do that for the package-lock.json for the color-picker PR. Both resolve cases are for you to resolve.

dgrammatiko · 2022-01-31T21:48:03Z

@thednp @brianteeman @chmst I could rebase this PR for 4.1 but are you willing to test it so it could be finally merged?

brianteeman · 2022-01-31T21:49:53Z

@dgrammatiko I took a look at doing it but the 8 files here are only a small number of the ones that need updating

dgrammatiko · 2022-01-31T21:51:09Z

@brianteeman you mean there are still deprecation notices after applying these changes?

brianteeman · 2022-01-31T21:56:20Z

Deleted my post as its the same thing I posted earlier and I think it might have been my fault

brianteeman · 2022-01-31T21:59:04Z

actually no idea. The error report AFTER my version of this pr is the same as #35648 (comment) from september

thednp · 2022-01-31T21:59:16Z

@dgrammatiko IDK man, I'm out of touch with this lately. I would say go ahead and if you get more deprecation notice, have a look at my changes and apply same methods.

dgrammatiko · 2022-01-31T22:51:23Z

#36906 should fix this but:

updates font awesomeme to 6.0.0-beta3
localises the choices 2 css files (till the changes are done upstream)

HLeithner · 2022-06-27T13:07:18Z

This pull request has automatically rebased to 4.2-dev.

dgrammatiko · 2022-06-27T16:17:29Z

This was already fixed with another pr

Quy · 2022-06-27T16:30:28Z

Fixed per #37255

thednp and others added 16 commits September 22, 2021 20:37

[4.0-dev] Fixing SCSS issues with division deprecation

b51d0f6

Mirror commit for 4.0-dev from joomla#35645

Update fontawesome.scss

2c5339b

[api][com_users] add groups and levels entrypoint

c792dc2

[4.1] Extend 2FA Enforcement option to select usergroups (joomla#30522)

9e4716c

bump 4.1-dev to 4.1 in the version dile

9dbd23b

[4.1] Add prebuilt packages for 4.1-dev (joomla#30845)

44247d3

Co-authored-by: Tobias Zulauf <zero-24@users.noreply.github.com>

Add drone signature

c762d4c

Sign drone

43132f5

Update drone key

7a6bc58

[4.1] A new Icon for com_tags to the quickicon module (joomla#32223)

6e57740

* Add a new Icon for com_tags to the quicicon module * Update administrator/language/en-GB/com_tags.ini Co-authored-by: Brian Teeman <brian@teeman.net> Co-authored-by: Brian Teeman <brian@teeman.net>

[4.1] Log deprecated only when explicitly requested (joomla#31143)

65d6815

* log:logDeprecated * use new log method * new log method, improve callStack lookup * phpcs * phpcs * Check deprecation logging on boot * trigger_error everywhere * use namespaced classes

Allow Save As Copy Article In The Frontend (joomla#35378)

79a017a

[4.1] Add Joomla! Accessibility Team to the code owners (joomla#35629)

8c76352

* add Joomla! Accessibility Team to the code owners * add cassiopeia * add everything in the templates

Staging...

9f0455f

a fix for joomla#35639

Attempting to fix

c811a52

joomla-cms-bot added NPM Resource Changed This Pull Request can't be tested by Patchtester PR-4.0-dev labels Sep 22, 2021

thednp added 6 commits September 22, 2021 21:35

Update _layout.scss

438c311

Update _media-infobar.scss

f12004d

Update _media-tree.scss

81961a2

Update joomla-fontawesome.scss

47c6cf5

Update template.scss

bd86417

Update _variables.scss

a87033f

thednp mentioned this pull request Sep 25, 2021

Update _minicolors.scss testing wrong value #35663

Closed

dgrammatiko mentioned this pull request Sep 25, 2021

[4.0] Update SASS to 1.42 #35666

Merged

thednp mentioned this pull request Sep 25, 2021

Update _minicolors.scss testing SCSS compiler #35667

Closed

brianteeman mentioned this pull request Sep 29, 2021

[4.0] npm fails to compile scss #35698

Closed

Merge remote-tracking branch 'upstream/4.0-dev' into 4.0-dev-scss-fixes

9abe675

richard67 mentioned this pull request Oct 30, 2021

[4.0] npm run build:css #35934

Closed

dgrammatiko mentioned this pull request Dec 29, 2021

Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0 #36477

Closed

chmst changed the base branch from 4.0-dev to 4.1-dev January 31, 2022 16:16

chmst added Conflicting Files PR-4.1-dev and removed PR-4.0-dev labels Jan 31, 2022

HLeithner changed the base branch from 4.1-dev to 4.2-dev June 27, 2022 13:07

Quy closed this Jun 27, 2022

joomla-cms-bot added the PR-4.2-dev label Jun 27, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[4.0-dev] Fixing SCSS issues with division deprecation and math.div() #35648

[4.0-dev] Fixing SCSS issues with division deprecation and math.div() #35648

thednp commented Sep 22, 2021 •

edited

thednp commented Sep 22, 2021

brianteeman commented Sep 24, 2021

thednp commented Sep 25, 2021

thednp commented Oct 4, 2021

wilsonge commented Oct 24, 2021

thednp commented Oct 24, 2021

ghazal commented Nov 14, 2021

dgrammatiko commented Dec 29, 2021

chmst commented Jan 31, 2022

thednp commented Jan 31, 2022

brianteeman commented Jan 31, 2022

thednp commented Jan 31, 2022 •

edited

dgrammatiko commented Jan 31, 2022

brianteeman commented Jan 31, 2022

dgrammatiko commented Jan 31, 2022

brianteeman commented Jan 31, 2022

brianteeman commented Jan 31, 2022 •

edited

thednp commented Jan 31, 2022

dgrammatiko commented Jan 31, 2022

HLeithner commented Jun 27, 2022

dgrammatiko commented Jun 27, 2022

Quy commented Jun 27, 2022

[4.0-dev] Fixing SCSS issues with division deprecation and math.div() #35648

[4.0-dev] Fixing SCSS issues with division deprecation and math.div() #35648

Conversation

thednp commented Sep 22, 2021 • edited

Important

Summary of Changes

Testing Instructions

Actual result BEFORE applying this Pull Request

Expected result AFTER applying this Pull Request

Documentation Changes Required

thednp commented Sep 22, 2021

brianteeman commented Sep 24, 2021

thednp commented Sep 25, 2021

thednp commented Oct 4, 2021

wilsonge commented Oct 24, 2021

thednp commented Oct 24, 2021

ghazal commented Nov 14, 2021

dgrammatiko commented Dec 29, 2021

chmst commented Jan 31, 2022

thednp commented Jan 31, 2022

brianteeman commented Jan 31, 2022

thednp commented Jan 31, 2022 • edited

dgrammatiko commented Jan 31, 2022

brianteeman commented Jan 31, 2022

dgrammatiko commented Jan 31, 2022

brianteeman commented Jan 31, 2022

brianteeman commented Jan 31, 2022 • edited

thednp commented Jan 31, 2022

dgrammatiko commented Jan 31, 2022

HLeithner commented Jun 27, 2022

dgrammatiko commented Jun 27, 2022

Quy commented Jun 27, 2022

thednp commented Sep 22, 2021 •

edited

thednp commented Jan 31, 2022 •

edited

brianteeman commented Jan 31, 2022 •

edited