External anymod CSS File wanted - for 15 Mods used within the same project

Questions
#1

I am using one and the same mod 15 times within the same project. It is a simple Headline-Element with some text inside.

My goal is to manage the CSS for those 15 mods within one central place. Currently I am managing 15 css-instances separately inside each of those 15 mods. This also means I need to do each css-adjustment 15 times!

I am aware I can paste the css into an external stylesheet and bind that stylesheet into each of the 15 mods.

But what I would really like to do is to manage that external css-file inside anymod.

Therefore, my question is if there is a way to create an external CSS-file within anymod and then reference my 15 Mods towards that external Anymod-CSS-file?

I wonder if I can create a separate mod to merely manage barebone CSS inside of it. Next I would like to provide a reference-path towards that “external” anymod-Css-“file” for each of my 15 mods.

Basically, I am looking for a css-file to manage and edit the CSS for a larger number of Mods within the same project , and without having to store that CSS-file on my server.

Is there a siutable way to create and manage such a css-file with anymod?

#2

When you say you are using the “same” mod 15 times, do you mean literally the same one? If that is the case, you would be able to add your styling in the CSS section of the mod, and it will be applied anywhere the mod is displayed.

If not, it sounds like you would want a project-wide CSS file that automatically applies to all mods. If that is the case, would you want the styles to apply only to mods, or to the entire page (including non-mods). For example, if you specified a font family in that CSS file, would you want it to affect other parts of your web page?

#3

my 15 Mods have the same structure and make use of identical CSS, but they entertain different Text-Content in their Headline.
Your question regarding the CSS-Availability is a good one, I have never thought about that yet. I feel I will most likely merely need the CSS for Mods only. I cannot think of a usecase where I would need to additionally apply the CSS to non Mods also.

On the other heand, I would not mind to connect towards a CSS-File via binding an anymod-URL into a link-Tag within my documents Head-section. That would make the styles globally available .

My main intention is to approach the styling for several mods from from one CSS File. WHILE the CSS shall be editable via AnyMod . I aim to be able to edit the external css-file from within anyMod (and not from my server).

#4

one globally available css file would still be superb to have

#5

We have this on our roadmap, but since it is pretty easy to do without AnyMod and then import, it hasn’t been highest priority. We do plan to implement it eventually though!

#6

Hi Tyler,

Currently those 15 Mods have almost no CSS in the mods at all.
I am managing the CSS in a separate File on my local PC.
I will be uploading that CSS-File to my Server via FTP each time after I updated the content of that file.

It would be easier to manage my CSS directly within anymod.

I wonder if the following approach might be a workaround-solution to accieve my goal:

Question:
Is there a way for me to manually deactivate the the [MOD-Name]- Selector(s) from beeing added to all CSS-Rules inside of a specific mod? That way I might be able to make sure the CSS will apply to more than merely that specific mod. This would serve my needs.

The CSS might not nessesarily be applied to the head-section. I might want to merely inject it as the first Mod below the starting-Body-Tag instead. Provided I can somehow get rid of the [MOD-Name]- Selector(s), that might already be all I need to run the CSS-Rules for all 15 Mods only once --> a separate Mod would the contain the CSS for all of those 15 Mods in need of that identical CSS-Rules.

This would only work if I was able to undo the [MOD-Name]- Selector(s) .

So: If there is an option I might use to disable those [MOD-Name]- Selector(s) from beeing applied to the CSS for a Mod, then let me know :wink:

While I am writing my reply, I started to dwell on using the JS-pane to dynamically change the Style-Rules for that MOD by manipulating all relevant style-elements after pageload. But that really totally feels like an overkill of cause.

If you have an idea how to get rid of those [MOD-Name]- Selector(s) effectively, glad if you can provide me with a hint ; )

1 Like
#7

Thanks for all of your feedback. We understand the use case, and it’s a good idea, so it’s on our (longer term) roadmap!

#8

We’ve introduced a way to accomplish this: you can now add styles in a mod that will apply to the entire page using @at-root, which is a SCSS property.

Here is an example: https://anymod.com/mod/at-root-demo-oroalb

1 Like
#9

This is so supercool!

Very happy about that!

Great, I will implement this today on some skysails Projects -

I will implement it later tonight

thank you Tyler

#10

The new ability to use CSS without the [attribute] selector is is totally fabulous !

The Implementation of the new @at-root { } went absolutely flawless!
I am very happy!

I realized the autoprefixer will add less vendor prefixes than the Online Version of https://autoprefixer.github.io/ (they have a default setting of last 4 versions).

I kept the OLD SCSS on the below mentioned page AND added the very same css-rules additionally yet another time via a MOD . The MOD has the id=“anymod-mlknbk” .

Thus, the rules are present twice because both sources are loaded, on this page …
https://skysails-power.com/mobile.html

Inside the Mod-Version You will find the following Vendor prefix missing :
-webkit-box-flex: 0;:

Please compare the CSS rules for the following selector

: #anymod-mlrldm > div > div.row.mb-5.PaddingImageForChild > div.col-sm-7.text-center.image-background

Anymod seems to add less Vendor-prefixes, see Screenshot 1:

https://autoprefixer.github.io/ :
The Online Autoprefixer will add more prefixes , and the same is also true for my local setup :

Anymod might also want to add the last 4 versions . This would ensure older browsers will handle the css Rules correctly.

#11

If the last+2+versions are choosen for autoprefixer, then the Global coverage will be at 87.1% . I would prefer the last 4 versions, because then the Global coverage would be at 92.8% % f you open the page: browserl.ist and scroll down to the bottom of the document you will find the so called “Global coverage” value

https://browserl.ist/?q=last+4+version

#12

Okay, I looked at the Global coverage values again, and realized those values changed. When I last referred to them in December 2019 They used to be worse if the “last 2 versions” was choosen.
Nowadays the difference between “last 4 versions” and “last 2 versions” is not that big anymore. So I guess I can also live with the “last 2 versions”. I will proceed implementing the solution for all of the six Skysails Portals

#13

I tested the result on https://autoprefixer.github.io/ once again.

I found out AnyMod seems to use the following Setting : “last 1 versions”.

Referring to https://browserl.ist/?q=last+1+version
if you scroll to the very bottom of that page that means a Global coverage of: 73.93%

It seems insufficent to use such a low coverage in production.

Almost no vendor prefixes are added at all via autoprefixer . Hargh!

#14

Hi Stefan,
We are using the defaults for Autoprefixer which can be found here:

Our config looks like this:
autoprefixer({ remove: false })

Do you have an example case that demonstrates the prefixing not working as expected? If so, can you please write that into a ticket using the pre-defined template?

#15

Hi Tyler, thanks !

I am using NPM Scripts" https://www.freecodecamp.org/news/introduction-to-npm-scripts-1dbb2ae01633/

And for Autoprefixer my setting looks like this:

"autoprefixer": "postcss -u autoprefixer -r \"last 8 versions\" dist/css/*.css",

If I compare the ANYMOD CSS Output to what autoprefixer.github.io spits out for the same CSS-Rule, then the result indicates anymod currently uses something equal to “last 1 version” , which is not much. And also not the default setting . See https://autoprefixer.github.io/

You can find a demo-case inside of a separate MOD below.
This might help to visualize the “missing Verdor-Prefixes” more clearly.

I guess the relavant information you need to look at might refer to browserlist and you might be able to find it here

Are you using a browserslist key within the package.json file in your anymod-setup? The below best practices part provides you with the default setting. We should be fine with that setting :

This is the nessesary default key:

"browserslist": [ “defaults” ]

My Test-environment indicates anymod does not use the default browserslist setting for autoprefixer:

https://novaconsonanza.de/demo-css.html

I guess the following result might be what shoud be expected (do you agree?) :

body { -webkit-box-flex: 0; -ms-flex: 0 0 86%; flex: 0 0 86%; }

#16

to visualize the situation best I can, I created a demo-case for anymod.

On AnyMods request, I tried to provide the best possible insight into the situation.

Therefore, I am especially eager for feedback.

There is an issue from June 2019 still unanswered as well. It has the very same topic.

#17

see:

I am grateful for any update.

#18

Hi Stefan,
Can you please include a mod that shows this behavior as well as what the output is and what you think the output should be?

#19

I already did.
I referred to the demo many time. See.: https://novaconsonanza.de/demo-css.html

#20

Can you please include a mod, not a website, so that we can isolate the issue?