remove theme config from classname

Author: inanbruneli

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "inan-tailwind-parser",
+  "name": "tailwind-parser",
   "private": false,
   "version": "1.1.20",
   "type": "module",

src/classname.js

@@ -1,8 +1,6 @@
-import get from 'lodash/get'
-
 import { PluginNotFoundException } from './exceptions/plugin-not-found-exception'
 import { functionalPlugins, namedPlugins } from './plugins'
-import { getTailwindTheme } from './theme'
+
 import { buildModifier } from './utils/build-modifier'
 import { calculateHexFromString } from './utils/calculate-hex-from-string'
 import { findTailwindColorFromHex } from './utils/find-tailwind-color-from-hex'
@@ -11,8 +9,11 @@ import { StringBuilder } from './utils/string-builder'
 
 export const EMPTY_CLASSNAME = ''
 
-export const classname = (ast, config) => {
-  const theme = getTailwindTheme(config)
+export const classname = (ast) => {
+  if ([null, undefined, ''].includes(ast.value)) {
+    return EMPTY_CLASSNAME
+  }
+
   const stringBuilder = new StringBuilder()
   let negative = ast.negative || false
   stringBuilder.appendVariants(...ast.variants || [])
@@ -40,20 +41,12 @@ export const classname = (ast, config) => {
   }
 
   stringBuilder.addRoot(root)
-  if (isColor(ast.value, theme)) {
+  if (isColor(ast.value)) {
     const matchedPlugin = possiblePlugins.find(plugin => plugin.type === 'color')
     if (!matchedPlugin) {
       throw new PluginNotFoundException(ast.property)
     }
 
-    const tailwindThemeColor = get(theme[matchedPlugin.scaleKey || 'colors'], ast.value.split('-').join('.'))
-    if (tailwindThemeColor && typeof tailwindThemeColor !== 'object') {
-      return stringBuilder
-        .appendModifier(buildModifier(ast.modifier, theme.opacity))
-        .addValue(ast.value)
-        .toString()
-    }
-
     const isRgba = ast.value.includes('rgba')
     if (isRgba) {
       return stringBuilder
@@ -67,9 +60,9 @@ export const classname = (ast, config) => {
     }
 
     return stringBuilder
-      .appendModifier(buildModifier(color.alpha || ast.modifier, theme.opacity))
+      .appendModifier(buildModifier(color.alpha || ast.modifier))
       .addValue(
-        findTailwindColorFromHex(color.hex, theme[matchedPlugin.scaleKey || 'colors']) || StringBuilder.makeArbitrary(color.hex),
+        findTailwindColorFromHex(color.hex) || StringBuilder.makeArbitrary(color.hex),
       )
       .toString()
   }
@@ -96,7 +89,7 @@ const findTailwindValueByUnit = (unit, matchedPlugin = {}) => {
     return undefined
   }
 
-  if (matchedPlugin.type === 'image') {
+  if (matchedPlugin.type === 'image' && !unit.includes('url')) {
     unit = `url(http://github.com/%3Cspan%20class=pl-s1%3E%3Cspan%20class=pl-kos%3E$%7B%3C/span%3E%3Cspan%20class=pl-s1%3Eunit%3C/span%3E%3Cspan%20class=pl-kos%3E%7D%3C/span%3E%3C/span%3E)`
   }
 

src/parse.ts

@@ -5,7 +5,7 @@ import { parseVariant } from "./parse-variant";
 import { inferDataType } from "./utils/infer-data-type";
 import { getValue, type Value } from "./utils/value";
 import { getTailwindTheme } from "./theme";
-import { CalculateHexFromString } from "./utils/calculate-hex-from-string";
+import { calculateHexFromString } from "./utils/calculate-hex-from-string";
 import { findTailwindColorFromHex } from "./utils/find-tailwind-color-from-hex";
 import { buildModifier } from "./utils/build-modifier";
 import { isColor } from "./utils/is-color";
@@ -115,7 +115,7 @@ export const parse = (input: string, config?: any): AST | Error => {
         let associatedPluginByType = availablePlugins!.find(plugin => plugin.type === unitType)
 
         if (unitType === "color") {
-            const color = CalculateHexFromString(arbitraryValue)
+            const color = calculateHexFromString(arbitraryValue)
             if (!color) {
                 return {
                     root: base,

src/utils/is-color.ts

@@ -200,17 +200,10 @@ const NAMED_COLORS = new Set([
 
 const IS_COLOR_FN = /^(rgba?|hsla?|hwb|color|(ok)?(lab|lch)|light-dark|color-mix)\(/i
 
-export function isColor(value: string, theme?: any): boolean {
+export function isColor(value: string): boolean {
     if (!value) return false
 
-    let isThemeColor = false
-
-    if (theme) {
-        const [trueValue,] = segment(value, '/')
-        isThemeColor = !!get(theme.colors as any, trueValue.split('-').join('.'))
-    }
-
     return (
-        value.charCodeAt(0) === HASH || IS_COLOR_FN.test(value) || NAMED_COLORS.has(value.toLowerCase()) || isThemeColor
+        value.charCodeAt(0) === HASH || IS_COLOR_FN.test(value) || NAMED_COLORS.has(value.toLowerCase())
     )
 }

src/utils/string-builder.js

@@ -52,7 +52,7 @@ export class StringBuilder {
     }
 
     static makeArbitrary(input) {
-        if (input.includes('url') || /[0-9]/.test(input) && (!input.includes('-') || !input.indexOf('-'))) {
+        if (input.includes('(') || /[0-9]/.test(input) && (!input.includes('-') || !input.indexOf('-'))) {
             return `[${StringBuilder.makeInputArbitraryFormat(input)}]`
         }
         return input