[#41566] - [5.0] Fix broken SCSS compilation
- Closed
- 3 Sep 2023
- Medium
- Build: 5.0-dev
- # 41566
- Diff
- richard67:5.0-dev-fix-broken-scss
User tests: Successful: Unsuccessful:
Pull Request for https://github.com/joomla/joomla-cms/pull/41409/files#r1314271898 .
Summary of Changes
Fix SCSS compilation which was broken with #41409 .
Maybe it needs more to be fixed, so let's wait for drone.
Testing Instructions
Run npm ci or check the NPM step on drone.
Actual result BEFORE applying this Pull Request
Error: Undefined variable.
╷
12 │ $form-select-background-dark: $form-select-indicator-dark no-repeat right center / $form-select-bg-size; // Used so we can have multiple background elements (e.g. arrow and feedback icon)
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
build/media_source/templates/administrator/atum/scss/_variables-dark.scss 12:36 @import
Expected result AFTER applying this Pull Request
Success.
Link to documentations
Please select:
-
Documentation link for docs.joomla.org:
-
No documentation changes for docs.joomla.org needed
-
Pull Request link for manual.joomla.org:
-
No documentation changes for manual.joomla.org needed
joomla-cms-bot
- | Category | ⇒ | Repository NPM Change |
| Status | New | ⇒ | Pending |
NPM still fails. It seems the $form-select-indicator-dark and possibly others are not defined.
This si wrong. You said the variable is not defined and then still use the variable
| Status | Pending | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2023-09-03 15:03:48 |
| Closed_By | ⇒ | richard67 | |
| Labels |
Added:
NPM Resource Changed
PR-5.0-dev
|
||
This si wrong. You said the variable is not defined and then still use the variable
I know. It was a test if there is a syntax error. Closing as it seems to be wrong also regarding the purpose of that CSS, and hoping @dgrammatiko will be available to check and provide a fix.
Need to swap lines:
$form-select-indicator-dark: url("../images/select-bg-dark.svg");
$form-select-indicator-rtl-dark: url("../images/select-bg-rtl-dark.svg");
$form-select-bg-dark: var(--template-bg-dark);
$form-select-background-dark: $form-select-indicator-dark no-repeat right center / $form-select-bg-size; // Used so we can have multiple background elements (e.g. arrow and feedback icon)
$form-select-background-rtl-dark: $form-select-indicator-rtl-dark no-repeat left center / $form-select-bg-size; // Used so we can have multiple background elements (e.g. arrow and feedback icon)However there some more issues
Try using a css var like I do in the muta: https://github.com/dgrammatiko/muta/blob/7b0137ef18601947f2659291b86e8639b6a93cd8/media_source/templates/administrator/muta/scss/_root.scss#L140-L141
@dgrammatiko Could you check if it needs more to be fixed from PR #41409 ?