fixing things - working

Author: inanbruneli

.gitignore

@@ -21,4 +21,5 @@ dist-ssr
 *.ntvs*
 *.njsproj
 *.sln
-*.sw?
+*.sw?
+yarn.lock

package.json

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

src/classname.js

@@ -0,0 +1,104 @@
+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'
+import { isColor } from './utils/is-color'
+import { StringBuilder } from './utils/string-builder'
+
+export const EMPTY_CLASSNAME = ''
+
+export const classname = (ast, config) => {
+  const theme = getTailwindTheme(config)
+  const stringBuilder = new StringBuilder()
+  let negative = ast.negative || false
+  stringBuilder.appendVariants(...ast.variants || [])
+
+  if (ast.important) {
+    stringBuilder.makeImportant()
+  }
+
+  if (ast.value[0] === '-') {
+    ast.value = ast.value.slice(1)
+    negative = true
+  }
+
+  const [namedPluginClassName] = [...namedPlugins.entries()]
+    .filter(([, plugin]) => plugin.ns === ast.property)
+    .find(([, plugin]) => plugin.value === ast.value) || []
+
+  if (namedPluginClassName) {
+    return stringBuilder.addRoot(namedPluginClassName).toString()
+  }
+
+  const [root, possiblePlugins = []] = [...functionalPlugins.entries()].find(([, plugins]) => plugins.some(o => o.ns === ast.property)) || []
+  if (!root) {
+    throw new PluginNotFoundException(ast.property)
+  }
+
+  stringBuilder.addRoot(root)
+  if (isColor(ast.value, theme)) {
+    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
+        .addValue(findTailwindValueByUnit(ast.value))
+        .toString()
+    }
+
+    const color = calculateHexFromString(ast.value)
+    if (!color) {
+      return EMPTY_CLASSNAME
+    }
+
+    return stringBuilder
+      .appendModifier(buildModifier(color.alpha || ast.modifier, theme.opacity))
+      .addValue(
+        findTailwindColorFromHex(color.hex, theme[matchedPlugin.scaleKey || 'colors']) || StringBuilder.makeArbitrary(color.hex),
+      )
+      .toString()
+  }
+
+  const matchedPlugin = possiblePlugins.find(plugin => plugin.ns === ast.property)
+  if (!matchedPlugin) {
+    throw new PluginNotFoundException(ast.property)
+  }
+
+  const possibleValue = findTailwindValueByUnit(ast.value, matchedPlugin)
+  if (possibleValue) {
+    stringBuilder.addValue(possibleValue)
+
+    if (matchedPlugin.supportNegative && negative) {
+      stringBuilder.makeNegative()
+    }
+  }
+
+  return stringBuilder.toString()
+}
+
+const findTailwindValueByUnit = (unit, matchedPlugin = {}) => {
+  if (!unit) {
+    return undefined
+  }
+
+  if (matchedPlugin.type === 'image') {
+    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)`
+  }
+
+  return StringBuilder.makeArbitrary(unit)
+}

src/classname.ts

@@ -1,4 +1,4 @@
-import {parse} from "./parse";
-import {classname} from "./classname";
+import { classname } from './classname';
+import { parse } from './parse';
 
-export {parse, classname}
+export { parse, classname }

src/index.ts

@@ -1,8 +1,7 @@
-import {decodeArbitraryValue} from "./utils/decodeArbitraryValue";
-import {type Variant, variants} from "./plugins";
-import type {ScreensConfig} from "tailwindcss/types/config";
+import { decodeArbitraryValue } from "./utils/decodeArbitraryValue";
+import { type Variant, variants } from "./plugins";
 
-export function parseVariant(variant: string, screens: ScreensConfig): Variant  {
+export function parseVariant(variant: string, screens: any): Variant {
     if (variant[0] === '[' && variant[variant.length - 1] === ']') {
         let arbitraryValue = variant.slice(1, -1)
 
@@ -19,7 +18,7 @@ export function parseVariant(variant: string, screens: ScreensConfig): Variant
         }
     }
 
-    if(Object.keys(screens).includes(variant)) {
+    if (Object.keys(screens).includes(variant)) {
         return {
             kind: 'named',
             type: 'media',

src/parse-variant.ts

@@ -1,16 +1,15 @@
-import {segment} from "./utils/segment";
-import {findRoot} from "./find-root";
-import {type FunctionalPlugin, functionalPlugins, namedPlugins, type Variant} from "./plugins";
-import {parseVariant} from "./parse-variant";
-import {inferDataType} from "./utils/infer-data-type";
-import {getValue, type Value} from "./utils/value";
-import type {Config, ScreensConfig} from "tailwindcss/types/config";
-import {getTailwindTheme} from "./theme";
-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";
-import {decodeArbitraryValue} from "./utils/decodeArbitraryValue";
+import { segment } from "./utils/segment";
+import { findRoot } from "./find-root";
+import { type FunctionalPlugin, functionalPlugins, namedPlugins, type Variant } from "./plugins";
+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 { findTailwindColorFromHex } from "./utils/find-tailwind-color-from-hex";
+import { buildModifier } from "./utils/build-modifier";
+import { isColor } from "./utils/is-color";
+import { decodeArbitraryValue } from "./utils/decodeArbitraryValue";
 
 export type State = {
     important: boolean
@@ -36,8 +35,8 @@ export type Error = {
     message: string
 }
 
-export const parse = (input: string, config?: Config): AST | Error => {
-    if(!input) {
+export const parse = (input: string, config?: any): AST | Error => {
+    if (!input) {
         return {
             root: "",
             kind: "error",
@@ -56,7 +55,7 @@ export const parse = (input: string, config?: Config): AST | Error => {
     let parsedCandidateVariants: Variant[] = []
 
     for (let i = variants.length - 1; i >= 0; --i) {
-        let parsedVariant = parseVariant(variants[i], theme.screens as ScreensConfig)
+        let parsedVariant = parseVariant(variants[i], theme.screens as any)
         if (parsedVariant !== null)
             parsedCandidateVariants.push(parsedVariant)
     }
@@ -112,23 +111,23 @@ export const parse = (input: string, config?: Config): AST | Error => {
 
     if (valueWithoutModifier && valueWithoutModifier[0] === '[' && valueWithoutModifier[valueWithoutModifier.length - 1] === ']') {
         let arbitraryValue = valueWithoutModifier.slice(1, -1)
-        const unitType = inferDataType(arbitraryValue, [...availablePlugins.values()].map(({type}) => type))
+        const unitType = inferDataType(arbitraryValue, [...availablePlugins.values()].map(({ type }) => type))
         let associatedPluginByType = availablePlugins!.find(plugin => plugin.type === unitType)
 
         if (unitType === "color") {
             const color = CalculateHexFromString(arbitraryValue)
-            if(!color){
+            if (!color) {
                 return {
                     root: base,
                     kind: "error",
                     message: "Color is not correct",
                 }
             }
             valueWithoutModifier = findTailwindColorFromHex(color.hex, theme[associatedPluginByType?.scaleKey || "colors"]) || color.hex
-        }else{
+        } else {
             //It's not color, but it's still an arbitrary. We are just going to do parse it
             //The result might not be correct, but it's better than nothing and even tailwind will parse it anyway
-            if(availablePlugins.length > 0){
+            if (availablePlugins.length > 0) {
                 associatedPluginByType = availablePlugins.find(x => x.type === unitType) || availablePlugins.find(x => x.type !== "color")
             }
         }
@@ -159,7 +158,7 @@ export const parse = (input: string, config?: Config): AST | Error => {
     }
 
     //check value against each scale of available plugins
-    let matchedPlugin = availablePlugins.find(({scaleKey}) => value.split('-')[0] in theme[scaleKey] || valueWithoutModifier in theme[scaleKey])
+    let matchedPlugin = availablePlugins.find(({ scaleKey }) => value.split('-')[0] in theme[scaleKey] || valueWithoutModifier in theme[scaleKey])
     if (!matchedPlugin) {
         return {
             root: base,

src/parse.ts

@@ -1,12 +1,6 @@
-import type {Config} from "tailwindcss/types/config"
-import resolveConfig from 'tailwindcss/resolveConfig';
 import memoize from 'lodash/memoize'
 
-
-// fuck you TS. I don't want to deal with this, this return a Theme instance but fuck the interface they've put into it.
-// for now this ANY will do.
-// @ts-ignore IT STUBS ANYWAY
-export const getTailwindTheme = memoize((config: Config | undefined = {}) : any => {
-    const parsedConfig = resolveConfig(config || {})
-    return parsedConfig.theme
-})
+export const getTailwindTheme = memoize((config: any | undefined = {}): any => {
+    const parsedConfig = config || {}
+    return parsedConfig.theme || {}
+})