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

Rules duplicate when moz-placeholder prefix added #1497

Open
discountscott opened this issue Jun 20, 2023 · 3 comments
Open

Rules duplicate when moz-placeholder prefix added #1497

discountscott opened this issue Jun 20, 2023 · 3 comments

Comments

@discountscott
Copy link

Everytime the autoprefixer is run on the following bit of CSS, the moz-placeholder prefixes are added above (even if they already exist).
postcss ./**/*.css -u autoprefixer --no-map --base . --dir ./

They are multiplying everytime it runs...

#cardNumber::placeholder,
#cardHolder::placeholder,
#expDate::placeholder,
#cvc::placeholder {
    font-size: 2rem;
}

After a few runs in GitHub actions with the following browserslist > 0.5%, last 6 versions, Firefox ESR, not dead

you end up with the following:

#cardHolder::-moz-placeholder,
#expDate::-moz-placeholder,
#cvc::-moz-placeholder {
    font-size: 2rem;
}
#cardNumber::-moz-placeholder,
#cardHolder::-moz-placeholder,
#expDate::-moz-placeholder,
#cvc::-moz-placeholder {
    font-size: 2rem;
}
#cardNumber::-moz-placeholder,
#cardHolder::-moz-placeholder,
#expDate::-moz-placeholder,
#cvc::-moz-placeholder {
    font-size: 2rem;
}
#cardNumber::-moz-placeholder,
#cardHolder::-moz-placeholder,
#expDate::-moz-placeholder,
#cvc::-moz-placeholder {
    font-size: 2rem;
}
#cardNumber::-moz-placeholder,
#cardHolder::-moz-placeholder,
#expDate::-moz-placeholder,
#cvc::-moz-placeholder {
    font-size: 2rem;
}
#cardNumber::placeholder,
#cardHolder::placeholder,
#expDate::placeholder,
#cvc::placeholder {
    font-size: 2rem;
}
@ai
Copy link
Member

ai commented Jun 20, 2023

I can’t reproduce it on https://autoprefixer.github.io/

Maybe you are using some old Autoprefixer or have any other problem in environment.

Try to reproduce issue in s simplest new project.

@discountscott
Copy link
Author

I can reproduce it there. Looks like it gets duplicated when it gets formatted to match our style (each on own line). If you feed that back in again, it'll add it again.

So if you enter

#cardNumber::placeholder,
#cardHolder::placeholder,
#expDate::placeholder,
#cvc::placeholder {
	font-size: 2rem;
}

You'll get the output of

#cardNumber::-moz-placeholder, #cardHolder::-moz-placeholder, #expDate::-moz-placeholder, #cvc::-moz-placeholder {
	font-size: 2rem;
}
#cardNumber::placeholder,
#cardHolder::placeholder,
#expDate::placeholder,
#cvc::placeholder {
	font-size: 2rem;
}

We format that with prettier to

#cardNumber::-moz-placeholder,
#cardHolder::-moz-placeholder,
#expDate::-moz-placeholder,
#cvc::-moz-placeholder {
	font-size: 2rem;
}
#cardNumber::placeholder,
#cardHolder::placeholder,
#expDate::placeholder,
#cvc::placeholder {
	font-size: 2rem;
}

Put that back in the autoprefixer and it'll generate

#cardNumber::-moz-placeholder,
#cardHolder::-moz-placeholder,
#expDate::-moz-placeholder,
#cvc::-moz-placeholder {
	font-size: 2rem;
}
#cardNumber::-moz-placeholder, #cardHolder::-moz-placeholder, #expDate::-moz-placeholder, #cvc::-moz-placeholder {
	font-size: 2rem;
}
#cardNumber::placeholder,
#cardHolder::placeholder,
#expDate::placeholder,
#cvc::placeholder {
	font-size: 2rem;
}

DFS-SDM-6-20-2023- 9 52 18 AM- 0

@ai
Copy link
Member

ai commented Jun 20, 2023

Yes, Autoprefixer duplication prevention works only if you pass exact output.

Unfortunately, duplication prevention is not a priority for me. You will need to debug the code and send PR. Here is a block where you need to work https://github.com/postcss/autoprefixer/blob/main/lib/selector.js#L89-L119

Ask any questions if you will have them during the work.

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