Add [email protected] support and update tests

ben-rogerson · Mar 31, 2023 · 20eb0cd · 20eb0cd
1 parent b94ba31
commit 20eb0cd
Show file tree

Hide file tree

Showing 25 changed files with 4,270 additions and 2,312 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -67,7 +67,7 @@
   },
   "homepage": "https://github.com/ben-rogerson/twin.macro#readme",
   "peerDependencies": {
-    "tailwindcss": "^3.2.4"
+    "tailwindcss": ">=3.3.1"
   },
   "dependencies": {
     "@babel/template": "^7.18.10",
@@ -86,7 +86,6 @@
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/container-queries": "^0.1.0",
     "@tailwindcss/forms": "^0.5.3",
-    "@tailwindcss/line-clamp": "^0.4.2",
     "@tailwindcss/typography": "^0.5.7",
     "@types/babel-plugin-macros": "^2.8.5",
     "@types/didyoumean": "^1.2.0",
@@ -105,7 +104,6 @@
     "daisyui": "^2.38.0",
     "escalade": "^3.1.1",
     "eslint": "^8.26.0",
-    "eslint-config-import": "^0.13.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-xo": "^0.42.0",
     "eslint-config-xo-react": "^0.27.0",

diff --git a/tests/@applyInPlugins.test.ts b/tests/@applyInPlugins.test.ts
@@ -93,6 +93,7 @@ test('it renders the apply method', async () => {
           fontFamily:
             'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
           fontFeatureSettings: " normal",
+          fontVariationSettings: " normal",
         },
         body: { margin: "0", lineHeight: "inherit" },
         hr: { height: "0", color: "inherit", borderTopWidth: "1px" },

diff --git a/...res__/pluginLineClamp/pluginLineClamp.tsx → tests/__fixtures__/lineClamp/lineClamp.tsx b/...res__/pluginLineClamp/pluginLineClamp.tsx → tests/__fixtures__/lineClamp/lineClamp.tsx
diff --git a/tests/__fixtures__/pluginExamples/pluginExamples.tsx b/tests/__fixtures__/pluginExamples/pluginExamples.tsx
@@ -21,3 +21,19 @@ tw`test-1:block`
 tw`test-2:block`
 tw`test-3:block`
 tw`test-4:block`
+
+tw`potato-[yellow]:bg-yellow-200`
+tw`potato-[baked]:w-3`
+
+tw`tooltip-bottom:mt-5`
+tw`tooltip-top:mb-5`
+
+tw`alphabet-c:underline `
+tw`alphabet-a:underline `
+tw`alphabet-d:underline `
+tw`alphabet-b:underline`
+
+tw`test-[a,b,c]:underline`
+
+tw`testmin-[500px]:underline`
+tw`testmin-[700px]:italic`
diff --git a/tests/__fixtures__/pluginExamples/tailwind.config.js b/tests/__fixtures__/pluginExamples/tailwind.config.js
@@ -79,37 +79,34 @@ const addVariant = function ({ addVariant }) {
 
 // https://github.com/tailwindlabs/tailwindcss/blob/master/tests/match-variants.test.js
 const matchVariant = ({ matchVariant }) => {
-  matchVariant({
-    potato: flavor => `.potato-${flavor} &`,
-    carrot: flavor => `@media (carrot: ${flavor})`,
-    beetroot: flavor => `@media (beetroot: ${flavor}) { &:beetroot }`,
-  })
+  matchVariant('potato', flavor => `.potato-${flavor} &`)
+  matchVariant('carrot', flavor => `@media (carrot: ${flavor})`)
   matchVariant(
-    {
-      tooltip: side => `&${side}`,
-    },
-    {
-      values: {
-        bottom: '[data-location="bottom"]',
-        top: '[data-location="top"]',
-      },
-    }
+    'beetroot',
+    flavor => `@media (beetroot: ${flavor}) { &:beetroot }`
   )
-  matchVariant(
-    {
-      alphabet: side => `&${side}`,
+  matchVariant('tooltip', side => `&${side}`, {
+    values: {
+      bottom: '[data-location="bottom"]',
+      top: '[data-location="top"]',
     },
-    {
-      values: {
-        a: '[data-value="a"]',
-        b: '[data-value="b"]',
-        c: '[data-value="c"]',
-        d: '[data-value="d"]',
-      },
-    }
+  })
+
+  matchVariant('alphabet', side => `&${side}`, {
+    values: {
+      a: '[data-value="a"]',
+      b: '[data-value="b"]',
+      c: '[data-value="c"]',
+      d: '[data-value="d"]',
+    },
+  })
+  matchVariant('test', selector =>
+    selector.split(',').map(selector => `&.${selector} > *`)
   )
-  matchVariant({
-    test: selector => selector.split(',').map(selector => `&.${selector} > *`),
+  matchVariant('testmin', value => `@media (min-width: ${value})`, {
+    sort(a, z) {
+      return parseInt(a.value) - parseInt(z.value)
+    },
   })
 }
 

diff --git a/tests/__fixtures__/pluginLineClamp/tailwind.config.js b/tests/__fixtures__/pluginLineClamp/tailwind.config.js
diff --git a/tests/__fixtures__/screens/screens.tsx b/tests/__fixtures__/screens/screens.tsx
@@ -6,6 +6,5 @@ tw`md:block`
 tw`lg:block`
 tw`xl:block`
 tw`2xl:block`
-tw`2xl:block`
 
 tw`<sm:underline md>:font-bold`
diff --git a/tests/__fixtures__/utilitiesBorders/borderColor.tsx b/tests/__fixtures__/utilitiesBorders/borderColor.tsx
@@ -1629,3 +1629,5 @@ tw`border-[color:rgba(255, 255, 255, .45)]`
 
 tw`border-x-[color:green]`
 tw`border-y-[color:rgba(255, 255, 255, .45)]`
+
+tw`border-black border-s-green-500 border-e-red-400`
diff --git a/tests/__fixtures__/utilitiesBorders/borderRadius.tsx b/tests/__fixtures__/utilitiesBorders/borderRadius.tsx
@@ -81,3 +81,5 @@ tw`rounded-bl-full`
 tw`rounded-[12px]`
 tw`rounded-t-[var(--radius)] rounded-r-[var(--radius)] rounded-b-[var(--radius)] rounded-l-[var(--radius)]`
 tw`rounded-tr-[var(--radius)] rounded-br-[var(--radius)] rounded-bl-[var(--radius)] rounded-tl-[var(--radius)]`
+
+tw`rounded-s rounded-e rounded-ss rounded-es`
diff --git a/tests/__fixtures__/utilitiesBorders/borderWidth.tsx b/tests/__fixtures__/utilitiesBorders/borderWidth.tsx
@@ -51,3 +51,5 @@ tw`border-l-[length:10px]`
 tw`border-x-[length:10px]`
 tw`border-y-[length:10px]`
 tw`border-[length:10px]`
+
+tw`border-2 border-s-0 border-e-4`
diff --git a/tests/__fixtures__/utilitiesLayout/topRightBottomLeft.tsx b/tests/__fixtures__/utilitiesLayout/topRightBottomLeft.tsx
@@ -597,3 +597,5 @@ tw`-left-full`
 
 tw`top-[3px]`
 tw`inset-[50px]!`
+
+tw`inset-6 inset-x-1 start-4 end-8`
diff --git a/tests/__fixtures__/utilitiesSpacing/margin.tsx b/tests/__fixtures__/utilitiesSpacing/margin.tsx
@@ -514,3 +514,5 @@ tw`-mb-[5px]`
 tw`mt-[clamp(30px,100px)]`
 
 tw`!-mt-4`
+
+tw`mt-6 mx-1 ms-4 me-8`
diff --git a/tests/__fixtures__/utilitiesSpacing/padding.tsx b/tests/__fixtures__/utilitiesSpacing/padding.tsx
@@ -254,3 +254,5 @@ tw`pl-[5px]`
 tw`pr-[5px]`
 tw`pb-[5px]`
 tw`p-[var(--app-padding)]`
+
+tw`pt-6 px-1 ps-4 pe-8`
diff --git a/tests/__fixtures__/utiltiesSizing/maxHeight.tsx b/tests/__fixtures__/utiltiesSizing/maxHeight.tsx
@@ -12,6 +12,7 @@ tw`max-h-2`
 tw`max-h-2.5`
 tw`max-h-3`
 tw`max-h-3.5`
+tw`max-h-none`
 tw`max-h-4`
 tw`max-h-5`
 tw`max-h-6`

diff --git a/tests/__fixtures__/utiltiesTables/captionSide.tsx b/tests/__fixtures__/utiltiesTables/captionSide.tsx
@@ -0,0 +1,6 @@
+// @ts-nocheck
+import tw from '../macro'
+
+// https://tailwindcss.com/docs/caption-side
+tw`caption-top`
+tw`caption-bottom`
diff --git a/tests/__fixtures__/utiltiesTypography/fontFamily.tsx b/tests/__fixtures__/utiltiesTypography/fontFamily.tsx
@@ -5,6 +5,7 @@ import tw from '../macro'
 tw`font-sans`
 tw`font-serif`
 tw`font-mono`
+tw`font-custom`
 
 tw`font-['Open Sans']`
 

diff --git a/tests/__fixtures__/utiltiesTypography/hyphens.tsx b/tests/__fixtures__/utiltiesTypography/hyphens.tsx
@@ -0,0 +1,7 @@
+// @ts-nocheck
+import tw from '../macro'
+
+// https://tailwindcss.com/docs/hyphens
+tw`hyphens-none`
+tw`hyphens-manual`
+tw`hyphens-auto`
diff --git a/tests/__fixtures__/utiltiesTypography/listStyleImage.tsx b/tests/__fixtures__/utiltiesTypography/listStyleImage.tsx
@@ -0,0 +1,6 @@
+// @ts-nocheck
+import tw from '../macro'
+
+// https://tailwindcss.com/docs/list-style-image
+tw`list-image-none`
+tw`list-image-[url(checkmark.png)]`
diff --git a/tests/__fixtures__/utiltiesTypography/tailwind.config.js b/tests/__fixtures__/utiltiesTypography/tailwind.config.js
@@ -18,6 +18,15 @@ module.exports = {
           },
         ],
       },
+      fontFamily: {
+        custom: [
+          'Inter var, sans-serif',
+          {
+            fontFeatureSettings: '"cv11", "ss01"',
+            fontVariationSettings: '"opsz" 32',
+          },
+        ],
+      },
       colors: {
         'red-500/fromConfig': '#000',
         electric: ({ opacityVariable, opacityValue }) => {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -1629,3 +1629,5 @@ tw`border-[color:rgba(255, 255, 255, .45)]`

		tw`border-x-[color:green]`
		tw`border-y-[color:rgba(255, 255, 255, .45)]`

		tw`border-black border-s-green-500 border-e-red-400`
Original file line number	Diff line number	Diff line change
Expand Up		@@ -597,3 +597,5 @@ tw`-left-full`

		tw`top-[3px]`
		tw`inset-[50px]!`

		tw`inset-6 inset-x-1 start-4 end-8`
Original file line number	Diff line number	Diff line change
Expand Up		@@ -514,3 +514,5 @@ tw`-mb-[5px]`
		tw`mt-[clamp(30px,100px)]`

		tw`!-mt-4`

		tw`mt-6 mx-1 ms-4 me-8`