☰

css-replace

2024/12/29 14:44:23

当前为 2025-03-11 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name        css-replace
  3. // @namespace   css
  4. // @match       https://codesign.qq.com/app/design/*
  5. // @version     1.1
  6. // @author      Gorvey
  7. // @description 2024/12/29 14:44:23
  8. // @run-at      document-idle
  9. // @grant       GM_registerMenuCommand
  10. // @grant       GM_setValue
  11. // @grant       GM_deleteValue
  12. // @grant       GM_getValue
  13. // @grant       GM_addStyle
  14. // @license MIT
  15. // ==/UserScript==
  16. //--------------------设置------------------- S//
  17.  
  18. //#region
  19. GM_addStyle(
  20.   `
  21.   .base-node{
  22.     display: none;
  23.   }
  24.   .node-item[data-label="字体"],
  25.   .node-item[data-label="段落对齐"],
  26.   .node-item[data-label="垂直对齐"],
  27.   .node-item[data-label="字号"],
  28.   .node-item[data-label="字重"],
  29.   .node-item[data-label="行高"],
  30.   .node-item[data-label="颜色"],
  31.   .node-item[data-label="宽度"]
  32.   {
  33.     display: none !important;
  34.   }
  35.   // .node-box{
  36.   //   display: none !important;
  37.   // }
  38.   .node-box:last-child{
  39.     display: block !important;
  40.   }
  41.   .node-item {
  42.     margin-bottom: 2px !important;
  43.   }
  44.   .node-box {
  45.     margin-bottom: 0px !important;
  46.   }
  47.   `
  48. );
  49. GM_addStyle(
  50.   `
  51.   .tailwind-line-wrapper{
  52.     display: flex;
  53.     align-items: center;
  54.     justify-content: space-between;
  55.   }
  56.   `
  57. )
  58. //#endregion
  59.  
  60. document.addEventListener('click', (e) => {
  61.   if(e.target.classList.contains('icon-v2-copy')){
  62.     return
  63.   }
  64.   const wrapper = document.querySelector(".css-node__codes");
  65.   if (!wrapper) return;
  66.   onCssChange()
  67. })
  68. const copyToClipboard = (text) => {
  69.   const textarea = document.createElement("textarea");
  70.   textarea.value = text;
  71.   document.body.appendChild(textarea);
  72.   textarea.select();
  73.   document.execCommand("copy");
  74.   document.body.removeChild(textarea);
  75. };
  76.  
  77. const processCssVariables = (value) => {
  78.   const cssVarMap = GM_getValue('css-variable-map', '')
  79.   if (!cssVarMap) return value
  80.   
  81.  
  82.  
  83.   // 格式化 CSS 变量映射字符串
  84.   const formatVarMap = cssVarMap
  85.     .replace(/\/\*[\s\S]*?\*\/|\/\/.*/g, '')
  86.     .replace(/(:root|:root\[.*?\])\s*{/g, '')
  87.     .replace(/}/g, '')
  88.     .split(';')
  89.     .filter(line => line.trim())
  90.     .map(line => {
  91.       const [key, val] = line.split(':').map(s => s.trim())
  92.      
  93.       return [key, val]
  94.     })
  95.     .filter(([key, val]) => key && val)
  96.  
  97.  
  98.   // 查找匹配的变量
  99.   const matchedVar = formatVarMap.find(([_, val]) => {
  100.     const cleanVal = val.replace(/\s*!important\s*$/, '').trim()
  101.     return cleanVal.toLowerCase() === value
  102.   })
  103.  
  104.   return matchedVar ? `var(${matchedVar[0]})` : value
  105. }
  106.  
  107. const cssToTailwind = (css) => {
  108.  
  109.  
  110.   const cssMap = css.map(item => {
  111.     const [name, value] = item.split(':').map(s => s.trim())
  112.     const processedValue = processCssVariables(value)
  113.     return [name, processedValue]
  114.   })
  115.  
  116.   const rules = [
  117.     // ['width', 'w-[#]'],
  118.     // ['height', 'h-[#]'],
  119.     ['font-size', 'text-[#]'],
  120.     // ['font-style', '#'],
  121.     ['font-weight', (value) =>{
  122.       const maps={
  123.         '300': 'font-light',
  124.         '400': 'font-normal',
  125.         '500': 'font-medium',
  126.         '600': 'font-semibold',
  127.         '700': 'font-bold',
  128.         '800': 'font-extrabold',
  129.       }
  130.       return maps[value]
  131.     }],
  132.     ['color', 'text-[#]'],
  133.     ['line-height', 'leading-[#]'],
  134.     ['border-radius', 'rounded-[#]'],
  135.     ['border', (value) => {
  136.       const [width, style, color] = value.split(' ')
  137.       return `border-[${width}] border-${style} border-[${color}]`
  138.     }],
  139.     ['letter-spacing', 'tracking-[#]'],
  140.     ['opacity', (value) => `opacity-${Math.round(parseFloat(value) * 100)}`],
  141.     // ['text-decoration', '#'],
  142.     // ['text-align', 'text-#'],
  143.     ['background', 'bg-[#]'],
  144.     // ['padding', 'p-[#]'],
  145.     // ['margin', 'm-[#]'],
  146.     // ['display', '#'],
  147.     // ['position', '#'],
  148.     // ['top', 'top-[#]'],
  149.     // ['left', 'left-[#]'],
  150.     // ['right', 'right-[#]'],
  151.     // ['bottom', 'bottom-[#]'],
  152.   ]
  153.  
  154.   // 转换 CSS 属性到 Tailwind
  155.   const result = cssMap.map(([prop, value]) => {
  156.     const rule = rules.find(([cssName]) => cssName === prop)
  157.     if(value === '') return null
  158.     if (!rule) return null
  159.  
  160.     const [, template] = rule
  161.     if (typeof template === 'function') {
  162.       return template(value)
  163.     }
  164.     
  165.     return template.replace('#', value)
  166.   }).filter(item => {
  167.     if(!item) return false
  168.     // 清理默认值
  169.     let defaultValues = ['font-normal', 'text-[14px]', 'tracking-[0]']
  170.     if(defaultValues.includes(item)) return false
  171.     return true
  172.   })
  173.   
  174.   return result.join(' ')
  175. }
  176. const genCopyButton = (css) => {
  177.   const button = document.createElement('div')
  178.   button.innerHTML='<i style="font-size: 24px;" class="com-icon iconfont-v2 icon-v2-copy"></i>'
  179.   button.classList.add('tailwind-copy-button')
  180.   button.style.cursor = 'pointer'
  181.   button.style.color = '#000'
  182.   button.style.marginLeft = '8px'
  183.   button.addEventListener('click', () => {
  184.     copyToClipboard(css)
  185.     // 获取对应的代码块元素
  186.     const codeBlock = button.previousElementSibling
  187.     // 添加复制成功的边框样式
  188.     codeBlock.style.borderColor = '#22c55e'
  189.     // 3秒后恢复原样
  190.     setTimeout(() => {
  191.       codeBlock.style.borderColor = 'var(--td-brand-color)'
  192.     }, 3000)
  193.   })
  194.   return button
  195. }
  196. const textToHtmlCodeElement = (text) => {
  197.   const node = document.createElement('div')
  198.   node.classList.add('tailwind-code-block')
  199.   node.innerText = text
  200.   node.style.width = '100%'
  201.   node.style.marginTop = '8px'
  202.   node.style.padding = '8px 12px'
  203.   node.style.whiteSpace = 'pre-wrap'
  204.   node.style.wordBreak = 'break-all'
  205.   node.style.minHeight = '32px'
  206.   node.style.maxHeight = '190px'
  207.   node.style.overflow = 'auto'
  208.   node.style.borderRadius = '4px'
  209.   node.style.cursor = 'text'
  210.   node.style.backgroundColor = 'rgba(0, 0, 0, .04)'
  211.   node.style.position = 'relative'
  212.   node.style.border = '3px solid var(--td-brand-color)'
  213.   return node
  214. }
  215. const onCssChange = async () => {
  216.   await new Promise((resolve) => setTimeout(resolve, 20));
  217.   try {
  218.     const wrapper = document.querySelector(".css-node__codes");
  219.     if (!wrapper) return;
  220.     const cssNode = wrapper.querySelectorAll(".css-node__code--item")[0];
  221.     const content = cssNode.innerText;
  222.     const hasMultipleClasses = content.includes('{');
  223.     let tailwind = [];
  224.     
  225.     if (hasMultipleClasses) {
  226.       // 处理多个类声明
  227.       const classBlocks = content.split('}').filter(block => block.trim());
  228.       const results = classBlocks.map(block => {
  229.         const styles = block
  230.           .replace(/.*{/, '') // 移除类名和{
  231.           .split(';\n')
  232.           .filter(item => item.trim())
  233.           .map(item => item.trim().replace(';', ''));
  234.         return cssToTailwind(styles);
  235.       });
  236.       tailwind = results;
  237.     } else {
  238.       // 处理单个声明
  239.       const styles = content
  240.         .split(';\n')
  241.         .filter(item => item.trim())
  242.         .map(item => item.trim().replace(';', ''));
  243.       tailwind =[cssToTailwind(styles)]
  244.     }
  245.     let prevNodes = document.querySelectorAll('.tailwind-line-wrapper')
  246.     prevNodes.forEach(node => {
  247.       node.remove()
  248.     })
  249.   
  250.     tailwind.map(item =>{
  251.      const node= textToHtmlCodeElement(item)
  252.      const copyButton = genCopyButton(item)
  253.      const lineWrapper = document.createElement('div')
  254.      lineWrapper.classList.add('tailwind-line-wrapper')
  255.      lineWrapper.appendChild(node)
  256.      lineWrapper.appendChild(copyButton)
  257.      wrapper.insertBefore(lineWrapper,cssNode)
  258.     })
  259.  
  260.   } catch (error) {
  261.     console.error(error);
  262.   }
  263. };
  264.  
  265. GM_registerMenuCommand('添加css变量映射', () => {
  266.  const css = prompt('请输入css变量映射')
  267.  if(!css) return
  268. GM_setValue('css-variable-map', css)
  269. alert('添加成功')
  270. })
  271. GM_registerMenuCommand('清除css变量映射', () => {
  272.   GM_deleteValue('css-variable-map')
  273.   alert('清除成功')
  274. })