npm @twind/preset-autoprefix 1.0.0-next.36
v1.0.0-next.36

latest releases: 1.0.7, 1.0.7-next-20230124084504, 1.0.6...
2 years ago

a new pre-release is availabe: 1.0.0-next.36

@twind/preset-ext

  • feat: add descendants selector using _ eg &_span:underline; can be combined with other selectors &_h1>span~a:underline (cbd37a10)
  • fix: group/peer hocus named group regex (8f1288a0)

@twind/preset-tailwind

  • refactor: move hashing of vars (--tw-<...>) from preset-tailwind into core — this allows var hashing without the tailwind preset (ae979d12)
  • Add missing height properties max/min/fit-content (#285) 🙏🏽 @IgnusG!
  • fix: use text-decoration-line (346efc4e)

@twind/preset-tailwind-forms

  • fix: use text-decoration-line (346efc4e)

@twind/preset-typography

  • feat: add @twind/preset-typography (e3796bf9)
  • fix: use text-decoration-line (346efc4e)

twind

  • relax some typings where the actual generic type does not matter (28cbaef5)

  • fix: ensure colors DEFAULT values override nested objects (43d61076)

  • refactor: include full precendence in resume data (80ce410a)

  • fix: move styles generated by animation() into components layer — this allows to override animation properties using utilities (39b45125)

  • feat: auto dark colors (2f8f69d2)

    If enabled, automatic dark colors are generated for each light color (eg no dark: variant is present). This feature is opt-in and twind provides a builtin function that works with tailwind color palettes (50, 100, 200, ..., 800, 900).

    import { autoDarkColor } from 'twind'
    
    defineConfig({
      // for tailwind color palettes: 50 -> 900, 100 -> 800, ..., 800 -> 100, 900 -> 50
      darkColor: autoDarkColor,
      // other possible implementations
      darkColor: (section, key, { theme }) => theme(`${section}.${key}-dark`) as ColorValue,
      darkColor: (section, key, { theme }) => theme(`dark.${section}.${key}`) as ColorValue,
      darkColor: (section, key, { theme }) => theme(`${section}.dark.${key}`) as ColorValue,
      darkColor: (section, key, context, lightColor) => generateDarkColor(lightColor),
    })

    Example css for text-gray-900:

    .text-gray-900 {
      --tw-text-opacity: 1;
      color: rgba(15, 23, 42, var(--tw-text-opacity));
    }
    @media (prefers-color-scheme: dark) {
      .text-gray-900 {
        --tw-text-opacity: 1;
        color: rgba(248, 250, 252, var(--tw-text-opacity));
      }
    }

    The auto-generated dark color can be overridden by the usual dark:... variant: text-gray-900 dark:text-gray-100.

    .text-gray-900 {
      --tw-text-opacity: 1;
      color: rgba(15, 23, 42, var(--tw-text-opacity));
    }
    @media (prefers-color-scheme: dark) {
      .text-gray-900 {
        --tw-text-opacity: 1;
        color: rgba(248, 250, 252, var(--tw-text-opacity));
      }
    }
    @media (prefers-color-scheme: dark) {
      .dark\\:text-gray-100 {
        --tw-text-opacity: 1;
        color: rgba(241, 245, 249, var(--tw-text-opacity));
      }
    }
  • fix: handle color function in replacement for theme(...) (9fc5baec)

  • fix: always use rgba color (aaad7e44)

  • refactor: move hashing of vars (--tw-<...>) from preset-tailwind into core — this allows var hashing without the tailwind preset (ae979d12)

  • fix: prevent double class name hashing (fc9b0c27)

  • fix: use text-decoration-line (346efc4e)

  • fix: ensure theme returns all sections (8bbc2a42)

  • fix: use same color section detection (8dfd105b)

@twind/with-next

  • relax some typings where the actual generic type does not matter (28cbaef5)

Don't miss a new preset-autoprefix release

NewReleases is sending notifications on new releases.