Missing keyframe declaration

[mares29]

Hi,

first thanks for great plugin.

I have problem with tailwinds predefined animations. I am using animate-ping as you see in example below.

<span class="absolute -top-1 -right-1 flex h-3 w-3">
              <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-red-400 opacity-75"></span>
              <span class="relative inline-flex h-3 w-3 rounded-full bg-red-500"></span>
</span>

The problem is that after build there is missing keyframe declaration in styles so the animation never run. Is there a way how to resolve this? Thank You guys..

My stencil config

import { Config } from '@stencil/core';
import tailwind, { tailwindHMR } from 'stencil-tailwind-plugin';
import tailwindConfig from './tailwind.config';

export const config: Config = {
  namespace: 'm29-components',
  plugins: [
    tailwind({
      tailwindConf: tailwindConfig,
      tailwindCssPath: './src/styles/tailwind.css',
    }),
    tailwindHMR(),
  ],
  outputTargets: [
    {
      type: 'dist',
      esmLoaderPath: '../loader',
    },
    {
      type: 'dist-custom-elements',
    },
    {
      type: 'docs-readme',
    },
    {
      type: 'www',
      serviceWorker: null, // disable service workers
    },
  ],
};

My tailwind config:

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  content: [],
  theme: {
    fontFamily: {
      mono: [...defaultTheme.fontFamily.mono],
      sans: ['Montserrat', ...defaultTheme.fontFamily.sans],
      title: ['Dongle', ...defaultTheme.fontFamily.sans]
    },
  },
  plugins: [
  ],
}

[mares29]

Ok it seems that keyframes declaration is there when using tailwindHMR while developing. But still after build keyframes are gone.

[Poimen]

Thanks for the report - I'll try have a look a bit later.

If you got a chance, can you try passing the config to the HMR plugin as well and see if the issue comes/goes?

[mares29]

import { Config } from '@stencil/core';
import tailwind, { tailwindHMR } from 'stencil-tailwind-plugin';
import tailwindConfig from './tailwind.config';

export const config: Config = {
  namespace: 'm29-components',
  plugins: [
    tailwind({
      tailwindConf: tailwindConfig,
      tailwindCssPath: './src/styles/tailwind.css',
    }),
    tailwindHMR({
      tailwindConf: tailwindConfig,
      tailwindCssPath: './src/styles/tailwind.css',
    }),
  ],
  outputTargets: [
    {
      type: 'dist',
      esmLoaderPath: '../loader',
    },
    {
      type: 'dist-custom-elements',
    },
    {
      type: 'docs-readme',
    },
    {
      type: 'www',
      serviceWorker: null, // disable service workers
    },
  ],
};

After setting this config the state is the same. HMR is working, but after build keyframes disappear.

[Poimen]

I'm still trying to figure out what goes wrong.

From my testing, removing the HMR plugin makes the keyframes appear in the final component.

Can't see why they go missing with it enabled, will continue to dig through.

[timsnadden]

In my project I've found that required keyframes are missing intermittently. This has been tested by removing the dist/ directory and running npm install && npm start with no other change. Sometimes the animations work and sometimes they don't.

It looks like it could be a race condition as I copied and renamed one of the affected components and I was able to get one of them animating and one not.

Setting minify: false also appears to resolve the problem

[Poimen]

hmmm, that's an interesting point, the minify should have no bearing on this ... very curious on why that would be a thing. I think it does so consolidation of classes, but should not remove classes...

[timsnadden]

From my experiments it appears that building dist and dist-custom-elements together is the cause. My solution is to build twice, once with a custom config. e.g.

stencil-dist-custom-elements.config.ts

import type { Config } from '@stencil/core';

import { config as baseConfig } from './stencil.config';

export const config: Config = {
  ...baseConfig,
  outputTargets: [{ type: 'dist-custom-elements' }],
};

package.json

stencil build --ci && stencil build --ci --config stencil-dist-custom-elements.config.ts

[dgonzalezr]

I just faced the same issue... We used built-in Tailwind CSS animations and later on we needed to add a custom one in the tailwind.config. It worked in one component but not in others. We try to fix it by changing where the animation CSS should be applied (where it wasn't working the animation was applied to the host), but now all the animations do not work anymore 😞 . Is there any workaround? We have a monorepo with Nx.

[Poimen]

Hi @dgonzalezr

I haven't been able to the root cause of this one unfortunately.

Did you try the suggestions above - set minify to false, and/or removing the HMR component?