From 7e923a791fbe837824c16ca4ea8994d5a7faf2d3 Mon Sep 17 00:00:00 2001 From: mantou132 <709922234@qq.com> Date: Sat, 2 Nov 2024 16:10:03 +0800 Subject: [PATCH] [gem] Rename `createCSSSheet` to `css` --- .vscode/launch.json | 2 +- crates/zed-plugin-gem/extension.toml | 7 +++++ .../docs/en/01-guide/30-customize.md | 4 +-- .../docs/zh/01-guide/30-customize.md | 4 +-- .../duoyun-ui/src/elements/action-text.ts | 4 +-- packages/duoyun-ui/src/elements/alert.ts | 4 +-- packages/duoyun-ui/src/elements/area-chart.ts | 4 +-- packages/duoyun-ui/src/elements/avatar.ts | 6 ++-- packages/duoyun-ui/src/elements/badge.ts | 4 +-- packages/duoyun-ui/src/elements/banner.ts | 4 +-- packages/duoyun-ui/src/elements/bar-chart.ts | 4 +-- packages/duoyun-ui/src/elements/base/chart.ts | 4 +-- .../duoyun-ui/src/elements/base/loadable.ts | 6 ++-- .../duoyun-ui/src/elements/base/scroll.ts | 4 +-- .../duoyun-ui/src/elements/breadcrumbs.ts | 4 +-- packages/duoyun-ui/src/elements/button.ts | 4 +-- packages/duoyun-ui/src/elements/calendar.ts | 4 +-- packages/duoyun-ui/src/elements/card.ts | 4 +-- packages/duoyun-ui/src/elements/carousel.ts | 4 +-- .../duoyun-ui/src/elements/cascader-picker.ts | 4 +-- packages/duoyun-ui/src/elements/cascader.ts | 4 +-- .../duoyun-ui/src/elements/chart-tooltip.ts | 4 +-- packages/duoyun-ui/src/elements/chart-zoom.ts | 4 +-- packages/duoyun-ui/src/elements/checkbox.ts | 4 +-- packages/duoyun-ui/src/elements/coach-mark.ts | 4 +-- packages/duoyun-ui/src/elements/code-block.ts | 4 +-- packages/duoyun-ui/src/elements/collapse.ts | 6 ++-- .../duoyun-ui/src/elements/color-panel.ts | 4 +-- .../duoyun-ui/src/elements/color-picker.ts | 4 +-- .../duoyun-ui/src/elements/contextmenu.ts | 4 +-- packages/duoyun-ui/src/elements/copy.ts | 4 +-- packages/duoyun-ui/src/elements/date-panel.ts | 4 +-- .../duoyun-ui/src/elements/date-picker.ts | 4 +-- .../src/elements/date-range-panel.ts | 4 +-- .../src/elements/date-range-picker.ts | 4 +-- packages/duoyun-ui/src/elements/divider.ts | 4 +-- .../duoyun-ui/src/elements/donut-chart.ts | 4 +-- packages/duoyun-ui/src/elements/drawer.ts | 4 +-- packages/duoyun-ui/src/elements/drop-area.ts | 4 +-- packages/duoyun-ui/src/elements/empty.ts | 4 +-- .../duoyun-ui/src/elements/file-picker.ts | 4 +-- packages/duoyun-ui/src/elements/flow.ts | 6 ++-- packages/duoyun-ui/src/elements/form.ts | 6 ++-- packages/duoyun-ui/src/elements/heading.ts | 4 +-- packages/duoyun-ui/src/elements/help-text.ts | 4 +-- packages/duoyun-ui/src/elements/icons.ts | 4 +-- .../duoyun-ui/src/elements/image-preview.ts | 4 +-- .../duoyun-ui/src/elements/input-capture.ts | 4 +-- packages/duoyun-ui/src/elements/input.ts | 6 ++-- .../duoyun-ui/src/elements/keyboard-access.ts | 4 +-- packages/duoyun-ui/src/elements/legend.ts | 4 +-- packages/duoyun-ui/src/elements/line-chart.ts | 4 +-- packages/duoyun-ui/src/elements/link.ts | 4 +-- packages/duoyun-ui/src/elements/list.ts | 6 ++-- packages/duoyun-ui/src/elements/loading.ts | 4 +-- packages/duoyun-ui/src/elements/map.ts | 4 +-- packages/duoyun-ui/src/elements/meter.ts | 4 +-- packages/duoyun-ui/src/elements/modal.ts | 6 ++-- packages/duoyun-ui/src/elements/more.ts | 4 +-- packages/duoyun-ui/src/elements/options.ts | 4 +-- .../duoyun-ui/src/elements/page-loadbar.ts | 4 +-- packages/duoyun-ui/src/elements/pagination.ts | 4 +-- packages/duoyun-ui/src/elements/paragraph.ts | 4 +-- packages/duoyun-ui/src/elements/picker.ts | 6 ++-- .../duoyun-ui/src/elements/placeholder.ts | 4 +-- packages/duoyun-ui/src/elements/popover.ts | 4 +-- packages/duoyun-ui/src/elements/radio.ts | 6 ++-- packages/duoyun-ui/src/elements/rate.ts | 4 +-- packages/duoyun-ui/src/elements/result.ts | 4 +-- .../duoyun-ui/src/elements/scatter-chart.ts | 4 +-- packages/duoyun-ui/src/elements/segmented.ts | 4 +-- packages/duoyun-ui/src/elements/select.ts | 4 +-- .../duoyun-ui/src/elements/selection-box.ts | 4 +-- .../duoyun-ui/src/elements/shortcut-record.ts | 4 +-- .../duoyun-ui/src/elements/side-navigation.ts | 4 +-- packages/duoyun-ui/src/elements/slider.ts | 4 +-- packages/duoyun-ui/src/elements/sort-box.ts | 4 +-- packages/duoyun-ui/src/elements/space.ts | 4 +-- packages/duoyun-ui/src/elements/statistic.ts | 4 +-- .../duoyun-ui/src/elements/status-light.ts | 4 +-- packages/duoyun-ui/src/elements/switch.ts | 4 +-- packages/duoyun-ui/src/elements/table.ts | 4 +-- packages/duoyun-ui/src/elements/tabs.ts | 6 ++-- packages/duoyun-ui/src/elements/tag.ts | 4 +-- packages/duoyun-ui/src/elements/text-mask.ts | 4 +-- packages/duoyun-ui/src/elements/time-panel.ts | 4 +-- .../duoyun-ui/src/elements/time-picker.ts | 4 +-- packages/duoyun-ui/src/elements/timeline.ts | 4 +-- packages/duoyun-ui/src/elements/toast.ts | 4 +-- packages/duoyun-ui/src/elements/tree.ts | 6 ++-- packages/duoyun-ui/src/elements/wait.ts | 4 +-- packages/duoyun-ui/src/lib/styles.ts | 6 ++-- packages/duoyun-ui/src/patterns/console.ts | 4 +-- .../duoyun-ui/src/patterns/filter-form.ts | 4 +-- packages/duoyun-ui/src/patterns/footer.ts | 6 ++-- packages/duoyun-ui/src/patterns/form.ts | 4 +-- packages/duoyun-ui/src/patterns/nav.ts | 6 ++-- packages/duoyun-ui/src/patterns/table.ts | 4 +-- packages/gem-book/docs/hello.ts | 4 +-- packages/gem-book/src/element/elements/404.ts | 4 +-- .../src/element/elements/edit-link.ts | 4 +-- .../gem-book/src/element/elements/footer.ts | 4 +-- .../gem-book/src/element/elements/homepage.ts | 4 +-- .../gem-book/src/element/elements/loadbar.ts | 14 ++-------- .../gem-book/src/element/elements/main.ts | 4 +-- .../gem-book/src/element/elements/nav-logo.ts | 4 +-- packages/gem-book/src/element/elements/nav.ts | 4 +-- packages/gem-book/src/element/elements/pre.ts | 4 +-- .../gem-book/src/element/elements/rel-link.ts | 13 ++------- .../gem-book/src/element/elements/sidebar.ts | 4 +-- packages/gem-book/src/element/elements/toc.ts | 4 +-- packages/gem-book/src/element/index.ts | 4 +-- packages/gem-book/src/plugins/api.ts | 4 +-- packages/gem-book/src/plugins/code-group.ts | 4 +-- packages/gem-book/src/plugins/comment.ts | 4 +-- packages/gem-book/src/plugins/docsearch.ts | 17 ++---------- packages/gem-book/src/plugins/example.ts | 4 +-- packages/gem-book/src/plugins/media.ts | 4 +-- packages/gem-book/src/plugins/raw.ts | 4 +-- packages/gem-book/src/plugins/sandpack.ts | 4 +-- packages/gem-devtools/src/elements/header.ts | 4 +-- packages/gem-devtools/src/elements/section.ts | 4 +-- packages/gem-devtools/src/modules/panel.ts | 4 +-- packages/gem-examples/src/benchmark/fps.ts | 4 +-- packages/gem-examples/src/benchmark/index.ts | 4 +-- packages/gem-examples/src/life-cycle/index.ts | 4 +-- packages/gem-examples/src/scope/index.ts | 6 ++-- packages/gem-examples/src/styled/index.ts | 6 ++-- packages/gem-examples/src/theme/index.ts | 15 ++-------- .../001-guide/001-basic/006-styled-element.md | 12 ++++---- .../en/001-guide/002-advance/003-theme.md | 2 +- .../gem/docs/en/003-api/001-gem-element.md | 22 +++++++++------ packages/gem/docs/en/003-api/009-re-export.md | 20 ++------------ .../004-blog/001-create-standard-element.md | 2 +- packages/gem/docs/en/004-blog/007-v2-intro.md | 2 +- packages/gem/docs/en/README.md | 4 +-- packages/gem/docs/en/snippets/scoped-theme.md | 2 +- .../001-guide/001-basic/006-styled-element.md | 12 ++++---- .../zh/001-guide/002-advance/003-theme.md | 2 +- .../gem/docs/zh/003-api/001-gem-element.md | 21 +++++++++----- packages/gem/docs/zh/003-api/009-re-export.md | 20 ++------------ .../004-blog/001-create-standard-element.md | 2 +- packages/gem/docs/zh/004-blog/007-v2-intro.md | 2 +- packages/gem/docs/zh/README.md | 4 +-- packages/gem/docs/zh/snippets/scoped-theme.md | 2 +- packages/gem/src/elements/base/gesture.ts | 4 +-- packages/gem/src/elements/base/link.ts | 4 +-- packages/gem/src/elements/base/use.ts | 4 +-- packages/gem/src/helper/theme.ts | 8 +++--- packages/gem/src/lib/decorators.ts | 4 +-- packages/gem/src/lib/element.ts | 8 +++--- packages/gem/src/lib/utils.ts | 4 +-- .../gem/src/test/elements/reflect.test.ts | 8 ++++-- .../gem/src/test/gem-element/advance.test.ts | 4 +-- .../gem/src/test/gem-element/basic.test.ts | 4 +-- .../src/test/gem-element/decorators.test.ts | 4 +-- packages/gem/src/test/utils.test.ts | 8 +++--- packages/vscode-gem-plugin/README.md | 10 ++----- packages/vscode-gem-plugin/logo.png | Bin 0 -> 13919 bytes packages/vscode-gem-plugin/package.json | 26 ++++++++++++++---- .../vscode-gem-plugin/snippets/snippets.json | 4 +-- .../vscode-gem-plugin/src/providers/css.ts | 2 +- .../vscode-gem-plugin/src/providers/hover.ts | 2 +- .../syntaxes/es6.inline.css.json | 2 +- .../syntaxes/es6.inline.html.json | 2 +- 165 files changed, 401 insertions(+), 436 deletions(-) create mode 100644 crates/zed-plugin-gem/extension.toml create mode 100644 packages/vscode-gem-plugin/logo.png diff --git a/.vscode/launch.json b/.vscode/launch.json index 2ea52b7e..7c208e9e 100644 --- a/.vscode/launch.json +++ b/.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}" } diff --git a/crates/zed-plugin-gem/extension.toml b/crates/zed-plugin-gem/extension.toml new file mode 100644 index 00000000..c1853cbb --- /dev/null +++ b/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" diff --git a/packages/duoyun-ui/docs/en/01-guide/30-customize.md b/packages/duoyun-ui/docs/en/01-guide/30-customize.md index c419935d..f3d7f995 100644 --- a/packages/duoyun-ui/docs/en/01-guide/30-customize.md +++ b/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}; } diff --git a/packages/duoyun-ui/docs/zh/01-guide/30-customize.md b/packages/duoyun-ui/docs/zh/01-guide/30-customize.md index 972a5cb5..0f0b7288 100644 --- a/packages/duoyun-ui/docs/zh/01-guide/30-customize.md +++ b/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}; } diff --git a/packages/duoyun-ui/src/elements/action-text.ts b/packages/duoyun-ui/src/elements/action-text.ts index 90c917e6..6ddaaf8e 100644 --- a/packages/duoyun-ui/src/elements/action-text.ts +++ b/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; diff --git a/packages/duoyun-ui/src/elements/alert.ts b/packages/duoyun-ui/src/elements/alert.ts index 8e61771d..9ad032f8 100644 --- a/packages/duoyun-ui/src/elements/alert.ts +++ b/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; diff --git a/packages/duoyun-ui/src/elements/area-chart.ts b/packages/duoyun-ui/src/elements/area-chart.ts index a865f20f..750d990b 100644 --- a/packages/duoyun-ui/src/elements/area-chart.ts +++ b/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; } diff --git a/packages/duoyun-ui/src/elements/avatar.ts b/packages/duoyun-ui/src/elements/avatar.ts index 240e8fed..10c8b2b2 100644 --- a/packages/duoyun-ui/src/elements/avatar.ts +++ b/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; } diff --git a/packages/duoyun-ui/src/elements/badge.ts b/packages/duoyun-ui/src/elements/badge.ts index 855e5962..cc3662b5 100644 --- a/packages/duoyun-ui/src/elements/badge.ts +++ b/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; diff --git a/packages/duoyun-ui/src/elements/banner.ts b/packages/duoyun-ui/src/elements/banner.ts index 057d4624..b16fc387 100644 --- a/packages/duoyun-ui/src/elements/banner.ts +++ b/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; diff --git a/packages/duoyun-ui/src/elements/bar-chart.ts b/packages/duoyun-ui/src/elements/bar-chart.ts index 8b8aa079..f841968d 100644 --- a/packages/duoyun-ui/src/elements/bar-chart.ts +++ b/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; diff --git a/packages/duoyun-ui/src/elements/base/chart.ts b/packages/duoyun-ui/src/elements/base/chart.ts index 80fb1141..7b22655b 100644 --- a/packages/duoyun-ui/src/elements/base/chart.ts +++ b/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; diff --git a/packages/duoyun-ui/src/elements/base/loadable.ts b/packages/duoyun-ui/src/elements/base/loadable.ts index a6d406c1..afc630ff 100644 --- a/packages/duoyun-ui/src/elements/base/loadable.ts +++ b/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; diff --git a/packages/duoyun-ui/src/elements/base/scroll.ts b/packages/duoyun-ui/src/elements/base/scroll.ts index bd644820..5efbc3cd 100644 --- a/packages/duoyun-ui/src/elements/base/scroll.ts +++ b/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; diff --git a/packages/duoyun-ui/src/elements/breadcrumbs.ts b/packages/duoyun-ui/src/elements/breadcrumbs.ts index fa026bdf..42e4e56c 100644 --- a/packages/duoyun-ui/src/elements/breadcrumbs.ts +++ b/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; diff --git a/packages/duoyun-ui/src/elements/button.ts b/packages/duoyun-ui/src/elements/button.ts index 508e5ed6..e70ec2c6 100644 --- a/packages/duoyun-ui/src/elements/button.ts +++ b/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; diff --git a/packages/duoyun-ui/src/elements/calendar.ts b/packages/duoyun-ui/src/elements/calendar.ts index 7a163e5b..a16f34ad 100644 --- a/packages/duoyun-ui/src/elements/calendar.ts +++ b/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; diff --git a/packages/duoyun-ui/src/elements/card.ts b/packages/duoyun-ui/src/elements/card.ts index ece0205e..f2216686 100644 --- a/packages/duoyun-ui/src/elements/card.ts +++ b/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; diff --git a/packages/duoyun-ui/src/elements/carousel.ts b/packages/duoyun-ui/src/elements/carousel.ts index f9d59eb7..22c8d34e 100644 --- a/packages/duoyun-ui/src/elements/carousel.ts +++ b/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%; diff --git a/packages/duoyun-ui/src/elements/cascader-picker.ts b/packages/duoyun-ui/src/elements/cascader-picker.ts index 8d2c9b04..8580213e 100644 --- a/packages/duoyun-ui/src/elements/cascader-picker.ts +++ b/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; diff --git a/packages/duoyun-ui/src/elements/cascader.ts b/packages/duoyun-ui/src/elements/cascader.ts index 69661ba8..6e63f26b 100644 --- a/packages/duoyun-ui/src/elements/cascader.ts +++ b/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; diff --git a/packages/duoyun-ui/src/elements/chart-tooltip.ts b/packages/duoyun-ui/src/elements/chart-tooltip.ts index c95560c8..6e009a6a 100644 --- a/packages/duoyun-ui/src/elements/chart-tooltip.ts +++ b/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}; diff --git a/packages/duoyun-ui/src/elements/chart-zoom.ts b/packages/duoyun-ui/src/elements/chart-zoom.ts index b0b7badc..565da1b8 100644 --- a/packages/duoyun-ui/src/elements/chart-zoom.ts +++ b/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; diff --git a/packages/duoyun-ui/src/elements/checkbox.ts b/packages/duoyun-ui/src/elements/checkbox.ts index 8ee0f4f6..2d7582e8 100644 --- a/packages/duoyun-ui/src/elements/checkbox.ts +++ b/packages/duoyun-ui/src/elements/checkbox.ts @@ -12,7 +12,7 @@ import { mounted, memo, } from '@mantou/gem/lib/decorators'; -import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element'; +import { GemElement, html, css } from '@mantou/gem/lib/element'; import { addListener } from '@mantou/gem/lib/utils'; import { theme } from '../lib/theme'; @@ -25,7 +25,7 @@ import { groupStyle } from './radio'; import './use'; -const style = createCSSSheet` +const style = css` :host(:where(:not([hidden]))) { cursor: default; display: inline-flex; diff --git a/packages/duoyun-ui/src/elements/coach-mark.ts b/packages/duoyun-ui/src/elements/coach-mark.ts index 5ba90e87..8a0598ec 100644 --- a/packages/duoyun-ui/src/elements/coach-mark.ts +++ b/packages/duoyun-ui/src/elements/coach-mark.ts @@ -9,7 +9,7 @@ import { effect, mounted, } from '@mantou/gem/lib/decorators'; -import { html, createCSSSheet } from '@mantou/gem/lib/element'; +import { html, css } from '@mantou/gem/lib/element'; import { addListener } from '@mantou/gem/lib/utils'; import { createStore } from '@mantou/gem/lib/store'; import { splice } from '@mantou/gem/helper/i18n'; @@ -85,7 +85,7 @@ async function nextTour() { const elementTheme = createDecoratorTheme({ color: '' }); -const style = createCSSSheet` +const style = css` :host { position: absolute; left: 50%; diff --git a/packages/duoyun-ui/src/elements/code-block.ts b/packages/duoyun-ui/src/elements/code-block.ts index 421cb4fc..0c972e4b 100644 --- a/packages/duoyun-ui/src/elements/code-block.ts +++ b/packages/duoyun-ui/src/elements/code-block.ts @@ -1,6 +1,6 @@ // https://spectrum.adobe.com/page/code/ import { adoptedStyle, customElement, attribute, shadow, mounted, effect } from '@mantou/gem/lib/decorators'; -import { createCSSSheet, createRef, html } from '@mantou/gem/lib/element'; +import { css, createRef, html } from '@mantou/gem/lib/element'; import { styleMap } from '@mantou/gem/lib/utils'; import { theme } from '../lib/theme'; @@ -206,7 +206,7 @@ const langAliases: Record = { const lineHeight = 1.5; const padding = 1; -const style = createCSSSheet` +const style = css` :host(:where(:not([hidden]))) { position: relative; display: block; diff --git a/packages/duoyun-ui/src/elements/collapse.ts b/packages/duoyun-ui/src/elements/collapse.ts index ab9ab445..e26d3018 100644 --- a/packages/duoyun-ui/src/elements/collapse.ts +++ b/packages/duoyun-ui/src/elements/collapse.ts @@ -15,7 +15,7 @@ import { aria, } from '@mantou/gem/lib/decorators'; import type { TemplateResult } from '@mantou/gem/lib/element'; -import { createCSSSheet, GemElement, html, createState, createRef } from '@mantou/gem/lib/element'; +import { css, GemElement, html, createState, createRef } from '@mantou/gem/lib/element'; import { classMap, exportPartsMap } from '@mantou/gem/lib/utils'; import { icons } from '../lib/icons'; @@ -26,7 +26,7 @@ import { commonAnimationOptions } from '../lib/animations'; import './use'; -const panelStyle = createCSSSheet` +const panelStyle = css` :host(:where(:not([hidden]))) { display: block; border-block-start: 1px solid ${theme.borderColor}; @@ -139,7 +139,7 @@ export class DuoyunCollapsePanelElement extends GemElement { }; } -const style = createCSSSheet` +const style = css` :host(:where(:not([hidden]))) { display: block; overflow: hidden; diff --git a/packages/duoyun-ui/src/elements/color-panel.ts b/packages/duoyun-ui/src/elements/color-panel.ts index 71d86176..63351540 100644 --- a/packages/duoyun-ui/src/elements/color-panel.ts +++ b/packages/duoyun-ui/src/elements/color-panel.ts @@ -10,7 +10,7 @@ import { shadow, memo, } 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 } from '@mantou/gem/lib/utils'; import { createDecoratorTheme } from '@mantou/gem/helper/theme'; @@ -39,7 +39,7 @@ import './select'; const elementTheme = createDecoratorTheme({ h: 0, s: 0, l: 0, a: 0 }); -const style = createCSSSheet` +const style = css` :host(:where(:not([hidden]))) { display: flex; flex-direction: column; diff --git a/packages/duoyun-ui/src/elements/color-picker.ts b/packages/duoyun-ui/src/elements/color-picker.ts index 8803e53c..0e533fe3 100644 --- a/packages/duoyun-ui/src/elements/color-picker.ts +++ b/packages/duoyun-ui/src/elements/color-picker.ts @@ -8,7 +8,7 @@ import { boolattribute, shadow, } 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 { styleMap } from '@mantou/gem/lib/utils'; import type { HexColor } from '../lib/color'; @@ -21,7 +21,7 @@ import type { BasePickerElement } from './picker'; import './popover'; import './color-panel'; -const style = createCSSSheet` +const style = css` :host(:where(:not([hidden]))) { cursor: pointer; display: inline-flex; diff --git a/packages/duoyun-ui/src/elements/contextmenu.ts b/packages/duoyun-ui/src/elements/contextmenu.ts index 53fe7cad..718f5b78 100644 --- a/packages/duoyun-ui/src/elements/contextmenu.ts +++ b/packages/duoyun-ui/src/elements/contextmenu.ts @@ -1,6 +1,6 @@ import { connectStore, adoptedStyle, customElement, shadow, effect, mounted } from '@mantou/gem/lib/decorators'; import type { TemplateResult } from '@mantou/gem/lib/element'; -import { createCSSSheet, html, GemElement, createRef } from '@mantou/gem/lib/element'; +import { css, html, GemElement, createRef } from '@mantou/gem/lib/element'; import { styleMap, classMap } from '@mantou/gem/lib/utils'; import { createStore } from '@mantou/gem/lib/store'; @@ -80,7 +80,7 @@ function getMenuObject(menuOrMenuObject: MenuOrMenuObject) { let closeResolve: (value?: any) => void; -const style = createCSSSheet` +const style = css` :host(:where(:not([hidden]))) { display: block; position: fixed; diff --git a/packages/duoyun-ui/src/elements/copy.ts b/packages/duoyun-ui/src/elements/copy.ts index c5b478cc..dedf34b0 100644 --- a/packages/duoyun-ui/src/elements/copy.ts +++ b/packages/duoyun-ui/src/elements/copy.ts @@ -9,7 +9,7 @@ import { slot, 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 { classMap } from '@mantou/gem/lib/utils'; import { icons } from '../lib/icons'; @@ -21,7 +21,7 @@ import { focusStyle } from '../lib/styles'; import './use'; import '../elements/tooltip'; -const style = createCSSSheet` +const style = css` :host(:where(:not([hidden]))) { position: relative; display: flex; diff --git a/packages/duoyun-ui/src/elements/date-panel.ts b/packages/duoyun-ui/src/elements/date-panel.ts index 945e175b..4d2398e9 100644 --- a/packages/duoyun-ui/src/elements/date-panel.ts +++ b/packages/duoyun-ui/src/elements/date-panel.ts @@ -13,7 +13,7 @@ import { memo, effect, } 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 { classMap, exportPartsMap } from '@mantou/gem/lib/utils'; import { isNotNullish } from '../lib/types'; @@ -30,7 +30,7 @@ import './divider'; import './action-text'; import './time-panel'; -const style = createCSSSheet` +const style = css` :host(:where(:not([hidden]))) { font-size: 0.875em; display: flex; diff --git a/packages/duoyun-ui/src/elements/date-picker.ts b/packages/duoyun-ui/src/elements/date-picker.ts index 51c836a4..f37e02e4 100644 --- a/packages/duoyun-ui/src/elements/date-picker.ts +++ b/packages/duoyun-ui/src/elements/date-picker.ts @@ -13,7 +13,7 @@ import { shadow, mounted, } from '@mantou/gem/lib/decorators'; -import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element'; +import { GemElement, html, css } from '@mantou/gem/lib/element'; import { classMap, addListener } from '@mantou/gem/lib/utils'; import { Time } from '../lib/time'; @@ -34,7 +34,7 @@ import './use'; import './date-panel'; import './button'; -const style = createCSSSheet` +const style = css` :host { width: 15em; } diff --git a/packages/duoyun-ui/src/elements/date-range-panel.ts b/packages/duoyun-ui/src/elements/date-range-panel.ts index ba97d9aa..8fee4aba 100644 --- a/packages/duoyun-ui/src/elements/date-range-panel.ts +++ b/packages/duoyun-ui/src/elements/date-range-panel.ts @@ -9,7 +9,7 @@ import { shadow, memo, } from '@mantou/gem/lib/decorators'; -import { GemElement, html, createCSSSheet, createState } from '@mantou/gem/lib/element'; +import { GemElement, html, css, createState } from '@mantou/gem/lib/element'; import { Time, parseNarrowRelativeTime, parseNarrowTimeRange } from '../lib/time'; import { theme } from '../lib/theme'; @@ -22,7 +22,7 @@ import './divider'; export type DateRangeValue = string | number[]; -const style = createCSSSheet` +const style = css` :host(:where(:not([hidden]))) { display: flex; align-items: flex-start; diff --git a/packages/duoyun-ui/src/elements/date-range-picker.ts b/packages/duoyun-ui/src/elements/date-range-picker.ts index a23bb054..c3d0f5df 100644 --- a/packages/duoyun-ui/src/elements/date-range-picker.ts +++ b/packages/duoyun-ui/src/elements/date-range-picker.ts @@ -12,7 +12,7 @@ import { shadow, mounted, } from '@mantou/gem/lib/decorators'; -import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element'; +import { GemElement, html, css } from '@mantou/gem/lib/element'; import { classMap } from '@mantou/gem/lib/utils'; import { Time } from '../lib/time'; @@ -33,7 +33,7 @@ import './use'; import './date-range-panel'; import './button'; -const style = createCSSSheet` +const style = css` :host { width: 18em; } diff --git a/packages/duoyun-ui/src/elements/divider.ts b/packages/duoyun-ui/src/elements/divider.ts index e2412e4d..3447b318 100644 --- a/packages/duoyun-ui/src/elements/divider.ts +++ b/packages/duoyun-ui/src/elements/divider.ts @@ -8,14 +8,14 @@ import { template, slot, } from '@mantou/gem/lib/decorators'; -import { html, GemElement, createCSSSheet } from '@mantou/gem/lib/element'; +import { html, GemElement, css } from '@mantou/gem/lib/element'; import { createDecoratorTheme } from '@mantou/gem/helper/theme'; import { theme, getSemanticColor } from '../lib/theme'; const elementTheme = createDecoratorTheme({ color: '' }); -const style = createCSSSheet` +const style = css` :host(:where(:not([hidden]))) { align-self: stretch; display: flex; diff --git a/packages/duoyun-ui/src/elements/donut-chart.ts b/packages/duoyun-ui/src/elements/donut-chart.ts index 42d250c1..ad69374e 100644 --- a/packages/duoyun-ui/src/elements/donut-chart.ts +++ b/packages/duoyun-ui/src/elements/donut-chart.ts @@ -1,6 +1,6 @@ // https://spectrum.adobe.com/page/donut-chart/ import { adoptedStyle, customElement, attribute, property, memo, unmounted } from '@mantou/gem/lib/decorators'; -import { html, svg, createCSSSheet } from '@mantou/gem/lib/element'; +import { html, svg, css } from '@mantou/gem/lib/element'; import { theme } from '../lib/theme'; @@ -8,7 +8,7 @@ import { DuoyunChartBaseElement } from './base/chart'; import type { Data } from './chart-tooltip'; import { ChartTooltip } from './chart-tooltip'; -const style = createCSSSheet` +const style = css` .path { stroke: ${theme.backgroundColor}; } diff --git a/packages/duoyun-ui/src/elements/drawer.ts b/packages/duoyun-ui/src/elements/drawer.ts index 5a9465ba..c734eb65 100644 --- a/packages/duoyun-ui/src/elements/drawer.ts +++ b/packages/duoyun-ui/src/elements/drawer.ts @@ -1,12 +1,12 @@ import { adoptedStyle, customElement } from '@mantou/gem/lib/decorators'; -import { createCSSSheet } from '@mantou/gem/lib/element'; +import { css } from '@mantou/gem/lib/element'; import { slideInLeft, slideOutRight } from '../lib/animations'; import type { ModalOptions } from './modal'; import { DuoyunModalElement } from './modal'; -const style = createCSSSheet` +const style = css` .dialog { top: 0; left: auto; diff --git a/packages/duoyun-ui/src/elements/drop-area.ts b/packages/duoyun-ui/src/elements/drop-area.ts index ce980435..7abec0f7 100644 --- a/packages/duoyun-ui/src/elements/drop-area.ts +++ b/packages/duoyun-ui/src/elements/drop-area.ts @@ -11,12 +11,12 @@ import { shadow, mounted, } from '@mantou/gem/lib/decorators'; -import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element'; +import { GemElement, html, css } from '@mantou/gem/lib/element'; import { addListener } from '@mantou/gem/lib/utils'; import { theme } from '../lib/theme'; -const style = createCSSSheet` +const style = css` :host(:where(:not([hidden]))) { display: block; position: relative; diff --git a/packages/duoyun-ui/src/elements/empty.ts b/packages/duoyun-ui/src/elements/empty.ts index db500ab2..2cbca178 100644 --- a/packages/duoyun-ui/src/elements/empty.ts +++ b/packages/duoyun-ui/src/elements/empty.ts @@ -7,14 +7,14 @@ import { attribute, slot, } from '@mantou/gem/lib/decorators'; -import { GemElement, html, createCSSSheet, render } from '@mantou/gem/lib/element'; +import { GemElement, html, css, render } from '@mantou/gem/lib/element'; import { locale } from '../lib/locale'; import { theme } from '../lib/theme'; import './use'; -const style = createCSSSheet` +const style = css` :host(:where(:not([hidden]))) { display: inline-flex; flex-direction: column; diff --git a/packages/duoyun-ui/src/elements/file-picker.ts b/packages/duoyun-ui/src/elements/file-picker.ts index f7d8d55e..b58161a5 100644 --- a/packages/duoyun-ui/src/elements/file-picker.ts +++ b/packages/duoyun-ui/src/elements/file-picker.ts @@ -10,7 +10,7 @@ import { slot, shadow, } from '@mantou/gem/lib/decorators'; -import { createCSSSheet, createRef, GemElement, html, repeat } from '@mantou/gem/lib/element'; +import { css, createRef, GemElement, html, repeat } from '@mantou/gem/lib/element'; import { styleMap } from '@mantou/gem/lib/utils'; import { icons } from '../lib/icons'; @@ -25,7 +25,7 @@ import type { BasePickerElement } from './picker'; import './use'; import './image-preview'; -const style = createCSSSheet` +const style = css` :host(:where(:not([hidden]))) { font-size: 0.875em; display: flex; diff --git a/packages/duoyun-ui/src/elements/flow.ts b/packages/duoyun-ui/src/elements/flow.ts index 9ee4c109..c9e24ec2 100644 --- a/packages/duoyun-ui/src/elements/flow.ts +++ b/packages/duoyun-ui/src/elements/flow.ts @@ -2,7 +2,7 @@ import { adoptedStyle, customElement, property, part, state, shadow, memo, effect } from '@mantou/gem/lib/decorators'; import type { TemplateResult } from '@mantou/gem/lib/element'; -import { createCSSSheet, createRef, createState, html, svg } from '@mantou/gem/lib/element'; +import { css, createRef, createState, html, svg } from '@mantou/gem/lib/element'; import { styleMap, exportPartsMap } from '@mantou/gem/lib/utils'; import { createDecoratorTheme } from '@mantou/gem/helper/theme'; import type { ElkNode, ElkExtendedEdge, ElkEdgeSection, LayoutOptions, ElkShape, ElkPoint } from 'elkjs'; @@ -192,7 +192,7 @@ export type Node = Modify< const elementTheme = createDecoratorTheme({ opacity: 0, width: '', height: '' }); -const canvasStyle = createCSSSheet` +const canvasStyle = css` :host(:where(:not([hidden]))) { display: block; position: relative; @@ -503,7 +503,7 @@ type State = { marginBlock?: number; }; -const style = createCSSSheet` +const style = css` :host(:where(:not([hidden]))) { display: flex; align-items: center; diff --git a/packages/duoyun-ui/src/elements/form.ts b/packages/duoyun-ui/src/elements/form.ts index e7e286ac..b5eb9d46 100644 --- a/packages/duoyun-ui/src/elements/form.ts +++ b/packages/duoyun-ui/src/elements/form.ts @@ -16,7 +16,7 @@ import { effect, } from '@mantou/gem/lib/decorators'; import type { TemplateResult } from '@mantou/gem/lib/element'; -import { GemElement, html, createCSSSheet, createState, createRef } from '@mantou/gem/lib/element'; +import { GemElement, html, css, createState, createRef } from '@mantou/gem/lib/element'; import { addListener } from '@mantou/gem/lib/utils'; import { mediaQuery } from '@mantou/gem/helper/mediaquery'; @@ -38,7 +38,7 @@ import './help-text'; import './date-picker'; import './date-range-picker'; -const formStyle = createCSSSheet` +const formStyle = css` :where(:scope:not([inline], [hidden])) { display: block; } @@ -158,7 +158,7 @@ export class DuoyunFormElement> extends GemElement { @aria({ role: 'group' }) export class DuoyunFormItemInlineGroupElement extends GemElement {} -const formItemStyle = createCSSSheet` +const formItemStyle = css` :host(:where(:not([hidden]))) { display: flex; flex-direction: column; diff --git a/packages/duoyun-ui/src/elements/heading.ts b/packages/duoyun-ui/src/elements/heading.ts index 166d83c6..015cdb72 100644 --- a/packages/duoyun-ui/src/elements/heading.ts +++ b/packages/duoyun-ui/src/elements/heading.ts @@ -1,10 +1,10 @@ import { connectStore, adoptedStyle, customElement, attribute, slot, 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 { history } from '@mantou/gem/lib/history'; import { theme } from '../lib/theme'; -const style = createCSSSheet` +const style = css` :host(:where(:not([hidden]))) { display: block; font-size: 2.5em; diff --git a/packages/duoyun-ui/src/elements/help-text.ts b/packages/duoyun-ui/src/elements/help-text.ts index d2b52c43..35e0475f 100644 --- a/packages/duoyun-ui/src/elements/help-text.ts +++ b/packages/duoyun-ui/src/elements/help-text.ts @@ -1,12 +1,12 @@ import { adoptedStyle, customElement, attribute, slot, shadow } from '@mantou/gem/lib/decorators'; -import { GemElement, createCSSSheet } from '@mantou/gem/lib/element'; +import { GemElement, css } from '@mantou/gem/lib/element'; import { createDecoratorTheme } from '@mantou/gem/helper/theme'; import { getStatusColor } from './status-light'; const elementTheme = createDecoratorTheme({ color: '' }); -const style = createCSSSheet` +const style = css` :host { margin-block: 0.2em; font-size: 0.875em; diff --git a/packages/duoyun-ui/src/elements/icons.ts b/packages/duoyun-ui/src/elements/icons.ts index 7665f92f..79804674 100644 --- a/packages/duoyun-ui/src/elements/icons.ts +++ b/packages/duoyun-ui/src/elements/icons.ts @@ -1,5 +1,5 @@ import { adoptedStyle, customElement, 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 { icons } from '../lib/icons'; import { theme } from '../lib/theme'; @@ -9,7 +9,7 @@ import { Toast } from './toast'; import './use'; -const style = createCSSSheet` +const style = css` :host(:where(:not([hidden]))) { display: grid; grid-template-columns: repeat(auto-fill, minmax(6em, 1fr)); diff --git a/packages/duoyun-ui/src/elements/image-preview.ts b/packages/duoyun-ui/src/elements/image-preview.ts index 8a4b101f..8c6ec5d5 100644 --- a/packages/duoyun-ui/src/elements/image-preview.ts +++ b/packages/duoyun-ui/src/elements/image-preview.ts @@ -7,7 +7,7 @@ import { shadow, effect, } 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 { createDecoratorTheme } from '@mantou/gem/helper/theme'; import { theme, getSemanticColor } from '../lib/theme'; @@ -20,7 +20,7 @@ import './use'; const elementTheme = createDecoratorTheme({ color: '', progress: '' }); -const style = createCSSSheet` +const style = css` :host { position: relative; aspect-ratio: 1; diff --git a/packages/duoyun-ui/src/elements/input-capture.ts b/packages/duoyun-ui/src/elements/input-capture.ts index bde80c0a..5655910d 100644 --- a/packages/duoyun-ui/src/elements/input-capture.ts +++ b/packages/duoyun-ui/src/elements/input-capture.ts @@ -1,5 +1,5 @@ import { adoptedStyle, customElement, mounted, part, 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 { addListener } from '@mantou/gem/lib/utils'; import { createDecoratorTheme } from '@mantou/gem/helper/theme'; @@ -12,7 +12,7 @@ import './paragraph'; const elementTheme = createDecoratorTheme({ left: '', top: '' }); -const style = createCSSSheet` +const style = css` .container, .circle { position: fixed; diff --git a/packages/duoyun-ui/src/elements/input.ts b/packages/duoyun-ui/src/elements/input.ts index f9a682c2..abad94ec 100644 --- a/packages/duoyun-ui/src/elements/input.ts +++ b/packages/duoyun-ui/src/elements/input.ts @@ -16,7 +16,7 @@ import { effect, } from '@mantou/gem/lib/decorators'; import type { TemplateResult } from '@mantou/gem/lib/element'; -import { GemElement, html, createCSSSheet, createRef } from '@mantou/gem/lib/element'; +import { GemElement, html, css, createRef } from '@mantou/gem/lib/element'; import { theme } from '../lib/theme'; import { icons } from '../lib/icons'; @@ -65,7 +65,7 @@ class InputHistory { }, 300); } -const style = createCSSSheet` +const style = css` :host(:where(:not([hidden]))) { font-size: 0.875em; inline-size: 15em; @@ -404,7 +404,7 @@ export class DuoyunInputElement extends GemElement { } } -const inputGroupStyle = createCSSSheet` +const inputGroupStyle = css` :scope { display: flex; diff --git a/packages/duoyun-ui/src/elements/keyboard-access.ts b/packages/duoyun-ui/src/elements/keyboard-access.ts index ddc6192e..2f81472c 100644 --- a/packages/duoyun-ui/src/elements/keyboard-access.ts +++ b/packages/duoyun-ui/src/elements/keyboard-access.ts @@ -1,4 +1,4 @@ -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, @@ -59,7 +59,7 @@ const getFocusableElements = () => { }); }; -const style = createCSSSheet` +const style = css` :host { font-size: 0.75em; } diff --git a/packages/duoyun-ui/src/elements/legend.ts b/packages/duoyun-ui/src/elements/legend.ts index d8e79cac..cfb6c3a2 100644 --- a/packages/duoyun-ui/src/elements/legend.ts +++ b/packages/duoyun-ui/src/elements/legend.ts @@ -1,6 +1,6 @@ import type { Emitter } from '@mantou/gem/lib/decorators'; import { adoptedStyle, aria, customElement, emitter, mounted, property } from '@mantou/gem/lib/decorators'; -import { createCSSSheet, html } from '@mantou/gem/lib/element'; +import { css, html } from '@mantou/gem/lib/element'; import { styleMap, classMap, addListener } from '@mantou/gem/lib/utils'; import { theme } from '../lib/theme'; @@ -10,7 +10,7 @@ import { DuoyunScrollBaseElement } from './base/scroll'; import './tooltip'; -const style = createCSSSheet` +const style = css` :host(:where(:not([hidden]))) { --color: initial; display: flex; diff --git a/packages/duoyun-ui/src/elements/line-chart.ts b/packages/duoyun-ui/src/elements/line-chart.ts index 20e1e4f3..9f5b25f9 100644 --- a/packages/duoyun-ui/src/elements/line-chart.ts +++ b/packages/duoyun-ui/src/elements/line-chart.ts @@ -1,5 +1,5 @@ import { adoptedStyle, customElement } from '@mantou/gem/lib/decorators'; -import { html, svg, createCSSSheet } from '@mantou/gem/lib/element'; +import { html, svg, css } from '@mantou/gem/lib/element'; import { createDecoratorTheme } from '@mantou/gem/helper/theme'; import { isNullish } from '../lib/types'; @@ -9,7 +9,7 @@ import { DuoyunBarChartElement } from './bar-chart'; const elementTheme = createDecoratorTheme({ strokeWidth: 0, strokeDasharray: '' }); -const style = createCSSSheet` +const style = css` .line { pointer-events: none; } diff --git a/packages/duoyun-ui/src/elements/link.ts b/packages/duoyun-ui/src/elements/link.ts index dc39941f..4e6131cf 100644 --- a/packages/duoyun-ui/src/elements/link.ts +++ b/packages/duoyun-ui/src/elements/link.ts @@ -1,5 +1,5 @@ import { adoptedStyle, customElement, mounted } 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 { GemLinkElement, GemActiveLinkElement } from '@mantou/gem/elements/base/link'; @@ -9,7 +9,7 @@ import { theme } from '../lib/theme'; export * from '@mantou/gem/elements/base/link'; -const style = createCSSSheet` +const style = css` :host { color: inherit; text-decoration: inherit; diff --git a/packages/duoyun-ui/src/elements/list.ts b/packages/duoyun-ui/src/elements/list.ts index 571eea7a..9bde89ec 100644 --- a/packages/duoyun-ui/src/elements/list.ts +++ b/packages/duoyun-ui/src/elements/list.ts @@ -17,7 +17,7 @@ import { mounted, } from '@mantou/gem/lib/decorators'; import type { TemplateResult } from '@mantou/gem/lib/element'; -import { createCSSSheet, createRef, createState, GemElement, html } from '@mantou/gem/lib/element'; +import { css, createRef, createState, GemElement, html } from '@mantou/gem/lib/element'; import type { LinkedListItem } from '@mantou/gem/lib/utils'; import { addListener, LinkedList, styled, styleMap } from '@mantou/gem/lib/utils'; import { logger } from '@mantou/gem/helper/logger'; @@ -59,7 +59,7 @@ export type PersistentState = State & { @shadow() export class DuoyunOutsideElement extends DuoyunVisibleBaseElement {} -const styles = createCSSSheet` +const styles = css` :host([infinite]), * { overflow-anchor: none; @@ -557,7 +557,7 @@ export class DuoyunListElement extends GemElement { scrollContainer = document.documentElement; } -const itemStyle = createCSSSheet({ +const itemStyle = css({ // 避免该样式干扰用户样式 item: styled` display: flex; diff --git a/packages/duoyun-ui/src/elements/loading.ts b/packages/duoyun-ui/src/elements/loading.ts index f67a80d1..8269c6f7 100644 --- a/packages/duoyun-ui/src/elements/loading.ts +++ b/packages/duoyun-ui/src/elements/loading.ts @@ -1,5 +1,5 @@ import { adoptedStyle, customElement, shadow, slot } from '@mantou/gem/lib/decorators'; -import { html, createCSSSheet } from '@mantou/gem/lib/element'; +import { html, css } from '@mantou/gem/lib/element'; import { icons } from '../lib/icons'; @@ -7,7 +7,7 @@ import { DuoyunVisibleBaseElement } from './base/visible'; import './use'; -const style = createCSSSheet` +const style = css` :host(:where(:not([hidden]))) { position: relative; display: inline-flex; diff --git a/packages/duoyun-ui/src/elements/map.ts b/packages/duoyun-ui/src/elements/map.ts index 349f2cf3..1a51af16 100644 --- a/packages/duoyun-ui/src/elements/map.ts +++ b/packages/duoyun-ui/src/elements/map.ts @@ -1,6 +1,6 @@ import type { Emitter } from '@mantou/gem/lib/decorators'; import { adoptedStyle, customElement, emitter, property, state, part, aria, memo } from '@mantou/gem/lib/decorators'; -import { createCSSSheet, createState, html, svg } from '@mantou/gem/lib/element'; +import { css, createState, html, svg } from '@mantou/gem/lib/element'; import { styleMap, classMap } from '@mantou/gem/lib/utils'; import type { GeoRawProjection } from 'd3-geo'; import { geoProjection, geoMercatorRaw, geoEquirectangularRaw, geoPath } from 'd3-geo'; @@ -84,7 +84,7 @@ export const shapes = [ }, ]; -const style = createCSSSheet` +const style = css` :host(:where(:not([hidden]))) { display: block; border-radius: ${theme.normalRound}; diff --git a/packages/duoyun-ui/src/elements/meter.ts b/packages/duoyun-ui/src/elements/meter.ts index 2aab2529..3d8e325c 100644 --- a/packages/duoyun-ui/src/elements/meter.ts +++ b/packages/duoyun-ui/src/elements/meter.ts @@ -10,13 +10,13 @@ import { effect, slot, } from '@mantou/gem/lib/decorators'; -import { createCSSSheet, GemElement, html } from '@mantou/gem/lib/element'; +import { css, GemElement, html } from '@mantou/gem/lib/element'; import { styleMap } from '@mantou/gem/lib/utils'; import { theme, getSemanticColor } from '../lib/theme'; import type { StringList } from '../lib/types'; -const style = createCSSSheet` +const style = css` :host(:where(:not([hidden]))) { font-size: 0.875em; width: 15em; diff --git a/packages/duoyun-ui/src/elements/modal.ts b/packages/duoyun-ui/src/elements/modal.ts index 0f415db2..8da9bdb0 100644 --- a/packages/duoyun-ui/src/elements/modal.ts +++ b/packages/duoyun-ui/src/elements/modal.ts @@ -15,7 +15,7 @@ import { effect, memo, } from '@mantou/gem/lib/decorators'; -import { createCSSSheet, createRef, GemElement, html, TemplateResult } from '@mantou/gem/lib/element'; +import { css, createRef, GemElement, html, TemplateResult } from '@mantou/gem/lib/element'; import { addListener, styled } from '@mantou/gem/lib/utils'; import { mediaQuery } from '@mantou/gem/helper/mediaquery'; @@ -30,7 +30,7 @@ import './button'; import './divider'; import './scroll-box'; -const style = createCSSSheet` +const style = css` /* modal 可能会在刷新前后保持打开 */ :host { view-transition-name: dy-modal; @@ -108,7 +108,7 @@ const style = createCSSSheet` } `; -const style2 = createCSSSheet({ +const style2 = css({ p: styled` margin: 0; `, diff --git a/packages/duoyun-ui/src/elements/more.ts b/packages/duoyun-ui/src/elements/more.ts index 1c2b8a68..252546d1 100644 --- a/packages/duoyun-ui/src/elements/more.ts +++ b/packages/duoyun-ui/src/elements/more.ts @@ -10,7 +10,7 @@ import { shadow, effect, } 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 { classMap, styleMap } from '@mantou/gem/lib/utils'; import { locale } from '../lib/locale'; @@ -20,7 +20,7 @@ import { DuoyunScrollBaseElement } from './base/scroll'; import './action-text'; -const style = createCSSSheet` +const style = css` :host(:where(:not([hidden]))) { display: flex; flex-direction: column; diff --git a/packages/duoyun-ui/src/elements/options.ts b/packages/duoyun-ui/src/elements/options.ts index 3f952505..b503c827 100644 --- a/packages/duoyun-ui/src/elements/options.ts +++ b/packages/duoyun-ui/src/elements/options.ts @@ -1,6 +1,6 @@ import { adoptedStyle, customElement, property, boolattribute, slot, aria, shadow } from '@mantou/gem/lib/decorators'; import type { TemplateResult } from '@mantou/gem/lib/element'; -import { GemElement, html, createCSSSheet, createState } from '@mantou/gem/lib/element'; +import { GemElement, html, css, createState } from '@mantou/gem/lib/element'; import { classMap } from '@mantou/gem/lib/utils'; import { theme } from '../lib/theme'; @@ -13,7 +13,7 @@ import { focusStyle } from '../lib/styles'; import './use'; import './input'; -const style = createCSSSheet` +const style = css` :host(:where(:not([hidden]))) { cursor: default; font-size: 0.875em; diff --git a/packages/duoyun-ui/src/elements/page-loadbar.ts b/packages/duoyun-ui/src/elements/page-loadbar.ts index 417a07d2..6da78727 100644 --- a/packages/duoyun-ui/src/elements/page-loadbar.ts +++ b/packages/duoyun-ui/src/elements/page-loadbar.ts @@ -1,5 +1,5 @@ import { adoptedStyle, aria, customElement, mounted, shadow } from '@mantou/gem/lib/decorators'; -import { GemElement, html, createCSSSheet, createState } from '@mantou/gem/lib/element'; +import { GemElement, html, css, createState } from '@mantou/gem/lib/element'; import { createDecoratorTheme } from '@mantou/gem/helper/theme'; import { theme } from '../lib/theme'; @@ -7,7 +7,7 @@ import { sleep } from '../lib/timer'; const elementTheme = createDecoratorTheme({ progress: '' }); -const style = createCSSSheet` +const style = css` :host(:where(:not([hidden]))) { view-transition-name: dy-page-loadbar; z-index: ${theme.popupZIndex}; diff --git a/packages/duoyun-ui/src/elements/pagination.ts b/packages/duoyun-ui/src/elements/pagination.ts index 25287e32..49e1f170 100644 --- a/packages/duoyun-ui/src/elements/pagination.ts +++ b/packages/duoyun-ui/src/elements/pagination.ts @@ -10,7 +10,7 @@ import { shadow, aria, } from '@mantou/gem/lib/decorators'; -import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element'; +import { GemElement, html, css } from '@mantou/gem/lib/element'; import { classMap } from '@mantou/gem/lib/utils'; import { splice } from '@mantou/gem/helper/i18n'; import { createDecoratorTheme } from '@mantou/gem/helper/theme'; @@ -31,7 +31,7 @@ import './picker'; const elementTheme = createDecoratorTheme({ align: '' }); -const style = createCSSSheet` +const style = css` :host(:where(:not([hidden]))) { display: flex; align-items: center; diff --git a/packages/duoyun-ui/src/elements/paragraph.ts b/packages/duoyun-ui/src/elements/paragraph.ts index 702d5fc0..d3d2e5e5 100644 --- a/packages/duoyun-ui/src/elements/paragraph.ts +++ b/packages/duoyun-ui/src/elements/paragraph.ts @@ -1,9 +1,9 @@ import { adoptedStyle, aria, customElement } from '@mantou/gem/lib/decorators'; -import { GemElement, createCSSSheet } from '@mantou/gem/lib/element'; +import { GemElement, css } from '@mantou/gem/lib/element'; import { theme } from '../lib/theme'; -const style = createCSSSheet` +const style = css` :where(:scope:not([hidden])) { display: block; margin-block-end: 0.75em; diff --git a/packages/duoyun-ui/src/elements/picker.ts b/packages/duoyun-ui/src/elements/picker.ts index 95c6e987..8e192143 100644 --- a/packages/duoyun-ui/src/elements/picker.ts +++ b/packages/duoyun-ui/src/elements/picker.ts @@ -14,7 +14,7 @@ import { effect, } from '@mantou/gem/lib/decorators'; import type { TemplateResult } from '@mantou/gem/lib/element'; -import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element'; +import { GemElement, html, css } from '@mantou/gem/lib/element'; import { addListener } from '@mantou/gem/lib/utils'; import { theme } from '../lib/theme'; @@ -28,7 +28,7 @@ import { ContextMenu } from './contextmenu'; import './use'; import './scroll-box'; -export const pickerStyle = createCSSSheet` +export const pickerStyle = css` :host(:where(:not([hidden]))) { cursor: pointer; display: inline-flex; @@ -78,7 +78,7 @@ export abstract class BasePickerElement { showPicker: () => void; } -const style = createCSSSheet` +const style = css` :host { width: 12em; white-space: nowrap; diff --git a/packages/duoyun-ui/src/elements/placeholder.ts b/packages/duoyun-ui/src/elements/placeholder.ts index fffa7b01..ef373b7a 100644 --- a/packages/duoyun-ui/src/elements/placeholder.ts +++ b/packages/duoyun-ui/src/elements/placeholder.ts @@ -8,7 +8,7 @@ import { aria, shadow, } from '@mantou/gem/lib/decorators'; -import { createCSSSheet, html } from '@mantou/gem/lib/element'; +import { css, html } from '@mantou/gem/lib/element'; import { styleMap } from '@mantou/gem/lib/utils'; import { createDecoratorTheme } from '@mantou/gem/helper/theme'; @@ -18,7 +18,7 @@ import { DuoyunVisibleBaseElement } from './base/visible'; const elementTheme = createDecoratorTheme({ color: '' }); -const style = createCSSSheet` +const style = css` :host(:where(:not([hidden]))) { display: block; flex-grow: 1; diff --git a/packages/duoyun-ui/src/elements/popover.ts b/packages/duoyun-ui/src/elements/popover.ts index 21d932ed..01eae3f3 100644 --- a/packages/duoyun-ui/src/elements/popover.ts +++ b/packages/duoyun-ui/src/elements/popover.ts @@ -12,7 +12,7 @@ import { mounted, } from '@mantou/gem/lib/decorators'; import type { TemplateResult } from '@mantou/gem/lib/element'; -import { createCSSSheet, createRef, createState, GemElement, html } from '@mantou/gem/lib/element'; +import { css, createRef, createState, GemElement, html } from '@mantou/gem/lib/element'; import type { StyleObject } from '@mantou/gem/lib/utils'; import { addListener, styleMap } from '@mantou/gem/lib/utils'; @@ -338,7 +338,7 @@ export class DuoyunPopoverElement extends GemElement { export const Popover = DuoyunPopoverElement; -const ghostStyle = createCSSSheet` +const ghostStyle = css` :host { position: fixed; z-index: ${theme.popupZIndex}; diff --git a/packages/duoyun-ui/src/elements/radio.ts b/packages/duoyun-ui/src/elements/radio.ts index dc8e15e7..87a6f9e1 100644 --- a/packages/duoyun-ui/src/elements/radio.ts +++ b/packages/duoyun-ui/src/elements/radio.ts @@ -12,14 +12,14 @@ import { mounted, } from '@mantou/gem/lib/decorators'; import type { TemplateResult } from '@mantou/gem/lib/element'; -import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element'; +import { GemElement, html, css } from '@mantou/gem/lib/element'; import { addListener } from '@mantou/gem/lib/utils'; 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; display: inline-flex; @@ -91,7 +91,7 @@ export class DuoyunRadioElement extends GemElement { }; } -export const groupStyle = createCSSSheet` +export const groupStyle = css` :scope:where(:not([hidden])) { display: flex; align-items: center; diff --git a/packages/duoyun-ui/src/elements/rate.ts b/packages/duoyun-ui/src/elements/rate.ts index 96f3effa..56aac9b0 100644 --- a/packages/duoyun-ui/src/elements/rate.ts +++ b/packages/duoyun-ui/src/elements/rate.ts @@ -11,7 +11,7 @@ import { aria, 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 { classMap } from '@mantou/gem/lib/utils'; import { createDecoratorTheme } from '@mantou/gem/helper/theme'; @@ -27,7 +27,7 @@ const starUrl = createDataURLFromSVG(icons.star); const elementTheme = createDecoratorTheme({ color: '' }); -const style = createCSSSheet` +const style = css` :host(:where(:not([hidden]))) { display: inline-flex; flex-direction: row-reverse; diff --git a/packages/duoyun-ui/src/elements/result.ts b/packages/duoyun-ui/src/elements/result.ts index 1230afcf..3c9473ce 100644 --- a/packages/duoyun-ui/src/elements/result.ts +++ b/packages/duoyun-ui/src/elements/result.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, property, attribute, slot, shadow } from '@mantou/gem/lib/decorators'; import { theme } from '../lib/theme'; @@ -12,7 +12,7 @@ import './heading'; import './paragraph'; import './space'; -const style = createCSSSheet` +const style = css` :host(:where(:not([hidden]))) { display: flex; flex-direction: column; diff --git a/packages/duoyun-ui/src/elements/scatter-chart.ts b/packages/duoyun-ui/src/elements/scatter-chart.ts index 2b293e1f..8dcdb8d9 100644 --- a/packages/duoyun-ui/src/elements/scatter-chart.ts +++ b/packages/duoyun-ui/src/elements/scatter-chart.ts @@ -1,6 +1,6 @@ // https://spectrum.adobe.com/page/scatter-plot/ import { adoptedStyle, customElement, memo, property, unmounted } from '@mantou/gem/lib/decorators'; -import { createCSSSheet, html, svg } from '@mantou/gem/lib/element'; +import { css, html, svg } from '@mantou/gem/lib/element'; import { classMap } from '@mantou/gem/lib/utils'; import { isNullish } from '../lib/types'; @@ -10,7 +10,7 @@ import type { Sequence } from './area-chart'; import type { Data } from './chart-tooltip'; import { ChartTooltip } from './chart-tooltip'; -const style = createCSSSheet` +const style = css` .symbol { opacity: 0.8; } diff --git a/packages/duoyun-ui/src/elements/segmented.ts b/packages/duoyun-ui/src/elements/segmented.ts index 61db2d4e..d134a6d7 100644 --- a/packages/duoyun-ui/src/elements/segmented.ts +++ b/packages/duoyun-ui/src/elements/segmented.ts @@ -1,4 +1,4 @@ -import { createCSSSheet, GemElement, html } from '@mantou/gem/lib/element'; +import { css, GemElement, html } from '@mantou/gem/lib/element'; import type { Emitter } from '@mantou/gem/lib/decorators'; import { adoptedStyle, @@ -22,7 +22,7 @@ import './use'; const getAnchorName = (index: number) => `--anchor-${index}`; -const style = createCSSSheet` +const style = css` :host(:where(:not([hidden]))) { display: flex; cursor: default; diff --git a/packages/duoyun-ui/src/elements/select.ts b/packages/duoyun-ui/src/elements/select.ts index 6098b153..ac902f84 100644 --- a/packages/duoyun-ui/src/elements/select.ts +++ b/packages/duoyun-ui/src/elements/select.ts @@ -16,7 +16,7 @@ import { memo, } from '@mantou/gem/lib/decorators'; import type { TemplateResult } from '@mantou/gem/lib/element'; -import { createCSSSheet, createRef, createState, GemElement, html } from '@mantou/gem/lib/element'; +import { css, createRef, createState, GemElement, html } from '@mantou/gem/lib/element'; import type { StyleObject } from '@mantou/gem/lib/utils'; import { addListener, styleMap } from '@mantou/gem/lib/utils'; @@ -40,7 +40,7 @@ import './input'; import './tag'; import './scroll-box'; -const style = createCSSSheet` +const style = css` :host { width: 15em; } diff --git a/packages/duoyun-ui/src/elements/selection-box.ts b/packages/duoyun-ui/src/elements/selection-box.ts index 0220fb55..36c23d68 100644 --- a/packages/duoyun-ui/src/elements/selection-box.ts +++ b/packages/duoyun-ui/src/elements/selection-box.ts @@ -1,6 +1,6 @@ import type { Emitter } from '@mantou/gem/lib/decorators'; import { adoptedStyle, customElement, effect, emitter, 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 { addListener, styleMap } from '@mantou/gem/lib/utils'; import { theme } from '../lib/theme'; @@ -144,7 +144,7 @@ export class DuoyunSelectionBoxElement extends GemElement { } const borderWidth = 100; -const maskStyle = createCSSSheet` +const maskStyle = css` :host { position: fixed; border: ${borderWidth}px solid transparent; diff --git a/packages/duoyun-ui/src/elements/shortcut-record.ts b/packages/duoyun-ui/src/elements/shortcut-record.ts index fbd5f599..17462038 100644 --- a/packages/duoyun-ui/src/elements/shortcut-record.ts +++ b/packages/duoyun-ui/src/elements/shortcut-record.ts @@ -12,7 +12,7 @@ import { shadow, mounted, } from '@mantou/gem/lib/decorators'; -import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element'; +import { GemElement, html, css } from '@mantou/gem/lib/element'; import { addListener } from '@mantou/gem/lib/utils'; import { theme } from '../lib/theme'; @@ -24,7 +24,7 @@ import { icons } from '../lib/icons'; import './paragraph'; import './use'; -const style = createCSSSheet` +const style = css` :host(:where(:not([hidden]))) { display: inline-flex; font-size: 0.875em; diff --git a/packages/duoyun-ui/src/elements/side-navigation.ts b/packages/duoyun-ui/src/elements/side-navigation.ts index a8f12f07..56df28ce 100644 --- a/packages/duoyun-ui/src/elements/side-navigation.ts +++ b/packages/duoyun-ui/src/elements/side-navigation.ts @@ -10,7 +10,7 @@ import { memo, } from '@mantou/gem/lib/decorators'; import type { TemplateResult } from '@mantou/gem/lib/element'; -import { createCSSSheet, createState, html } from '@mantou/gem/lib/element'; +import { css, createState, html } from '@mantou/gem/lib/element'; import { history } from '@mantou/gem/lib/history'; import type { QueryString } from '@mantou/gem/lib/utils'; @@ -58,7 +58,7 @@ interface NavItemGroup { export type NavItems = (Item | NavItemGroup)[]; -const style = createCSSSheet` +const style = css` :host(:where(:not([hidden]))) { user-select: none; display: flex; diff --git a/packages/duoyun-ui/src/elements/slider.ts b/packages/duoyun-ui/src/elements/slider.ts index 02895fec..07068f0a 100644 --- a/packages/duoyun-ui/src/elements/slider.ts +++ b/packages/duoyun-ui/src/elements/slider.ts @@ -13,7 +13,7 @@ import { mounted, effect, } from '@mantou/gem/lib/decorators'; -import { GemElement, html, createCSSSheet, createState, createRef } from '@mantou/gem/lib/element'; +import { GemElement, html, css, createState, createRef } from '@mantou/gem/lib/element'; import { classMap, addListener } from '@mantou/gem/lib/utils'; import { createDecoratorTheme } from '@mantou/gem/helper/theme'; @@ -29,7 +29,7 @@ import './input'; const elementTheme = createDecoratorTheme({ position: '', positionPoint: '' }); -const style = createCSSSheet` +const style = css` :host(:where(:not([hidden]))) { font-size: 0.875em; inline-size: 15em; diff --git a/packages/duoyun-ui/src/elements/sort-box.ts b/packages/duoyun-ui/src/elements/sort-box.ts index ef6fce35..f6b92c2c 100644 --- a/packages/duoyun-ui/src/elements/sort-box.ts +++ b/packages/duoyun-ui/src/elements/sort-box.ts @@ -1,4 +1,4 @@ -import { GemElement, createCSSSheet } from '@mantou/gem/lib/element'; +import { GemElement, css } from '@mantou/gem/lib/element'; import { adoptedStyle, boolattribute, customElement, emitter, mounted, type Emitter } from '@mantou/gem/lib/decorators'; import { addListener } from '@mantou/gem/lib/utils'; @@ -8,7 +8,7 @@ import { theme } from '../lib/theme'; import { DuoyunGestureElement } from './gesture'; import type { PanEventDetail } from './gesture'; -const style = createCSSSheet` +const style = css` :where(dy-sort-item[handle], dy-sort-handle):state(grabbing) { cursor: grabbing; diff --git a/packages/duoyun-ui/src/elements/space.ts b/packages/duoyun-ui/src/elements/space.ts index e53e8941..1ab472f3 100644 --- a/packages/duoyun-ui/src/elements/space.ts +++ b/packages/duoyun-ui/src/elements/space.ts @@ -1,7 +1,7 @@ import { adoptedStyle, customElement, attribute } from '@mantou/gem/lib/decorators'; -import { GemElement, createCSSSheet } from '@mantou/gem/lib/element'; +import { GemElement, css } from '@mantou/gem/lib/element'; -const style = createCSSSheet` +const style = css` :where(:scope:not([hidden])) { display: inline-flex; flex-wrap: wrap; diff --git a/packages/duoyun-ui/src/elements/statistic.ts b/packages/duoyun-ui/src/elements/statistic.ts index 6ff5a30c..9b917862 100644 --- a/packages/duoyun-ui/src/elements/statistic.ts +++ b/packages/duoyun-ui/src/elements/statistic.ts @@ -9,7 +9,7 @@ import { shadow, slot, } from '@mantou/gem/lib/decorators'; -import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element'; +import { GemElement, html, css } from '@mantou/gem/lib/element'; import { classMap } from '@mantou/gem/lib/utils'; import { parseDuration } from '../lib/time'; @@ -19,7 +19,7 @@ import { formatBandwidth, formatDecimal, formatPercentage, formatTraffic, format import './placeholder'; import './use'; -const style = createCSSSheet` +const style = css` :host(:where(:not([hidden]))) { display: block; font-size: 0.875em; diff --git a/packages/duoyun-ui/src/elements/status-light.ts b/packages/duoyun-ui/src/elements/status-light.ts index c79b8584..558a959a 100644 --- a/packages/duoyun-ui/src/elements/status-light.ts +++ b/packages/duoyun-ui/src/elements/status-light.ts @@ -1,10 +1,10 @@ import { adoptedStyle, customElement, attribute, 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 { theme, getSemanticColor } from '../lib/theme'; import type { StringList } from '../lib/types'; -const style = createCSSSheet` +const style = css` :host(:where(:not([hidden]))) { display: inline-flex; align-items: center; diff --git a/packages/duoyun-ui/src/elements/switch.ts b/packages/duoyun-ui/src/elements/switch.ts index 9b1103bf..a135e635 100644 --- a/packages/duoyun-ui/src/elements/switch.ts +++ b/packages/duoyun-ui/src/elements/switch.ts @@ -9,7 +9,7 @@ import { shadow, mounted, } from '@mantou/gem/lib/decorators'; -import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element'; +import { GemElement, html, css } from '@mantou/gem/lib/element'; import { addListener } from '@mantou/gem/lib/utils'; import { createDecoratorTheme } from '@mantou/gem/helper/theme'; @@ -19,7 +19,7 @@ import { focusStyle } from '../lib/styles'; const elementTheme = createDecoratorTheme({ color: '' }); -const style = createCSSSheet` +const style = css` :host(:where(:not([hidden]))) { cursor: default; display: inline-flex; diff --git a/packages/duoyun-ui/src/elements/table.ts b/packages/duoyun-ui/src/elements/table.ts index e40fb790..4b4dbaf7 100644 --- a/packages/duoyun-ui/src/elements/table.ts +++ b/packages/duoyun-ui/src/elements/table.ts @@ -14,7 +14,7 @@ import { slot, } from '@mantou/gem/lib/decorators'; import type { TemplateResult } from '@mantou/gem/lib/element'; -import { createCSSSheet, html } from '@mantou/gem/lib/element'; +import { css, html } from '@mantou/gem/lib/element'; import type { StyleObject } from '@mantou/gem/lib/utils'; import { styleMap, classMap, isArrayChange } from '@mantou/gem/lib/utils'; @@ -38,7 +38,7 @@ import './loading'; import './space'; import './selection-box'; -const styles = createCSSSheet` +const styles = css` :host(:where(:not([hidden]))) { display: block; width: 100%; diff --git a/packages/duoyun-ui/src/elements/tabs.ts b/packages/duoyun-ui/src/elements/tabs.ts index 93536bc6..3e00295a 100644 --- a/packages/duoyun-ui/src/elements/tabs.ts +++ b/packages/duoyun-ui/src/elements/tabs.ts @@ -14,7 +14,7 @@ import { 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 { partMap, classMap, styleMap, addListener } from '@mantou/gem/lib/utils'; import { theme } from '../lib/theme'; @@ -30,7 +30,7 @@ import './divider'; const getAnchorName = (index: number) => `--anchor-${index}`; -const style = createCSSSheet` +const style = css` :host(:where(:not([hidden]))) { display: flex; flex-direction: column; @@ -194,7 +194,7 @@ export class DuoyunTabsElement extends GemElement { }; } -const panelStyle = createCSSSheet` +const panelStyle = css` :host(:where(:not([hidden]))) { display: block; flex-shrink: 1; diff --git a/packages/duoyun-ui/src/elements/tag.ts b/packages/duoyun-ui/src/elements/tag.ts index e1482203..e4c6b2c3 100644 --- a/packages/duoyun-ui/src/elements/tag.ts +++ b/packages/duoyun-ui/src/elements/tag.ts @@ -10,7 +10,7 @@ import { shadow, aria, } 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 { icons } from '../lib/icons'; @@ -23,7 +23,7 @@ import './use'; const elementTheme = createDecoratorTheme({ color: '', borderColor: '', bg: '' }); -const style = createCSSSheet` +const style = css` :host(:where(:not([hidden]))) { cursor: default; display: inline-flex; diff --git a/packages/duoyun-ui/src/elements/text-mask.ts b/packages/duoyun-ui/src/elements/text-mask.ts index d15a5dc3..04dd1f7a 100644 --- a/packages/duoyun-ui/src/elements/text-mask.ts +++ b/packages/duoyun-ui/src/elements/text-mask.ts @@ -1,8 +1,8 @@ import { adoptedStyle, customElement, property, attribute, shadow, mounted, memo } from '@mantou/gem/lib/decorators'; import type { TemplateResult } from '@mantou/gem/lib/element'; -import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element'; +import { GemElement, html, css } from '@mantou/gem/lib/element'; -const style = createCSSSheet` +const style = css` span { user-select: none; } diff --git a/packages/duoyun-ui/src/elements/time-panel.ts b/packages/duoyun-ui/src/elements/time-panel.ts index a8157eea..0cb66c38 100644 --- a/packages/duoyun-ui/src/elements/time-panel.ts +++ b/packages/duoyun-ui/src/elements/time-panel.ts @@ -8,7 +8,7 @@ import { shadow, mounted, } from '@mantou/gem/lib/decorators'; -import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element'; +import { GemElement, html, css } from '@mantou/gem/lib/element'; import { classMap } from '@mantou/gem/lib/utils'; import { Time, parseDate } from '../lib/time'; @@ -17,7 +17,7 @@ import { isNotNullish } from '../lib/types'; import { locale } from '../lib/locale'; import { focusStyle } from '../lib/styles'; -const style = createCSSSheet` +const style = css` :host(:where(:not([hidden]))) { display: grid; grid-template: 'hour minute second' / 1fr 1fr 1fr; diff --git a/packages/duoyun-ui/src/elements/time-picker.ts b/packages/duoyun-ui/src/elements/time-picker.ts index 5e7839b3..6bbc04ed 100644 --- a/packages/duoyun-ui/src/elements/time-picker.ts +++ b/packages/duoyun-ui/src/elements/time-picker.ts @@ -12,7 +12,7 @@ import { shadow, mounted, } from '@mantou/gem/lib/decorators'; -import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element'; +import { GemElement, html, css } from '@mantou/gem/lib/element'; import { classMap, addListener } from '@mantou/gem/lib/utils'; import { Time } from '../lib/time'; @@ -31,7 +31,7 @@ import type { DuoyunTimePanelElement } from './time-panel'; import './time-panel'; -const style = createCSSSheet` +const style = css` :host { width: 10em; } diff --git a/packages/duoyun-ui/src/elements/timeline.ts b/packages/duoyun-ui/src/elements/timeline.ts index 96761374..882b56d6 100644 --- a/packages/duoyun-ui/src/elements/timeline.ts +++ b/packages/duoyun-ui/src/elements/timeline.ts @@ -1,7 +1,7 @@ // https://ant.design/components/timeline/ import { adoptedStyle, aria, customElement, property, shadow } from '@mantou/gem/lib/decorators'; import type { TemplateResult } from '@mantou/gem/lib/element'; -import { createCSSSheet, html } from '@mantou/gem/lib/element'; +import { css, html } from '@mantou/gem/lib/element'; import { styleMap, classMap } from '@mantou/gem/lib/utils'; import { theme } from '../lib/theme'; @@ -10,7 +10,7 @@ import { DuoyunScrollBaseElement } from './base/scroll'; import './use'; -const style = createCSSSheet` +const style = css` :host(:where(:not([hidden]))) { --size: 1.5em; line-height: var(--size); diff --git a/packages/duoyun-ui/src/elements/toast.ts b/packages/duoyun-ui/src/elements/toast.ts index 8c30dcb2..47f7bc31 100644 --- a/packages/duoyun-ui/src/elements/toast.ts +++ b/packages/duoyun-ui/src/elements/toast.ts @@ -1,6 +1,6 @@ import { adoptedStyle, aria, customElement, mounted, property, shadow } from '@mantou/gem/lib/decorators'; import type { TemplateResult } from '@mantou/gem/lib/element'; -import { GemElement, html, createCSSSheet, repeat } from '@mantou/gem/lib/element'; +import { GemElement, html, css, repeat } from '@mantou/gem/lib/element'; import { classMap, addListener } from '@mantou/gem/lib/utils'; import { icons } from '../lib/icons'; @@ -10,7 +10,7 @@ import { getStringFromTemplate } from '../lib/utils'; import './use'; import './action-text'; -const style = createCSSSheet` +const style = css` :host(:where(:not([hidden]))) { --item-gap: 1em; --item-padding-block: 0.6em; diff --git a/packages/duoyun-ui/src/elements/tree.ts b/packages/duoyun-ui/src/elements/tree.ts index f8a6843d..e85a1c0b 100644 --- a/packages/duoyun-ui/src/elements/tree.ts +++ b/packages/duoyun-ui/src/elements/tree.ts @@ -16,7 +16,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 } from '@mantou/gem/lib/utils'; import { icons } from '../lib/icons'; @@ -54,7 +54,7 @@ function getItemValue(item: TreeItem) { return item.value ?? item.label; } -const itemStyle = createCSSSheet` +const itemStyle = css` :host(:where(:not([hidden]))) { display: flex; align-items: center; @@ -133,7 +133,7 @@ class _DuoyunTreeItemElement extends GemElement { }; } -const style = createCSSSheet` +const style = css` :host(:where(:not([hidden]))) { display: block; font-size: 0.875em; diff --git a/packages/duoyun-ui/src/elements/wait.ts b/packages/duoyun-ui/src/elements/wait.ts index ea476614..69847fb4 100644 --- a/packages/duoyun-ui/src/elements/wait.ts +++ b/packages/duoyun-ui/src/elements/wait.ts @@ -1,5 +1,5 @@ import { adoptedStyle, aria, customElement, effect, mounted, shadow, state } from '@mantou/gem/lib/decorators'; -import { GemElement, html, createCSSSheet, createState } from '@mantou/gem/lib/element'; +import { GemElement, html, css, createState } from '@mantou/gem/lib/element'; import { addListener } from '@mantou/gem/lib/utils'; import { createDecoratorTheme } from '@mantou/gem/helper/theme'; @@ -12,7 +12,7 @@ import './loading'; const elementTheme = createDecoratorTheme({ color: '', align: '', justify: '', paddingBottom: '' }); -const style = createCSSSheet` +const style = css` :host(:where(:not([hidden]))) { view-transition-name: dy-wait; position: fixed; diff --git a/packages/duoyun-ui/src/lib/styles.ts b/packages/duoyun-ui/src/lib/styles.ts index 50580653..167a7327 100644 --- a/packages/duoyun-ui/src/lib/styles.ts +++ b/packages/duoyun-ui/src/lib/styles.ts @@ -1,10 +1,10 @@ -import { createCSSSheet } from '@mantou/gem/lib/element'; +import { css } from '@mantou/gem/lib/element'; import { theme } from '../lib/theme'; // global style: `::selection`, `::target-text`, `::highlight` // https://bugzilla.mozilla.org/show_bug.cgi?id=1868009 -export const focusStyle = createCSSSheet` +export const focusStyle = css` :host(:where(:focus)), :where(:focus) { outline: none; @@ -17,7 +17,7 @@ export const focusStyle = createCSSSheet` `; function createContainer(display: string) { - return createCSSSheet` + return css` @layer { :host(:where(:not([hidden]))), :where(:scope:not([hidden])) { diff --git a/packages/duoyun-ui/src/patterns/console.ts b/packages/duoyun-ui/src/patterns/console.ts index 4d8dbb56..a56a2170 100644 --- a/packages/duoyun-ui/src/patterns/console.ts +++ b/packages/duoyun-ui/src/patterns/console.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, attribute, boolattribute, customElement, effect, property } from '@mantou/gem/lib/decorators'; import { mediaQuery } from '@mantou/gem/helper/mediaquery'; @@ -33,7 +33,7 @@ export type UserInfo = { profile?: string; }; -const style = createCSSSheet` +const style = css` :scope { display: flex; color: ${theme.textColor}; diff --git a/packages/duoyun-ui/src/patterns/filter-form.ts b/packages/duoyun-ui/src/patterns/filter-form.ts index 93aa8498..d90771f6 100644 --- a/packages/duoyun-ui/src/patterns/filter-form.ts +++ b/packages/duoyun-ui/src/patterns/filter-form.ts @@ -1,4 +1,4 @@ -import { GemElement, html, createCSSSheet, createState } from '@mantou/gem/lib/element'; +import { GemElement, html, css, createState } from '@mantou/gem/lib/element'; import type { Emitter } from '@mantou/gem/lib/decorators'; import { adoptedStyle, @@ -38,7 +38,7 @@ export type FilterableOptions = { connectStores?: Store[]; }; -const style = createCSSSheet` +const style = css` dy-input, dy-select { width: 100%; diff --git a/packages/duoyun-ui/src/patterns/footer.ts b/packages/duoyun-ui/src/patterns/footer.ts index c478de8f..949a2129 100644 --- a/packages/duoyun-ui/src/patterns/footer.ts +++ b/packages/duoyun-ui/src/patterns/footer.ts @@ -1,4 +1,4 @@ -import { GemElement, html, createCSSSheet } from '@mantou/gem/lib/element'; +import { GemElement, html, css } from '@mantou/gem/lib/element'; import type { Emitter } from '@mantou/gem/lib/decorators'; import { adoptedStyle, customElement, globalemitter, property } from '@mantou/gem/lib/decorators'; import { mediaQuery } from '@mantou/gem/helper/mediaquery'; @@ -42,7 +42,7 @@ export type Languages = { names: Record; }; -const style = createCSSSheet` +const style = css` :scope { display: block; background: ${theme.lightBackgroundColor}; @@ -147,7 +147,7 @@ const style = createCSSSheet` } `; -const mobileStyle = createCSSSheet( +const mobileStyle = css( mediaQuery.PHONE, /*css*/ ` :scope { diff --git a/packages/duoyun-ui/src/patterns/form.ts b/packages/duoyun-ui/src/patterns/form.ts index 77cf8f9d..78e0a539 100644 --- a/packages/duoyun-ui/src/patterns/form.ts +++ b/packages/duoyun-ui/src/patterns/form.ts @@ -1,4 +1,4 @@ -import { createCSSSheet, html, GemElement, createState, createRef, TemplateResult } from '@mantou/gem/lib/element'; +import { css, html, GemElement, createState, createRef, TemplateResult } from '@mantou/gem/lib/element'; import { adoptedStyle, customElement, memo, property, shadow } from '@mantou/gem/lib/decorators'; import type { StyleObject } from '@mantou/gem/lib/utils'; import { GemError, styleMap } from '@mantou/gem/lib/utils'; @@ -83,7 +83,7 @@ export type FormItem = label?: string; }; -const style = createCSSSheet` +const style = css` dy-form { width: 100%; } diff --git a/packages/duoyun-ui/src/patterns/nav.ts b/packages/duoyun-ui/src/patterns/nav.ts index dcac0f37..321233a3 100644 --- a/packages/duoyun-ui/src/patterns/nav.ts +++ b/packages/duoyun-ui/src/patterns/nav.ts @@ -1,6 +1,6 @@ import { history } from '@mantou/gem/lib/history'; import type { TemplateResult } from '@mantou/gem/lib/element'; -import { createCSSSheet, GemElement, html, createState } from '@mantou/gem/lib/element'; +import { css, GemElement, html, createState } from '@mantou/gem/lib/element'; import { adoptedStyle, attribute, @@ -25,7 +25,7 @@ import '../elements/use'; export type { Links } from './footer'; -const style = createCSSSheet` +const style = css` :scope { display: flex; align-items: center; @@ -114,7 +114,7 @@ const style = createCSSSheet` } `; -const mobileStyle = createCSSSheet( +const mobileStyle = css( mediaQuery.PHONE, /*css*/ ` :scope { diff --git a/packages/duoyun-ui/src/patterns/table.ts b/packages/duoyun-ui/src/patterns/table.ts index 2169fa1e..89eafc11 100644 --- a/packages/duoyun-ui/src/patterns/table.ts +++ b/packages/duoyun-ui/src/patterns/table.ts @@ -1,4 +1,4 @@ -import { createCSSSheet, createRef, createState, GemElement, html } from '@mantou/gem/lib/element'; +import { css, createRef, createState, GemElement, html } from '@mantou/gem/lib/element'; import { QueryString, addListener, styleMap } from '@mantou/gem/lib/utils'; import type { Emitter } from '@mantou/gem/lib/decorators'; import { @@ -120,7 +120,7 @@ export type FetchEventDetail = Omit & { sort: Record; }; -const style = createCSSSheet` +const style = css` .searchbar { display: flex; align-items: center; diff --git a/packages/gem-book/docs/hello.ts b/packages/gem-book/docs/hello.ts index 56e5e67e..4e72e0c1 100644 --- a/packages/gem-book/docs/hello.ts +++ b/packages/gem-book/docs/hello.ts @@ -3,9 +3,9 @@ import type { GemBookElement } from 'gem-book'; customElements.whenDefined('gem-book').then(() => { const { GemBookPluginElement } = customElements.get('gem-book') as typeof GemBookElement; const { Gem, theme } = GemBookPluginElement; - const { html, adoptedStyle, createCSSSheet, customElement } = Gem; + const { html, adoptedStyle, css, customElement } = Gem; - const style = createCSSSheet` + const style = css` my-plugin-hello { display: block; border-radius: ${theme.normalRound}; diff --git a/packages/gem-book/src/element/elements/404.ts b/packages/gem-book/src/element/elements/404.ts index 5fe92641..e685882d 100644 --- a/packages/gem-book/src/element/elements/404.ts +++ b/packages/gem-book/src/element/elements/404.ts @@ -1,4 +1,4 @@ -import { adoptedStyle, aria, createCSSSheet, customElement, GemElement, html } from '@mantou/gem'; +import { adoptedStyle, aria, css, customElement, GemElement, html } from '@mantou/gem'; import { getGithubPath, isGitLab } from '../lib/utils'; import { bookStore, locationStore } from '../store'; @@ -11,7 +11,7 @@ import '@mantou/gem/elements/reflect'; import '@mantou/gem/elements/title'; import '@mantou/gem/elements/use'; -const styles = createCSSSheet` +const styles = css` :scope { text-align: center; } diff --git a/packages/gem-book/src/element/elements/edit-link.ts b/packages/gem-book/src/element/elements/edit-link.ts index d2fc6c83..8eed590e 100644 --- a/packages/gem-book/src/element/elements/edit-link.ts +++ b/packages/gem-book/src/element/elements/edit-link.ts @@ -4,7 +4,7 @@ import { customElement, connectStore, adoptedStyle, - createCSSSheet, + css, createState, memo, effect, @@ -22,7 +22,7 @@ import { icons } from './icons'; import '@mantou/gem/elements/link'; import '@mantou/gem/elements/use'; -const styles = createCSSSheet` +const styles = css` :scope { display: flex; gap: 1rem; diff --git a/packages/gem-book/src/element/elements/footer.ts b/packages/gem-book/src/element/elements/footer.ts index 57a29e87..1a602076 100644 --- a/packages/gem-book/src/element/elements/footer.ts +++ b/packages/gem-book/src/element/elements/footer.ts @@ -1,4 +1,4 @@ -import { html, GemElement, customElement, connectStore, createCSSSheet, adoptedStyle, aria } from '@mantou/gem'; +import { html, GemElement, customElement, connectStore, css, adoptedStyle, aria } from '@mantou/gem'; import { selfI18n } from '../helper/i18n'; import { theme } from '../helper/theme'; @@ -7,7 +7,7 @@ import { unsafeRenderHTML } from '../lib/renderer'; import '@mantou/gem/elements/link'; -const styles = createCSSSheet` +const styles = css` :scope { display: block; padding-block: 2rem; diff --git a/packages/gem-book/src/element/elements/homepage.ts b/packages/gem-book/src/element/elements/homepage.ts index 61f3e4b0..d1681913 100644 --- a/packages/gem-book/src/element/elements/homepage.ts +++ b/packages/gem-book/src/element/elements/homepage.ts @@ -1,4 +1,4 @@ -import { html, GemElement, customElement, connectStore, createCSSSheet, adoptedStyle } from '@mantou/gem'; +import { html, GemElement, customElement, connectStore, css, adoptedStyle } from '@mantou/gem'; import { mediaQuery } from '@mantou/gem/helper/mediaquery'; import { getUserLink } from '../../common/utils'; @@ -14,7 +14,7 @@ import { icons } from './icons'; import '@mantou/gem/elements/link'; import '@mantou/gem/elements/use'; -const styles = createCSSSheet` +const styles = css` :scope { overflow: hidden; diff --git a/packages/gem-book/src/element/elements/loadbar.ts b/packages/gem-book/src/element/elements/loadbar.ts index 43a6018d..007d84bb 100644 --- a/packages/gem-book/src/element/elements/loadbar.ts +++ b/packages/gem-book/src/element/elements/loadbar.ts @@ -1,21 +1,11 @@ -import { - aria, - customElement, - shadow, - GemElement, - html, - createCSSSheet, - adoptedStyle, - createState, - mounted, -} from '@mantou/gem'; +import { aria, customElement, shadow, GemElement, html, css, adoptedStyle, createState, mounted } from '@mantou/gem'; import { createDecoratorTheme } from '@mantou/gem/helper/theme'; import { theme } from '../helper/theme'; const elementTheme = createDecoratorTheme({ progress: '' }); -const styles = createCSSSheet` +const styles = css` :host { z-index: 22222222; position: fixed; diff --git a/packages/gem-book/src/element/elements/main.ts b/packages/gem-book/src/element/elements/main.ts index 90a4ed36..330ee3cc 100644 --- a/packages/gem-book/src/element/elements/main.ts +++ b/packages/gem-book/src/element/elements/main.ts @@ -3,7 +3,7 @@ import { GemElement, customElement, property, - createCSSSheet, + css, adoptedStyle, connectStore, memo, @@ -24,7 +24,7 @@ import '@mantou/gem/elements/unsafe'; import '@mantou/gem/elements/link'; import './pre'; -const style = createCSSSheet` +const style = css` /** * 未定义元素提醒 * https://github.com/w3c/csswg-drafts/issues/9712 diff --git a/packages/gem-book/src/element/elements/nav-logo.ts b/packages/gem-book/src/element/elements/nav-logo.ts index 3ee4dbf0..dddebaa1 100644 --- a/packages/gem-book/src/element/elements/nav-logo.ts +++ b/packages/gem-book/src/element/elements/nav-logo.ts @@ -1,11 +1,11 @@ -import { GemElement, html, customElement, connectStore, createCSSSheet, adoptedStyle } from '@mantou/gem'; +import { GemElement, html, customElement, connectStore, css, adoptedStyle } from '@mantou/gem'; import { mediaQuery } from '@mantou/gem/helper/mediaquery'; import { bookStore } from '../store'; import { theme } from '../helper/theme'; import { GemBookElement } from '..'; -const styles = createCSSSheet` +const styles = css` :scope:where(:not([hidden])) { height: ${theme.headerHeight}; font-size: 1.2rem; diff --git a/packages/gem-book/src/element/elements/nav.ts b/packages/gem-book/src/element/elements/nav.ts index a748bc51..72fbaa35 100644 --- a/packages/gem-book/src/element/elements/nav.ts +++ b/packages/gem-book/src/element/elements/nav.ts @@ -9,7 +9,7 @@ import { classMap, history, state, - createCSSSheet, + css, adoptedStyle, effect, aria, @@ -28,7 +28,7 @@ import '@mantou/gem/elements/link'; import '@mantou/gem/elements/use'; import './nav-logo'; -const styles = createCSSSheet` +const styles = css` :scope { display: flex; box-sizing: border-box; diff --git a/packages/gem-book/src/element/elements/pre.ts b/packages/gem-book/src/element/elements/pre.ts index 9490fc54..02cabe7d 100644 --- a/packages/gem-book/src/element/elements/pre.ts +++ b/packages/gem-book/src/element/elements/pre.ts @@ -7,7 +7,7 @@ import { GemElement, html, adoptedStyle, - createCSSSheet, + css, styleMap, mounted, memo, @@ -245,7 +245,7 @@ const IGNORE_LINE = 2; const LINE_HEIGHT = '24px'; const PADDING = '1em'; -const styles = createCSSSheet` +const styles = css` :host([status='hidden']) { display: none; } diff --git a/packages/gem-book/src/element/elements/rel-link.ts b/packages/gem-book/src/element/elements/rel-link.ts index 1e5f9439..5abb9249 100644 --- a/packages/gem-book/src/element/elements/rel-link.ts +++ b/packages/gem-book/src/element/elements/rel-link.ts @@ -1,13 +1,4 @@ -import { - html, - GemElement, - customElement, - connectStore, - property, - adoptedStyle, - createCSSSheet, - aria, -} from '@mantou/gem'; +import { html, GemElement, customElement, connectStore, property, adoptedStyle, css, aria } from '@mantou/gem'; import { mediaQuery } from '@mantou/gem/helper/mediaquery'; import type { NavItem } from '../../common/config'; @@ -17,7 +8,7 @@ import { bookStore } from '../store'; import '@mantou/gem/elements/link'; -const styles = createCSSSheet` +const styles = css` :scope:where(:not([hidden])) { display: flex; flex-wrap: wrap; diff --git a/packages/gem-book/src/element/elements/sidebar.ts b/packages/gem-book/src/element/elements/sidebar.ts index ed7fc2ab..bf4f0159 100644 --- a/packages/gem-book/src/element/elements/sidebar.ts +++ b/packages/gem-book/src/element/elements/sidebar.ts @@ -8,7 +8,7 @@ import { state, connect, createStore, - createCSSSheet, + css, adoptedStyle, effect, addListener, @@ -33,7 +33,7 @@ import './nav-logo'; export const sidebarStore = createStore({ open: false }); -const styles = createCSSSheet` +const styles = css` :scope { display: flex; flex-direction: column; diff --git a/packages/gem-book/src/element/elements/toc.ts b/packages/gem-book/src/element/elements/toc.ts index 9a9d07d8..54f91603 100644 --- a/packages/gem-book/src/element/elements/toc.ts +++ b/packages/gem-book/src/element/elements/toc.ts @@ -5,7 +5,7 @@ import { connectStore, classMap, createStore, - createCSSSheet, + css, adoptedStyle, createState, unmounted, @@ -21,7 +21,7 @@ export const tocStore = createStore({ elements: [] as HTMLHeadingElement[], }); -const styles = createCSSSheet` +const styles = css` :scope { font-size: 0.875rem; padding: 2rem 1.5rem; diff --git a/packages/gem-book/src/element/index.ts b/packages/gem-book/src/element/index.ts index bc8d6eb3..ebc0dcd9 100644 --- a/packages/gem-book/src/element/index.ts +++ b/packages/gem-book/src/element/index.ts @@ -13,7 +13,7 @@ import { createRef, boolattribute, adoptedStyle, - createCSSSheet, + css, kebabToCamelCase, willMount, effect, @@ -44,7 +44,7 @@ import './elements/rel-link'; import './elements/meta'; import './elements/toc'; -const styles = createCSSSheet` +const styles = css` :scope { display: grid; grid-template-areas: 'aside content toc'; diff --git a/packages/gem-book/src/plugins/api.ts b/packages/gem-book/src/plugins/api.ts index d73b3dc3..ee9a7698 100644 --- a/packages/gem-book/src/plugins/api.ts +++ b/packages/gem-book/src/plugins/api.ts @@ -15,7 +15,7 @@ const { customElement, attribute, numattribute, - createCSSSheet, + css, adoptedStyle, effect, kebabToCamelCase, @@ -23,7 +23,7 @@ const { light, } = Gem; -const styles = createCSSSheet` +const styles = css` table { tr td:first-of-type { white-space: nowrap; diff --git a/packages/gem-book/src/plugins/code-group.ts b/packages/gem-book/src/plugins/code-group.ts index a1badbf3..1ef2f4d3 100644 --- a/packages/gem-book/src/plugins/code-group.ts +++ b/packages/gem-book/src/plugins/code-group.ts @@ -16,9 +16,9 @@ type State = { const { GemBookPluginElement } = (await customElements.whenDefined('gem-book')) as typeof GemBookElement; const { Gem, theme, icons } = GemBookPluginElement; -const { html, customElement, adoptedStyle, createCSSSheet, classMap, shadow, createState, willMount } = Gem; +const { html, customElement, adoptedStyle, css, classMap, shadow, createState, willMount } = Gem; -const style = createCSSSheet` +const style = css` :host { display: block; border-radius: ${theme.normalRound}; diff --git a/packages/gem-book/src/plugins/comment.ts b/packages/gem-book/src/plugins/comment.ts index 8953eee7..9c2a4a96 100644 --- a/packages/gem-book/src/plugins/comment.ts +++ b/packages/gem-book/src/plugins/comment.ts @@ -5,9 +5,9 @@ const gitalkCSSUrl = 'https://esm.sh/gitalk@1.7.2/dist/gitalk.css'; const { GemBookPluginElement } = (await customElements.whenDefined('gem-book')) as typeof GemBookElement; const { config, Gem, theme, locationStore } = GemBookPluginElement; -const { html, customElement, attribute, connectStore, shadow, adoptedStyle, createCSSSheet, effect } = Gem; +const { html, customElement, attribute, connectStore, shadow, adoptedStyle, css, effect } = Gem; -const style = createCSSSheet` +const style = css` :host { display: contents; } diff --git a/packages/gem-book/src/plugins/docsearch.ts b/packages/gem-book/src/plugins/docsearch.ts index f7a7eb30..00d06ab0 100644 --- a/packages/gem-book/src/plugins/docsearch.ts +++ b/packages/gem-book/src/plugins/docsearch.ts @@ -54,20 +54,9 @@ type Locales = Record; const { GemBookPluginElement } = (await customElements.whenDefined('gem-book')) as typeof GemBookElement; const { Gem, theme, mediaQuery, config, Utils } = GemBookPluginElement; -const { - html, - customElement, - attribute, - createRef, - property, - createCSSSheet, - adoptedStyle, - createState, - effect, - mounted, -} = Gem; - -const styles = createCSSSheet` +const { html, customElement, attribute, createRef, property, css, adoptedStyle, createState, effect, mounted } = Gem; + +const styles = css` :scope { display: block; } diff --git a/packages/gem-book/src/plugins/example.ts b/packages/gem-book/src/plugins/example.ts index 79ab0721..258915d9 100644 --- a/packages/gem-book/src/plugins/example.ts +++ b/packages/gem-book/src/plugins/example.ts @@ -16,9 +16,9 @@ type Props = Record; const { GemBookPluginElement } = (await customElements.whenDefined('gem-book')) as typeof GemBookElement; const { Gem, theme, icons } = GemBookPluginElement; -const { html, customElement, attribute, createCSSSheet, adoptedStyle, styleMap, shadow, createState, mounted } = Gem; +const { html, customElement, attribute, css, adoptedStyle, styleMap, shadow, createState, mounted } = Gem; -const styles = createCSSSheet` +const styles = css` :host(:where(:not([hidden]))) { display: flex; flex-direction: column; diff --git a/packages/gem-book/src/plugins/media.ts b/packages/gem-book/src/plugins/media.ts index eac10c14..5c0d4459 100644 --- a/packages/gem-book/src/plugins/media.ts +++ b/packages/gem-book/src/plugins/media.ts @@ -4,9 +4,9 @@ type MediaType = 'img' | 'video' | 'audio' | 'unknown'; const { GemBookPluginElement } = (await customElements.whenDefined('gem-book')) as typeof GemBookElement; const { Gem, theme, Utils } = GemBookPluginElement; -const { html, customElement, attribute, state, createCSSSheet, adoptedStyle } = Gem; +const { html, customElement, attribute, state, css, adoptedStyle } = Gem; -const styles = createCSSSheet` +const styles = css` :scope { display: block; overflow: hidden; diff --git a/packages/gem-book/src/plugins/raw.ts b/packages/gem-book/src/plugins/raw.ts index 5cd146d9..826db63e 100644 --- a/packages/gem-book/src/plugins/raw.ts +++ b/packages/gem-book/src/plugins/raw.ts @@ -7,9 +7,9 @@ type State = { const { GemBookPluginElement } = (await customElements.whenDefined('gem-book')) as typeof GemBookElement; const { Gem, theme, Utils } = GemBookPluginElement; -const { attribute, customElement, html, createCSSSheet, adoptedStyle, createState, effect } = Gem; +const { attribute, customElement, html, css, adoptedStyle, createState, effect } = Gem; -const style = createCSSSheet` +const style = css` :scope { display: contents; } diff --git a/packages/gem-book/src/plugins/sandpack.ts b/packages/gem-book/src/plugins/sandpack.ts index e4804062..fccaa348 100644 --- a/packages/gem-book/src/plugins/sandpack.ts +++ b/packages/gem-book/src/plugins/sandpack.ts @@ -73,7 +73,7 @@ const { attribute, boolattribute, adoptedStyle, - createCSSSheet, + css, classMap, shadow, createState, @@ -81,7 +81,7 @@ const { mounted, } = GemBookPluginElement.Gem; -const styles = createCSSSheet` +const styles = css` :host { display: block; container-type: inline-size; diff --git a/packages/gem-devtools/src/elements/header.ts b/packages/gem-devtools/src/elements/header.ts index 087b1569..530c12e6 100644 --- a/packages/gem-devtools/src/elements/header.ts +++ b/packages/gem-devtools/src/elements/header.ts @@ -3,7 +3,7 @@ import { html, adoptedStyle, customElement, - createCSSSheet, + css, connectStore, styleMap, shadow, @@ -14,7 +14,7 @@ import { configureStore } from '../store'; import { execution } from '../common'; import { getAllFrames } from '../scripts/get-all-frame'; -const style = createCSSSheet` +const style = css` :host { display: flex; line-height: 1.5; diff --git a/packages/gem-devtools/src/elements/section.ts b/packages/gem-devtools/src/elements/section.ts index d247890c..642ab08c 100644 --- a/packages/gem-devtools/src/elements/section.ts +++ b/packages/gem-devtools/src/elements/section.ts @@ -1,7 +1,7 @@ import { adoptedStyle, attribute, - createCSSSheet, + css, customElement, GemElement, html, @@ -21,7 +21,7 @@ import { setGemPropValue } from '../scripts/set-value'; const maybeBuildInPrefix = '[[Gem?]] '; const buildInPrefix = '[[Gem]] '; -export const style = createCSSSheet` +export const style = css` :host(:not([hidden])) { display: block; line-height: 1.5; diff --git a/packages/gem-devtools/src/modules/panel.ts b/packages/gem-devtools/src/modules/panel.ts index 6a6c377e..1281e508 100644 --- a/packages/gem-devtools/src/modules/panel.ts +++ b/packages/gem-devtools/src/modules/panel.ts @@ -1,4 +1,4 @@ -import { adoptedStyle, connectStore, createCSSSheet, customElement, GemElement, html, shadow } from '@mantou/gem'; +import { adoptedStyle, connectStore, css, customElement, GemElement, html, shadow } from '@mantou/gem'; import { panelStore } from '../store'; @@ -8,7 +8,7 @@ import '../elements/header'; const TIP = 'Only works on GemElement written with Decorator, fallback to "Unobserved Properties"'; -const style = createCSSSheet` +const style = css` :host { display: block; margin-bottom: 4em; diff --git a/packages/gem-examples/src/benchmark/fps.ts b/packages/gem-examples/src/benchmark/fps.ts index fa9927db..bb8ddcd6 100644 --- a/packages/gem-examples/src/benchmark/fps.ts +++ b/packages/gem-examples/src/benchmark/fps.ts @@ -3,14 +3,14 @@ import { html, adoptedStyle, customElement, - createCSSSheet, + css, connectStore, createStore, shadow, mounted, } from '@mantou/gem'; -export const fpsStyle = createCSSSheet` +export const fpsStyle = css` :host { font-variant-numeric: tabular-nums; } diff --git a/packages/gem-examples/src/benchmark/index.ts b/packages/gem-examples/src/benchmark/index.ts index 6595ef18..4bd6c8e1 100644 --- a/packages/gem-examples/src/benchmark/index.ts +++ b/packages/gem-examples/src/benchmark/index.ts @@ -6,7 +6,7 @@ import { render, attribute, numattribute, - createCSSSheet, + css, adoptedStyle, createRef, repeat, @@ -45,7 +45,7 @@ export class Pixel extends GemElement { } } -const style = createCSSSheet` +const style = css` :host { display: grid; place-items: center; diff --git a/packages/gem-examples/src/life-cycle/index.ts b/packages/gem-examples/src/life-cycle/index.ts index 80a2daf2..563b2fbd 100644 --- a/packages/gem-examples/src/life-cycle/index.ts +++ b/packages/gem-examples/src/life-cycle/index.ts @@ -1,5 +1,5 @@ import { - createCSSSheet, + css, GemElement, html, createRef, @@ -28,7 +28,7 @@ const store = createStore({ now: new Date(), }); -const styles = createCSSSheet` +const styles = css` h1 { text-decoration: underline; } diff --git a/packages/gem-examples/src/scope/index.ts b/packages/gem-examples/src/scope/index.ts index 5ee41b44..d888f2e9 100644 --- a/packages/gem-examples/src/scope/index.ts +++ b/packages/gem-examples/src/scope/index.ts @@ -1,8 +1,8 @@ -import { GemElement, adoptedStyle, createCSSSheet, customElement, html, render, shadow } from '@mantou/gem'; +import { GemElement, adoptedStyle, css, customElement, html, render, shadow } from '@mantou/gem'; import '../elements/layout'; -const closedStyles = createCSSSheet` +const closedStyles = css` div { color: red; } @@ -23,7 +23,7 @@ class _OtherElement extends GemElement { } } -const style = createCSSSheet` +const style = css` :scope { font-style: italic; } diff --git a/packages/gem-examples/src/styled/index.ts b/packages/gem-examples/src/styled/index.ts index 7cec0aaa..862196b4 100644 --- a/packages/gem-examples/src/styled/index.ts +++ b/packages/gem-examples/src/styled/index.ts @@ -1,8 +1,8 @@ -import { GemElement, html, styled, createCSSSheet, render, adoptedStyle, customElement, SheetToken } from '@mantou/gem'; +import { GemElement, html, styled, css, render, adoptedStyle, customElement, SheetToken } from '@mantou/gem'; import '../elements/layout'; -const styles = createCSSSheet({ +const styles = css({ $: styled` font-style: italic; `, @@ -14,7 +14,7 @@ const styles = createCSSSheet({ `, }); -const styles2 = createCSSSheet({ +const styles2 = css({ [styles.div]: styled` font-weight: bold; font-size: 2em; diff --git a/packages/gem-examples/src/theme/index.ts b/packages/gem-examples/src/theme/index.ts index 2d9da455..b5692f9a 100644 --- a/packages/gem-examples/src/theme/index.ts +++ b/packages/gem-examples/src/theme/index.ts @@ -1,13 +1,4 @@ -import { - GemElement, - html, - render, - customElement, - connectStore, - createCSSSheet, - adoptedStyle, - styleMap, -} from '@mantou/gem'; +import { GemElement, html, render, customElement, connectStore, css, adoptedStyle, styleMap } from '@mantou/gem'; import { createTheme, getThemeStore, createScopedTheme, createOverrideTheme } from '@mantou/gem/helper/theme'; import { mediaQuery } from '@mantou/gem/helper/mediaquery'; @@ -37,14 +28,14 @@ document.onclick = () => { }); }; -const style = createCSSSheet` +const style = css` div { color: ${scopedTheme.color}; border: 2px solid ${scopedTheme.borderColor}; } `; -const printStyle = createCSSSheet( +const printStyle = css( mediaQuery.PRINT, ` div { diff --git a/packages/gem/docs/en/001-guide/001-basic/006-styled-element.md b/packages/gem/docs/en/001-guide/001-basic/006-styled-element.md index 7b5cece7..a08bcaf7 100644 --- a/packages/gem/docs/en/001-guide/001-basic/006-styled-element.md +++ b/packages/gem/docs/en/001-guide/001-basic/006-styled-element.md @@ -4,18 +4,18 @@ Benefit from ShadowDOM, [CSS Nesting](https://drafts.csswg.org/css-nesting-1/), ## Shared style -Use the `createcssSheet` to create a shared style table, use `@adoptedStyle` to apply to the required elements. +Use the `css` to create a shared style table, use `@adoptedStyle` to apply to the required elements. ```js 11 import { GemElement } from '@mantou/gem'; import { adoptedStyle, customElement } from '@mantou/gem'; // 使用 Constructable Stylesheet 创建样式表 -const styles = createCSSSheet(` +const styles = css` h1 { text-decoration: underline; } -`); +`; @adoptedStyle(styles) @customElement('my-element') @@ -31,9 +31,9 @@ You can reference CSS selectors in JS: ```js 17 import { GemElement, html } from '@mantou/gem'; -import { createCSSSheet, styled, adoptedStyle, customElement } from '@mantou/gem'; +import { css, styled, adoptedStyle, customElement } from '@mantou/gem'; -const styles = createCSSSheet({ +const styles = css({ header: styled.class` text-decoration: underline; &:hover { @@ -126,7 +126,7 @@ class MyElement extends GemElement { > > ```js > GemLinkElement[Symbol.metadata].adoptedStyleSheets.push( -> createCSSSheet` +> css` > * { > font-style: italic; > } diff --git a/packages/gem/docs/en/001-guide/002-advance/003-theme.md b/packages/gem/docs/en/001-guide/002-advance/003-theme.md index 351efb9c..2d597022 100644 --- a/packages/gem/docs/en/001-guide/002-advance/003-theme.md +++ b/packages/gem/docs/en/001-guide/002-advance/003-theme.md @@ -109,7 +109,7 @@ import { createDecoratorTheme } from '@mantou/gem/helper/theme'; const elementTheme = createDecoratorTheme({ color: '' }); -const style = createCSSSheet` +const style = css` :host(:where(:not([hidden]))) { border-color: ${elementTheme.color}; } diff --git a/packages/gem/docs/en/003-api/001-gem-element.md b/packages/gem/docs/en/003-api/001-gem-element.md index 6a2fae91..751b13f9 100644 --- a/packages/gem/docs/en/003-api/001-gem-element.md +++ b/packages/gem/docs/en/003-api/001-gem-element.md @@ -59,13 +59,6 @@ Type with decorator | `@fallback` | When the content render error, rendering the reserve content | -## Utils - -| name | description | -| ---------------- | ------------------------------------------------------------------------------- | -| `createRef` | Defining dom references | -| `createState` | Specify the element internal state | -| `createCSSSheet` | Use the constructor to create a style sheet that can be attached to the element | ## Lifecycle hook @@ -78,7 +71,7 @@ Type with decorator | `updated` | Callback after updating the element | | `unmounted` | Callback after unloading the element | -## Other +## Method | name | description | | ----------- | --------------------------------------------------- | @@ -98,3 +91,16 @@ Type with decorator [10]: https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM [11]: https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals#instance_properties_included_from_aria [12]: https://html.spec.whatwg.org/multipage/custom-elements.html#the-elementinternals-interface + +## Utils + +| name | description | +| ------------- | ------------------------------------------------------------------------------- | +| `createRef` | Defining dom references | +| `createState` | Specify the element internal state | +| `css` | Use the constructor to create a style sheet that can be attached to the element | +| `html` | Template string tags, used to create HTML lit-html templates | +| `svg` | Template string tags, used to create SVG lit-html templates | +| `render` | Mount lit-html template to DOM | +| `directive` | Custom lit-html template rendering directive | +| `repeat` | Optimize lit-html list rendering directive | \ No newline at end of file diff --git a/packages/gem/docs/en/003-api/009-re-export.md b/packages/gem/docs/en/003-api/009-re-export.md index e68c05aa..f9780346 100644 --- a/packages/gem/docs/en/003-api/009-re-export.md +++ b/packages/gem/docs/en/003-api/009-re-export.md @@ -1,17 +1,3 @@ -# Re-Export - -Gem’s dependency [`lit-html`](https://lit.dev/docs/templates/overview/), some APIs are re-exported by Gem: - -| name | description | -| ----------- | -------------------------------------------------------------- | -| `html` | Template string tags, used to create HTML lit-html templates | -| `svg` | Template string tags, used to create SVG lit-html templates | -| `render` | Mount lit-html template to DOM | -| `directive` | Custom lit-html template rendering directive | -| `repeat` | Optimize lit-html list rendering directive | - -Other directives can be imported from lit-html: - -```js -import { cache } from 'lit-html/directives/cache'; -``` +--- +redirect: ./gem-element.md +--- diff --git a/packages/gem/docs/en/004-blog/001-create-standard-element.md b/packages/gem/docs/en/004-blog/001-create-standard-element.md index a41ba2e9..5b1a0ba1 100644 --- a/packages/gem/docs/en/004-blog/001-create-standard-element.md +++ b/packages/gem/docs/en/004-blog/001-create-standard-element.md @@ -167,7 +167,7 @@ class MyElement extends GemElement { This is equivalent to creating a `