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

Add support for the tailwindcss/plugin export #14173

Merged
merged 14 commits into from
Aug 13, 2024
Merged

Conversation

thecrypticace
Copy link
Contributor

This PR adds support for the tailwindcss/plugin import which has historically been used to define custom plugins:

import plugin from "tailwindcss/plugin";

export default plugin(function ({ addBase }) {
  addBase({
    // ...
  });
});

This also adds support for plugin.withOptions which was used to define plugins that took optional initilization options when they were registered in your tailwind.config.js file:

import plugin from "tailwindcss/plugin";

export default plugin.withOptions((options = {}) => {
  return function ({ addBase }) {
    addBase({
      // ...
    });
  };
});

We've stubbed out support for the config argument but we're not actually doing anything with it at the time of this PR. The scope of this PR is just to allow people to create plugins that currently work using the raw function syntax but using the plugin and plugin.withOptions APIs. Support for config will land separately.

// without it we get a `.default` export when using `require` in CJS

// @ts-ignore
module.exports = require('./plugin.ts').default
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There doesn't appear to be a way for tsup to compile a default export to module.exports in my testing so we came up with this + two separate entry points in the tsup config. I like this because it feels like it's more clear that it's a workaround. We might be able to do something like this for the postcss plugin too but would need to test.

let pluginApi = buildPluginApi(designSystem, ast)

for (let plugin of plugins) {
if ('__isOptionsFunction' in plugin) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if this is better or not 🤔

Suggested change
if ('__isOptionsFunction' in plugin) {
if (Object.hasOwn(plugin, '__isOptionsFunction')) {

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The in one is cleaner if TypeScript is happy with it.

@adamwathan adamwathan merged commit e299ea3 into next Aug 13, 2024
2 checks passed
@adamwathan adamwathan deleted the feat/v4-plugin-export branch August 13, 2024 14:25
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

Successfully merging this pull request may close these issues.

4 participants