[Feature Request] Style Groups - Enable and disable multiple styles at once

[dmland]

Web developers use Stylus to preview styling improvements to our products. Other users may create or download multiple styles that apply to a given site or perform a related function across sites (such as the ubiquitous "black" or "dark" themes).

I propose the ability to create style groups that can be turned off or on as a group (without affecting their individual enabled/disabled states, much as "Turn all styles off" works today).

The popup might look something like this:

Of course, the mocked up [✓] checkbox in the group header would be an actual checkbox, and there wouldn't be the need to name all the grouped rules with [TP3], which is how I'm "grouping" them now.

I haven't given any thought to how the categorization might work in Manage, but this is just a "reminder to have a conversation" about a future feature.

[dayfuaim]

Yes, I need this too.

[decembre]

Good idea: I wanted ask the the same function....

[eight04]

I think this use-case has been resolved by usercss options.

[Cimbali]

I think this is a very interesting feature and I’m not sure how usercss options solve this @eight04, can you maybe explain that?

[eight04]

You can create a Usercss having multiple checkboxes which toggle different features individually. For more information: https://github.com/openstyles/stylus/wiki/UserCSS-authors

[Cimbali]

Yes I’ve read that. That is for making a stylesheet customisable with options, nothing in there allows you to enable and disable other stylesheets.

[DanaMW]

You can @import one or not or enable the features or not. It is very powerful options

[Cimbali]

So if I install for example a dozen “dark” style stylesheets from uso, I can then create a master stylesheet that imports those dark stylesheets while keeping them disabled, and only toggle the master stylesheet?

I can’t even find the installed stylesheets’ filenames, they just seem to have an id.

[eight04]

@Cimbali Your use-case is different from OP's. I think what you need is the ability to toggle multiple styles at once in the popup. But why do you want to do that?

[Cimbali]

I might be misreading this, but I think the OP also wants the ability to toggle multiple styles at once. That’s what I understand from the title and the text of the issue (emphasis mine):

[...] users may create or download multiple styles that apply to a given site or perform a related function across sites (such as the ubiquitous "black" or "dark" themes).

I propose the ability to create style groups that can be turned off or on as a group (without affecting their individual enabled/disabled states, much as "Turn all styles off" works today).

The cited use case here is dark themes which you would want to toggle all simultaneously as easily as possible, depending on outside luminosity for example. Any global functionality enabled through stylesheets could benefit from this.

In the mean time, you would still want any site-specific fixes to remain valid, so the “turn all styles off” button is not really useful for this purpose.

[narcolepticinsomniac]

Web developers use Stylus to preview styling improvements to our products.

This is the use case easily covered by usercss options, and used in the original example.

So if I install for example a dozen “dark” style stylesheets from uso.

This is not.

OP also makes a passing reference to other use cases:

Other users may create or download multiple styles that apply to a given site or perform a related function across sites (such as the ubiquitous "black" or "dark" themes).

...depending on outside luminosity for example

Should be covered by #736 eventually. Otherwise, a use case like the one described in the OP would be better suited to usercss toggles.

I don't see how we could even implement the type of sub-grouping you're describing without over-complicating the UI, and all the underlying code that would be necessary to support group toggling. This would undoubtedly be a niche feature used by a handful of users, and would probably confuse more users than it helps, so I highly doubt it's worth pursuing.

@eight04 If you agree, feel free to close this.

[Cimbali]

Ah sorry I did not see that issue. So one of the use cases for grouping stylesheets is taken care of by usercss, and another use case could be taken care of by #736, but this issue is about grouping stylesheets, did I get that right?

Here's my 2 cents:

• 736 is a global setting for one specific parameter, dark/light, whereas grouping stylesheets is a more generic approach

  • are there other use cases? Maybe someone wants more different sets of color schemes instead of just light/dark? Maybe it's easier to setup test scenarios like the OP's without having to modify the CSS, say if I'm a test user not a test developer? What if I don't know about CSS preprocessors and just install stylesheets maintained by other people?
  • toggling groups of stylesheets will not be much harder code-wise than a global dark/light setting, it's basically if (hasGroup(stylesheet)) checkGroupEnabled(stylesheet); instead of if (isDarkScheme(stylesheet)) checkDarkSchemesEnabled()
  • this would naturally take care of any dark style sheets that the user might not want to toggle globally with the other dark stylesheets. (Say if a website is white by default but looks good in grey, it might be specified as dark, but I might want it on all of the time. The global light/dark option will need to manage that.)
• the preview of the pop-up with grouping given by the OP does not seem confusing to me.

All in all I think this is the better approach but of course it's not my project and I see you already did significant work on #736 (with nice features such as automatic switching), so probably you’ll want to this issue anyway (or at least de-prioritize if you’d still accept a PR for it).

Anyway, thanks for your work maintaining this extension!

[eight04]

Maybe someone wants more different sets of color schemes

I doubt if those styles really exist... but we can keep this issue open and see if there are more users need this.

Maybe it's easier to setup test scenarios like the OP's without having to modify the CSS, say if I'm a test user not a test developer?

You don't have to modify the CSS. The author will create multiple options for you. You just have to toggle the checkbox in the setting.

What if I don't know about CSS preprocessors and just install stylesheets maintained by other people?

If the style is still maintained, you can try asking the author to migrate to the usercss format and create some options so the style is more customizable. Otherwise, it might be easier to modify the source code directly to make the style meet your need.

toggling groups of stylesheets will not be much harder code-wise than a global dark/light setting,

Actually, it is. We need an additional database to store style group information. Also, the import/export format need to be changed in order to include style groups.

this would naturally take care of any dark style sheets that the user might not want to toggle globally with the other dark stylesheets. (Say if a website is white by default but looks good in grey, it might be specified as dark, but I might want it on all of the time. The global light/dark option will need to manage that.)

You can configure a style to be applied all the time:

BTW, if you find any bug/request for #736, don't forget to comment on that PR so other people tracking the PR will be notified.