Trying out plugin addUtilities noticed a few errors output in console

[rluiten]

I created an example sandbox forked from one I stumbled on that you created. https://codesandbox.io/s/cra-tailwind-emotion-starter-4wkeh

My fork adds a plugin to tailwind.config.js then replaces the styling in App.tsx with the new "stack" class that the plugin implements. When loading I see 4 errors reported in the console when you load it. Everything appears to work correctly, just the errors come out and I thought they may indicate a problem internally somewhere.

I am pretty sure I have the styles correct so maybe twin.macro has converted them to real styles before it reaches emotion somewhere ?

So far liking twin.macro, interesting stuff.

This is what my tailwind.config.sj file looks like with the plugin added. The plugin adds stack classes as created and documented by https://every-layout.dev/layouts/stack/

// In CRA, this config file must be inside the src
// so it can be imported by the theme provider

const stackPlugin = ({ addUtilities, theme }) => {
  const spacing = theme('spacing', {})
  const stackCommon = {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'flex-start'
  }
  const my_0 = {
    marginTop: 0,
    marginBottom: 0
  }
  const defaultSpacing = spacing['6']
  addStackComponent('.stack', defaultSpacing)
  addRecursiveStackComponent('.rstack', defaultSpacing)
  Object.entries(spacing).forEach(([k, v]) => {
    addStackChildren(`.stack-${k}`, v)
    addStackChildren(`.rstack-${k}`, v, '')
  })

  function addStackComponent(baseName, marginTop) {
    addUtilities({ [baseName]: stackCommon })
    addStackChildren(baseName, marginTop)
  }

  function addRecursiveStackComponent(baseName, marginTop) {
    addUtilities({ [baseName]: stackCommon })
    addStackChildren(baseName, marginTop, '')
  }

  function addStackChildren(baseName, marginTop, child = '>') {
    addUtilities({ [`${baseName} ${child} *`]: my_0 })
    addUtilities({ [`${baseName} ${child} * + *`]: { marginTop } })
  }
}

module.exports = {
  theme: {
    extend: {}
  },
  plugins: [stackPlugin]
}

This is the updated App in App.js

const App = () => (
  <Theme>
    <div
      css={[
        tw`h-screen flex flex-col items-center justify-center`,
        // Combine regular css and Tailwind styles within backticks
        css`
          * {
            ${tw`mt-6`}
          }
          background: linear-gradient(#db00ff, #0047ff);
        `
      ]}
    >
      <div tw="stack">
        <Button isPrimary>Submit</Button>
        <Button isSecondary>Cancel</Button>
        <Button isSmall>Close</Button>
      </div>
      <Logo />
    </div>
  </Theme>
)

These are the errors I see in console.

[ben-rogerson]

Thanks for the bug report.

I've made a reduced test case here. Still looking into why and where those errors are thrown.

[rluiten]

Glad its of interest, it definitely raised an eyebrow when I saw the errors :).

[yeungc]

@ben-rogerson May I know do you have idea about this issue now? Although it's just warning messages but still quite annoying.

[ben-rogerson]

Haven't worked this out yet, I'll take a better look into it after the next Twin version is out.

[ben-rogerson]

This should be working now, but you might need to escape some of those keys with tailwinds e function. You can also use addComponents in plugins since v1.4.0.

Would you be able to verify the stacks are working in 1.4.0?

[rluiten]

I'll see about tinkering with it again in the next week or so.

If I might ask what is there a short form outline of what the problem was?

Cheers!

[ben-rogerson]

I'm now camelizing the keys in userPlugins so they can't trigger the kebab-case rule 👍

[yangkennyk]

@ben-rogerson I'm not sure if you pushed the fix up already but it looks like 'box-content' is triggering the kebab error as well.

[ben-rogerson]

Great find there, box-border and box-content will both throw that error - I'll patch that up

There doesn't seem to be any other kebab-cased properties.

[ben-rogerson]

I've just pushed a patch for this in 1.4.1 Codepen demo without console errors I've had a good look around for more properties with the same issue and we're looking clear!