feat: support properties and variable declarators

[kripod]

This PR adds support for object properties and variable declarators within JavaScript-based languages, supporting either of the following syntaxes and their combinations:

var className1 = 'sm:p-1 p-0';
let className2 = "sm:p-1 p-0";
const className3 = `sm:p-1 p-0`;

let obj1 = {
  className: "sm:p-1 p-0",
};

let obj2 = {
  ["className"]: Math.random() >= 0.5 ? "sm:p-1 p-0" : "sm:p-2 p-1",
};

[filipesmedeiros]

Does this support for example cva?

const classes = cva('border-2 text-white',
    {
        variants: {
            blue: {
                true: 'bg-blue-500',
            },
        },
    }
)

In any case, why hasn't this been merged? Just lack of time? Or are there any concerns?

[kripod]

@filipesmedeiros This doesn’t support cva and I think for function support, an additional configurable option should be included, which is out of the scope of this PR. Please be respectful to the maintainers and understand that they aren’t meant to watch the project all the time.

[thecrypticace]

Hey, thanks so much for your work here.

We've talked this through internally and have decided that we don't want to do this as it could have adverse effects on raw strings that are not meant to be related to CSS. The surface area is reduced by naming the variable "className" but it's not guaranteed that the string literal associated with that property is a list of utilities. As such we think it's best to leave this feature out of the plugin at this time.

That said, we do recognize the utility of being able to sort more than just the defaults. This is why we are planning a sort selection feature for the Tailwind CSS Intellisense plugin which will allow you to select a block of text and sort it as if it were a list of utilities in a project that uses Tailwind CSS.

Given that we're going to close this PR for now, but we really appreciate your work either way. ✨

[filipesmedeiros]

@kripod yes, totally. Didn't mean to come off as rude or entitled, just genuinely curious 😄

[jamescmartinez]

@thecrypticace What are your thoughts on using a comment annotation similar to // prettier-ignore?

e.g.,

// prettier-plugin-tailwindcss
const base = "mb-4 text-white"

cc: @kripod @filipesmedeiros

[filipesmedeiros]

That would actually be super cool! And versatile

[gsimone]

@thecrypticace using tagged template literals or comment tags could be a solution - a lot of tooling uses this pattern -

/* tailwind */`bg-red-500 text-white`
tw`bg-red-500 text-white`

[nikwen]

I've created a new issue about this at tailwindlabs/tailwindcss#10458.

I'd advocate against a solution in the Tailwind CSS IntelliSense plugin because:

• A lot of devs use Jetbrains IDEs instead of VS Code (myself included).
• It cannot be automated using tools such as husky and lint-staged.