How to convert an userstyle to an UserCSS userstyle by ading @var text ?

[decembre]

i try to convert a little perso userstyle to an UserCSS userstyle where everybody can use it by adding their personal usernames:

I try to use 3 different username (that's Flickr...):
@var text User1 'xxxx u/[...]' 'username'
@var text User2 'xxxx' 'username2'
@var text User3 'xxxxx' 'username3'

But if i saw the options, and can add my own infos for each,
the UserCSS not work...

Here my not working test (Shorten):

/* ==UserStyle==
@name           FLICKR - 03persoB - USERCSS TEST - v.322 - MY COMMENTS  (3 dots + numbers) + REPLY TO ME (3 DOTS)
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me
@var text   User1  'xxxxx u/[...]' 'username'
@var text   User2 'xxxx' 'username2'
@var text   User3 'xxxxx' 'username3'
@var color  col   'Highlight color'      '#ee82ee4d'
@var range  w     'Width of the outline' [2, 0, 10, 1, 'px']
==/UserStyle== */

@-moz-document url-prefix("https://www.flickr.com/photos/"), url-prefix("https://www.flickr.com/help/forum/") {
/* @-moz-document domain("flickr.com") */

/* ==== FLICKR - 03persoB - OK - v.322 - MY COMMENTS  (3 dots + numbers) + REPLY TO ME (3 DOTS) - Utags - DEV TEST Quantum ==== */

==== /  ======

/* (new321) PERSO - ADD INDICATOR - YES, I HAVE COMMENTED + DATE :not(:hover) - UTags - .fluid.html-photo-page-scrappy-view === */
.view.photo-comments-view .photo-comments.with-emoji-picker:not(:hover) .comments-list-section.standard .view.standard-comment-list-view.comment-list-view .comment-list li.comment-list-item .author-info a.author-name[href="/photos/'username'/"] + ul.utags_ul.utags_ul_0 + .comment-date , 
.fluid.html-photo-page-scrappy-view .fluid-modal-view .photo-comments-view .photo-comments section.comments-list-section.scrollable  li .comment-content a[href="/photos/'username2'/"]:hover:after ,
.fluid.html-photo-page-scrappy-view .fluid-modal-view .photo-comments-view .photo-comments section.comments-list-section.scrollable  li .comment-content  a[href="/photos/'username'/"]:hover:after {
    background: green ;
}
#Hint + #GoodStuff h2 + #DiscussTopic table + table.TopicReply tbody .Said h4 a.author[userphoto="'username3'"]:hover:after ,
#Hint + #GoodStuff h2 + #DiscussTopic table + table.TopicReply tbody .Said h4 a.author[userphoto="'username3'"]:visited:after ,
#Hint + #GoodStuff h2 + #DiscussTopic table + table.TopicReply tbody .Said h4 a.author[userphoto="'username3'"]:after {
    
background: red !important;
}

/* REPLY TO ME */
.Said h4 + p  a[href="/photos/'username'/"]:before {
    background: blue!important;
}


/* ==== END  ==== */
}

[tophf]

You need to actually use your variables in the code. Without @preprocessor the format is standard CSS variable like --User1, with @preprocessor uso it's /*[[User1]]*/, see https://github.com/openstyles/stylus/wiki/Writing-UserCSS#preprocessor

[decembre]

Thanks!
So in my test, if i use @preprocessor uso, i need to change 'username' by [[username]] ?

by example:
.html-photo-page-scrappy-view .comment-content a[href="/photos/'username2'/"]:hover:before ,
.html-photo-page-scrappy-view .comment-content a[href="/photos/'username'/"]:hover:before

By:
.html-photo-page-scrappy-view .comment-content a[href="/photos/[[username2]]/"]:hover:before ,
.html-photo-page-scrappy-view .comment-content a[href="/photos/[[username]]/"]:hover:before

I tested that and it don't work :-(

My Last test:

/* ==UserStyle==
@name           FLICKR - 03persoB - USERCSS TEST - v.322 - MY COMMENTS  (3 dots + numbers) + REPLY TO ME (3 DOTS)
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me
@preprocessor uso
@var text   username1  'Your Flickr username1' 'e.g., xxxx'
@var text   username2 'Your Flickr username2' 'e.g., xxxxxx'
@var text   username3 'Your Flickr username3' 'e.g., xxxxxxxx'

==/UserStyle== */

And i applie your reply solution as i write before:

[[username1]]  for xxxxxxxxx
[[username2]] for xxxxxxx
[[username3]] for xxxxxxxxxxxx

Notes:
Since a long time i wanted use UserCSS which seems very powerful.

I have read the "How to write UserCSS":
It's very detailed BUT very complex to understand...
;-)

Maybe more examples template (with screenshot of the results in UI) ?

[decembre]

Finlay i got it !
:-)
With:
@preprocessor uso
I need to use these /* */ (i omitted them previously... because normally in CSS it is used to comment our code) .
Like that:

 /*[VARIABLE NAME]]*/

@var text   username1  /*[[username1]]*/  AAAAAAAAAAAAAA
@var text   username2  /*[[username2]]*/  BBBBBBBBBBBBBB
@var text   username3  /*[[username3]]*/  CCCCCCCCCCCCCC

Now i need to find a tutorial about how to use the of "if" and how to code with it...