Блог

Я хочу использовать новое свойство gap от flexbox в своем Next.js приложении, используя styled-components без потери поддержки, например, Safari. Я нашел это полизаполнение https://www.npmjs.com/package/flex-gap-polyfill Но мне трудно понять, где и подходит ли это вообще. Если я правильно понял, Next поддерживает использование PostCSS , но styled-components не делает? Как мне заставить полизаполнение, связанное выше, работать с этими двумя компонентами?

Пример кода, который я хотел бы написать и который поддерживается на современных платформах:

 display: flex;
flex-direction: row;
gap: 16px;
  

Код, который я обнаружил, можно использовать styled-components с. Next Файл _document.js

 import Document from "next/document";
import { ServerStyleSheet } from "styled-components";

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
  const sheet = new ServerStyleSheet();
  const originalRenderPage = ctx.renderPage;

  try {
    ctx.renderPage = () =>
      originalRenderPage({
        enhanceApp: (App) => (props) =>
          sheet.collectStyles(<App {...props} />),
      });

    const initialProps = await Document.getInitialProps(ctx);
    return {
      ...initialProps,
      styles: (
        <>
          {initialProps.styles}
          {sheet.getStyleElement()}
        </>
      ),
    };
  } finally {
    sheet.seal();
  }
}
  

Это мой postcss.config.js

 module.exports = {
  plugins: {
    autoprefixer: {},
    "flex-gap-polyfill": {},
    "postcss-flexbugs-fixes": {},
    "postcss-preset-env": {
      autoprefixer: {
        flexbox: "no-2009",
      },
      stage: 3,
      features: {
        "custom-properties": false,
      },
    },
  },
};