Preview not working with tailwind and postcss

[amglt]

Describe the bug

Using react preview to preview a basic component, css from taillwind is not working and preview displays an error

Component:

import { ReactNode } from 'react';

export interface FolderTileProps {
  title: string;
  icon: ReactNode;
}

export function FolderTile(props: FolderTileProps) {
  const { title, icon } = props;

  return (
    <div className="w-36 h-36 rounded-[30px] bg-white hover:cursor-pointer">
      <div className="text-base text-default-black text-center pt-5">
        {title}
      </div>
      <div className="pt-6 flex justify-center">{icon}</div>
    </div>
  );
}

gives error: Invalid PostCSS Plugin found at: plugins[0]

postcss.config.js

const tailwindcss = require('tailwindcss');

module.exports = {
  plugins: ['postcss-preset-env', tailwindcss],
};

tailwind config

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  theme: {
    extend: {
      colors: {
        'default-black': '#393939',
        border: '#D3D3D3',
      },
    },
    fontFamily: {
      sans: ['"Open Sans"', 'sans-serif'],
    },
  },
  plugins: [],
};

Wrapper.tsx

import React from 'react';
import '../src/index.css';

export const Wrapper: React.FC = React.Fragment;

Postcss config works fine while running app.

Reproduction

Open the component in mentionned in react-preview

Preview.js version

0.7.1

System Info

System:
    OS: macOS 12.1
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 33.83 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v16.13.1/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm
    Watchman: 2021.12.27.00 - /usr/local/bin/watchman
  IDEs:
    Nano: 2.0.6 - /usr/bin/nano
    Sublime Text: 4126 - /usr/local/bin/subl
    VSCode: 1.63.2 - /usr/local/bin/code
    Vim: 8.2 - /usr/bin/vim
    Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild
  Browsers:
    Chrome: 97.0.4692.71
    Edge: 97.0.1072.55
    Firefox: 95.0.2
    Safari: 15.2

Used Package Manager

npm

Extension logs (useful for crashes)

No response

Preview logs (useful for rendering errors)

[vite] Internal Server Error
TypeError: Invalid PostCSS Plugin found at: plugins[0]

Anything else?

No response

[fwouts]

Hi @AdrienMergalet, thanks for the bug report.

Are you sure this is how postcss-preset-env is meant to be used? As far as I understand it, it's not a plugin.

[amglt]

Hello @fwouts ! If I'm not misunderstanding, you can use it as a plugin.

I get the exact same error with a empty plugin array and that is probably weird

module.exports = {
  plugins: [],
};

[fwouts]

That's interesting, does it still happen if you restart VS Code?

The integration with PostCSS is done through Vite so it might be best to try to make it work on a sample Vite project first. I suspect you'll find the same issue!

[amglt]

Yes it happens even after restarting VS Code.

Maybe this issue could be similar but it feels like a long time ago. I feel sad I am really excited about this extension!

[fwouts]

Could you try https://previewjs.com instead? This will ultimately replace React Preview, and it has more recent dependencies so might work better :)

[amglt]

That doesn't look like working at all. I've a white screen.

No error even after restarting VS Code, no error in web console nor in VS Code extensions logs. It doesn't display anything and doesn't detect any props, ... The only thing that is deplayed is the component name and

properties = {
  // foo: "bar"
}

😅

[fwouts]

Thanks for your patience in debugging this!

I've been able to reproduce the Invalid PostCSS Plugin found at: plugins[0] error, but I didn't quite manage to make Preview.js crash in such a splendid way as you did 🙃

The cause of the PostCSS issue may be this: https://github.com/vitejs/vite/issues/5175. Could you try instead:

module.exports = {
  plugins: {
    tailwindcss: {},
    "postcss-preset-env": {},
  },
};

Props not being detected in Preview.js is expected at this stage, as Preview.js only has a subset of functionality of React Preview for now (its aim is to be more general than just React).

In terms of reproducing the white screen you managed to get, would you be able to share a repo by any chance, or at least your package.json?

Thanks!

[amglt]

Sorry for the late reply !

It looks like it is working that way 🙂

In terms of reproducing the white screen you managed to get, would you be able to share a repo by any chance, or at least your package.json?

I'll take some time to do it

[fwouts]

I believe this bug was resolved as part of the transition to Preview.js and Vite 3. Feel free to reopen if that's not the case :)