Bug: tailwind plugins import issue

kukac7 commented 1 year ago

Terms

[X] I have read the guidelines for Contributing to Roots Projects
[X] This request is not a duplicate of an existing issue
[X] I have read the docs and followed them (if applicable)
[X] I have seached the Roots Discourse for answers and followed them (if applicable)
[X] This is not a personal support request that should be posted on the Roots Discourse community

Description

after update bud 6.12.0:

npm run dev

> dev
> bud dev

[fs] [tailwind.config.js] › ⚠  tailwind.config.js causes an exception when imported. 
Since tailwind.config.js does not appear to be a bud configuration file, bud.js is not throwing. Original error follows: 

BudError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and '/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

 ConfigError 

✘ Error in bud.config.js

 BudError 

✘ Cannot read properties of undefined (reading 'default')

☰ Stack trace
    at get config [as config] (node_modules/@roots/bud-tailwindcss/lib/extension/index.js:46:48)
    at BudTailwindCss.resolveThemeValue (node_modules/@roots/bud-tailwindcss/lib/extension/index.js:61:39)
    at WordPressThemeJSON.useTailwindColors (node_modules/@roots/bud-tailwindcss-theme-json/lib/extension.js:24:78)
    at default (bud.config.js:62:4)

ℹ See file /bud.config.js

Steps To Reproduce

bud.config.js does not work with tailwind plugin.

Expected Behavior

running

Actual Behavior

/** @type {import('tailwindcss').Config} config */
const config = {
  content: ['./index.php', './app/**/*.php', './resources/**/*.{php,vue,js}'],
  theme: {
    extend: {
      colors: {}, // Extend Tailwind's default colors
    },
  },
  plugins: [
      require('@tailwindcss/forms'),
      require('@tailwindcss/typography'),
  ],
};

export default config;

Relevant Log Output

No response

Versions

10.5.1

kukac7 commented 1 year ago

after back to tailwind.config.cjs and module.exports config, works.

codepuncher commented 1 year ago

@kukac7 this is because you have imported Tailwind plugins using require() which will not work for an ESM config file.

      require('@tailwindcss/forms'),
      require('@tailwindcss/typography'),

You will need to do something like this:

import tailwindFormsPlugin from '@tailwindcss/forms';
import tailwindTypographyPlugin from '@tailwindcss/typography';

/** @type {import('tailwindcss').Config} config */
const config = {
  content: ['./index.php', './app/**/*.php', './resources/**/*.{php,vue,js}'],
  theme: {
    extend: {
      colors: {}, // Extend Tailwind's default colors
    },
  },
  plugins: [
    tailwindFormsPlugin,
    tailwindTypographyPlugin,
  ],
};

export default config;

@kellymears can we get Bud/Sage docs updated? I don't mind submitting a PR to explain this if it helps.

kukac7 commented 1 year ago

@codepuncher you're right, thanks!

roots / sage