Can't get regexp to work in new version. [Solved]

Hey guys. I have this style which should affect any url ending in ".png / .apng" and so on. It was working fine before the new version, but I can't get it to work now.

Code:

@namespace url(http://www.w3.org/1999/xhtml);

body > img.transparent
{
background: #E5E5E5 url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD//gATQ3JlYXRlZCB3aXRoIEdJTVD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wgARCACAAIADAREAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAABwAG/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAAB0IdiIHYiB2IgdiIHYiB2IgdiIHZCIHYiB2IgdiIHYiB2IgdiIHYiEHYiB2IgdiIHYiB2IgdiIHYiB2QiB2IgdiIHYiB2IgdiIHYiB2IhB2IgdiIHYiB2IgdiIHYiB2IgdkIgdiIHYiB2IgdiIHYiB2IgdiIQdiIHYiB2IgdiIHYiB2IgdiIHZCIHYiB2IgdiIHYiB2IgdiIHYiEHYiB2IgdiIHYiB2IgdiIHYiB2QiB2IgdiIHYiB2IgdiIHYiB2IhB2IgdiIHYiB2IgdiIHYiB2IgdkIgdiIHYiB2IgdiIHYiB2IgdiIQdiIHYiB2IgdiIHYiB2IgdiIHZCIHYiB2IgdiIHYiB2IgdiIHYiEHYiB2IgdiIHYiB2IgdiIHYiB2QiB2IgdiIHYiB2IgdiIHYiB2Ih/8QAFBABAAAAAAAAAAAAAAAAAAAAgP/aAAgBAQABBQIAf//EABQRAQAAAAAAAAAAAAAAAAAAAID/2gAIAQMBAT8BAH//xAAUEQEAAAAAAAAAAAAAAAAAAACA/9oACAECAQE/AQB//8QAFBABAAAAAAAAAAAAAAAAAAAAgP/aAAgBAQAGPwIAf//EABQQAQAAAAAAAAAAAAAAAAAAAID/2gAIAQEAAT8hAH//2gAMAwEAAgADAAAAEJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJP/EABQRAQAAAAAAAAAAAAAAAAAAAID/2gAIAQMBAT8QAH//xAAUEQEAAAAAAAAAAAAAAAAAAACA/9oACAECAQE/EAB//8QAFBABAAAAAAAAAAAAAAAAAAAAgP/aAAgBAQABPxAAf//Z') repeat scroll 0% 0%;
}

Applies to: URLs matching the regexp:

((.*\\.(png|apng|gif|tiff|png~original|apng~original|tiff~original))|(^data:image\\/.*))(\\?([^#]*))?(#(.*))?

I've tried flagging the background as important but it didn't work.
It's probably the regexp that is out of syntax. I just copied the content between the regexp quotes and pasted it in the applies to box.
Regexp before:

@-moz-document regexp("((.*\\.(png|apng|gif|tiff|png~original|apng~original|tiff~original))|(^data:image\\/.*))(\\?([^#]*))?(#(.*))?")

Comments

  • This works for me in Stylus:
    @-moz-document regexp("((.*\\.(png|apng|gif|tiff|png~original|apng~original|tiff~original))|(^data:image\\/.*))(\\?([^#]*))?(#(.*))?") {
    html {
    background: #E5E5E5 url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD//gATQ3JlYXRlZCB3aXRoIEdJTVD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wgARCACAAIADAREAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAABwAG/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAAB0IdiIHYiB2IgdiIHYiB2IgdiIHZCIHYiB2IgdiIHYiB2IgdiIHYiEHYiB2IgdiIHYiB2IgdiIHYiB2QiB2IgdiIHYiB2IgdiIHYiB2IhB2IgdiIHYiB2IgdiIHYiB2IgdkIgdiIHYiB2IgdiIHYiB2IgdiIQdiIHYiB2IgdiIHYiB2IgdiIHZCIHYiB2IgdiIHYiB2IgdiIHYiEHYiB2IgdiIHYiB2IgdiIHYiB2QiB2IgdiIHYiB2IgdiIHYiB2IhB2IgdiIHYiB2IgdiIHYiB2IgdkIgdiIHYiB2IgdiIHYiB2IgdiIQdiIHYiB2IgdiIHYiB2IgdiIHZCIHYiB2IgdiIHYiB2IgdiIHYiEHYiB2IgdiIHYiB2IgdiIHYiB2QiB2IgdiIHYiB2IgdiIHYiB2Ih/8QAFBABAAAAAAAAAAAAAAAAAAAAgP/aAAgBAQABBQIAf//EABQRAQAAAAAAAAAAAAAAAAAAAID/2gAIAQMBAT8BAH//xAAUEQEAAAAAAAAAAAAAAAAAAACA/9oACAECAQE/AQB//8QAFBABAAAAAAAAAAAAAAAAAAAAgP/aAAgBAQAGPwIAf//EABQQAQAAAAAAAAAAAAAAAAAAAID/2gAIAQEAAT8hAH//2gAMAwEAAgADAAAAEJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJP/EABQRAQAAAAAAAAAAAAAAAAAAAID/2gAIAQMBAT8QAH//xAAUEQEAAAAAAAAAAAAAAAAAAACA/9oACAECAQE/EAB//8QAFBABAAAAAAAAAAAAAAAAAAAAgP/aAAgBAQABPxAAf//Z') repeat scroll 0% 0%;
    }
    }
    So it's an error in the CSS selector.

    And beware importing/simple copying might change your RegEx escape backslashes to double backslashes - I had to manually delete doubles.
  • I just tried the html selector instead, but it still won't work on the new version.
    Also the 'img.transparent' selector is still present in FF, for image types with transparency, as shown below.
    413 x 100 - 18K
  • edited November 15 Firefox
    You're right, that selector seems ok. Can't tell what was different for me before because I installed a completely fresh version of FF57. I also don't know if you are talking about the new FF or new Stylish version.

    It works here with Stylus.
    This is what I have in the "applies to" field:
    ((.*\.(png|apng|gif|tiff|png~original|apng~original|tiff~original))|(^data:image\/.*))(\?([^#]*))?(#(.*))?
    As already mentioned, only difference are the deleted double slashes. In CSS you need double slashes, in JS (or direct input field below style editor) single is sufficient.

    When exporting, they are automatically doubled, so if you don't use the import function but just copy it, it doesn't work.

    Screenshot: https://i.imgur.com/Ie4dHiI.jpg
  • Thank you. It was indeed that I was copying, and the input line only needed one backslash. I didn't get you at first, so thanks for explaining it again.
Sign In or Register to comment.