plotdb / csscope Goto Github PK

say for scoping in hierarchy we use [scope] selector for scoping test, thus csscope generates css with :not([scope]) selector. This may apply to rules with pseudo elements ( :before ) - but it just doesn't work:

something::before:not([scope])  /* this won't work, and will break this rule */

however we simply don't need :not([scope]) for pseudo elements since they can never be targets for matching scope test.

We can simply ignore the scope test for pseudo elements to resolve this issue.

scoped CSS affects all nodes under the scoped root, even if some children have their own scopes.

possible solution is to add not pseudo class:

    /* original css
    div {background: #0f0; }  /* for div[scope=s1] */
    div {background: #f00; }  /* for div[scope=s2] */
    */
    
    /* converted css */
    div[scope=s1] :not([scope]) div {background: #f00; }
    div[scope=s1] > div:not([scope]) {background: #f00; } /* can be written as one line. separate for clarity. */
    
    div[scope=s2] :not([scope]) div {background: #0f0; }
    div[scope=s2] > div:not([scope]) {background: #0f0; }

live sample code available here:

https://codepen.io/tkirby/pen/poEdNRw