Bug #1771559 “error while loading icon with pyscss 1.3.5 or late...” : Bugs : OpenStack Dashboard (Horizon)

Revision history for this message

chrisren (chrisren) wrote on 2018-09-01:

#1

This happens to my material themes when horizon compress `/var/lib/openstack-dashboard/static/horizon/lib/mdi/scss/_icons.scss ` while placing icon content for example 'f101' as 'xf101' instead of the normal one '\f101'

Revision history for this message

chrisren (chrisren) wrote on 2018-09-01:

#2

problem solved. This problem cause by pyScss==1.3.5 and after I downgrade pyScss to 1.3.4, material icons content are being concated fine.

chrisren (chrisren) on 2018-09-02

tags:

added: material

Revision history for this message

Corey Bryant (corey.bryant) wrote on 2018-10-05:

#3

Hi Julien and chrisren,

Thank you for reporting this and helping to make Ubuntu better.

I believe this is limited to the Ubuntu package since upstream sets the upper constraint of pyscss to 1.3.4:

https://github.com/openstack/requirements/blob/stable/queens/upper-constraints.txt
https://github.com/openstack/requirements/blob/stable/rocky/upper-constraints.txt

In Ubuntu, we have the following for queens(bionic) and rocky(cosmic):

python-pyscss | 1.3.5-2build2 | bionic
python-pyscss | 1.3.5-2build3 | cosmic

This is going to make it tricky to fix this as we can't move backward at this point. If by any chance there is an upstream patch that we can apply to the 1.3.5 python-pyscss package versions to fix this then that is a route we can take. Or perhaps this is something that needs to be fixed in upstream openstack-dashboard? If that is the case we can also backport an upstream fix the openstack-dashboard package.

If you have any insight on any of these options please let us know!

Thanks,
Corey

Revision history for this message

Launchpad Janitor (janitor) wrote on 2018-11-22:

#4

Status changed to 'Confirmed' because the bug affects multiple users.

Changed in python-pyscss (Ubuntu):
status:	New → Confirmed

Akihiro Motoki (amotoki) on 2018-11-26

summary:

- error while loading icon
+ error while loading icon with pyscss 1.3.5

Revision history for this message

Walter (wdoekes) wrote on 2019-10-29: Re: error while loading icon with pyscss 1.3.5

#5

Download full text (3.5 KiB)

$ pip freeze | grep pyScss
pyScss==1.3.4

$ python -m scss --style compact xstatic/pkg/mdi/data/scss/materialdesignicons.scss 2>&1 | uniq -c | head -n 10
   1650 ERROR: Function not found: function-exists:1
      1 @font-face { font-family: 'Material Design Icons'; src: url('../fonts/materialdesignicons-webfont.eot?v=1.6.50'); src: url('../fonts/materialdesignicons-webfont.eot?#iefix&v=1.6.50') format('embedded-opentype'), url('../fonts/materialdesignicons-webfont.woff2?v=1.6.50') format('woff2'), url('../fonts/materialdesignicons-webfont.woff?v=1.6.50') format('woff'), url('../fonts/materialdesignicons-webfont.ttf?v=1.6.50') format('truetype'), url('../fonts/materialdesignicons-webfont.svg?v=1.6.50#materialdesigniconsregular') format('svg'); font-weight: normal; font-style: normal; }
      1 .mdi { display: inline-block; font: normal normal normal 24px / 1 'Material Design Icons'; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); }
      1 .mdi-access-point:before { content: "\F002"; }
      1
      1 .mdi-access-point-network:before { content: "\F003"; }
      1
      1 .mdi-account:before { content: "\F004"; }
      1
      1 .mdi-account-alert:before { content: "\F005"; }

$ pip freeze | grep pyScss
pyScss==1.3.5

$ python -m scss --style compact xstatic/pkg/mdi/data/scss/materialdesignicons.scss 2>&1 | uniq -c | head -n 10
      1 @font-face { font-family: 'Material Design Icons'; src: url('../fonts/materialdesignicons-webfont.eot?v=1.6.50'); src: url('../fonts/materialdesignicons-webfont.eot?#iefix&v=1.6.50') format('embedded-opentype'), url('../fonts/materialdesignicons-webfont.woff2?v=1.6.50') format('woff2'), url('../fonts/materialdesignicons-webfont.woff?v=1.6.50') format('woff'), url('../fonts/materialdesignicons-webfont.ttf?v=1.6.50') format('truetype'), url('../fonts/materialdesignicons-webfont.svg?v=1.6.50#materialdesigniconsregular') format('svg'); font-weight: normal; font-style: normal; }
      1
      1 .mdi { display: inline-block; font: normal normal normal 24px / 1 'Material Design Icons'; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); }
      1
      1 .mdi-access-point:before { content: "xF002"; }
      1
      1 .mdi-access-point-network:before { content: "xF003"; }
      1
      1 .mdi-account:before { content: "xF004"; }
      1

So yes. \F004 is right, and xF004 is wrong. But those 1650 errors are wrong too.

It looks strange to me that pyScss takes the path of the existing function when it doesn't exist. (1.3.4 said 'function-exist' doesn't exists, and then took that path, see patch below).

This may also have been a fix that would work for 1.3.4 and 1.3.5:

$ diff -pu xstatic/pkg/mdi/data/scss/_functions.scss{.orig,}
--- xstatic/pkg/mdi/data/scss/_functions.scss.orig 2019-10-29 16:27:09.640420707 +0100
+++ xstatic/pkg/mdi/data/scss/_functions.scss 2019-10-29 16:27:24.256440797 +0100
@@ -1,14 +1,5 @@
@function char($character-code) {
- @if function-exists("selector-append") {
- @return unquote("\"\\#{$character...

$ pip freeze | grep pyScss
pyScss==1.3.4

$ python -m scss --style compact xstatic/pkg/mdi/data/scss/materialdesignicons.scss 2>&1 | uniq -c | head -n 10
   1650 ERROR: Function not found: function-exists:1
      1 @font-face { font-family: 'Material Design Icons'; src: url('../fonts/materialdesignicons-webfont.eot?v=1.6.50'); src: url('../fonts/materialdesignicons-webfont.eot?#iefix&v=1.6.50') format('embedded-opentype'), url('../fonts/materialdesignicons-webfont.woff2?v=1.6.50') format('woff2'), url('../fonts/materialdesignicons-webfont.woff?v=1.6.50') format('woff'), url('../fonts/materialdesignicons-webfont.ttf?v=1.6.50') format('truetype'), url('../fonts/materialdesignicons-webfont.svg?v=1.6.50#materialdesigniconsregular') format('svg'); font-weight: normal; font-style: normal; }
      1 .mdi { display: inline-block; font: normal normal normal 24px / 1 'Material Design Icons'; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); }
      1 .mdi-access-point:before { content: "\F002"; }
      1 
      1 .mdi-access-point-network:before { content: "\F003"; }
      1 
      1 .mdi-account:before { content: "\F004"; }
      1 
      1 .mdi-account-alert:before { content: "\F005"; }

$ pip freeze | grep pyScss
pyScss==1.3.5

$ python -m scss --style compact xstatic/pkg/mdi/data/scss/materialdesignicons.scss 2>&1 | uniq -c | head -n 10
      1 @font-face { font-family: 'Material Design Icons'; src: url('../fonts/materialdesignicons-webfont.eot?v=1.6.50'); src: url('../fonts/materialdesignicons-webfont.eot?#iefix&v=1.6.50') format('embedded-opentype'), url('../fonts/materialdesignicons-webfont.woff2?v=1.6.50') format('woff2'), url('../fonts/materialdesignicons-webfont.woff?v=1.6.50') format('woff'), url('../fonts/materialdesignicons-webfont.ttf?v=1.6.50') format('truetype'), url('../fonts/materialdesignicons-webfont.svg?v=1.6.50#materialdesigniconsregular') format('svg'); font-weight: normal; font-style: normal; }
      1 
      1 .mdi { display: inline-block; font: normal normal normal 24px / 1 'Material Design Icons'; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); }
      1 
      1 .mdi-access-point:before { content: "xF002"; }
      1 
      1 .mdi-access-point-network:before { content: "xF003"; }
      1 
      1 .mdi-account:before { content: "xF004"; }
      1

So yes. \F004 is right, and xF004 is wrong. But those 1650 errors are wrong too.

It looks strange to me that pyScss takes the path of the existing function when it doesn't exist. (1.3.4 said 'function-exist' doesn't exists, and then took that path, see patch below).

This may also have been a fix that would work for 1.3.4 and 1.3.5:

$ diff -pu xstatic/pkg/mdi/data/scss/_functions.scss{.orig,}
--- xstatic/pkg/mdi/data/scss/_functions.scss.orig	2019-10-29 16:27:09.640420707 +0100
+++ xstatic/pkg/mdi/data/scss/_functions.scss	2019-10-29 16:27:24.256440797 +0100
@@ -1,14 +1,5 @@
 @function char($character-code) {
-    @if function-exists("selector-append") {
-        @return unquote("\"\\#{$character-code}\"");
-    }
-
-    @if "\\#{'x'}" == "\\x" {
-        @return str-slice("\x", 1, 1) + $character-code;
-    }
-    @else {
-        @return #{"\"\\"}#{$character-code + "\""};
-    }
+    @return unquote("\"\\#{$character-code}\"");
 }
 
 @function mdi($name) {

I cannot speak for the validity of the scss/sass syntax and whether or not the undefined function should've been run. Not my cup of tea.

Walter Doekes
OSSO B.V.

Revision history for this message

Walter (wdoekes) wrote on 2019-10-29:

#6

And for cross-reference, the ticket by ~chrisren on Kronuz/pyScss:
https://github.com/Kronuz/pyScss/issues/375

OpenStack Infra (hudson-openstack) on 2020-03-24

Changed in horizon:
assignee:	nobody → Akihiro Motoki (amotoki)
status:	New → In Progress

Revision history for this message

OpenStack Infra (hudson-openstack) wrote on 2020-03-25: Fix merged to horizon (master)

#7

Reviewed: https://review.opendev.org/714274
Committed: https://git.openstack.org/cgit/openstack/horizon/commit/?id=ddc52a7405f0be38629f665d24bcf75022ce0018
Submitter: Zuul
Branch: master

commit ddc52a7405f0be38629f665d24bcf75022ce0018
Author: Ivan Kolodyazhny <email address hidden>
Date: Sat Mar 21 19:17:31 2020 +0200

Fix Horizon to work with the latest pyScss

pyScss v1.3.5 implements 'function-exists' function now. It breaks
MaterialDesign-Webfont [1] which is provided by xstatic-mdi package.

This patch re-implements FontAwesome-based styles for Material theme to
not use MaterialDesign-Webfont classes.

Another advantage of this improvement is we can use the latest pyScss
(once it'll be released) and update xstatic-mdi too.

[1] https://github.com/Templarian/MaterialDesign-Webfont/issues/19

    Closes-Bug: #1771559
    Depends-On: https://review.opendev.org/714450
    Change-Id: Ia9e1e807591d4428f585177f521d4cb9d463b917

Changed in horizon:
status:	In Progress → Fix Released

Revision history for this message

OpenStack Infra (hudson-openstack) wrote on 2020-03-25: Fix included in openstack/horizon 18.2.0

#8

This issue was fixed in the openstack/horizon 18.2.0 release.

Revision history for this message

Akihiro Motoki (amotoki) wrote on 2020-03-30: Re: error while loading icon with pyscss 1.3.5

#9

it turns out that https://review.opendev.org/714274 is a partial fix.
we still see a problem in the material design theme, for example https://pasteboard.co/J1uIQVW.png

Changed in horizon:
status:	Fix Released → Confirmed
assignee:	Akihiro Motoki (amotoki) → nobody
summary:	- error while loading icon with pyscss 1.3.5 + error while loading icon with pyscss 1.3.5 or later
Changed in horizon:
importance:	Undecided → High

Ivan Kolodyazhny (e0ne) on 2020-04-01

Changed in horizon:
assignee:	nobody → Ivan Kolodyazhny (e0ne)

Revision history for this message

OpenStack Infra (hudson-openstack) wrote on 2020-04-14: Fix proposed to horizon (master)

#10

Fix proposed to branch: master
Review: https://review.opendev.org/719777

Changed in horizon:
status:	Confirmed → In Progress

Revision history for this message

OpenStack Infra (hudson-openstack) wrote on 2020-04-15: Fix merged to horizon (master)

#11

Reviewed: https://review.opendev.org/719777
Committed: https://git.openstack.org/cgit/openstack/horizon/commit/?id=74d76e900f28e88190a35bff921c56349077ca53
Submitter: Zuul
Branch: master

commit 74d76e900f28e88190a35bff921c56349077ca53
Author: Ivan Kolodyazhny <email address hidden>
Date: Tue Apr 14 12:19:29 2020 +0300

Implement 'selector-append' sass function

    'selector-append' is used in xstatic-mdi [1] but it isn't supported by
    the latest pyScss.
    As a workaround we use 'append-selector' function from pyScss until
    'selector-append' will be supported.

This patch also reverts Ia9e1e807591d4428f585177f521d4cb9d463b917
because we don't need it anymore.

[1] https://opendev.org/openstack/xstatic-mdi/src/tag/1.6.50.2/xstatic/pkg/mdi/data/scss/_functions.scss#L2

Change-Id: Ib8ca0fcfe339cb68d6a157a00cbc2d34854ef4c5
Closes-Bug: #1771559

Changed in horizon:
status:	In Progress → Fix Released

Revision history for this message

OpenStack Infra (hudson-openstack) wrote on 2020-04-20: Fix proposed to horizon (stable/train)

#12

Fix proposed to branch: stable/train
Review: https://review.opendev.org/721138

Revision history for this message

OpenStack Infra (hudson-openstack) wrote on 2020-04-23: Fix merged to horizon (stable/train)

#13

Reviewed: https://review.opendev.org/721138
Committed: https://git.openstack.org/cgit/openstack/horizon/commit/?id=f26c88721614d1c25bcd26740b8fb20a7a97bd05
Submitter: Zuul
Branch: stable/train

commit f26c88721614d1c25bcd26740b8fb20a7a97bd05
Author: Ivan Kolodyazhny <email address hidden>
Date: Tue Apr 14 12:19:29 2020 +0300

Implement 'selector-append' sass function

    'selector-append' is used in xstatic-mdi [1] but it isn't supported by
    the latest pyScss.
    As a workaround we use 'append-selector' function from pyScss until
    'selector-append' will be supported.

This patch also reverts Ia9e1e807591d4428f585177f521d4cb9d463b917
because we don't need it anymore.

[1] https://opendev.org/openstack/xstatic-mdi/src/tag/1.6.50.2/xstatic/pkg/mdi/data/scss/_functions.scss#L2

    stable/train backport:
    A release note on the known issue is now removed as it is fixed
    by this commit. Instead, a note on the workaround by this commit
    is added.

    Change-Id: Ib8ca0fcfe339cb68d6a157a00cbc2d34854ef4c5
    Closes-Bug: #1771559
    (cherry picked from commit 74d76e900f28e88190a35bff921c56349077ca53)

tags:

added: in-stable-train

Revision history for this message

OpenStack Infra (hudson-openstack) wrote on 2020-04-23: Fix proposed to horizon (stable/stein)

#14

Fix proposed to branch: stable/stein
Review: https://review.opendev.org/722533

Revision history for this message

OpenStack Infra (hudson-openstack) wrote on 2020-04-27: Fix merged to horizon (stable/stein)

#15

Reviewed: https://review.opendev.org/722533
Committed: https://git.openstack.org/cgit/openstack/horizon/commit/?id=d4028b97db87f54ba2c43268b5adccfa497ed594
Submitter: Zuul
Branch: stable/stein

commit d4028b97db87f54ba2c43268b5adccfa497ed594
Author: Ivan Kolodyazhny <email address hidden>
Date: Tue Apr 14 12:19:29 2020 +0300

Implement 'selector-append' sass function

    'selector-append' is used in xstatic-mdi [1] but it isn't supported by
    the latest pyScss.
    As a workaround we use 'append-selector' function from pyScss until
    'selector-append' will be supported.

This patch also reverts Ia9e1e807591d4428f585177f521d4cb9d463b917
because we don't need it anymore.

[1] https://opendev.org/openstack/xstatic-mdi/src/tag/1.6.50.2/xstatic/pkg/mdi/data/scss/_functions.scss#L2

    stable/train backport:
    A release note on the known issue is now removed as it is fixed
    by this commit. Instead, a note on the workaround by this commit
    is added.

    Change-Id: Ib8ca0fcfe339cb68d6a157a00cbc2d34854ef4c5
    Closes-Bug: #1771559
    (cherry picked from commit 74d76e900f28e88190a35bff921c56349077ca53)
    (cherry picked from commit f26c88721614d1c25bcd26740b8fb20a7a97bd05)

tags:

added: in-stable-stein

Revision history for this message

Akihiro Motoki (amotoki) wrote on 2021-02-18:

#16

It turns out the previous fixes are not sufficient.

Changed in horizon:
status:	Fix Released → In Progress

Revision history for this message

Akihiro Motoki (amotoki) wrote on 2021-02-18:

#17

https://review.opendev.org/c/openstack/horizon/+/730288 is trying to fix it.

Revision history for this message

Akihiro Motoki (amotoki) wrote on 2021-03-02:

#18

https://review.opendev.org/c/openstack/horizon/+/730288 has been merged.

Changed in horizon:
status:	In Progress → Fix Released

Revision history for this message

OpenStack Infra (hudson-openstack) wrote on 2021-03-15: Fix included in openstack/horizon 19.1.0

#19

This issue was fixed in the openstack/horizon 19.1.0 release.

Revision history for this message

OpenStack Infra (hudson-openstack) wrote on 2021-04-16: Fix merged to horizon (stable/ussuri)

#20

Reviewed: https://review.opendev.org/c/openstack/horizon/+/781803
Committed: https://opendev.org/openstack/horizon/commit/ec5261cce58b7ee84f1fa6afa54a52738b81bfae
Submitter: "Zuul (22348)"
Branch: stable/ussuri

commit ec5261cce58b7ee84f1fa6afa54a52738b81bfae
Author: Ivan Kolodyazhny <email address hidden>
Date: Fri May 22 13:02:46 2020 +0300

Fix Material theme to work with any combination of pyScss and MDI icons

    ':before' class doesn't work as expected with current versions of
    xstatic-mdi and PyScss. It's a temporary workaround with copy ':before'
    styles from MDI directly into the Material theme.

    Closes-Bug: #1771559
    Co-Authored-By: Akihiro Motoki <email address hidden>
    Change-Id: I969ad70065c580ba90bb0a050c7a9cf242d805ec
    (cherry picked from commit f3bfa383417b270fce384fee18c5cb470cec15f7)

tags:

added: in-stable-ussuri

Revision history for this message

OpenStack Infra (hudson-openstack) wrote on 2021-04-16: Fix merged to horizon (stable/victoria)

#21

Reviewed: https://review.opendev.org/c/openstack/horizon/+/781801
Committed: https://opendev.org/openstack/horizon/commit/06902eb310e8e61def2030f3cc81da80c7a40494
Submitter: "Zuul (22348)"
Branch: stable/victoria

commit 06902eb310e8e61def2030f3cc81da80c7a40494
Author: Ivan Kolodyazhny <email address hidden>
Date: Fri May 22 13:02:46 2020 +0300

Fix Material theme to work with any combination of pyScss and MDI icons

    ':before' class doesn't work as expected with current versions of
    xstatic-mdi and PyScss. It's a temporary workaround with copy ':before'
    styles from MDI directly into the Material theme.

    Closes-Bug: #1771559
    Co-Authored-By: Akihiro Motoki <email address hidden>
    Change-Id: I969ad70065c580ba90bb0a050c7a9cf242d805ec
    (cherry picked from commit f3bfa383417b270fce384fee18c5cb470cec15f7)

tags:

added: in-stable-victoria

Revision history for this message

OpenStack Infra (hudson-openstack) wrote on 2021-06-21: Change abandoned on horizon (stable/train)

#22

Change abandoned by "Marc Gariépy <email address hidden>" on branch: stable/train
Review: https://review.opendev.org/c/openstack/horizon/+/781804
Reason: If you want this to merge please restore it other i'm just abandoning to clean up since nobody seems to need this.

Revision history for this message

OpenStack Infra (hudson-openstack) wrote on 2021-06-21: Change abandoned on horizon (stable/stein)

#23

Change abandoned by "Marc Gariépy <email address hidden>" on branch: stable/stein
Review: https://review.opendev.org/c/openstack/horizon/+/781805
Reason: If you want this to merge please restore it other i'm just abandoning to clean up since nobody seems to need this.

Revision history for this message

OpenStack Infra (hudson-openstack) wrote on 2021-08-03: Fix included in openstack/horizon 18.3.4

#24

This issue was fixed in the openstack/horizon 18.3.4 release.

Revision history for this message

OpenStack Infra (hudson-openstack) wrote on 2022-01-26: Fix included in openstack/horizon 18.6.3

#25

This issue was fixed in the openstack/horizon 18.6.3 release.

OpenStack Dashboard (Horizon)

error while loading icon with pyscss 1.3.5 or later

Bug Description

Duplicates of this bug

Other bug subscribers

Remote bug watches

Affects		Status	Importance	Assigned to	Milestone
	OpenStack Dashboard (Horizon)	Fix Released	High	Ivan Kolodyazhny
	python-pyscss (Ubuntu)	Confirmed	Undecided	Unassigned