I tested this with firefox on ubuntu 18.04.

I Opened a template file and pressed F10 for get the full-screen- editor.
It looks like in the image below - not fine.

Then I applied the path and run npm install
I Opened a template file and pressed F10 for get the full-screen- editor.
It looks like in the image below - fine.

I have tested this item ✅ successfully on 1a4923f

RTC

Is there no way to do it without !important?

Is there no way to do it without !important?

The vendor css file is overriding the Joomla css for CodeMirror. As we can't alter the vendor code the only way I can think of avoid using !important is to change the order in which the css files are read, so that /media/plg_editors_codemirror/css/codemirror.min.css is read after the vendor code which ends up in a file called /media/vendor/codemirror/addon/display/fullscreen.css.

@laoneo The only way I think we can do it without important is to load the vendor CSS before our own CSS. No idea if this is possible at all.

@Scrabble96 Could you please fix the merge conflict?

Thank you.

@Scrabble96 Could you please fix the merge conflict?

Thank you.

Sorry, @roland-d I have been otherwise engaged.

Sadly, I have no idea what you mean. I have 4 commits. Two have green ticks and are presumably ok. One has an orange blob (no tool tip to explain what it means) and one has a red X, which presumably means it doesn't work. Do you want me to delete these two? If so, how do I do it? Thanks.

p.s. The post which says "Some checks were not successful" has a box which says [ Resolve conflicts (?) ] but it is greyed out for me.

@Scrabble96 No worries, thank you for getting back to this.

The red cross can be ignored for now, once you push the new changes, this will be re-checked. I do not see the orange blob :)

Do you see this:

This means you changed the file codemirror.css and the file has been changed in the 4.0-dev branch as well. From what I can tell, this file has been moved to a new location. The new location is https://github.com/joomla/joomla-cms/blob/4.0-dev/build/media_source/plg_editors_codemirror/css/codemirror.css

What needs to be done here is merge the 4.0-dev branch into your patch-1 branch. If this is too difficult, it might be easier to make a new pull request since it is only 1 file.

Thanks, @roland-d

Actually, I think I should delete that PR as subsequent conversations have said that the vendor file shouldn't be changed and that the change should be done differently. Both I and @laoneo have said that the only way to do it without important! is to load the vendor CSS before our own CSS. I have no idea how the files in the original Joomla! source code merge with vendor CSS to produce the little file that actually ends up on the websites (i.e. in this case, /media/vendor/codemirror/addon/display/fullscreen.css). See my post from 19th Jan.

p.s. this is what I see when I click my 'Commits' tab:

@Scrabble96 You are correct, we cannot change vendor files. As for the loading order I can't help either I am sorry. Based on that I will close this PR.

Ah I see you were looking at the Commits tab, I am talking about the box at the bottom of this page:

You will find this box on all open PRs but on this page it is gone now since I have closed the issue.

I have been looking at something else and came across this build file:
build/build-modules-js/compilecss.es6.js (https://github.com/joomla/joomla-cms/blob/4.0-dev/build/build-modules-js/compilecss.es6.js) and wondered if this might be where the ordering of the final CSS composition might take place. Or at least be part of the chain.

Lines 43 to 51 pull in the Joomla! CSS.
Then from line 59 it seems to pull in other files that need compiling (the exact meaning of all the code is way beyond my knowledge) but if I'm right, then moving lines 43 to 51 to after this section might ensure that the Joomla CSS is loaded after the vendor CSS.