Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Fix parsing of :global when CSS Modules is disabled #575

Closed
wants to merge 5 commits into from

Conversation

kdy1
Copy link
Contributor

@kdy1 kdy1 commented Aug 31, 2023

Even when CSS Modules is disabled,

 @media (max-width: 870px) {
    :global(th.expiration-date-cell),
    :global(td.expiration-date-cell) {
      display: none;
    }
  }

is parsed as

Selector(:is(:CustomFunction { name: "global", arguments: TokenList([Token(Ident("th")), Token(Delim('.')), Token(Ident("expiration-date-cell"))]) }, :CustomFunction { name: "global", arguments: TokenList([Token(Ident("td")), Token(Delim('.')), Token(Ident("expiration-date-cell"))]) }), specificity = 0x400)

I got it using my fork, which allows printing selectors.

This looks like

:is(:global(th.expiration-date-cell), :global(td.expiration-date-cell))

x-ref: swc-project/plugins#205

Playground: https://lightningcss.dev/playground/index.html#%7B%22minify%22%3Afalse%2C%22nesting%22%3Afalse%2C%22customMedia%22%3Afalse%2C%22cssModules%22%3Afalse%2C%22analyzeDependencies%22%3Afalse%2C%22targets%22%3A%7B%22chrome%22%3A6225920%7D%2C%22include%22%3A0%2C%22exclude%22%3A0%2C%22source%22%3A%22%20%40media%20(max-width%3A%20870px)%20%7B%5Cn%20%20%20%20%3Aglobal(th.expiration-date-cell)%2C%5Cn%20%20%20%20%3Aglobal(td.expiration-date-cell)%20%7B%5Cn%20%20%20%20%20%20display%3A%20none%3B%5Cn%20%20%20%20%7D%5Cn%20%20%7D%22%2C%22visitorEnabled%22%3Afalse%2C%22visitor%22%3A%22%7B%5Cn%20%20Color(color)%20%7B%5Cn%20%20%20%20if%20(color.type%20%3D%3D%3D%20'rgb')%20%7B%5Cn%20%20%20%20%20%20color.g%20%3D%200%3B%5Cn%20%20%20%20%20%20return%20color%3B%5Cn%20%20%20%20%7D%5Cn%20%20%7D%5Cn%7D%22%2C%22unusedSymbols%22%3A%5B%5D%2C%22version%22%3A%22local%22%7D

@kdy1 kdy1 changed the title fix: Fix parsing of :global in a @media at-rule fix: Fix parsing of :global when CSS Modules is disabled Aug 31, 2023
@kdy1
Copy link
Contributor Author

kdy1 commented Aug 31, 2023

I think the problem is

let incompatible = if style.selectors.0.len() > 1 && !style.is_compatible(*context.targets) {
// The :is() selector accepts a forgiving selector list, so use that if possible.
// Note that :is() does not allow pseudo elements, so we need to check for that.
// In addition, :is() takes the highest specificity of its arguments, so if the selectors
// have different weights, we need to split them into separate rules as well.
if context.targets.is_compatible(crate::compat::Feature::IsSelector)
&& !style.selectors.0.iter().any(|selector| selector.has_pseudo_element())
&& style.selectors.0.iter().map(|selector| selector.specificity()).all_equal()
{
style.selectors =
SelectorList::new(smallvec![
Component::Is(style.selectors.0.clone().into_boxed_slice()).into()
]);
smallvec![]
} else {
// Otherwise, partition the selectors and keep the compatible ones in this rule.
// We will generate additional rules for incompatible selectors later.
let (compatible, incompatible) = style
.selectors
.0
.iter()
.cloned()
.partition::<SmallVec<[Selector; 1]>, _>(|selector| {
let list = SelectorList::new(smallvec![selector.clone()]);
is_compatible(&list.0, *context.targets)
});
style.selectors = SelectorList::new(compatible);
incompatible
}
} else {
smallvec![]
};

@kdy1
Copy link
Contributor Author

kdy1 commented Aug 31, 2023

I'm sorry. I'll just apply my visitor before calling .minify()

@kdy1 kdy1 closed this Aug 31, 2023
@kdy1 kdy1 deleted the kdy1/dev branch August 31, 2023 08:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant