Greasy Fork

Fine and Simple style : just a question about your "addStyleEx" and the library "addstylish lib"

Perfect!

I have a question:

I am interested for a solution to convert an Usertyles to a GM without too many manipulations.
See Is there a Converter to Convert CSS to User Script?

I use for that GM_setStyle.js
Info here :
GM_setStyle by Martin

I use it by example in this GM (outdated):
UserScripts WideScreen Dark/Grey v.9.
It's a fast solution, but before i need to post the userstyles in Github.
And it seems not compatible with google chrome (I am not certain about that. Sometime it work and that's not only a CSS vendor prefix problem).

In your script (which seems compatible with Firefox and Chrome),
i see you use css directly , without manipulations and not // @resource .
You put your CSS into the :
addStyleEx(`)

For testing, i try to modify it (i am not a coder...), to include this userstyles (updated) :
Userstyles TableView+Enhancer - Dark-Grey v.59

Without success....
Can you help me ?

i see you use css directly , without manipulations and not // @resource .

Well, in some rare cases you need some manipulation. You cannot use grave symbols (`) or octal expresions. And in your example you used both. :neutral:

For testing, i try to modify it (i am not a coder...), to include this userstyles (updated) : Userstyles TableView+Enhancer - Dark-Grey v.59

Then I don't know if I can explain you. But I can help you anyway.

Take a look to the attached file. Job is done and it works. I have ported your userstyle in a userscript using my method. If you want to know how I did, then read the comments inside the sourcecode. I put comments everywhere explaining everything a bit. Let me know if you do not understand something.

Yeah, the file. It uses now a better addStyleEx function.

Hoooo, That's a very big help...
Thanks !

That's more complicate than i hoped
;-)

As you said in your comment in the script you provide to me,
I need to replace some code in my original Userstyle:

STYLESHEET DECLARATION SECTION:
Template strings,
you can copy-paste your code, but:
1. grave symbols (`) are used as enclosure
so you need to replace every grave symbol "`" with their html version "`"
see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
see: http://en.wikipedia.org/wiki/Grave_accent
2. octal literals are not allowed
on character strings you can translate their values to unicode format: octal("\033") == unicode("\u001b")
http://stackoverflow.com/questions/35624801/how-can-i-use-colors-in-ecmascript6-template-strings
sometimes your values are already hexadecimal, like "\A" or "\25B6", so you just need to put "\u000A" or "\25B6".

And it seems you replace @namesapce of my userstyle,
By example, but they are other inside (yes, in your script adaptation, you take care of them, perfect one more time):


/* AGENT_SHEET */
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("userstyles.org")
, domain("greasyfork.org")
, domain("sleazyfork.org")
, url-prefix("https://greasyfork.org/forum/") ,
url-prefix("https://74.86.192.75/") {
..../.... CSS ..../...
}


by these declarations, at the end of your script:


/*
CONTROLLER SECTION:
Used to filter styles used only in certain locations.
How to use:

if( location.href.match(/REGEXP/i) ) // REGEXP: see bellow table
addStyleEx(css_example, uniqueid_example);
*/
/*
REGEXP CONDITIONS:
Allways:
Stylish-selector: (none)
Userscript-header: @include *//*/*
Userscript-regexp: (do not use conditions)
Domain:
Stylish-selector: @-moz-document domain("domain.com")
Userscript-header: @include http://domain.com/*
and/or @include https://domain.com/*
Userscript-regexp: (https?:)?\/\/domain.com\/.*
Prefix:
Stylish-selector: @-moz-document url-prefix("http://urlprefix")
Userscript-header: @include http://urlprefix*
Userscript-regexp: (https?:)?\/\/domain.com\/.*
Direct URL:
Stylish-selector: @-moz-document url("http://someurl")
Userscript-header: @include http://someurl
Userscript-regexp: http:\/\/someurl
RegExp:
Stylish-selector: @-moz-document regexp("some\\reg\\exp")
Userscript-header: @include /some\reg\exp/
(replace \\ with \)
Userscript-regexp: some\\reg\\exp
*/
// common style, do not use conditions
addStyleEx(css_common_stylesheet);

// url-prefix("https://greasyfork.org/fr/scripts/19838-diep-io-by-terjanq")
// why not http://sleazyfork.org/en/scripts/19838-diep-io-by-terjanq ?, better use a regex:
if( location.href.match(/(https?:)?\/\/(greasy|sleazy)fork\.org\/([\w-]+)?scripts\/19838-diep-io-by-terjanq\/.*/i) )
addStyleEx(css_only_for_somescript);

// domain("sleazyfork.org")
if( location.href.match(/(https?:)?\/\/sleazyfork\.org\/.*/i) )
addStyleEx(css_only_for_sleasyfork);

// url-prefix("https://userstyles.org/help")
if( location.href.match(/(https?:)?\/\/userstyles\.org\/help\/.*/i) )
addStyleEx(css_only_for_userstyles);

})();


I know a little (but not enough) how to use Regex:
In the script, some are simple, but the others can be touchy, no ?

About:

// why not http://sleazyfork.org/en/scripts/19838-diep-io-by-terjanq ?, better use a regex:

That's only a TEST to control a strange (and very disturbing) use of unicode in one script title:
read here:
VERY strange TYPO EFFECT in your script name !


As you do all the hard work for me,
can i post it like that - as example (with you as co-author or as you want) ?

So, anyway, thanks for this very big piece of help !

PS:
You write that you use a better

addStyleEx function.

.
This function is your ?
Where i can find more info about it ?

@namespace is only needed by userstyles, it is not a real css sentence. Deleted.

And I ignored the first @-moz-document because:

1. I deleted url-prefix("https://74.86.192.75/"). Just though this is unsafe.
2. url-prefix("https://greasyfork.org/forum/") is not needed because domain("greasyfork.org") already covers all paths.
3. The 3 domain sentences are all covered by the include headers.

   userstyle	userscript
   domain("userstyles.org")	// @include https://userstyles.org/
   domain("greasyfork.org")	// @include https://greasyfork.org/
   domain("sleazyfork.org")	// @include https://sleazyfork.org/*

I though regex where the most simple way to do all the cases in a common method. You can do the same thing with other functions, but each one different.

Regex are not too complicated if you follow a simple steps:

Then you only need to concat the answers where you say yes. I ussually use 3, 6, and 10. This is a basic but not complete guide. You can do advanced regex when you learn more. You can use http://regexr.com/ to test your regular expressions.

I used another of my scripts as a template to write the headers. I do not want to take ownership of this code. Feel free to edit the author, namespace, license or other things as you want. I will not say I am a co-author, since I only write the addStyleEx function and the control section. You can still use GM_addStyle and this should work nearly the same.

I made the new addStyleEx yesterday with this project. For now, I used it in the attached sample and in the greasyfork-theme. If you need more info with it you can ask me.

Thanks for all these infos....
Maybe you need to post your function in a site like Github with all this docs ?

Now i have an other way to do that i wanted ...
I go to publish your Tweaked version of my Usertyles as example.
Done:
Userstyles TableView+Enhancer - Dark-Grey 56
PS:

I used another of my scripts as a template to write the headers.

Which script, and what it does ?

I meant I do not pretend to steal your script putting // @author @leoncastro in the header. It was only a copy-paste. You should put only // @author Decembre. Some users use the un-official header // @contributor name (link). More info here. Others use a simple comment to write the attribution of some part of the script. I do not care what you choose, even if you do not refer me this time. But, please, please, in next release maybe you can fix the description typo "Leoanrdo".

I do not always use one specific as template. This time I used this only because I'm too lazy to write all headers and I didn't want to make the icon again.

Ho, sorry:
Correction done...

I test your new lib version,
but it seems have a problem with it.

It need some adaptations for:

1. grave symbols (`) are used as enclosure
so you need to replace every grave symbol "`" with their html version "`"

Here my test with the addstylish lib (not working)....

The addStylish function needs a string as argument. And like in all the other javascript functions the string must be a proper string. There are three methods to write strings: 1) strings enclosed between doble quotes ( " ) 2) strings enclosed between single quotes ( ' ) 3) templated strings enclosed between grave symbols ( ` )

If you choose one of the two first options, you cannot use the enclosure until the end of string, unless you escape the symbol ading a slash before ( \" or \' ). Boths methods dont like the new-line character, so you must escape them too (with a slash at every end of line). And because the slash is a escape symbol, you need to escape every slash used too ( \\ ). If you choose the third option, you need to replace all grave symbols with their html version ( ` ), and change all octal numbers to their unicode equivalents. The good thing here is that even with those replacements, your code still works as userstyle. When you get more experience, you will never use again the grave symbols or octal values in CSS. Trust me.

This is not an userscript related issue. This is a javascript mandatory. Like if you write functino instead function, javascript raises the error and you can do nothing but repair the error.

In your example, be sure to do the replacements required.

Template strings, you can copy-paste your code, but:

1. grave symbols (`) are used as enclosure so you need to replace every grave symbol "`" with their html version "`" see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals see: http://en.wikipedia.org/wiki/Grave_accent
2. octal literals are not allowed on character strings you can translate their values to unicode format: octal("\033") == unicode("\u001b") http://stackoverflow.com/questions/35624801/how-can-i-use-colors-in-ecmascript6-template-strings sometimes your values are already hexadecimal, like "\A" or "\25B6", so you just need to put "\u000A" or "\25B6".

    Find    Count    Replacement    Comments
    `           6    `          grave to html
    \A        100    \u000A         hex to unicode
    \25B6      23    \u25B6         hex to unicode
    \25BA       1    \u25BA         hex to unicode
    \01F53B     1    \u01F53B       hex to unicode
    \270E       1    \u270E         hex to unicode
    \2717       1    \u2717         hex to unicode

Find attached a file with those replacements. And it works !

And you can replace the require param. I uploaded the library here in greasyfork. https://greasyfork.org/en/scripts/24621-lib-add-stylish-string

That's a great work....

I posted my Usertyles with your lib:

Userstyles TableView+Enhancer - Dark-Grey 59 (addStylish lib) - leoncastro
ps:

"When you get more experience, you will never use again the grave symbols or octal values in CSS. Trust me."

I hope ;-)

These Unicode and glyphs characters are difficult to understand by me...

Adding Icons:
By example, in CSS, I use \25B6 for ▶.
But \u25B6 don't work in CSS....

If i use this character "▶" in my CSS, that's good in javascript ? (it seems)
The problem is:
"▶" seems not always read correctly if the user don't have the correct font installed,
so i prefer don't use it in my CSS.
And i have not found a easy way to use @font-face in an usertstyle.

To adding Icons, the other solution is to use an image.....
But it increase the size of my huge Usertyles and it's less flexible.

Grave string " ` ":
The grave string " ` " replaced by ` don't work in CSS too ....

Questions:
1- Have you a solution to have a character like that which work in CSS AND javascript ?

2 - Have you a macro for notepad++ to find and replace all these strings which need adaptations ?

Some links for unicodes characters :
- Les correspondances des encodages de caractères spéciaux. [in "EncodeJS: Outils Javascript"]
- Unicode code converter [Online Tool]
- ICON UNICODE + "CSS escapes" for Userstyles [ In PasteBin]
- ▶ Black Right-Pointing Triangle [ in emojipedia.org ]

Hum, seems like I mixed some concepts here. I did not test this detail with the glyphs character.

If i use this character "▶" in my CSS, that's good in javascript ? (it seems) The problem is: "▶" seems not always read correctly if the user don't have the correct font installed,

You can still get that problem with the "\25B6" hex value.

To adding Icons, the other solution is to use an image..... But it increase the size of my huge Usertyles and it's less flexible.

Maybe SVG ? <svg><path d="M0 0v20l20-10z"/></svg>

I don't know. Let me do some tests.

Answers: 1- Not yet. 2- No, sorry, I simply use the replace dialog.

;-)

Did you know that you can still use @resource ?

// ==UserScript==
// @namespace    test
// @name         test

// @include      https://userstyles.org/*
// @include      https://greasyfork.org/*
// @include      https://sleazyfork.org/*   

// @require      https://raw.githubusercontent.com/leoncastro/js-us/master/_lib/lib-add-stylish-string.user.js
// @resource     CSS https://userstyles.org/styles/56792/userstyles-tableview-enhancer-dark-grey-v-59.css

// @grant        GM_getResourceText
// @run-at       document-start

// ==/UserScript==
//
window.addStylish(GM_getResourceText('CSS'));

Yes, but i always needs to convert some strings in it ?

Not always. Only if you use template strings.
This way you use a normal string (automatically returned by the GM function).

pros: Simplest method.
cons: Need 3 files: 1 userscript + 1 required library + 1 resource userstyle.
But who cares ? Maybe you use an icon too, isn't ?

Try the example and comment.

One more time :-) I test your last solution with my CSS on Pastebin:

// ==UserScript== // @name Userstyles / GreasyFork Enhancer Dark-Grey + Comments Numbering v.122 (TEST lib-add-stylish-string) // @name test // @include https://userstyles.org/* // @include https://greasyfork.org/* // @include https://sleazyfork.org/*
// @require https://raw.githubusercontent.com/leoncastro/js-us/master/_lib/lib-add-stylish-string.user.js // @resource CSS https://pastebin.com/raw/f77ygmrt // @grant GM_getResourceText // @run-at document-start // ==/UserScript== // window.addStylish(GM_getResourceText('CSS'));

But it didn't work in Firefox / Chrome...

I test too with (not working too): // @resource CSS https://userstyles.org/styles/56792/userstyles-greasy-fork-enhancer-dark-grey-v-122.css

I posted this one which work only with Firefox: Userstyles / GreasyFork Enhancer Dark-Grey + Comments Numbering v.122

Another idea ?