Editing default style adds bogus section, is generally confusing

[unikitty37]

Description

1. Go to https://github.com/openstyles/stylus/wiki/Writing-UserCSS#change-default-template
2. Try to follow the instructions for editing the default profile
3. There is no "as UserCSS" checkbox next to the "Write new style" button, nor anywhere else (see screenshot 1) — it appears from Outdated info in the classic editor about switching the editor to UserCSS mode #2169 that this has been moved, but the Wiki didn't get updated when that was released
4. Click on "Write new style" anyway and see that a UserCSS style seems to have been created anyway (as "Write new style as UserCSS" was already on for me)
5. Edit the style to look like Screenshot 3
6. Click the arrow next to Save and choose "Save as template"
7. A confusing "confirmation" dialog appears, which only has a "Close" button, not "Yes" and "No" as you would expect since it's asking a question (Screenshot 4)
8. Click "Close"
9. The template appears to have been saved, but…
10. Go to https://explainxkcd.com (or another site which you don't already have a rule for)
11. Create a new rule from the toolbar icon

Actual outcome

The new style looks like Screenshot 5 — there is a blank section added for "URLs on the domain explainxckd.com" and the rules I added to the template are in an additional section "URLs on the domain example.com".

Expected outcome

The new style looks like Screenshot 3, but with @name explainxkcd.com and the one section being targeted to explainxkcd.com instead of example.com.

The instructions in the Wiki reflect the current release (ideally with a note of how things used to work for people still on older versions, if that's likely to be an issue).

(The ideal expected outcome would be that there is just an "edit default template" button/menu option that gives you the template and lets you save it with a normal ⌘S — and that creating new styles after that would follow that template rather than adding bits I didn't ask for :)

Workarounds

Every time I create a new style, I could select the contents for the @moz-document domain("example.com") and paste them into the @moz-document domain("explainxkcd.com"), then delete the now-empty example.com container.

I could instead use Typinator or similar to just fill the default template section, except now I can't find a way to go back to the default template, and seem to be stuck with this two-section version.

System Information

• OS: macOS 15.7.3 (24G419)
• Browser: Vivaldi 8.1.4087.61 (Official Build) (arm64)
• Stylus Version: 2.4.9

Screenshots, links, CSS

This is what the Wiki says:

## To create a UserCSS format style:

From the Manage page, check the "as UserCSS" checkbox next to the "Write new style" button.
Click on the "Write new style" button.
A basic UserCSS template will then be available.

## Change default template
To change the default UserCSS template, create a UserCSS style as described above.
Within the default template, make any changes to the template to suit your needs.
Click ▼ inside the Save button to expand the dropdown menu, then select Save as template.

Screenshot 1

Screenshot 2

Screenshot 3

Screenshot 4

Screenshot 5

[tophf]

Yeah, indeed the template UI/UX was recently broken and no one edits the wiki anymore.

[tophf]

So until a fixed version is released you can remove all @-moz-document sections and then save the template.

[unikitty37]

Thanks — that doesn't seem to be behaving as expected either. After deleting all the @moz-document sections and saving as a template the default rules are now in the header rather than in the generated @moz-document section:

If I add p to the list of selectors that change the border, <p> tags show with a dashed green border on explainxkcd.com — and everywhere else, too!

I'll switch to using Typinator to fill the template for now.

Thanks again!

[tophf]

No, I mean if you want to restore the default template just delete everything except the metadata comment.

[unikitty37]

Ah, right — thanks. After restoring the default, it doesn't let me change anything in it without showing the same problem, so this is definitely a job for Typinator 🙂

[tophf]

To reliably restore the default template delete usercssTemplate from sync storage in devtools:

[unikitty37]

Thanks — yes, I've restored it. The problem is that I can't edit it to change the default contents of the block — I end up with Screenshot 2 rathern than Screenshot 3 when trying to create new styles for a site.

[tophf]

BTW no one suggested the idea of saving default sections and redirecting their targets to a new site, which makes me think no one actually used it, so I wonder why do I find it useful to have a default section with some selectors inside? I also wonder if we should allow saving multiple templates.

[tophf]

*why do you find it useful

[unikitty37]

Because I start with those selectors for every site.

When I want to block something, I add a selector to the bar rule and save, then check that the green dashed borders appear around all the elements I want to remove, and only those elements.

If the selector's correct, I can then move it to the foo rule and save, and the elements are no longer displayed.

I was getting fed up with having to type that basic setup every time 🙂

IOW, I'm not trying to do anything complex with the template structure — I just want to be able to change the default rules for a new site (to replace the /* Insert code here... */ without messing with the rest of the template). Maybe it would be better to just have an option to edit the content of the default section rather than the whole template?