[gem] Rename createCSSSheet to css

.vscode/launch.json

@@ -9,7 +9,7 @@
       "name": "Run Gem Extension",
       "type": "extensionHost",
       "request": "launch",
-      "args": ["--extensionDevelopmentPath=${workspaceFolder}/packages/vscode-gem-plugin"],
+      "args": ["--disable-extensions", "--extensionDevelopmentPath=${workspaceFolder}/packages/vscode-gem-plugin"],
       "outFiles": ["${workspaceFolder}/packages/vscode-gem-plugin/dist/**/*.js"],
       "preLaunchTask": "${defaultBuildTask}"
     }

crates/zed-plugin-gem/extension.toml

@@ -0,0 +1,7 @@
+id = "gem"
+name = "Gem"
+version = "0.0.1"
+schema_version = 1
+authors = ["mantou132 <709922234@qq.com>"]
+description = "Gem plugin for VS Code"
+repository = "https://github.com/mantou132/gem"

packages/duoyun-ui/docs/en/01-guide/30-customize.md

@@ -4,7 +4,7 @@ DuoyunUI comes with themes, icons, texts, and can be used in the application:
 
 ```ts
 import {
-  createCSSSheet,
+  css,
   adoptedStyle,
   customElement,
   GemElement,
@@ -16,7 +16,7 @@ import { locale } from 'duoyun-ui/lib/locale';
 
 import '@mantou/gem';
 
-const style = createCSSSheet`
+const style = css`
   gem-use {
     color: ${theme.positiveColor};
   }

packages/duoyun-ui/docs/zh/01-guide/30-customize.md

@@ -4,7 +4,7 @@ DuoyunUI 自带主题、图标、文本，在应用中可以这样使用它们
 
 ```ts
 import {
-  createCSSSheet,
+  css,
   adoptedStyle,
   customElement,
   GemElement,
@@ -16,7 +16,7 @@ import { locale } from 'duoyun-ui/lib/locale';
 
 import '@mantou/gem';
 
-const style = createCSSSheet`
+const style = css`
   gem-use {
     color: ${theme.positiveColor};
   }

packages/duoyun-ui/src/elements/action-text.ts

@@ -1,4 +1,4 @@
-import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element';
+import { GemElement, html, css } from '@mantou/gem/lib/element';
 import { adoptedStyle, customElement, attribute, state, slot, aria, shadow, mounted } from '@mantou/gem/lib/decorators';
 import { addListener } from '@mantou/gem/lib/utils';
 import { createDecoratorTheme } from '@mantou/gem/helper/theme';
@@ -11,7 +11,7 @@ import './tooltip';
 
 const elementTheme = createDecoratorTheme({ color: '', activeColor: '' });
 
-const style = createCSSSheet`
+const style = css`
   :host {
     overflow: hidden;
     text-overflow: ellipsis;

packages/duoyun-ui/src/elements/alert.ts

@@ -1,6 +1,6 @@
 // https://spectrum.adobe.com/page/in-line-alert/
 import { adoptedStyle, customElement, attribute, property, slot, aria, shadow } from '@mantou/gem/lib/decorators';
-import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element';
+import { GemElement, html, css } from '@mantou/gem/lib/element';
 import { createDecoratorTheme } from '@mantou/gem/helper/theme';
 
 import { theme, getSemanticColor } from '../lib/theme';
@@ -11,7 +11,7 @@ import './action-text';
 
 const elementTheme = createDecoratorTheme({ color: '' });
 
-const style = createCSSSheet`
+const style = css`
   :host(:where(:not([hidden]))) {
     display: flex;
     flex-direction: column;

packages/duoyun-ui/src/elements/area-chart.ts

@@ -1,4 +1,4 @@
-import { createCSSSheet, createState, html, svg } from '@mantou/gem/lib/element';
+import { css, createState, html, svg } from '@mantou/gem/lib/element';
 import type { Emitter } from '@mantou/gem/lib/decorators';
 import { adoptedStyle, customElement, emitter, memo, mounted, property } from '@mantou/gem/lib/decorators';
 import { addListener, classMap } from '@mantou/gem/lib/utils';
@@ -48,7 +48,7 @@ const elementTheme = createDecoratorTheme({
   symbolStrokeWidth: 0,
 });
 
-const style = createCSSSheet`
+const style = css`
   .hit-line {
     pointer-events: stroke;
   }

packages/duoyun-ui/src/elements/avatar.ts

@@ -9,7 +9,7 @@ import {
   aria,
   shadow,
 } from '@mantou/gem/lib/decorators';
-import { createCSSSheet, GemElement, html } from '@mantou/gem/lib/element';
+import { css, GemElement, html } from '@mantou/gem/lib/element';
 import { exportPartsMap } from '@mantou/gem/lib/utils';
 import { createDecoratorTheme } from '@mantou/gem/helper/theme';
 
@@ -21,7 +21,7 @@ import './tooltip';
 
 const elementTheme = createDecoratorTheme({ color: '' });
 
-const style = createCSSSheet`
+const style = css`
   :host(:where(:not([hidden]))) {
     cursor: default;
     display: inline-block;
@@ -110,7 +110,7 @@ export class DuoyunAvatarElement extends GemElement {
   };
 }
 
-const groupStyle = createCSSSheet`
+const groupStyle = css`
   :scope:where(:not([hidden])) {
     display: flex;
   }

packages/duoyun-ui/src/elements/badge.ts

@@ -11,7 +11,7 @@ import {
   shadow,
   mounted,
 } from '@mantou/gem/lib/decorators';
-import { createCSSSheet, createRef, GemElement, html } from '@mantou/gem/lib/element';
+import { css, createRef, GemElement, html } from '@mantou/gem/lib/element';
 import { classMap } from '@mantou/gem/lib/utils';
 
 import { contentsContainer } from '../lib/styles';
@@ -20,7 +20,7 @@ import type { StringList } from '../lib/types';
 
 import './use';
 
-const style = createCSSSheet`
+const style = css`
   .badge {
     display: flex;
     align-items: center;

packages/duoyun-ui/src/elements/banner.ts

@@ -11,7 +11,7 @@ import {
   shadow,
   aria,
 } from '@mantou/gem/lib/decorators';
-import { createCSSSheet, GemElement, html } from '@mantou/gem/lib/element';
+import { css, GemElement, html } from '@mantou/gem/lib/element';
 
 import { theme } from '../lib/theme';
 import { icons } from '../lib/icons';
@@ -20,7 +20,7 @@ import { commonHandle } from '../lib/hotkeys';
 import './use';
 import './divider';
 
-const style = createCSSSheet`
+const style = css`
   :host(:where(:not([hidden]))) {
     display: flex;
     align-items: flex-start;

packages/duoyun-ui/src/elements/bar-chart.ts

@@ -1,5 +1,5 @@
 import { customElement, property, adoptedStyle, memo } from '@mantou/gem/lib/decorators';
-import { createCSSSheet, html, svg } from '@mantou/gem/lib/element';
+import { css, html, svg } from '@mantou/gem/lib/element';
 
 import { theme } from '../lib/theme';
 
@@ -12,7 +12,7 @@ export interface Sequence {
   values: (number | null)[];
 }
 
-const style = createCSSSheet`
+const style = css`
   .col:hover .rect {
     fill: ${theme.hoverBackgroundColor};
     opacity: 0.2;

packages/duoyun-ui/src/elements/base/chart.ts

@@ -1,7 +1,7 @@
 import type { Emitter } from '@mantou/gem/lib/decorators';
 import { adoptedStyle, emitter, property, state, part, aria, shadow, memo } from '@mantou/gem/lib/decorators';
 import type { TemplateResult } from '@mantou/gem/lib/element';
-import { createCSSSheet, html, svg } from '@mantou/gem/lib/element';
+import { css, html, svg } from '@mantou/gem/lib/element';
 import { randomStr } from '@mantou/gem/lib/utils';
 
 import { theme } from '../../lib/theme';
@@ -31,7 +31,7 @@ export interface MarkLine {
   color?: string;
 }
 
-const style = createCSSSheet`
+const style = css`
   :host(:where(:not([hidden]))) {
     display: flex;
     flex-direction: column;

packages/duoyun-ui/src/elements/base/loadable.ts

@@ -1,11 +1,11 @@
 import { adoptedStyle, customElement, boolattribute, shadow, effect } from '@mantou/gem/lib/decorators';
-import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element';
+import { GemElement, html, css } from '@mantou/gem/lib/element';
 
 import { theme } from '../../lib/theme';
 
 import '../loading';
 
-const maskStyle = createCSSSheet`
+const maskStyle = css`
   :host(:where(:not([hidden]))) {
     position: absolute;
     z-index: ${theme.popupZIndex};
@@ -34,7 +34,7 @@ export class DuoyunLoadableMaskElement extends GemElement {
   };
 }
 
-const style = createCSSSheet`
+const style = css`
   :host(:where(:not([hidden]))) {
     display: block;
     position: relative;

packages/duoyun-ui/src/elements/base/scroll.ts

@@ -1,12 +1,12 @@
 import { adoptedStyle, effect, mounted, shadow, state } from '@mantou/gem/lib/decorators';
-import { createCSSSheet } from '@mantou/gem/lib/element';
+import { css } from '@mantou/gem/lib/element';
 import { addListener } from '@mantou/gem/lib/utils';
 
 import { DuoyunResizeBaseElement } from './resize';
 
 const PIXEL_DEVIATION = 0.1;
 
-const style = createCSSSheet`
+const style = css`
   :host(:where(:not([hidden]))) {
     display: block;
     overflow: auto;

packages/duoyun-ui/src/elements/breadcrumbs.ts

@@ -1,6 +1,6 @@
 // https://spectrum.adobe.com/page/breadcrumbs/
 import { adoptedStyle, customElement, property, boolattribute, part, aria, shadow } from '@mantou/gem/lib/decorators';
-import { createCSSSheet, GemElement, html } from '@mantou/gem/lib/element';
+import { css, GemElement, html } from '@mantou/gem/lib/element';
 import { classMap } from '@mantou/gem/lib/utils';
 
 import { icons } from '../lib/icons';
@@ -11,7 +11,7 @@ import './use';
 import './tooltip';
 import './action-text';
 
-const style = createCSSSheet`
+const style = css`
   :host(:where(:not([hidden]))) {
     display: flex;
     align-items: center;

packages/duoyun-ui/src/elements/button.ts

@@ -11,7 +11,7 @@ import {
   shadow,
   mounted,
 } from '@mantou/gem/lib/decorators';
-import { createCSSSheet, GemElement, html, createRef } from '@mantou/gem/lib/element';
+import { css, GemElement, html, createRef } from '@mantou/gem/lib/element';
 import { history } from '@mantou/gem/lib/history';
 import { addListener, classMap, QueryString } from '@mantou/gem/lib/utils';
 import { createDecoratorTheme } from '@mantou/gem/helper/theme';
@@ -32,7 +32,7 @@ import './use';
 
 const elementTheme = createDecoratorTheme({ bg: '', color: '' });
 
-const style = createCSSSheet`
+const style = css`
   :host(:where(:not([hidden]))) {
     display: inline-flex;
     align-items: stretch;

packages/duoyun-ui/src/elements/calendar.ts

@@ -10,7 +10,7 @@ import {
   memo,
 } from '@mantou/gem/lib/decorators';
 import type { TemplateResult } from '@mantou/gem/lib/element';
-import { createCSSSheet, GemElement, html } from '@mantou/gem/lib/element';
+import { css, GemElement, html } from '@mantou/gem/lib/element';
 import { classMap, partMap } from '@mantou/gem/lib/utils';
 
 import { isNotNullish } from '../lib/types';
@@ -19,7 +19,7 @@ import { theme } from '../lib/theme';
 import { commonHandle } from '../lib/hotkeys';
 import { focusStyle } from '../lib/styles';
 
-const style = createCSSSheet`
+const style = css`
   :host(:where(:not([hidden]))) {
     cursor: default;
     font-size: 0.875em;

packages/duoyun-ui/src/elements/card.ts

@@ -1,6 +1,6 @@
 // https://spectrum.adobe.com/page/cards/
 import { adoptedStyle, customElement, attribute, property, part, slot, shadow, aria } from '@mantou/gem/lib/decorators';
-import { createCSSSheet, html } from '@mantou/gem/lib/element';
+import { css, html } from '@mantou/gem/lib/element';
 
 import { theme } from '../lib/theme';
 import { icons } from '../lib/icons';
@@ -14,7 +14,7 @@ import { ContextMenu } from './contextmenu';
 
 import './use';
 
-const style = createCSSSheet`
+const style = css`
   :host(:where(:not([hidden]))) {
     display: flex;
     flex-direction: column;

packages/duoyun-ui/src/elements/carousel.ts

@@ -1,5 +1,5 @@
 import type { TemplateResult } from '@mantou/gem/lib/element';
-import { createCSSSheet, createState, GemElement, html } from '@mantou/gem/lib/element';
+import { css, createState, GemElement, html } from '@mantou/gem/lib/element';
 import type { Emitter } from '@mantou/gem/lib/decorators';
 import {
   adoptedStyle,
@@ -30,7 +30,7 @@ import './more';
 
 const elementTheme = createDecoratorTheme({ bgImg: '' });
 
-const style = createCSSSheet`
+const style = css`
   :host(:where(:not([hidden]))) {
     display: block;
     width: 100%;

packages/duoyun-ui/src/elements/cascader-picker.ts

@@ -13,7 +13,7 @@ import {
   mounted,
   memo,
 } from '@mantou/gem/lib/decorators';
-import { createCSSSheet, GemElement, html } from '@mantou/gem/lib/element';
+import { css, GemElement, html } from '@mantou/gem/lib/element';
 import { addListener } from '@mantou/gem/lib/utils';
 
 import { theme } from '../lib/theme';
@@ -34,7 +34,7 @@ import './cascader';
 import './tag';
 import './scroll-box';
 
-const style = createCSSSheet`
+const style = css`
   :host {
     width: 15em;
     white-space: nowrap;

packages/duoyun-ui/src/elements/cascader.ts

@@ -11,7 +11,7 @@ import {
   memo,
 } from '@mantou/gem/lib/decorators';
 import type { TemplateResult } from '@mantou/gem/lib/element';
-import { createCSSSheet, createState, GemElement, html } from '@mantou/gem/lib/element';
+import { css, createState, GemElement, html } from '@mantou/gem/lib/element';
 import { styleMap, classMap } from '@mantou/gem/lib/utils';
 
 import { icons } from '../lib/icons';
@@ -23,7 +23,7 @@ import { locale } from '../lib/locale';
 import './use';
 import './checkbox';
 
-const style = createCSSSheet`
+const style = css`
   :host(:where(:not([hidden]))) {
     display: flex;
     align-items: stretch;

packages/duoyun-ui/src/elements/chart-tooltip.ts

@@ -1,6 +1,6 @@
 import { connectStore, adoptedStyle, customElement, shadow, effect } from '@mantou/gem/lib/decorators';
 import type { TemplateResult } from '@mantou/gem/lib/element';
-import { createCSSSheet, GemElement, html } from '@mantou/gem/lib/element';
+import { css, GemElement, html } from '@mantou/gem/lib/element';
 import { styleMap, classMap } from '@mantou/gem/lib/utils';
 import { createStore } from '@mantou/gem/lib/store';
 import { createDecoratorTheme } from '@mantou/gem/helper/theme';
@@ -9,7 +9,7 @@ import { theme } from '../lib/theme';
 
 const elementTheme = createDecoratorTheme({ top: '', left: '', width: '' });
 
-const style = createCSSSheet`
+const style = css`
   :host(:where(:not([hidden]))) {
     position: fixed;
     z-index: ${theme.popupZIndex};

packages/duoyun-ui/src/elements/chart-zoom.ts

@@ -1,6 +1,6 @@
 import type { Emitter } from '@mantou/gem/lib/decorators';
 import { adoptedStyle, customElement, emitter, mounted, property, shadow } from '@mantou/gem/lib/decorators';
-import { createCSSSheet, createState, GemElement, html } from '@mantou/gem/lib/element';
+import { css, createState, GemElement, html } from '@mantou/gem/lib/element';
 import { styleMap, classMap, addListener } from '@mantou/gem/lib/utils';
 
 import { clamp } from '../lib/number';
@@ -11,7 +11,7 @@ import type { PanEventDetail } from './gesture';
 import './gesture';
 import './area-chart';
 
-const style = createCSSSheet`
+const style = css`
   :host(:where(:not([hidden]))) {
     position: relative;
     display: block;