huozhi / bunchee

Zero config bundler for ECMAScript and TypeScript packages
https://npmjs.com/bunchee
855 stars 28 forks source link

Support PostCSS #440

Open nnecec opened 5 months ago

nnecec commented 5 months ago

Bunchee supports CSS now, but I think we need to at least support Tailwind. So supporting PostCSS is a better idea.

TL;DR

Create an internal postcss-plugin. It executes the postcss API to transform CSS code.

Features

  1. Detect postcss is installed, then try to execute postcss API to transform CSS code.
  2. Injecting CSS code into a js file is the default option now, we could create an option --extract-css to support generating a separate CSS file. (or generate separate css file by default)

How to implement it?

Create an internal postcss-plugin that will check if postcss is installed and if there is a postcss.config configuration. If not, it will return the code directly. If so, the plugin reads poctcss.config through postcss-config-load and passes options and plugins to the PostCSS API for transformation. About the transformed code, we can use inline-css's logic to inject it into js files.

Why don't use rollup-plugin-postcss?

rollup-plugin-postcss is no longer maintained for over 2 years. It provides sass-loader and less-loader which I don't think are necessary.

Example

Here is an example of the input and output.

bunchee --extract-css

# files structure

package
├── dist
│   ├── index.css
│   ├── index.js
│   └── index.js.map
├── src
│   ├── index.css
│   └── index.ts
├── package.json
├── postcss.config.js
├── tailwind.config.js
└── tsconfig.json
huozhi commented 4 months ago

Can you share some examples of code with tailwind as input, then what's the expected in the output bundle?

plus: let's group everything of RFC in the issue description instead of comments, to help others read easier

nnecec commented 4 months ago

I updated the description of the issue and added an example of input and output.

huozhi commented 4 months ago

The problem is how the css is going to be declared in package.json. "style" property is not a standard thing, not all the bundler will pick it up. Other questions: If there're multiple exports, and each one uses different css files, how we gonna output them? If there's an barrel file, an index.js that included all the exports, does it mean we gonna bundle all the CSS together?