How to configure postcss autoprefixer and stitches in a NEXTJS project? #1024
-
|
I've finished a Nextjs project with stitches and modern css features like "gap" ( @https://caniuse.com/?search=gap) and I ran into a few problems on old safari browsers (<14). Since Next.js allow us to configure the target browsers (for Autoprefixer and compiled css features) through Browserslist I tried to configure browserlist as bellow but nothing happened, I'm still facing the same problems:
Does Stitches requires some other tool to support older browsers? |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 1 reply
-
|
You can configure postcss and its features such as autoprefixer etc. But keep in mind that Stitches is currently only a runtime, which means postcss can only handle styles from already mounted components (conditional rendering is not supported) and only at build time. In dev mode - on initial SSR request (hot reload will reset styles without postcss processing).
import React from 'react';
import postCss, { AcceptedPlugin } from 'postcss';
import postCssPresetEnv from 'postcss-preset-env';
import NextDocument, { DocumentContext, Html, Head, Main, NextScript } from 'next/document';
import { getCssText } from 'stitches.config';
export default class Document extends NextDocument {
/* styles from already mounted components are currently being processed at build time only */
static async getInitialProps(ctx: DocumentContext) {
const cssText = getCssText();
const { css } = await postCss([
postCssPresetEnv({
browsers: 'last 2 versions',
stage: 2,
autoprefixer: {},
}) as AcceptedPlugin,
]).process(cssText, {
from: undefined,
});
const { styles, ...initialProps } = await NextDocument.getInitialProps(ctx);
return {
...initialProps,
styles: [
<React.Fragment key="styles">
{styles}
<style id="stitches" dangerouslySetInnerHTML={{ __html: css }} />
</React.Fragment>,
],
};
}
render() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}Soon (I hope) will be available api for static extraction, which will solve problem. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you very much for your feedback and brief and objective explanation! Really looking forward for that api for static extraction! |
Beta Was this translation helpful? Give feedback.
-
|
I think maybe this should be write into the docs? But I don't know who should I notify. |
Beta Was this translation helpful? Give feedback.
You can configure postcss and its features such as autoprefixer etc. But keep in mind that Stitches is currently only a runtime, which means postcss can only handle styles from already mounted components (conditional rendering is not supported) and only at build time. In dev mode - on initial SSR request (hot reload will reset styles without postcss processing).
Things like flex gap polyfill are difficult to implement (for example, it requires a special additional layout).
_document.tsx: