Not working with Next.js and styled-components

[alvarlagerlof]

This is my postcss.config.json

{
    "plugins": [
        "flex-gap-polyfill",
        "postcss-flexbugs-fixes",
        [
            "postcss-preset-env",
            {
                "autoprefixer": {
                    "flexbox": "no-2009"
                },
                    "stage": 3,
                    "features": {
                        "custom-properties": false
                    }
                }
        ]
    ]
}

It does not transform gap: x; to anything.

[gavinmcfarland]

Thanks for raising this issue. This could be related to #19. Are you using PostCSS 8? I'll take a look soon and see what's going on.

[alvarlagerlof]

Not sure, I am using whatever comes with Next.js currently. I ran the create-next-app very recently.

[lShinal]

I have same issue. When I added polyfill, during the build I got this error message for *.module.scss file. Selector ":root" is not pure (pure selectors must contain at least one local class or id) exemple classes in file: .row { display: flex; gap:var(--gap) }

but for global scss all works is fine but if add any *.module.scss into jsx component then same error

[gavinmcfarland]

Hi @lShinal. Are you using any other PostCSS plugins? I haven't used CSS modules before, is this something you're using? The plugin adds some custom properties to the top of the CSS file inside a :root rule. :root should technically exist at the top, so I suspect something is preventing this from happening. It could be another PostCSS plugin that is being processed after the flex gap polyfill has been applied. One thing you could try is putting flex-gap-polyfil before other plugins.

I hope to improve this when I refactor it to take advantage of the new features in PostCSS 8.

[lShinal]

@limitlessloop I solved this... but it's not solution. I cloned project and replace :root selector on my class(.gap_container). I can't use :root and tags in *.module.scss only class or id. Rebuild polifil and it's works. Look like it's works. Use case: Row.tsx

import React, { CSSProperties, FC } from "react";
import classes from "./Row.module.scss";
export interface IRow {
  gap: string | number;
}

interface RowStyleVars extends CSSProperties {
  "--gap": string | number;
}

export const Row:FC<IRow> = ({ gap, children }) => {
  const styleVars: RowStyleVars = { "--gap": gap};

  return (
      <div className={gap_container  ${classes.row}} style={styleVars}>
        {children}
      </div>
  );
};

Row.module.scss

.row {
  display: flex;
  gap:var(--gap);
}

[gavinmcfarland]

Thanks. If you can share a repo of your project I'll take a look for you. I'd need to understand when PostCSS is processing the styles.

[borispoehland]

I have the same problem (:root is not pure). Thanks for trying to fix it!

[borispoehland]

Oh, you still need the repo? I can set one up for you tomorrow

[borispoehland]

Ok, I set up the repo here: https://github.com/borispoehland/flex-gap-polyfill-next-js

Therefore I bootstrapped a standard next.js app and added the flex-gap-polyfillas plugin in the postcss.config.js. On start (npm run dev), the error Selector ":root" is not pure (pure selectors must contain at least one local class or id) is shown for the CSS Module Home.module.css

[gavinmcfarland]

Thank you @borispoehland. I've released a solution which prevents adding any :root styles to any module.css files. This fix is available in version 2.1.1. Don't hesitate to get in touch if you encounter any other issues.