Unable to Convert Nested Classes and Selectors

[ryanelian]

I'm encountering difficulties while using the package to convert CSS to Tailwind CSS, particularly in handling nested classes and selectors, for the purpose of converting styled-component based projects to Tailwind CSS.

.myclass {
  background-color: #007bff;
  &:hover {
    background-color: #0056b3;
  }
  & > td {
    text-align: left;
  }
  & > * {
    padding: 0;
  }
  & span {
    font-weight: bold;
  }
  & * {
    font-style: italic
  }
}

Expected output:

bg-[#007bff] hover:bg-[#0056b3] [&>td]:text-left [&>*]:p-0 [&_span]:font-bold [&_*]:italic

Note that Tailwind allows arbitary-variant selectors:

• https://tailwindcss.com/docs/hover-focus-and-other-states#using-arbitrary-variants
• https://stackoverflow.com/questions/67119992/how-to-access-all-the-direct-children-of-a-div-in-tailwindcss

Parsing these CSS snippets, especially those with nested structures, might require PostCSS nested plugin for accurate conversion: https://github.com/postcss/postcss-nested / https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting

Could you please address these issues and provide support for converting nested classes and selectors as described above? Thank you!

[hsavit1]

running into this problem as well