Bit: How to add PostCSS configuration?

[Giulico]

Expected Behavior

PostCSS features transpiled into plain CSS

Actual Behavior

PostCSS features are not transpiled

Steps to Reproduce the Problem

Just export a component with a working PostCSS configuration

For example:
postcss.config.js

logo.module.css

browser

Specifications

• Bit version: 14.1.2
• Node version: 10.4.0
• npm / yarn version: 6.9.0
• Platform: MacOS Mojave 10.14
• Bit compiler (include version): bit.envs/compilers/[email protected]
• Bit tester (include version):

[CloudPower97]

Hey @Giulico, did you manage to resolve this issue? I'm having the same problem.

[KutnerUri]

Thanks for the report!
The playground engine uses an 'out of the box' CREATE-REACT-APP, and we are careful about what features we add to it.

Ideally, the playground handles pre-compiled code. So, all you have to do is import a Compiler to your component, which will transpile the postCSS to standard css.

@GiladShoham - do we have a compiler that includes PostCSS?

[solarstar101]

is a postCSS compiler available?
trying to get tailwind to work on the playground

[splurtcake]

+1 for getting Tailwind to work with Vue components.

<template>
  <button class="button">
    {{ label }}
  </button>
</template>

<script>

export default {
  props: {
    label: {
      type: String,
      required: true
    }
  },
}
</script>
<style scoped>
.button {
  @apply p-10 bg-black text-white;
}
</style>

How can I get Tailwind to compile in this context?

[Fasani]

@splurtcake any luck with TailWindCSS?

Ideally, I have 20 modules and if I only use 2 of them then I would like to purge the rest of the CSS in my project.

[Fasani]

@solarstar101 and @Giulico any luck?

[Fasani]

For anybody who is wondering... I had some success today, this is most likely not my final approach but perhaps helps you with an idea of a way to do this. I am specifically interested in using TailWindCSS. Firstly I made a component that looks like this:

import React from "react";
import classNames from "classnames";

const cMuButton = classNames(
  "px-4 py-2 rounded shadow-md",
  "text-white text-center text-sm",
  "border-solid border border-black",
  "hover:text-black transition duration-200 ease-linear"
);

const cMuButtonIcon = classNames("block text-4xl opacity-50");

function App() {
  return (
    <div className="grid grid-flow-col gap-4">
      <a
        href="/admin/supervisor/reports/general-reports"
        className={`${cMuButton} bg-pink-600`}
      >
        <span
          className={cMuButtonIcon + "font-octicon octicon-checklist"}
        ></span>
        <span>General reports</span>
      </a>
    </div>
  );
}

export default App;

I add it to Bit but it lacks styles in the bit preview window so after upload in the index.js file which shows the example I did this small hack adding tailwind from CDN and pressed save:

import React from 'react';
import Buttons from '@bit/fasani.bit-test.buttons';

export default (
    <>
        <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>
        <Buttons/>
    </>
)

Now I can see the button with styles on the Bit dashboard.

Next I used it in my other project using yarn to add it and then I added the node module to purge the CSS I just added to my purge array like so in my tailwind.config:

purge: ['./src/**/*.js', './src/**/*.md', 'node_modules/@bit/**/*.js']

This resulted in a working prototype which purges the CSS for only the included tailwind classes.

I will investigate more two following documents (as I believe there is some wisdom there):
https://docs.bit.dev/docs/overrides
https://docs.bit.dev/docs/conf-bit-json