Grunt task complains about !important in styles.css

[revosw]

When grunt runs the stylelint:css task, it complains about these lines

moodle-mod_jazzquiz/styles.css

Lines 461 to 464 in dcaa2ff

	.questionlist li .controls .name .MathJax_Display {
	text-align: left !important;
	margin: 0 !important;
	}

[revosw]

Is a css preprocessor like sass/less or anything involved in producing this file?

[andstor]

No, that file is handwritten. If the !important is actually necessarily I don't know. If the CI complains about it, it might be favorable to check if the rule can be mitigated. Alternatively, the warning could be depressed.

[hgeorgsch]

@sebastsg Do you have a quick comment on !important in JazzQuiz CSS?

My guess is that it has been too hard to narrow down the tag/class definition to override what should be overridden, and !important provides a quick fix.

[sebastsg]

@hgeorgsch I never add !important for fun, so I'm pretty sure it's to override MathJax. I'll take a look soon.

[hgeorgsch]

I thought it should be possible to get it right with a narrower class definition, just bloody hard; that has been my experience so far. But yes, since the last class is MathJax_Display, I am sure that is the reason.

Oddly, when I check the source of an actual JazzQuiz page, I find only one or two CSS files and they do not show any other definitions for MathJax_Display. May this be out of date? Or is it a tag attribute style which has to be overridden? I did not have the chance to test with a full student view.

[jorgenfinsveen]

Tried removing !important from the CSS and reload the page. Did not seem to affect the style, so I don't believe we need to use !important anymore. Tested by comparing two containers where one container hosted Jazzquiz with the !important statement in the CSS, and one without. They were identical (tested this at different resolutions as well).

Screenshots from pages which uses the CSS statements in question:

The list on the left is target for the CSS block. It doesn't seem to be affected after removing !important

Dropdown-menu is also target for the CSS, but has not changed after removing !important

I also looked for elements of the MathJax_Display class by using inspect element, but I could not find any mentions of the class anywhere. Also checked the source code of Jazzquiz and the source code of Moodle version 4.1 and version 4.3, and the only place where the phrase MathJax_Display is mentioned is in this CSS file. As @hgeorgsch mentioned, it is likely that MathJax_Display is outdated.

All in all, I don't think we need !important in the CSS anymore.