a14f6bcf6d
The main things I'm seeing right now are:
1. Some selectors are broken up into multiple selectors, especially when
there are pseudo classes involved where the output is unknown. For
example `::ng-deep, ::v-deep {}` will be split into `::ng-deep {},
::v-deep {}`
2. It looks like a lot of selectors were dropped, however after looking
at them in more detail I noticed that they were _duplicated_ before.
This means that now the output will be smaller in these cases!
31 lines
697 B
JavaScript
31 lines
697 B
JavaScript
import { css, quickVariantPluginTest } from '../../util/run'
|
|
|
|
quickVariantPluginTest('hasVariants', {
|
|
safelist: [
|
|
'has-[.foo]:flex',
|
|
|
|
'group-has-[.foo]:flex',
|
|
'peer-has-[.foo]:flex',
|
|
|
|
'group-has-[.bar]/foo:flex',
|
|
'peer-has-[.bar]/foo:flex',
|
|
],
|
|
}).toMatchFormattedCss(
|
|
css`
|
|
.has-\[\.foo\]\:flex:has(.foo) {
|
|
display: flex;
|
|
}
|
|
.group\/foo:has(.bar) .group-has-\[\.bar\]\/foo\:flex {
|
|
display: flex;
|
|
}
|
|
.group:has(.foo) .group-has-\[\.foo\]\:flex {
|
|
display: flex;
|
|
}
|
|
.peer\/foo:has(.bar) ~ .peer-has-\[\.bar\]\/foo\:flex {
|
|
display: flex;
|
|
}
|
|
.peer:has(.foo) ~ .peer-has-\[\.foo\]\:flex {
|
|
display: flex;
|
|
}
|
|
`
|
|
)
|