Merge branch 'albohlabs-master'

package.json

@@ -118,12 +118,11 @@
  "eslint-plugin-unicorn": "^44.0.2",
  "glob-all": "^3.3.0",
  "husky": "4.3.8",
- "import-fresh": "^3.3.0",
  "jest": "^29.2.2",
  "lint-staged": "^13.0.3",
  "microbundle": "^0.15.1",
  "nodemon": "^2.0.20",
- "prettier": "^2.7.1",
+ "prettier": "^2.8.7",
  "react": "^18.2.0",
  "string-similarity": "^4.0.4",
  "styled-components": "^5.3.6",

src/core/lib/configHelpers.ts

@@ -1,7 +1,6 @@
 import { resolve, dirname } from 'path'
 import { existsSync } from 'fs'
 import escalade from 'escalade/sync'
-import requireFresh from 'import-fresh'
 import { configTwinValidators, configDefaultsTwin } from './twinConfig'
 import defaultTwinConfig from './defaultTailwindConfig'
 import { resolveTailwindConfig, getAllConfigs } from './util/twImports'
@@ -15,6 +14,7 @@ import type {
  Assert,
  AssertContext,
 } from 'core/types'
+import loadConfig from 'tailwindcss/loadConfig'
 
 type Validator = [(value: unknown) => boolean, string]
 
@@ -48,14 +48,12 @@ function getTailwindConfig({
  const configPath = userTailwindConfig
  ? resolve(sourceRoot, userTailwindConfig)
  : escalade(baseDirectory, (_, names) => {
- if (names.includes('tailwind.config.js')) {
- return 'tailwind.config.js'
- }
+ if (names.includes('tailwind.config.js')) return 'tailwind.config.js'
 
- if (names.includes('tailwind.config.cjs')) {
- return 'tailwind.config.cjs'
- }
- })
+ if (names.includes('tailwind.config.cjs')) return 'tailwind.config.cjs'
+
+ if (names.includes('tailwind.config.ts')) return 'tailwind.config.ts'
+ }) ?? ''
 
  const configExists = Boolean(configPath && existsSync(configPath))
 
@@ -76,7 +74,7 @@ function getTailwindConfig({
 
  const configs = [
  // User config
- ...(configExists ? getAllConfigs(requireFresh(configPath as string)) : []),
+ ...(configExists ? getAllConfigs(loadConfig(configPath)) : []),
  // Default config
  ...getAllConfigs(defaultTwinConfig),
  ]

tests/__fixtures__/configTS/configTS.tsx

@@ -0,0 +1,8 @@
+// @ts-nocheck
+import tw from '../macro'
+
+/**
+ * Test the config matching is working correctly
+ */
+
+tw`text-purple`

tests/__fixtures__/configTS/tailwind.config.ts

@@ -0,0 +1,10 @@
+import type { Config } from 'tailwindcss'
+
+export default {
+ content: [],
+ theme: {
+ colors: {
+ purple: 'custom',
+ },
+ },
+} satisfies Config

tests/__snapshots__/plugin.test.js.snap

@@ -21426,6 +21426,31 @@ tw\`font-customFontWeightAsNumber\`
 })
 
 
+`;
+
+exports[`twin.macro configTS.tsx: configTS.tsx 1`] = `
+
+// @ts-nocheck
+import tw from '../macro'
+
+/**
+ * Test the config matching is working correctly
+ */
+
+tw\`text-purple\`
+
+ ↓ ↓ ↓ ↓ ↓ ↓
+
+// @ts-nocheck
+
+/**
+ * Test the config matching is working correctly
+ */
+;({
+ color: 'custom',
+})
+
+
 `;
 
 exports[`twin.macro container.tsx: container.tsx 1`] = `

tests/plugin.test.js

@@ -30,6 +30,11 @@ pluginTester({
  ) && {
  config: path.join(path.dirname(file), 'tailwind.config.js'),
  }),
+ ...(fs.existsSync(
+ path.join(path.dirname(file), 'tailwind.config.ts')
+ ) && {
+ config: path.join(path.dirname(file), 'tailwind.config.ts'),
+ }),
  ...(fs.existsSync(configFile(file)) &&
  JSON.parse(fs.readFileSync(configFile(file), 'utf8'))),
  },

types/tests/__fixtures__/config/tailwind.config.d.ts

@@ -0,0 +1,52 @@
+declare const _default: {
+ theme: {
+ animation: {
+ 'zoom-.5': string
+ }
+ colors: {
+ number: number
+ purple: string
+ 'purple-hyphen': string
+ mycolors: {
+ DEFAULT: string
+ 'a-purple': string
+ 'a-number': number
+ }
+ 'my-blue': {
+ 100: string
+ }
+ 'color-opacity': ({ opacityVariable }: { opacityVariable: any }) => string
+ color: {
+ deep: {
+ config: {
+ 500: string
+ }
+ }
+ }
+ blue: {
+ DEFAULT: string
+ gray: {
+ 200: string
+ }
+ }
+ 'blue-gray': {
+ DEFAULT: string
+ 200: string
+ }
+ 'blue-gray-green': {
+ DEFAULT: string
+ 200: string
+ 'deep-dish': {
+ DEFAULT: string
+ 200: string
+ }
+ }
+ 'blue-gray-green-pink': string
+ }
+ fontWeight: {
+ customFontWeightAsString: string
+ customFontWeightAsNumber: number
+ }
+ }
+}
+export default _default

types/tests/__fixtures__/configTS/tailwind.config.d.ts

@@ -0,0 +1,9 @@
+declare const _default: {
+ content: never[]
+ theme: {
+ colors: {
+ purple: string
+ }
+ }
+}
+export default _default