Skip to content

Stylus error example :is selector by wykopchanger

Screenshot of Stylus error example :is selector

Details

Authorwykopchanger

LicenseNo License

Categorytest

Created

Updated

Size1.7 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

:is selector causing an error when parsing stylus style

Notes

when you remove "REMOVETHISTEXT" string from class .testREMOVETHISTEXT and will try to save the style, stylus will give you this error:

12:9 Expected "}" but found ")".
12:9 Unexpected ")".
15:1 Unexpected "}".

Source code

/* ==UserStyle==
@name           selector causing an error
@version        1

@preprocessor   stylus
@namespace      userstyles.world/user/test
@license        No License (YOU CAN USE THIS CODE ONLY IN STYLUS EXTENSIONS. You are not allowed to: copy any part of the code, share, and use it anywhere)
==/UserStyle== */   
@-moz-document url-prefix("https://google.com")
{    
    
    /*
    using :not() and :is() both gives an error in the same way
    Erros is happening when you 
    - use more than one selector declaration separated by commas 
    - use :is() or :not() pseudoselectors
    - use multiple classes inside pseudoselector
    - first class is the same for both 
    
    When all above conditions are met you will get an error:    
    
        Expected "}" but found ")".
        Unexpected ")".
        Unexpected "}".
    */
    

    // EXAMPLE 1 :not() - this gives an error:
    
    /* div:not(.test1, .test2),                     // uncomment this line to get an error */
    div:not(.test1, .test2) > span
    {
        color: red;
    }
    
    // EXAMPLE 2 :is() - this gives an error:
    
    /* div:is(.test, .test1),                       // uncomment this line to get an error */
    div:is(.test, .test2) > span
    {
        color: red;
    }
    
    // however when you change places for classes and "the same class" is as second parameter, it works fine:
    div:is(.test1, .test),
    div:is(.test2, .test) > span,
    {
        color: green;
    }
    
    // so it's enough to give some dummy class that we don't want and it works:
    div:is(.dummy, .test, .test2),
    div:is(.test, .test2) > span,
    {
        color: green;
    }
}

Reviews

No reviews yet.