className matching

.eslintrc.js

@@ -67,6 +67,7 @@ module.exports = {
     'unicorn/import-style': 0,
     'unicorn/prefer-optional-catch-binding': 0,
     'unicorn/no-null': 0,
+    'unicorn/prevent-abbreviations': 0,
   },
   overrides: [
     {
@@ -94,4 +95,5 @@ module.exports = {
       },
     },
   ],
+  ignorePatterns: ['.eslintrc.js'],
 }

__fixtures__/!general.js

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-/* eslint-disable react/react-in-jsx-scope */
 import tw from './macro'
 
 /**

__fixtures__/!imports.js

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-/* eslint-disable react/react-in-jsx-scope */
 import tw, { theme, styled, css, GlobalStyles } from './macro'
 
 const twPropertyTest = <div tw="text-purple-500" />

__fixtures__/!namelessImport.js

@@ -1,7 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-/* eslint-disable import/no-unassigned-import */
-/* eslint-disable react/react-in-jsx-scope */
-/* eslint-disable react/jsx-curly-brace-presence */
 import './macro'
 
 const twPropertyString = <div tw="text-purple-500" />

__fixtures__/!plugins.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import tw from './macro'
 
 // Tailwind plugin tests

__fixtures__/!properties.js

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-/* eslint-disable react/react-in-jsx-scope */
 import tw from './macro'
 
 const Component1 = () => <div tw="uppercase" />

__fixtures__/!variantGrouping.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import tw from './macro'
 
 const basic = tw`group-hover:(flex m-10)`

__fixtures__/!variants.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import tw from './macro'
 
 // Before/after pseudo elements

__fixtures__/.eslintrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  rules: {
+    '@typescript-eslint/no-unused-vars': 'off',
+    'react/react-in-jsx-scope': 'off',
+    'import/no-unassigned-import': 'off',
+    'react/jsx-curly-brace-presence': 'off',
+  },
+}

__fixtures__/includeClassNames/config.json

@@ -0,0 +1,3 @@
+{
+  "includeClassNames": true
+}

__fixtures__/includeClassNames/includeClassNames.js

@@ -0,0 +1,144 @@
+import tw from './macro'
+
+const SkipEmptyClassName = <div className="" />
+const OnlyUppercaseConverted = <div className="uppercase spare-class" />
+const AllConverted = <div className="uppercase block" />
+const SkippedCurlies = <div className={'mt-1'} />
+const SkippedConditionals = <div className={true && 'mt-1'} />
+const SkippedGroup = <div className="group" />
+
+// css + className
+const CssPropFirst = (
+  <div
+    css={`
+      color: red;
+    `}
+    className="block"
+  />
+)
+const CssPropLast = (
+  <div
+    className="block"
+    css={`
+      color: red;
+    `}
+  />
+)
+
+// tw + className
+const TwPropFirst = <div tw="block" className="mt-1" />
+const TwPropLast = <div className="mt-1" tw="block" />
+
+// tw + css + className
+const TwThenCssThenClassName = (
+  <div
+    tw="block"
+    css={`
+      color: red;
+    `}
+    className="mt-1"
+  />
+)
+const TwThenClassNameThenCss_KNOWN_ORDER_ISSUE = (
+  <div
+    tw="block"
+    className="mt-1"
+    css={`
+      color: red;
+    `}
+  />
+)
+const ClassNameThenTwThenCss_KNOWN_ORDER_ISSUE = (
+  <div
+    className="mt-1"
+    tw="block"
+    css={`
+      color: red;
+    `}
+  />
+)
+const ClassNameThenCssThenTw = (
+  <div
+    className="mt-1"
+    css={`
+      color: red;
+    `}
+    tw="block"
+  />
+)
+const CssThenClassNameThenTw_KNOWN_ORDER_ISSUE = (
+  <div
+    css={`
+      color: red;
+    `}
+    className="mt-1"
+    tw="block"
+  />
+)
+const CssThenTwThenClassName = (
+  <div
+    css={`
+      color: red;
+    `}
+    tw="block"
+    className="mt-1"
+  />
+)
+
+// styled + everything
+const Button = tw.div``
+
+const StyledTwThenCssThenClassName = (
+  <Button
+    tw="block"
+    css={`
+      color: red;
+    `}
+    className="mt-1"
+  />
+)
+const StyledTwThenClassNameThenCss_KNOWN_ORDER_ISSUE = (
+  <Button
+    tw="block"
+    className="mt-1"
+    css={`
+      color: red;
+    `}
+  />
+)
+const StyledClassNameThenTwThenCss_KNOWN_ORDER_ISSUE = (
+  <Button
+    className="mt-1"
+    tw="block"
+    css={`
+      color: red;
+    `}
+  />
+)
+const StyledClassNameThenCssThenTw = (
+  <Button
+    className="mt-1"
+    css={`
+      color: red;
+    `}
+    tw="block"
+  />
+)
+const StyledCssThenClassNameThenTw_KNOWN_ORDER_ISSUE = (
+  <Button
+    css={`
+      color: red;
+    `}
+    className="mt-1"
+    tw="block"
+  />
+)
+const StyledCssThenTwThenClassName = (
+  <Button
+    css={`
+      color: red;
+    `}
+    tw="block"
+    className="mt-1"
+  />
+)