In Next.js it's not including 3rd party packages CSS

[debotos]

Not including 3rd party packages CSS

Next.js version - 11.0.2-canary.15

I have two 3rd party CSS imports inside the _app.tsx

import 'slick-carousel/slick/slick.css'
import 'ant-design-layout/dist/ant-design-layout.min.css'

postcss.config.js -

const plugins = [
  'postcss-flexbugs-fixes',
  [
    'postcss-preset-env',
    {
      autoprefixer: { flexbox: 'no-2009' },
      stage: 3,
      features: { 'custom-properties': false },
    },
  ],
]

plugins.push([
  '@fullhuman/postcss-purgecss',
  {
    content: ['./src/**/*.{js,jsx,ts,tsx}'],
    defaultExtractor: (content) => {
      // Treat every word in the bundle as a CSS selector
      return content.match(/[\w-/:]+(?<!:)/g) || []
    },
    safelist: ['html', 'body'],
  },
])

module.exports = { plugins }

[elie222]

Any quick fixes for this? Like jumping to a version that does work. We're also facing this issue

[elie222]

We're using safelist option as a workaround for now

[a-rebets]

Hey guys,

I've managed to reproduce the issue. Currently I'm using Next with PrimeReact, they have a number of example projects listed here. I just took the basic one for Next.js and configured it according to the PurgeCSS instruction here.

The UI library of my choice fits into the current problem's description, in PrimeReact a couple of global stylesheets have to be imported for components to display correctly: foundation, theme and icons.

import "primereact/resources/themes/saga-blue/theme.css";
import "primereact/resources/primereact.min.css";
import "primeicons/primeicons.css";

In this case PurgeCSS is used as a PostCSS plugin:

[
  "@fullhuman/postcss-purgecss",
    {
      content: [
          "./pages/**/*.{js,jsx,ts,tsx}",
          "./components/**/*.{js,jsx,ts,tsx}",
      ],
      defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
      safelist: ["html", "body"],
    },
],

Here's the sandbox link. It's clearly visible that the component is broken

[a-rebets]

@Ffloriel any ideas why it may be happening?