v3.0: Support for tailwindcss v3.2.2+

[ben-rogerson]

See release notes

[u3u]

Arbitrary selector parent issues

export const Table = styled.table(() => [
  tw`w-full table-fixed`,
  tw`[tr]:h-[82px]`,
  tw`[td,th]:(border-b border-r bg-white px-4 text-center border-[#e6e5e5] last:border-r-0)`,
  tw`[th]:(font-semibold text-base)`,
  tw`[td]:(font-medium text-sm text-dimgray first:text-base)`,
  tw`[tbody tr:last-of-type]:[td,th]:border-b-0`,
])

tw`[td,th]:(border-b border-r bg-white px-4 text-center border-[#e6e5e5] last:border-r-0)`
// ↓ ↓ ↓ ↓ ↓ ↓
{
  "& td,th": {
    // ...
  },
  "td,th:last-child": {
    "borderRightWidth": "0px"
  }
}
// 3.0.0-rc.3
{
  "td,th": {
    // ...
    ":last-child": {
      "borderRightWidth": "0px"
    }
  }
}

tw`[tbody tr:last-of-type]:[td,th]:border-b-0`
// ↓ ↓ ↓ ↓ ↓ ↓
{
  "& tbody tr:last-of-type td,th": {
    "borderBottomWidth": "0px"
  }
}
// 3.0.0-rc.3
{
  "tbody tr:last-of-type": {
    "td,th": {
      "borderBottomWidth": "0px"
    }
  }
}

tw`[path[fill='rgb(51,51,51)']]:[fill:white]`
// ↓ ↓ ↓ ↓ ↓ ↓
{
  "& path[fill='rgb(51ⱑⱑ)']": {
    "fill": "white"
  }
}
// 3.0.0-rc.3
{
  "path[fill='rgb(51,51,51)']": {
    "fill": "white"
  }
}

[u3u]

Thanks, is this the same question below?

tw`print:[@page]:(m-0 [size: a4 landscape])`

MacroError: 

TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator))

Found in: print:[@page]:m-0 print:[@page]:[size:_a4_landscape]
    at Array.forEach (<anonymous>)

Update: Adding \ can solve

tw`print:[\@page]:(m-0 [size: a4 landscape])`
// ↓ ↓ ↓ ↓ ↓ ↓
{
  "@media print": {
    "@page": {
      "margin": "0px",
      "size": "a4 landscape"
    }
  }
}

[u3u]

Hi, is this expected behavior?

tw`hover:[svg]:block`
// ↓ ↓ ↓ ↓ ↓ ↓
{
  "svg:hover": {
    "display": "block"
  }
}
// I want is ↓ ↓ ↓ ↓ ↓ ↓
{
  "&:hover svg": {
    "display": "block"
  }
}

[ben-rogerson]

Thanks for these, here's the fixes

[ben-rogerson]

Fixes for all this in 3.0.1 - thanks heaps for your help 👍

[u3u]

🎉 Thanks for the quick fix!

[arlyon]

Congrats on the release! :)