Add better class regex for javascript/javascriptreact/typescript/typescriptreact

[petertriho]

Posting same regex I posted for coc-tailwincss https://github.com/iamcco/coc-tailwindcss/pull/53 This should be a better regex that works with curly braces {} in react jsx

Now works with the following: className="class1 class2" className='class1 class2' className={"class1 class2"} className={'class1 class2'} className={clsx("class1 class2")} className={clsx(foo, bar, "class1 class2", bar)} className={classname(foo, bar, "class1 class2", bar)} className={anything(foo, bar, "class1 class2", bar)} className={`flex-col flex ${className}`}

Issues:

• Only sorts first string it encounters i.e.only sorts the first string ("class1 class2") in className={clsx("class1 class2", foo, bar, "class3 class4", bar)}

Fixes https://github.com/heybourn/headwind/issues/58 https://github.com/heybourn/headwind/issues/85 https://github.com/heybourn/headwind/issues/93

[praveenperera]

Thanks @petertriho this looks great. Could you add some test cases that cover the above examples?

[petertriho]

@praveenperera I've added a few tests, had to refactor src/extension.ts > activate to test the regexes

[praveenperera]

This looks great @petertriho thanks for the work on this. I can merge this now if you're ready.

[michael-land]

is this [clsx, classnames] still work in latest release v1.7.0? or is it get reverted?

I can't get this format

[petertriho]

@xiaoyu-tamu 1.7.0 does not include these changes but these changes can just be added by changing headwind.classRegex to match these regexes

[michael-land]

@petertriho Thanks for your quick reply. So i have to build latest by myself right?

[petertriho]

These changes specifically can just be added to your settings.json in vscode

"headwind.classRegex": {
        "css": "\\B@apply\\s+([_a-zA-Z0-9\\s\\-\\:\\/]+);",
        "html": "\\bclass\\s*=\\s*[\\\"\\']([_a-zA-Z0-9\\s\\-\\:\\/]+)[\\\"\\']",
        "javascript": "(?:\\bclassName\\s*=\\s*[\\\"\\']([_a-zA-Z0-9\\s\\-\\:\\/]+)[\\\"\\'])|(?:\\btw[\\.\\sa-zA-Z]*`([_a-zA-Z0-9\\s\\-\\:\\/]*)`)",
        "javascriptreact": "(?:\\bclassName\\s*=\\s*[\\\"\\']([_a-zA-Z0-9\\s\\-\\:\\/]+)[\\\"\\'])|(?:\\btw[\\.\\sa-zA-Z]*`([_a-zA-Z0-9\\s\\-\\:\\/]*)`)",
        "typescript": "(?:\\bclassName\\s*=\\s*[\\\"\\']([_a-zA-Z0-9\\s\\-\\:\\/]+)[\\\"\\'])|(?:\\btw[\\.\\sa-zA-Z]*`([_a-zA-Z0-9\\s\\-\\:\\/]*)`)",
        "typescriptreact": "(?:\\bclassName\\s*=\\s*[\\\"\\']([_a-zA-Z0-9\\s\\-\\:\\/]+)[\\\"\\'])|(?:\\btw[\\.\\sa-zA-Z]*`([_a-zA-Z0-9\\s\\-\\:\\/]*)`)"
    },

[praveenperera]

I've created a .vsix file you can manually install: https://github.com/heybourn/headwind/issues/122

I will release Headwind 2.0.0 on May 1st

[msreekm]

doesnt seem to work for me ,I downloaded .vsix and tried

[bitabs]

These changes specifically can just be added to your settings.json in vscode

"headwind.classRegex": {
        "css": "\\B@apply\\s+([_a-zA-Z0-9\\s\\-\\:\\/]+);",
        "html": "\\bclass\\s*=\\s*[\\\"\\']([_a-zA-Z0-9\\s\\-\\:\\/]+)[\\\"\\']",
        "javascript": "(?:\\bclassName\\s*=\\s*[\\\"\\']([_a-zA-Z0-9\\s\\-\\:\\/]+)[\\\"\\'])|(?:\\btw[\\.\\sa-zA-Z]*`([_a-zA-Z0-9\\s\\-\\:\\/]*)`)",
        "javascriptreact": "(?:\\bclassName\\s*=\\s*[\\\"\\']([_a-zA-Z0-9\\s\\-\\:\\/]+)[\\\"\\'])|(?:\\btw[\\.\\sa-zA-Z]*`([_a-zA-Z0-9\\s\\-\\:\\/]*)`)",
        "typescript": "(?:\\bclassName\\s*=\\s*[\\\"\\']([_a-zA-Z0-9\\s\\-\\:\\/]+)[\\\"\\'])|(?:\\btw[\\.\\sa-zA-Z]*`([_a-zA-Z0-9\\s\\-\\:\\/]*)`)",
        "typescriptreact": "(?:\\bclassName\\s*=\\s*[\\\"\\']([_a-zA-Z0-9\\s\\-\\:\\/]+)[\\\"\\'])|(?:\\btw[\\.\\sa-zA-Z]*`([_a-zA-Z0-9\\s\\-\\:\\/]*)`)"
    },

Unfortunately, this regex doesn't work for me. I've also added them in my settings.json 😢

Example test:

// hello.tsx

<div className={c("w-5 flex")} /> // before
<div className={c("w-5 flex")} /> // current
<div className={c("flex w-5 ")} /> // expected

[japboy]

this doesnt work for me 😢 https://github.com/heybourn/headwind/pull/109#issuecomment-825236098

Example:

import classnames from "classnames";
import React, { FunctionComponent, ReactNode } from "react";

export interface Props {
  className: string;
  children: ReactNode;
}

const Balloon: FunctionComponent<Props> = ({ className = "", children }) => {
  return (
    <div className={classnames('bg-gray-800 dark:bg-white p-4 relative rounded text-gray-100 dark:text-gray-800 after:absolute after:border-b-[12px] after:border-b-transparent after:border-t-[12px] after:border-t-gray-800 dark:after:border-t-white after:border-x-[12px] after:border-x-transparent after:content-[""] after:left-[50%] after:-ml-[6px] after:top-full', className)}>
      {children}
    </div>
  );
};

export default Balloon;

[ihatem]

These settings from this file (from the commit of this PR) worked for me:

"headwind.classRegex": {
  "html": "\\bclass\\s*=\\s*[\\\"\\']([_a-zA-Z0-9\\s\\-\\:\\/]+)[\\\"\\']",
  "css": "\\B@apply\\s+([_a-zA-Z0-9\\s\\-\\:\\/]+);",
  "javascript": "(?:\\bclass(?:Name)?\\s*=[\\w\\d\\s_,{}\\(\\)\\[\\]]*[\"'`]([\\w\\d\\s_\\-\\:\\/${}]+)[\"'`][\\w\\d\\s_,{}\\(\\)\\[\\]]*)|(?:\\btw\\s*`([\\w\\d\\s_\\-\\:\\/]*)`)",
  "javascriptreact": "(?:\\bclass(?:Name)?\\s*=[\\w\\d\\s_,{}\\(\\)\\[\\]]*[\"'`]([\\w\\d\\s_\\-\\:\\/${}]+)[\"'`][\\w\\d\\s_,{}\\(\\)\\[\\]]*)|(?:\\btw\\s*`([\\w\\d\\s_\\-\\:\\/]*)`)",
  "typescript": "(?:\\bclass(?:Name)?\\s*=[\\w\\d\\s_,{}\\(\\)\\[\\]]*[\"'`]([\\w\\d\\s_\\-\\:\\/${}]+)[\"'`][\\w\\d\\s_,{}\\(\\)\\[\\]]*)|(?:\\btw\\s*`([\\w\\d\\s_\\-\\:\\/]*)`)",
  "typescriptreact": "(?:\\bclass(?:Name)?\\s*=[\\w\\d\\s_,{}\\(\\)\\[\\]]*[\"'`]([\\w\\d\\s_\\-\\:\\/${}]+)[\"'`][\\w\\d\\s_,{}\\(\\)\\[\\]]*)|(?:\\btw\\s*`([\\w\\d\\s_\\-\\:\\/]*)`)"
},