Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support PostCSS #440

Open
nnecec opened this issue Jan 31, 2024 · 3 comments
Open

Support PostCSS #440

nnecec opened this issue Jan 31, 2024 · 3 comments

Comments

@nnecec
Copy link
Contributor

nnecec commented Jan 31, 2024

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
Copy link
Owner

huozhi commented Feb 7, 2024

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
Copy link
Contributor Author

nnecec commented Feb 21, 2024

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

@huozhi
Copy link
Owner

huozhi commented Mar 3, 2024

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants