Skip to content

Add support for the tailwindcss/plugin export#14173

Merged
adamwathan merged 14 commits intonextfrom
feat/v4-plugin-export
Aug 13, 2024
Merged

Add support for the tailwindcss/plugin export#14173
adamwathan merged 14 commits intonextfrom
feat/v4-plugin-export

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
@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