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

Unhandled: :matches, stretch, sticky #6130

Open
joyously opened this issue Oct 8, 2017 · 5 comments
Open

Unhandled: :matches, stretch, sticky #6130

joyously opened this issue Oct 8, 2017 · 5 comments

Comments

@joyously
Copy link
Contributor

joyously commented Oct 8, 2017

Looking through the tables at http://www.caniuse.com/#cats=CSS, I see these 3 things:

  • :matches selector was :any, can be :-webkit-any or :-moz-any

  • stretch keyword can be -webkit-stretch or -moz-available

  • sticky keyword for position is not in the list of keywords

@LeaVerou
Copy link
Owner

LeaVerou commented Oct 9, 2017

We can't do anything for the first one (since -prefix-free only adds a prefix, doesn't rewrite), but would accept PRs for the others :)

@joyously
Copy link
Contributor Author

joyously commented Oct 9, 2017

Wouldn't changing stretch to -moz-available be a rewrite also?
And it looked to me like the selectors are set up to handle changes, like placeholder does.

@LeaVerou
Copy link
Owner

Yeah, I guess we have deviated from the original premise :)
No strong opinions there, if you can implement it in a sane way, I'd merge it.

@joyously
Copy link
Contributor Author

joyously commented Apr 28, 2019

I was looking in to how to add :matches and :is, but this code seems to be doing something odd.

for(var selector in selectors) {
	var standard = selectors[selector] || selector
	var prefixed = selector.replace(/::?/, function($0) { return $0 + self.prefix })
	if(!supported(standard) && supported(prefixed)) {
		self.selectors.push(standard);
		self.selectorMap[standard] = prefixed;
	}
}

It gets the standardized selector and checks if that is supported instead of checking if the non-standard one is supported. So if the stylesheet has :input-placeholder it remains untouched since it checked for ::placeholder being supported. Is this the intended logic? Is this supposed to leave an unsupported style alone, in case it is followed by the supported one? Or should the selector being saved be the actual selector that is prefixed, not the standardized one?
Would this make more sense?

for(var selector in selectors) {
	var standard = selectors[selector] || selector
	var prefixed = selector.replace(/::?/, function($0) { return $0 + self.prefix })
	if(!supported(standard) && supported(prefixed)) {
		self.selectors.push(selector);
		self.selectorMap[selector] = prefixed;
	}
}

@joyously
Copy link
Contributor Author

I think I'm understanding this better now. I got onto a tangent trying to do :matches since it is a rewrite, so was looking at the others that way. Sorry!

But, leaving the original code alone, doesn't the list of selectors hold the one that should be used to build the prefix, and the standard to check for? So maybe it's a different issue, but I'm thinking the list should look more like this

	'::placeholder': null,
	':placeholder': ':placeholder-shown',
	'::input-placeholder': '::placeholder',
	':input-placeholder': ':placeholder-shown',

I started typing this and forgot... So I opened a different issue (#6143) for the :placeholder-shown problem. If it's merged before the others that add to that list it won't interfere.

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

No branches or pull requests

2 participants