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;}