Preflight merging/extending strategy

[tw-in-js]

Preflight merging/extending strategy

[sastan]

If the following would solve the problem then this would be fixed with #91

import { css } from 'twind/css'

setup({
  preflight: (preflight) =>
    css(
      preflight,
      {
        body: {
          backgroundColor: ({ theme }) => theme('colors.gray.900'),
        },
      },
      { body: tw.apply`text-gray-100` },
    ),
})

[sastan]

Just tw.apply:

setup({
  preflight: (preflight) =>
    css(
      preflight,
      { body: tw.apply`bg-gray-900 text-gray-100` },
    ),
})

Or using template literal:

setup({
  preflight: (preflight) => css`
      ${preflight}
      body { ${tw.apply`bg-gray-900 text-gray-100`} }
  `
})

[sastan]

With v0.13.0 this should be written as:

Just tw.apply:

import ( setup, apply } from 'twind'

setup({
  preflight: (preflight) =>
    css(
      preflight,
      { body: apply`bg-gray-900 text-gray-100` },
    ),
})

Or using template literal:

setup({
  preflight: (preflight) => css`
      ${preflight}
      body { ${apply`bg-gray-900 text-gray-100`} }
  `
})

[sastan]

It's getting better:

import { tw, theme } from 'twind'
import { css } from 'twind/css'

setup({
  preflight: (preflight) =>
    css(
      preflight,
      {
        body: {
          backgroundColor: theme('colors.gray.900'),
        },
      },
      { body: tw.apply`text-gray-100` },
    ),
})

[sastan]

I just released v0.12.0 with tw.apply and css template literal. Give it a try... and let me know.