fix: enhance nth-child and nth-last-child handling in tail function; update nth.vue test case

close: #44

Author: Simon-He95

src/tail.ts

@@ -6,7 +6,23 @@ export function tail(css: string) {
       return 'odd'
     if (css === 'nth-child(even)')
       return 'even'
-    return ''
+    // nth-child(2n+1) => 2n+1
+    if (css.startsWith('nth-child(')) {
+      const match = css.match(/nth-child\((.*)\)/)
+      if (match && match[1])
+        return `nth-[${match[1]}]`
+      return ''
+    }
+    if (css.startsWith('nth-last-child(')) {
+      const match = css.match(/nth-last-child\((.*)\)/)
+      if (match && match[1])
+        return `nth-last-[${match[1]}]`
+      return ''
+    }
+    if (!css.includes('('))
+      return css
+
+    return css.split('(')[0]
   }
   if (css.startsWith('aria-') || css.startsWith('data-'))
     return css.split('=')[0]
@@ -16,5 +32,20 @@ export function tail(css: string) {
     return 'file'
   if (css.endsWith('-child'))
     return css.split('-')[0]
+  if (css.startsWith('has(')) {
+    const match = css.match(/has\((.*)\)/)
+    if (match && match[1])
+      return `has-[${match[1]}]`
+    return ''
+  }
+  if (css.startsWith('where(')) {
+    const match = css.match(/where\((.*)\)/)
+    if (match && match[1])
+      return `in-[${match[1]}]`
+    return ''
+  }
+  if (['first-child', 'last-child', 'only-child'].includes(css)) {
+    return css.split('-')[0]
+  }
   return css
 }

src/transformCss.ts

@@ -21,10 +21,10 @@ import {
 } from './utils'
 import { wrapperVueTemplate } from './wrapperVueTemplate'
 
-const combineReg = /([.#\w\-]+)([.#]\w+)/ // xx.xx
+const combineReg = /([.#]?[\w\-]+)((?:[.#]\w+)+)/ // xx.xx
 
 const addReg = /([.#\w\-]+)\s*\+\s*([.#\w]+)/ // xx + xx
-const tailReg = /:([\w\-]+)/ // :after
+const tailReg = /:?:(.+)/ // :after
 const tagReg = /\[([\w\-]*)[='" ]*([\w-]*)['" ]*\]/ // [class="xxx"]
 const emptyClass = /[,\w>.#\-+:[\]="'\s()]+\{\}\n/g
 
@@ -366,6 +366,33 @@ function sort(data: any[]) {
   return result
 }
 
+function matchCombine(
+  props: any[],
+  combineClass: string[],
+  combineId: string[],
+) {
+  const classPassed = combineClass.length
+    ? props.some(
+        (prop: any) =>
+          prop.name === 'class'
+          && combineClass.every((c) => {
+            const className = prop.value.content?.split(' ').filter(Boolean)
+            return className?.some((item: string) => item.includes(c))
+          }),
+      )
+    : true
+  const idPassed = combineId.length
+    ? props.some(
+        (prop: any) =>
+          prop.name === 'id'
+          && combineId.every((i) => {
+            const idName = prop.value.content?.split(' ').filter(Boolean)
+            return idName?.some((item: string) => item.includes(i))
+          }),
+      )
+    : true
+  return classPassed && idPassed
+}
 export function astFindTag(
   ast: any,
   tag = '',
@@ -390,6 +417,26 @@ export function astFindTag(
       : tag.startsWith('#')
         ? 'id'
         : ''
+  // combine 可能包含多个 .xxx#xxx.### , 需要一个个一个的去匹配
+  const combineClass: string[] = []
+  const combineId: string[] = []
+  if (combine) {
+    combine
+      .split('.')
+      .filter(Boolean)
+      .forEach((item) => {
+        if (item.includes('#')) {
+          const classNames = item.replace(/#([^.#]+)/g, (_, id) => {
+            combineId.push(id)
+            return ''
+          })
+          combineClass.push(...classNames.split('.').filter(Boolean))
+        }
+        else {
+          combineClass.push(item)
+        }
+      })
+  }
   const combineSelector = combine
     ? combine.startsWith('.')
       ? 'class'
@@ -417,11 +464,9 @@ export function astFindTag(
               .includes(tagMatch && tagMatch[2] ? tagMatch[2] : tag.slice(1))),
       )
       && (combine === undefined
-        || ast.props.some(
-          (prop: any) =>
-            prop.name === combineSelector
-            && prop.value.content?.includes(combine.slice(1)),
-        ))
+        || (ast.props
+          && ast.props.length
+          && matchCombine(ast.props, combineClass, combineId)))
         && (add === undefined
           || siblings.some(
             (sib: any) =>
@@ -443,23 +488,19 @@ export function astFindTag(
     && (combine === undefined
       || (ast.props
         && ast.props.length
-        && ast.props.some(
-          (prop: any) =>
-            prop.name === combineSelector
-            && (tagMatch || prop.value.content?.includes(combine.slice(1))),
-        )))
-        && (add === undefined
-          || siblings.some(
-            (sib: any) =>
-              sib !== ast
-              && sib.props
-              && sib.props.length
-              && sib.props.some(
-                (prop: any) =>
-                  prop.name === addSelector
-                  && prop.value.content?.includes(add.slice(1)),
-              ),
-          ))
+        && matchCombine(ast.props, combineClass, combineId)))
+      && (add === undefined
+        || siblings.some(
+          (sib: any) =>
+            sib !== ast
+            && sib.props
+            && sib.props.length
+            && sib.props.some(
+              (prop: any) =>
+                prop.name === addSelector
+                && prop.value.content?.includes(add.slice(1)),
+            ),
+        ))
   ) {
     result.push(ast)
   }
@@ -524,8 +565,6 @@ async function resolveConflictClass(
       }
     }
 
-    const f = after.replace(/\[([^\]]+)\]/g, (all, v) =>
-      all.replace(v, joinWithUnderLine(v)))
     // 默认全部都输出到class中
     const returnValue
       = isJsx || after.replace(/[\w\-]+=("{1})(.*?)\1/g, '').includes('[')
@@ -534,17 +573,14 @@ async function resolveConflictClass(
               all.replace(v, joinWithUnderLine(v)))
             .replace(/-(rgba?([^)]+))/g, '-[$1]')
             .replace(
-              /([\w\-]+)=(['"]{1})(.*?)\2/g,
-              (all, prefix, _, content) => {
+              /([\w\-]+(?:-\[[^\]]*\])?)=(['"]{1})(.*?)\2/g,
+              (_all, prefix, _, content) => {
                 // 拆分 content 中的空格，但是要忽略 ( ) [] 中的空格, 然后用 prefix 连接
-                const splitContent = content
+                const splitContent: string[] = content
                   .split(/(?<!\[[^\]]*)\s+/)
                   .filter(Boolean)
-                const newContent = splitContent
-                  .map(item => `${prefix}-${item}`)
-                  .join(` `)
 
-                return newContent
+                return splitContent.map(item => `${prefix}-${item}`).join(` `)
               },
             )
         : after

test/__snapshots__/transformCode.test.ts.snap

@@ -687,7 +687,7 @@ exports[`demo3 vue test > demo2.vue 1`] = `
   <div class="add-node-btn-box w-240px inline-flex  shrink-0   relative before-content-[''] before-absolute before-top-0 before-left-0 before-right-0 before-bottom-0 before--z-1 before-m-auto before-w-2px before-h-[100%] before-bg-[#cacaca]">
     <div class="add-node-btn select-none w-240px px-0 pt-20px pb-32px flex  justify-center shrink-0  grow-1">
       <div class="add-node-popover-body flex">
-        <a class="add-node-popover-item approver mr-10px cursor-pointer text-center flex-1 text-[#191f25]!" @click="addType(1)">
+        <a class="add-node-popover-item approver mr-10px cursor-pointer text-center flex-1 text-[#191f25]! hover .item-wrapper-bg-[#3296fa] item-wrapper-shadow-[0_10px_20px_0_rgba(50,150,250,0.4)] hover .iconfont-text-[#fff] active .item-wrapper-shadow-[none] item-wrapper-bg-[#eaeaea] active .iconfont-text-inherit" @click="addType(1)">
           <div class="item-wrapper select-none inline-block w-80px h-80px mb-5px bg-[#fff] border-1px border-solid border-[#e2e2e2] border-rd-[50%] transition-all transition-duration-0.3s transition-ease-[cubic-bezier(0.645,0.045,0.355,1)] text-[#ff943e]">
             <span class="iconfont text-35px lh-80px"></span>
           </div>
@@ -764,23 +764,17 @@ export default defineComponent({
 
 exports[`nth vue test > nth.vue 1`] = `
 "<script setup lang="ts"></script>
-
 <template>
-  <div class="bg-red w-[100%] lh-20px">
-    <div class="red">
+  <div class="bg-red w-[100%] lh-20px" id="test">
+    <div class="red yellow green nth-last-[1]-text-yellow">
       n1
     </div>
     <div class="red">
       n2
     </div>
   </div>
 </template>
-
-<style scoped>
-.red:nth-child(2) {
-  color: yellow;
-}
-</style>
+<style scoped></style>
 "
 `;
 
@@ -1803,9 +1797,9 @@ watch(
   <div class="add-node-btn-box w-240px inline-flex  shrink-0   relative before-content-[''] before-absolute before-top-0 before-left-0 before-right-0 before-bottom-0 before--z-1 before-m-auto before-w-2px before-h-[100%] before-bg-[#cacaca]">
     <div class="add-node-btn select-none w-240px px-0 pt-20px pb-32px flex  justify-center shrink-0  grow-1">
       <div class="add-node-popover-body flex">
-        <a class="group add-node-popover-item approver mr-10px cursor-pointer text-center flex-1 text-[#191f25]!" @click="addType(1)">
-          <div class="group item-wrapper select-none inline-block w-80px h-80px mb-5px bg-[#fff] border-1px border-solid border-[#e2e2e2] border-rd-[50%] transition-all transition-duration-0.3s transition-ease-[cubic-bezier(0.645,0.045,0.355,1)] text-[#ff943e] group-hover-bg-[#3296fa] group-hover-shadow-[0_10px_20px_0_rgba(50,150,250,0.4)]">
-            <span class="iconfont text-35px lh-80px group-hover-text-[#fff]"></span>
+        <a class="add-node-popover-item approver mr-10px cursor-pointer text-center flex-1 text-[#191f25]! hover .item-wrapper-bg-[#3296fa] item-wrapper-shadow-[0_10px_20px_0_rgba(50,150,250,0.4)] hover .iconfont-text-[#fff] active .item-wrapper-shadow-[none] item-wrapper-bg-[#eaeaea] active .iconfont-text-inherit" @click="addType(1)">
+          <div class="item-wrapper select-none inline-block w-80px h-80px mb-5px bg-[#fff] border-1px border-solid border-[#e2e2e2] border-rd-[50%] transition-all transition-duration-0.3s transition-ease-[cubic-bezier(0.645,0.045,0.355,1)] text-[#ff943e]">
+            <span class="iconfont text-35px lh-80px"></span>
           </div>
           <p>审批人</p>
         </a>
@@ -1916,23 +1910,17 @@ export default defineComponent({
 -----    nth.vue     -------
 
 <script setup lang="ts"></script>
-
 <template>
-  <div class="bg-red w-[100%] lh-20px">
-    <div class="red">
+  <div class="bg-red w-[100%] lh-20px" id="test">
+    <div class="red yellow green nth-last-[1]-text-yellow">
       n1
     </div>
     <div class="red">
       n2
     </div>
   </div>
 </template>
-
-<style scoped>
-.red:nth-child(2) {
-  color: yellow;
-}
-</style>
+<style scoped></style>
 ",
   "
 

test/demo/nth.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div style="background: red; width: 100%; line-height: 20px">
-    <div class="red">
+  <div id="test" style="background: red; width: 100%; line-height: 20px">
+    <div class="red yellow green">
       n1
     </div>
     <div class="red">
@@ -12,7 +12,7 @@
 </template>
 
 <style scoped>
-.red:nth-child(2) {
+#test div.red.yellow.green:nth-last-child(1) {
   color: yellow;
 }
 </style>