uniAppXCX/uni_modules/jc-tailwind/utils/classes.js

export function getClassObject(list, { name, value }) {
	return list.map((d, i) => {
		const values = typeof value === 'string' ? value.split(',').map(v => {
			return `${v}: ${d.value || d.name};`
		}) : [...value(d, i)]

		return {
			...d,
			name: d.name !== '' ? `${name}${d.name}` : `${name.slice(0, name.lastIndexOf('-'))}`,
			value: values
		}
	})
}


export function getClassArray(list, options) {
	const { name, value } = options
	if ('string' !== typeof name) {
		return name.reduce((acc, cur, index) => {
			if (acc) {
				acc.push(...getClassObject(list, { name: cur, value: value[index] }))
				return acc
			}
		}, [])
	}
	return getClassObject(list, { name, value })
}

export function getStringList(list) {
	return list.split(',').map(d => {
		d = d.trim()
		const [name, value = d] = d.split(':')
		return { name, value }
	})
}

export function getClasses(list, options) {
	if ('string' === typeof list) {
		list = getStringList(list)
	}

	const result = getClassArray(list, options)

	// console.log(result, options);
	if (options?.scss) { // 生成scss
		createNameValueScss(result, options, list)
	}
	return result


}

// 驼峰法
function getCamelCaseName(str) {
	if (typeof str !== 'string') return ''
	let words = str.split('-')
	for (let i = 1; i < words.length; i++) {
		words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1)
	}
	return words.join('')
}

function createNameValueScss(list, { name, value, scss }, _list) {
	if (typeof value !== 'string') {
		let strs = []
		list.map(d => {
			let className = `.${d.name} {`
			let classValue = d.value.join(' ')
			strs.push(`${className}${classValue} }\n`)
		})
		return console.log(`%c${strs.join('\r')}`, 'color: skyblue;')
	}


	const camelCaseName = getCamelCaseName(value)

	let arrValues = []
	_list.map(d => {
		arrValues.push(`'${name}${d.name}' '${d.value}'`)
	})
	const arrName = `$${camelCaseName}s`
	const arrs = `${arrName}: ${arrValues.join(',')}`
	let str = `
// ${camelCaseName}
\r
${arrs};
\r
@each $name, $val in ${arrName} {
	.#{$name} {${value}: #{$val};}
}
		`
	console.log(`%c${str}`, 'color: skyblue;')
}