Skip to content

Latest commit

 

History

History
96 lines (83 loc) · 3.37 KB

README.md

File metadata and controls

96 lines (83 loc) · 3.37 KB
Raw

UnoT

English | 简体中文

UnoT is short for unocss tools, to provide a better development experience using unocss in vscode. It integrated tounocss、 vscode uno magic

demo

🦸🏻 Ability

  • Provides hover style prompt css code corresponding to UnoCss
  • Turn on uno-magic to provide the ability to automatically process spaces and brackets
  • Provides shortcut keys to automatically convert the style copied by the browser to UnoCss
  • Right-click provides a website to quickly open UnoCss documents and Unot online edited conversion results

💡 Open uno-magic

  • text-[red,hover:pink,2xl,lg:hover:3xl] -> text-red hover:text-pink text-2xl lg:hover:text-3xl
  • class or className content like w-calc(100% - 20px) -> w-[calc(100%-20px)] 🔎detail
  • Provides code selection for unocss syntax 🔎detail
  • Provide the unocss hover to display the css code 🔎detail
  • bg#fff -> bg-#fff
  • maxw-100% -> max-w-[100%]
  • bg-[rgba(255, 255, 255, 0.5)] -> bg-[rgba(255,255,255,0.5)]
  • translatex--50% -> translate-x-[-50%]
  • hover:(text-red bg-blue) -> hover:text-red hover:bg-blue
  • !(text-red bg-blue) -> !text-red !bg-blue
  • h="[calc(100% - 20px)]" -> h="[calc(100%-20px)]"

Powered by

Feature

Support css in the design draft directly through the shortcut key Mac? cmd+alt+v : ctrl+alt+v is automatically converted to unocss, and will be automatically processed into in-line unocss format or class form according to your location.

Configuration

  • You can use config to control some matching rules, such as strict-splicing, or the generated calculation result is -[10px] or -10px
{
  "unot.classMode": {
    "type": "boolean",
    "default": true,
    "description": "Enable/disable class mode"
  },
  "unot.variantGroup": {
    "type": "boolean",
    "default": true,
    "description": "Enable/disable transform hover:(x1 x2) to hover:x1 hover:x2"
  },
  "unot.strictVariable": {
    "type": "boolean",
    "default": true,
    "description": "if true w10px or w-10px will transform w-[10px]"
  },
  "unot.strictHyphen": {
    "type": "boolean",
    "default": false,
    "description": "if true bg#fff or bgrgba(0,0,0,.0) will transform bg-[#fff] or bg-[rgba(0,0,0,.0)]"
  },
  "unot.switchMagic": {
    "type": "boolean",
    "default": true,
    "description": "switch magic"
  },
  "unot.useHex": {
    "type": "boolean",
    "default": false,
    "description": "use hex color transform #fff to hex-fff"
  },
  "unot.presets": {
    "type": "array",
    "default": [],
    "description": "unocss transform presets"
  },
  "unot.dark": {
    "type": "object",
    "default": {},
    "description": "unocss dark theme style"
  },
  "unot.light": {
    "type": "object",
    "default": {},
    "description": "unocss light theme style"
  }
}

☕

buy me a cup of coffee

License

MIT