[Beta] User CSS support

Greasy Fork now supports User CSS as defined here for use with Stylus. Go here to post User CSS.

Currently User CSS entries will not be listed in search results. This will change in the future.

«1

評論

  • That's cool. Can we import a usercss from Github and set up the webhook?

  • 已編輯 November 2019 [?]

    Where is the button/ link in the menu to post a new script using "User CSS" ?:
    https://greasyfork.org/fr/script_versions/new?language=css

    I only find this one:
    https://greasyfork.org/fr/script_versions/new

    Re edit, i see it now:
    It's the "Post a style" entry!
    ;-)

  • This new function don't need Stylus?

  • @eight said:
    That's cool. Can we import a usercss from Github and set up the webhook?

    Not yet, soon.

    @decembre said:
    This new function don't need Stylus?

    You'd need to have Stylus or something else to install it for now. I intend on making the user styles available in .user.js format too.

  • 已編輯 November 2019 [?]

    @JasonBarnabe a dit :

    @decembre said:
    This new function don't need Stylus?

    You'd need to have Stylus or something else to install it for now. I intend on making the user styles available in .user.js format too.

    Hoho, that's should be great!
    All in one place :
    The Good Old Time....
    Userstyles.org became too boring...

    PS:
    Have you some test links?

  • 已編輯 November 2019 [?]

    I find one userscript example:
    Popurls Classic Black Style 2019

    It use as it as // @resource:
    // @resource linkscss https://greasyfork.org/scripts/14798-popurls-classic-link-colors-stylesheet/code/popurls classic link colors stylesheet.js?version=95986

    Re-Edit
    It seems this resource is not formatted correctly :
    "Automated delete due to script containing JavaScript syntax errors" "...

    But maybe, to bypass Stylus use, the idea of @resource (from greasyfork) and
    // @grant GM_getResourceText
    // @grant GM_addStyle
    could be an idea ?

  • Hmm, maybe our userstyles with customizable options could be automatically turned into userscript settings so it can be toggled from the script manager instead of having to reinstall the whole thing.

  • @JasonBarnabe said:

    @eight said:
    That's cool. Can we import a usercss from Github and set up the webhook?

    Not yet, soon.

    Should work now.

  • There is now a JS/CSS switch in the sidebar in script lists.

  • I don't know if it is a good way to promote them.
    Maybe, Can you add the swither in the script list sort panel:
    .script-list-sort

    Should be better for discover these User CSS:
    They are few yet and they don't appear in the "normal script list.

    The idea is to show them with the other and add to them a different style/Icon.
    Actually, they have not an identifier "User CSS" to make a difference with the others.

    An other problem with search:
    For test i created:
    Flickr WideScreen - BigONE v.107 - TEST UserCSS style

    If i do a search, i can't see it....

  • It's intentionally not listed unless you pick the CSS option as most people will not know how to install it. This may change once I can generate user JS from the CSS.

  • Thanks , but near the install button, a note explain they need use Stylus, so ....

  • User CSS are now also available in user JS format. Please test this out and let me know of anything that needs to be fixed/improved. Once I get confirmation that it's good, I will allow user CSS to show in the main search results.

  • 已編輯 December 2019 Firefox

    I tested :
    Flickr WideScreen Dark and Grey - BigONE v.111 - TEST UserCSS style + JS
    It work as Usertyles with Stylish and Stylus.

    From Greasyfork:
    I can install it as Usertyles with Stylus
    But as Userscript it dont work.

    Test on Firefox Quantum and Chrome
    With Greasyfork and Tampermonkey

  • Yeah it's really messing up on parsing that one. I'll look into it.

  • 已編輯 December 2019 Firefox

    Thanks and sorry :
    Yes it's very big and many comments inside and it's in 3 parts...
    But if it pass your process, it should be a good test for the others.
    ;-)

    I tested (only the userscript option) too:
    Dark My Nintendo
    Same problem....
    This one use "variable" from stylus.

  • I think I've fixed the Flickr one:

    • The emojis were messing up the parser
    • There were unnecessary global blocks that were just comments. These have been removed.
    • Backslashes in the CSS were not properly escaped.
  • I don't think this is going to support non-default preprocessor or var for now.

  • Good Job!
    It should be a perfect solution:
    Userstyles and Userscript ALL in ONE place...

    Seems ok in general.
    Style is fast (no delay, like sometime when we use style in an userscript)

    For my case:
    There are some errors in the aspect:
    I don't know why or understand yet...

    Maybe the order of rules make something wrong (3 userstyles in one).
    Or some are "!important;" missing or need ????
    By example at this page:
    171 - Portraits to remember
    The top bar need to be moved top and its background changed...
    After a quick inspect, it seems the rule exist but it need or miss the "!important;"

    I need too some time to test my script under Firefox / Waterfox / Chrome:

    I am old school, Waterfox "Classic" 56.3 i my default browser with old Stylish and Greasemonkey 3.
    In Firefox Quantum / Chrome, i am not familiar with their dev tools (i prefer my old Firebug + FirePath with their bugs, so practical for CSS).

    About:
    "There were unnecessary global blocks that were just comments. These have been removed."
    "Backslashes in the CSS were not properly escaped."
    Have you some example?

  • 已編輯 December 2019 Firefox

    @JasonBarnabe said:

    • There were unnecessary global blocks that were just comments. These have been removed.

    Cases like:

    @-moz-document domain(example.com) {
    }
    /* Some comment */
    @-moz-document domain(example2.com) {
    }

    It would do include * so that it could insert that comment. Now it understands it doesn't have to include comments like this.

    • Backslashes in the CSS were not properly escaped.

    Things like:

    blockquote{
      quotes: "\201C" "\201D";
    }

    Need to have their backslashes turned into \\ when used in a JS variable.

  • @JasonBarnabe said:
    I don't think this is going to support non-default preprocessor or var for now.

    This is done - the user JS install buttons are unavailable in this scenario.

  • User CSS which is convertible to user JS now shows up in search results for JS.

  • 已編輯 December 2019 Firefox

    The User CSS not appear in our profile without select CSS:
    Can we have them in it without selecting this (all userscripts in profile) ?

    My test appear twice in the script list:

    But i thinking 111 was just update of 107 with a new name...

  • 已編輯 December 2019 Chrome

    @JasonBarnabe написал:
    Greasy Fork now supports User CSS as defined here for use with Stylus. Go here to post User CSS.

    Currently User CSS entries will not be listed in search results. This will change in the future.

    How can I use this feature in Google Chrome? Tampermonkey doesn't support "@", Violentmonkey doesn't complain, but the basic example doesn't work and Greasymonkey doesn't exist in Chrome shop

  • @difabor said:
    How can I use this feature in Google Chrome?

    https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=en

    You can do a "Mozilla Format" export, that's what Greasy Fork is expecting.

  • Dear Mr. Jason Barnabe,
    trying to adjust CSS to Tampermonkey, I came to some idea, but I need your help.
    The idea is follows:
    Let define some variable, that will contain CSS code as a text:

    var my_css = '/* ==UserStyle==\n\
    @name Example UserCSS style\n\
    @namespace github.com/openstyles/stylus\n\
    @version 1.0.0\n\
    @license unlicense\n\
    ==/UserStyle== */\n\
    \n\
    @-moz-document domain("example.com") {\n\
    a {\n\
    color: red;\n\
    }\n\
    }\n\'

    Now I need to pass this variable my_css to some function or something like function, that will interpret this text as CSS code.
    I understand, that this is not so comfortable, as your fork, but because Greasymonkey doesn't exist in Chrome shop and I can't use it in Google Chrome, it can be acceptably.
    Moreover, it allows to vary the styles.
    The example below will explain what I mean:

    var colors = ["red", "green", "blue", "yellow", "#0ff"];
    var rand = Date.now()%5;
    var color = colors[rand];

    Now, in the previous example, instead of

    ' ... color: red;\n\ ...'
    // I will write:
    '...color: ' + color+';\n\...'
    

    So, each time, when this site will be loaded, the different color will be used
    But I don't know how to activate this text variable to interpret it as CSS code... :(

  • You won't be able to post such a thing as CSS. You're just writing JS at this point.

    But this is how you add CSS to a document:

      let styleNode = document.createElement("style");
      styleNode.appendChild(document.createTextNode(css));
      (document.querySelector("head") || document.documentElement).appendChild(styleNode);
    
  • @JasonBarnabe написал:
    You won't be able to post such a thing as CSS. You're just writing JS at this point.

    But this is how you add CSS to a document:

    >   let styleNode = document.createElement("style");
    >   styleNode.appendChild(document.createTextNode(css));
    >   (document.querySelector("head") || document.documentElement).appendChild(styleNode);
    > 

    I didn't understand - there is no possibility to pass the variable, containing the css code to JS in order to to activate the CSS code?
    I wrote the follows:

    // ==UserScript==
    // @name trystyle1
    // @namespace http://tampermonkey.net/
    // @version 0.1
    // @description try to take over the world!
    // @author You
    // @match http://mignews.com/
    // @grant none
    // ==/UserScript==

    var css = '@-moz-document domain("mignews.com") {\n'+
    'body {\n'+
    'background-color: red;\n'+
    '}\n'+
    '}';

    let styleNode = document.createElement("style");
    styleNode.appendChild(document.createTextNode(css));
    (document.querySelector("head") || document.documentElement).appendChild(styleNode);

    And this indeed doesn't work :( :'(
    It is indeed impossible to activate css code from JS?

  • Adding CSS from JS has always been possible. It's just not what we're talking about in this discussion. This discussion is about giving Greasy Fork the CSS and letting it generate the JS for you.

Sign In or Register to comment.