Skip to content

chore(css): update browserlist settings#4434

Merged
oddvernes merged 10 commits intomainfrom
chore/css-remove-autoprefixer
Jan 27, 2026
Merged

chore(css): update browserlist settings#4434
oddvernes merged 10 commits intomainfrom
chore/css-remove-autoprefixer

Conversation

@oddvernes
Copy link
Collaborator

@oddvernes oddvernes commented Jan 23, 2026

resolves #4432

I believe this is a recent change in the past 1 or 2 releases where the autoprefixer stopped respecting browserlist from package.json and started spamming decades old prefixes for everything.
We have opted to remove this plugin and let it be up to downstream consumers to optionally do this in their own build steps, where it makes more sense.. I have removed "cover 90% in NO" which seems to be the offending part leaving mostly useful prefixes (but still some outdated -moz-prefixes). This is safer than removing autoprefixer fully

This reduces index.css in dist from 157 to 113kb

@changeset-bot
Copy link

changeset-bot bot commented Jan 23, 2026

🦋 Changeset detected

Latest commit: 536317d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages
Name Type
@digdir/designsystemet-css Patch
@digdir/designsystemet-react Patch
@digdir/designsystemet Patch
@digdir/designsystemet-types Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions
Copy link
Contributor

github-actions bot commented Jan 23, 2026

Preview deployments for this pull request:

storybook - 27. Jan 2026 - 13:16

Co-authored-by: Michael Marszalek <mimarz@gmail.com>
@mimarz
Copy link
Collaborator

mimarz commented Jan 23, 2026

With the removal of autoprefixer, do we still need browserlist declaration in the package.json?

The more I think about removal of autoprefixer. It might be wise to also document that we expect people to add parsers for targeting browsers in their own build step.

This is potentially also a breaking change downstream for people have users with older browsers, so we need to be very clear about this change.

@eirikbacker
Copy link
Contributor

With the removal of autoprefixer, do we still need browserlist declaration in the package.json?

The more I think about removal of autoprefixer. It might be wise to also document that we expect people to add parsers for targeting browsers in their own build step.

This is potentially also a breaking change downstream for people have users with older browsers, so we need to be very clear about this change.

I agree, but, I also think we should be smart about this;
most people these days have some kind of build step, unless they consume directly from CDN.
Most build stepes automatically do have some sort of processing, so people might have it already too. And what kind of browsers should we support? Maybe, just thinking out loud; we should not remove the autoprefixer, but ensure the things we prefix is actually what we think we need? This job should be done once, by us, not by many? :) Maybe we should have a quick huddle before merging this

@oddvernes
Copy link
Collaborator Author

oddvernes commented Jan 26, 2026

I think the only things we use that perhaps should have prefix fallback are mask (several places) and box-decoration-break: clone; (skeleton.css). Don't forget our hard cutoff for support is @layer anyway which is newer than most vendor prefixes. edit: apparently we only set @layer in index.css and not individual component css-files. (Theme file also uses @layer though

seems like "cover 90% in NO", could be the offender, even though it doesnt make sense to me. Perhaps somehting is wrong in the browserlist database. But if i remove the line most of the vendor prefixes goes away

@eirikbacker
Copy link
Contributor

@oddvernes Very much agree! @layer and sever other techniques adds a hard limit anyway. Mask can be prefixed, to fix the ensure 6% more support, and box-decoration-break indeed. Can we make autoprefixer only fix these two? :D

@oddvernes
Copy link
Collaborator Author

oddvernes commented Jan 26, 2026

Trying with adding back autoprefixer and removing "cover 90% in NO". This leaves us with 54 mostly relevant -webkit- prefixes and 44 mostly irrelevant outdated -moz- prefixes, I have not been able to get rid of those.

Some of the additional useful -webkit prefixes: -webkit-print-color-adjust and -webkit-user-select

@oddvernes oddvernes changed the title chore(css): remove postcss autoprefixer chore(css): update browserlist settings Jan 26, 2026
Copy link
Member

@Barsnes Barsnes left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd update the changeset a bit perhaps..
It's only our index file that has layers, which only gives that file a "cutoff"

@oddvernes oddvernes merged commit 3e2b583 into main Jan 27, 2026
22 checks passed
@oddvernes oddvernes deleted the chore/css-remove-autoprefixer branch January 27, 2026 14:16
@github-actions github-actions bot mentioned this pull request Jan 27, 2026
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.

Remove unnecessary CSS prefixing

4 participants