sveltepostcss

Where does the :not(#\#):not(#\#) selector come from?

My css as written:

/* .elevation-0 {} */

.elevation-1 {
    box-shadow: var(--elevation-color-1) 0px 2px 1px -1px, var(--elevation-color-2) 0px 1px 1px 0px, var(--elevation-color-3) 0px 1px 3px 0px;
}

.elevation-2 {
    box-shadow: var(--elevation-color-1) 0px 3px 1px -2px, var(--elevation-color-2) 0px 2px 2px 0px, var(--elevation-color-3) 0px 1px 5px 0px;
}

.elevation-3 {
    box-shadow: var(--elevation-color-1) 0px 3px 3px -2px, var(--elevation-color-2) 0px 3px 4px 0px, var(--elevation-color-3) 0px 1px 8px 0px;
}

.elevation-4 {
    box-shadow: var(--elevation-color-1) 0px 2px 4px -1px, var(--elevation-color-2) 0px 4px 5px 0px, var(--elevation-color-3) 0px 1px 10px 0px;
}

.elevation-5 {
    box-shadow: var(--elevation-color-1) 0px 3px 5px -1px, var(--elevation-color-2) 0px 5px 8px 0px, var(--elevation-color-3) 0px 1px 14px 0px;
}

the project uses svelte5 and postcss, but I haven't been able to re-create the problem in a new sample project (and #\# is impossible to google).

Where is the extra selector specifier coming from?

is (in devtools) turned into

/* .elevation-0 {} */
.elevation-1:not(#\#):not(#\#) {
    box-shadow: var(--elevation-color-1) 0px 2px 1px -1px, var(--elevation-color-2) 0px 1px 1px 0px, var(--elevation-color-3) 0px 1px 3px 0px;
}
.elevation-2:not(#\#):not(#\#) {
    box-shadow: var(--elevation-color-1) 0px 3px 1px -2px, var(--elevation-color-2) 0px 2px 2px 0px, var(--elevation-color-3) 0px 1px 5px 0px;
}
.elevation-3:not(#\#):not(#\#) {
    box-shadow: var(--elevation-color-1) 0px 3px 3px -2px, var(--elevation-color-2) 0px 3px 4px 0px, var(--elevation-color-3) 0px 1px 8px 0px;
}
.elevation-4:not(#\#):not(#\#) {
    box-shadow: var(--elevation-color-1) 0px 2px 4px -1px, var(--elevation-color-2) 0px 4px 5px 0px, var(--elevation-color-3) 0px 1px 10px 0px;
}
.elevation-5:not(#\#):not(#\#) {
    box-shadow: var(--elevation-color-1) 0px 3px 5px -1px, var(--elevation-color-2) 0px 5px 8px 0px, var(--elevation-color-3) 0px 1px 14px 0px;
}
Solution

  • This is most likely produced by @csstools/postcss-cascade-layers which is a plugin to downgrade @layer for older browser versions.

    https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-cascade-layers#how-it-works

    It applies extra specificity on all your styles based on :

    • the most specific selector found
    • the order in which layers are defined

    It is not a bug. However if you are facing issues and you suspect that this is the source, then please open an issue here : https://github.com/csstools/postcss-plugins/issues/new/choose