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

[stefano]

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

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 ; )

[tyler-anymod]

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!

[tyler-anymod]

@falling-hat-59l2

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 ; )

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

[stefano]

This is so supercool!

Very happy about that!

2020-06-12_09-54-58

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

I will implement it later tonight

thank you Tyler

[stefano]

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:

2020-06-12_22-17-52

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

2020-06-12_22-20-29

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

[stefano]

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

[stefano]

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

[stefano]

@falling-hat-59l2

webkit-box-flex: 0

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!

[tyler-anymod]

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

postcss/autoprefixer

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?

[stefano]

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

browserslist/browserslist

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 :

browserslist/browserslist

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%; }

[stefano]

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.

Compiling Vendor Prefixes with AnyMod from SCSS to CSS Code

After compiling from SCSS to CSS, the below MOD seems to not provide all of the nessesary vendor prefixes, but instead just some of them. While I have not provided vendor prefixes to the SCSS, I expected the compiled CSS to have more vendor prefixes added automatically. As a reference, please check the below MOD. I pasted the rules for this selector [lllmal] {} testwise on AutoPreFixer: https://autoprefixer.github.io/ Any advice is highly appreciated. I hope I am not mistaken on my end…

[stefano]

@falling-hat-59l2

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

the following result is what I expected , but that vendor-prefix is missing. This is just an example on : https://novaconsonanza.de/demo-css.html I would expect to see the following vendor-prefix:

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

@falling-hat-59l2

I created the demo-case for anymod to analyse the situation with ease.

@falling-hat-59l2

If we compare ANYMOD’s CSS Output to what autoprefixer.github.io spits out , then the result indicates anymod currently uses something equal to “last 1 version” , which is only 73.93% . And also not the default setting . See https://autoprefixer.github.io/

see:

@falling-hat-59l2

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%

I am grateful for any update.

[tyler-anymod]

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?

[stefano]

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

[tyler-anymod]

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

[stefano]

https://anymod.com/mod/css-demo-dkmrkb

on

https://anymod.com/projects/837232/dashboard

I invited Tyler to the team

https://anymod.com/projects/837232/team

https://anymod.com/edit/dkmrkb/code

[tyler-anymod]

Hi Stefan, can you please also include the following:

@tyler

as well as what the output is and what you think the output should be?

[stefano]

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

https://anymod.com/projects/837232/dashboard

https://anymod.com/mod/css-demo-dkmrkb

[tyler-anymod]

Hi Stefan,
We had to do some digging, but it should now be correctly configured for “last 2 versions”. You’ll need to make some small change to a mod’s CSS for it to be updated on save. Please let me know if you’re still experiencing different behavior.

Thanks!

[stefano]

Excellent news! Fabulous improovement! Thanks!

https://browserl.ist/?q=last+1+version was a Global coverage of:73.93%

https://browserl.ist/?q=last+2+version now is a Global coverage of: 87.1%

You can scroll down to the bottom to see the global coverage value on both Pages (browserl.ist)

If you set the browerling value to “defaults” you will have a Global coverage of: 90.77% https://browserl.ist/?q=defaults