Inline plugin global styles

[tw-in-js]

Inline plugin global styles

[tylerforesthauser]

Done

[sastan]

Regarding this new (:global)[https://github.com/tw-in-js/twind/blob/main/docs/plugins.md#inject-global-styles] property, is it at all possible to declare global styles from within inline plugins? That would be a nifty way to allow declaration of global styles from virtually anywhere in your app.

Something like this should work:

tw(() => ({     
  ':global': { /* global styles */ },
}))

tw(css({     
  ':global': { /* global styles */ },
}))

With tw.apply this should be possible:

tw(() => ({     
  ':global': { 
   a: tw.apply`text-blue-500`
  },
}))

tw(css({     
  ':global': { 
   a: tw.apply`text-blue-500`
  },
}))

[tylerforesthauser]

That honestly looks amazing but I am having no luck actually getting either of those to output anything at all...

tw(() => ({
  ':global': {
    html: tw('bg-gray-900 text-white'),
  },
}))

Meanwhile, the following does work...

tw(
  css({
    ':global': {
      html: {
        backgroundColor: '#333',
      },
    },
  })
)

And this...

tw(() => ({
  ':global': {
    html: {
      backgroundColor: '#333',
    },
  },
}))

And this...

tw(({ theme }) => ({
  ':global': {
    html: {
      backgroundColor: theme('colors.gray.900'),
    },
  },
}))

[sastan]

Sorry. My bad. This depends on #85 and is not yet released. You could try the PR package. It's described in the PR

Edit: @tylerforesthauser I'll try to cut a release tomorrow. Could you please describe what you are trying to achieve and I'll add tests to verify the behavior before the release. Sorry. It's late here maybe you already did.

[sastan]

Your first example (the one that does not work) can not work as tw always returns a string of class names. You'll need to use tw.apply for this which is not yet merged or released. See the component PR #83 and try PR package.

[tylerforesthauser]

No no it's all good. I've got the changes merged into my local repo and I'm using the package from there, so it includes your changes from #85 and the component-api branch. The selector actually works! Just not for nested tw.apply functions.

My end goal is to declare global styles (specifically on the html element) from somewhere other than from preflight.

I realize I entered my code incorrectly in my comment above but I, indeed, used tw.apply.

So to clarify from my comment above, the following examples WORK:

tw(
  css({
    ':global': {
      html: {
        backgroundColor: '#333',
      },
    },
  })
)

tw(() => ({
  ':global': {
    html: {
      backgroundColor: '#333',
    },
  },
}))

tw(({ theme }) => ({
  ':global': {
    html: {
      backgroundColor: theme('colors.gray.900'),
    },
  },
}))

And these examples, however, DO NOT WORK.

tw(() => ({
  ':global': {
    html: tw.apply('bg-gray-900 text-white'),
  },
}))

tw(css({     
  ':global': { 
   html: tw.apply('bg-gray-900 text-white'),
  },
}))

[sastan]

This should work in #83 (7b446c9)

[sastan]

@tylerforesthauser This issue has two topics. Using tw.apply in :global and in preflight should now be fixed in #83 . Preflight merging should be a new issue discussing its impact. Could you please create one only for merging preflight styles.