SX: Vendor prefixes via Autoprefixer #1467
Conversation
michalsanger
requested review from
jaroslav-kubicek,
mrtnzlml and
tbergquist-godaddy
as code owners
|
Does it work with runtime styles as well? |
michalsanger
force-pushed
the
sx-autoprefixer
branch
from
d409801
to
c7a2fbd
Compare
vercel
bot
temporarily deployed
to
Preview – universe-sx-tailwind-website
| @@ -14,11 +14,13 @@ | |||
| "@adeira/murmur-hash": "^1.0.0", | |||
| "@adeira/signed-source": "^1.0.0", | |||
| "@babel/runtime": "^7.12.5", | |||
| "autoprefixer": "^10.0.4", | |||
There was a problem hiding this comment.
Will this be a part of the runtime-bundle? because it is quite huge
There was a problem hiding this comment.
It's used in https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss do you see any issue there?
There was a problem hiding this comment.
This is production build of relay-example in this branch:
There was a problem hiding this comment.
And this is master:
There was a problem hiding this comment.
It is true that during a build of sx-tailwind-website in the monorepo I get warnings and increased bundle size:
/Users/michalsanger/projects/adeira/universe/node_modules/@adeira/sx/node_modules/browserslist/node.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
/Users/michalsanger/projects/adeira/universe/node_modules/@adeira/sx/node_modules/browserslist/node.js 175:18-177:7
Critical dependency: the request of a dependency is an expression
But when I tried postcss and autoprefixer on a standalone Next.js project everything was fine. Maybe because of next.config.js?
There was a problem hiding this comment.
So is there some cheaper alternative for CSS-in-JS? 1 MB is really a lot. Why is it so big? 🤔
There was a problem hiding this comment.
Maybe the PostCSS is designed to be used with Babel & Webpack, not during a runtime. I'll try to use https://github.com/robinweser/inline-style-prefixer in a new PR but probably the output will not be that good.
There was a problem hiding this comment.
I think most CSS-in-JS uses styleis
There was a problem hiding this comment.
Alternatively, you could read it from mdn/browser-compat-data as suggested here: #996
There was a problem hiding this comment.
Attempt with Stylis #1480
| "change-case": "^4.1.2", | ||
| "css-tree": "^1.1.2", | ||
| "fast-levenshtein": "^3.0.0", | ||
| "json-stable-stringify": "^1.0.1", | ||
| "mdn-data": "^2.0.14", | ||
| "postcss": "^8.1.14", |
There was a problem hiding this comment.
This also adds about 60kb
michalsanger
force-pushed
the
sx-autoprefixer
branch
from
c7a2fbd
to
96daef5
Compare
vercel
bot
temporarily deployed
to
Preview – universe-sx-tailwind-website
Vendor prefixes are automatically added into the generated CSS.
michalsanger
force-pushed
the
sx-autoprefixer
branch
from
96daef5
to
fa327ca
Compare
vercel
bot
temporarily deployed
to
Preview – universe-sx-tailwind-website
|
See #1480 |
|
@michalsanger So this branch can be deleted? 🙂 |
Vendor prefixes are automatically added into the generated CSS.