Make wingsuit compatible with official tailwindcss plugins

[iuscare]

When using tailwindcss plugins, such as @tailwindcss/typography or the @tailwindcss/ui plugin with @apply rules in css files breaks the build process due an issue with jsondiffpatch, which simply states:

node:2740) UnhandledPromiseRejectionWarning: Error: functions are not supported
    at trivialMatchesDiffFilter .../node_modules/jsondiffpatch/dist/jsondiffpatch.cjs.js:564:13)
    at Pipe.process (.../node_modules/jsondiffpatch/dist/jsondiffpatch.cjs.js:273:9)
    at Processor.process (.../node_modules/jsondiffpatch/dist/jsondiffpatch.cjs.js:234:18)
    at DiffPatcher.diff (.../node_modules/jsondiffpatch/dist/jsondiffpatch.cjs.js:1459:29)
    at Object.diff (.../node_modules/jsondiffpatch/dist/jsondiffpatch.cjs.js:2689:33)
    at ...node_modules/@wingsuit-designsystem/core/dist/server/plugins/Tailwind2JsonPlugin.js:47:22
    at .../node_modules/fs-extra/node_modules/universalify/index.js:21:54

This error applies to both, the typography and ui plugin, but only when using them with the @apply directive within css files, whereas using them directly as classnames in the twig templates is working as expected.

We are already able to use @apply rules for the standard tailwindcss config. It would be useful to make this available for required plugins as well, especially for official tailwindcss plugins.

To be honest, I am using wingsuit for CraftCMS, which also relies on twig and wingsuit is simply a match sent by heaven for developing twig components.

All the best for you guys!

[christianwiedemann]

@iuscare can you send me your tailwind.config. Will check that.

[iuscare]

@christianwiedemann I am busy this week, but I am going to replicate the warning with a fresh wingsuit installation and then post the steps here. As far as I can tell, it seems that apply rules do work, but the warning during the build process is a little bit suspicious.

[iuscare]

Hey @christianwiedemann,

thank you guys for the impressive update with beta.17

It seems that I was wrong, even with the warning the tailwind.json file seems to be generated correctly. However the warning is a little bit annoying, so here are the steps to reproduce:

1. npx @wingsuit-designsystem/cli init
2. npm run dev:storybook (tailwind.json gets build)
3. npm install @tailwindcss/ui 
4. delete tailwind.json so it gets recreated
3. require the ui plugin within the tailwind.config.js
4. npm run dev:storybook

Below the full tailwind.config.js

const customForms = require('@tailwindcss/custom-forms');
const typography = require('@tailwindcss/typography');
const ui = require('@tailwindcss/ui');

const rem = (px) => ({ [px]: `${px / 16}rem` });

module.exports = {
  important: false,
  future: {
    purgeLayersByDefault: true,
    removeDeprecatedGapUtilities: true,
  },
  purge: {
    layers: ['utilities'],
    content: ['./source/**/*.twig', './source/**/*.yml', './apps/**/*.twig'],
    whitelist: ['bg-red-500', 'px-4'],
  },
  theme: {
    extend: {
      fill: {
        current: 'currentColor',
      },
      colors: {
        primary: '#ED64A6',
        secondary: '#90CDF4',
      },
      height: {
        18: '4.5rem',
      },
      maxWidth: {
        none: 'none',
        ...rem(120),
        ...rem(800),
        ...rem(1200),
        ...rem(1600),
        ...rem(1900),
      },
    },
    fontFamily: {
      serif: ['SourceSerif', '-apple-system', 'BlinkMacSystemFont'],
      sans: ['Roboto', 'sans-serif'],
    },
  },
  variants: {
    opacity: ['responsive'],
    borderWidth: ['responsive', 'hover', 'group-hover'],
    backgroundColor: ['responsive', 'hover', 'group-hover'],
    textDecoration: ['responsive', 'hover', 'group-hover'],
    textColor: ['responsive', 'hover', 'group-hover'],
    fontFamily: ['responsive', 'hover', 'focus'],
    fill: ['responsive', 'hover', 'focus'],
  },
  plugins: [customForms, typography, ui],
};

Don't feel stressed, even with the error/warning, everything seems to work as expected. Enjoy your weekend and stay safe!

[iuscare]

With the update to tailwind version 2 the error does not appear anymore. Closing this for now, since even when it happens, it does not affect development or production.