Plugin Warning

[flamedfury]

Hey Lene,

Any idea what plugin is tripping this warning?

flamed@flamedfury:~/Projects/eleventy-excellent$ npm run start

> eleventy-excellent@1.6.3 start
> run-p dev:*


> eleventy-excellent@1.6.3 dev:11ty
> eleventy --serve --watch


warn - Your plugin must set `modifiers: true` in its options to support modifiers.

[madrilene]

I think it was related to postCSS.. or Tailwind. have been ignoring that one 😅

[madrilene]

Try adding it to the tailwind config.

[oddigy]

Plugins don't explicitly support modifiers, and therefore, we need to manually configure them to handle modifiers.
I have added { modifiers: true } to the end of the 2 plugin functions, but I still have the warning.
plugins: [
// Generates custom property values from tailwind config
plugin(function ({addComponents, config}) {
let result = '';

  const currentConfig = config();

  const groups = [
    {key: 'colors', prefix: 'color'},
    {key: 'spacing', prefix: 'space'},
    {key: 'fontSize', prefix: 'size'},
    {key: 'fontFamily', prefix: 'font'}
  ];

  groups.forEach(({key, prefix}) => {
    const group = currentConfig.theme[key];

    if (!group) {
      return;
    }

    Object.keys(group).forEach(key => {
      result += `--${prefix}-${key}: ${group[key]};`;
    });
  });

  addComponents({
    ':root': postcssJs.objectify(postcss.parse(result))
  });
//}),
}, { modifiers: true }),

// Generates custom utility classes
plugin(function ({  addUtilities, config}) {
  const currentConfig = config();
  const customUtilities = [
    {key: 'spacing', prefix: 'flow-space', property: '--flow-space'},
    {key: 'colors', prefix: 'spot-color', property: '--spot-color'}
  ];

  customUtilities.forEach(({key, prefix, property}) => {
    const group = currentConfig.theme[key];

    if (!group) {
      return;
    }

    Object.keys(group).forEach(key => {
      addUtilities({
        [`.${prefix}-${key}`]: postcssJs.objectify(
          postcss.parse(`${property}: ${group[key]}`)
        )
      });
    });
  });
}, { modifiers: true })

]