chore: format css

slidevjs · Feb 25, 2024 · e8b092f · e8b092f
1 parent 0008519
commit e8b092f
Show file tree

Hide file tree

Showing 16 changed files with 219 additions and 121 deletions.
diff --git a/eslint.config.js b/eslint.config.js
@@ -8,5 +8,10 @@ export default antfu(
         'vue/component-name-in-template-casing': 'off',
       },
     },
+    formatters: {
+      // disable for now, we can enable it after we have the slidev plugin in eslint-config
+      markdown: false,
+      css: true,
+    },
   },
 )
diff --git a/package.json b/package.json
@@ -51,6 +51,7 @@
     "cross-env": "^7.0.3",
     "cypress": "^13.6.6",
     "eslint": "^8.57.0",
+    "eslint-plugin-format": "^0.1.0",
     "esno": "^4.0.0",
     "katex": "^0.16.9",
     "lint-staged": "^15.2.2",

diff --git a/packages/client/builtin/TocList.vue b/packages/client/builtin/TocList.vue
@@ -65,7 +65,8 @@ const styles = computed(() => {
 .slidev-layout .slidev-toc-item p {
   margin: 0;
 }
-.slidev-layout .slidev-toc-item div, .slidev-layout .slidev-toc-item div p {
+.slidev-layout .slidev-toc-item div,
+.slidev-layout .slidev-toc-item div p {
   display: initial;
 }
 </style>
diff --git a/packages/client/internals/DrawingControls.vue b/packages/client/internals/DrawingControls.vue
@@ -131,10 +131,8 @@ function setBrushColor(color: typeof brush.color) {
   </Draggable>
 </template>
 
-<style lang="postcss">
-.v-popper--theme-menu {
-  .v-popper__arrow-inner {
-    @apply border-main;
-  }
+<style>
+.v-popper--theme-menu .v-popper__arrow-inner {
+  --uno: border-main;
 }
 </style>
diff --git a/packages/client/internals/Goto.vue b/packages/client/internals/Goto.vue
@@ -165,10 +165,11 @@ watch(activeElement, () => {
   </div>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
 .autocomplete-list {
-  @apply bg-main transform mt-1 overflow-auto;
-  max-height: calc( 100vh - 100px );
+  --uno: bg-main mt-1;
+  overflow: auto;
+  max-height: calc(100vh - 100px);
 }
 
 .autocomplete {

diff --git a/packages/client/internals/RecordingDialog.vue b/packages/client/internals/RecordingDialog.vue
@@ -108,18 +108,18 @@ async function start() {
     }
   }
 
-  input[type="text"] {
+  input[type='text'] {
     @apply border border-main rounded px-2 py-1;
   }
 
   button {
     @apply bg-orange-400 text-white px-4 py-1 rounded border-b-2 border-orange-600;
-    @apply hover:(bg-orange-500 border-orange-700)
+    @apply hover:(bg-orange-500 border-orange-700);
   }
 
   button.cancel {
     @apply bg-gray-400 bg-opacity-50 text-white px-4 py-1 rounded border-b-2 border-main;
-    @apply hover:(bg-opacity-75 border-opacity-75)
+    @apply hover:(bg-opacity-75 border-opacity-75);
   }
 }
 </style>
diff --git a/packages/client/layouts/two-cols-header.vue b/packages/client/layouts/two-cols-header.vue
@@ -51,9 +51,15 @@ const props = defineProps({
   grid-template-rows: repeat(2, 1fr);
 }
 
-.col-header { grid-area: 1 / 1 / 2 / 3; }
-.col-left { grid-area: 2 / 1 / 3 / 2; }
-.col-right { grid-area: 2 / 2 / 3 / 3; }
+.col-header {
+  grid-area: 1 / 1 / 2 / 3;
+}
+.col-left {
+  grid-area: 2 / 1 / 3 / 2;
+}
+.col-right {
+  grid-area: 2 / 2 / 3 / 3;
+}
 .col-bottom {
   align-self: end;
   grid-area: 3 / 1 / 3 / 3;

diff --git a/packages/client/pages/presenter.vue b/packages/client/pages/presenter.vue
@@ -185,26 +185,26 @@ onMounted(() => {
   <SlidesOverview v-model="showOverview" />
 </template>
 
-<style lang="postcss" scoped>
+<style scoped>
 .slidev-presenter {
   --slidev-controls-foreground: current;
 }
 
-.timer-btn:hover {
-  & > :first-child {
-    @apply opacity-0;
-  }
-  & > :last-child {
-    @apply opacity-100;
-  }
+.timer-btn:hover > :first-child {
+  opacity: 0;
+}
+.timer-btn:hover > :last-child {
+  opacity: 1;
 }
 
 .section-title {
-  @apply px-4 py-2 text-xl;
+  --uno: px-4 py-2 text-xl;
 }
 
 .grid-container {
-  @apply h-full w-full bg-gray-400 bg-opacity-15;
+  --uno: bg-active;
+  height: 100%;
+  width: 100%;
   display: grid;
   gap: 1px 1px;
 }
@@ -213,32 +213,32 @@ onMounted(() => {
   grid-template-columns: 1fr 1fr;
   grid-template-rows: min-content 2fr 1fr min-content;
   grid-template-areas:
-    "top top"
-    "main main"
-    "note next"
-    "bottom bottom";
+    'top top'
+    'main main'
+    'note next'
+    'bottom bottom';
 }
 
 .grid-container.layout2 {
   grid-template-columns: 3fr 2fr;
   grid-template-rows: min-content 2fr 1fr min-content;
   grid-template-areas:
-    "top top"
-    "note main"
-    "note next"
-    "bottom bottom";
+    'top top'
+    'note main'
+    'note next'
+    'bottom bottom';
 }
 
 @media (max-aspect-ratio: 3/5) {
   .grid-container.layout1 {
     grid-template-columns: 1fr;
     grid-template-rows: min-content 1fr 1fr 1fr min-content;
     grid-template-areas:
-      "top"
-      "main"
-      "note"
-      "next"
-      "bottom";
+      'top'
+      'main'
+      'note'
+      'next'
+      'bottom';
   }
 }
 
@@ -247,38 +247,40 @@ onMounted(() => {
     grid-template-columns: 1fr 1.1fr 0.9fr;
     grid-template-rows: min-content 1fr 2fr min-content;
     grid-template-areas:
-      "top top top"
-      "main main next"
-      "main main note"
-      "bottom bottom bottom";
+      'top top top'
+      'main main next'
+      'main main note'
+      'bottom bottom bottom';
   }
 }
 
 .progress-bar {
-  @apply fixed left-0 right-0 bottom-0;
+  --uno: fixed left-0 right-0 bottom-0;
 }
 
 .grid-section {
-  @apply bg-main;
-
-  &.top {
-    grid-area: top;
-  }
-  &.main {
-    grid-area: main;
-  }
-  &.next {
-    grid-area: next;
-  }
-  &.note {
-    grid-area: note;
-  }
-  &.bottom {
-    grid-area: bottom;
-  }
+  --uno: bg-main;
 }
 
+.grid-section.top {
+  grid-area: top;
+}
+.grid-section.main {
+  grid-area: main;
+}
+.grid-section.next {
+  grid-area: next;
+}
+.grid-section.note {
+  grid-area: note;
+}
+.grid-section.bottom {
+  grid-area: bottom;
+}
 .context {
-  @apply absolute top-0 left-0 px-1 text-xs bg-gray-400 bg-opacity-50 opacity-75 rounded-br-md;
+  position: absolute;
+  top: 0;
+  left: 0;
+  --uno: px-1 text-xs bg-gray-400 bg-opacity-50 opacity-75 rounded-br-md;
 }
 </style>
diff --git a/packages/client/shim-vue.d.ts b/packages/client/shim-vue.d.ts
@@ -1,6 +1,5 @@
 declare module 'vue' {
   import type { UnwrapNestedRefs } from 'vue'
-  import { computed } from 'vue'
   import type { SlidevContext } from './modules/context'
 
   interface ComponentCustomProperties {

diff --git a/packages/client/styles/code.css b/packages/client/styles/code.css
@@ -59,15 +59,17 @@ html:not(.dark) .shiki span {
 .slidev-code-line-numbers .slidev-code code .line::before {
   content: counter(step);
   counter-increment: step;
-  @apply w-4 mr-6 inline-block text-right text-gray-400 dark:text-gray-600;
+  display: inline-block;
+  text-align: right;
+  --uno: w-4 mr-6 text-gray-400 dark:text-gray-600;
 }
 
 /* Inline Code */
 .slidev-layout :not(pre) > code {
   font-size: 0.9em;
   background: var(--slidev-code-background);
   border-radius: var(--slidev-code-radius);
-  @apply font-light py-0.5 px-1.5;
+  --uno: font-light py-0.5 px-1.5;
 }
 
 .slidev-layout :not(pre) > code:before {
@@ -82,4 +84,6 @@ html:not(.dark) .shiki span {
 }
 
 /* CodeMirror */
-.CodeMirror pre.CodeMirror-placeholder { opacity: 0.4; }
+.CodeMirror pre.CodeMirror-placeholder {
+  opacity: 0.4;
+}
diff --git a/packages/client/styles/index.css b/packages/client/styles/index.css
@@ -23,27 +23,30 @@ html {
 }
 
 .slidev-icon-btn.shallow {
-  @apply opacity-30
+  opacity: 0.3;
 }
 
 .slidev-icon-btn.active {
-  @apply opacity-100
+  opacity: 1;
 }
 
 .slidev-icon-btn.disabled {
-  @apply opacity-25 pointer-events-none;
+  opacity: 0.25;
+  pointer-events: none;
 }
 
 .slidev-vclick-target {
   @apply transition-opacity duration-100;
 }
 
 .slidev-vclick-hidden {
-  @apply !opacity-0 !pointer-events-none;
+  opacity: 0 !important;
+  pointer-events: none !important;
+  user-select: none !important;
 }
 
 .slidev-vclick-fade {
-  @apply opacity-50;
+  opacity: 0.5;
 }
 
 .slidev-icon {
@@ -53,7 +56,11 @@ html {
 }
 
 .slidev-page {
-  @apply absolute top-0 left-0 right-0 w-full relative;
+  position: relative;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
 }
 
 /* Transform the position back for Rough Notation (v-mark) */

diff --git a/packages/client/styles/katex.css b/packages/client/styles/katex.css
@@ -2,4 +2,4 @@
 }
 .slidev-katex-wrapper .mord.dishonored {
   opacity: 0.3;
-}
+}
diff --git a/packages/client/styles/layouts-base.css b/packages/client/styles/layouts-base.css
@@ -1,7 +1,8 @@
 .slidev-layout {
   @apply px-14 py-10 text-[1.1rem] h-full;
 
-  pre, code {
+  pre,
+  code {
     @apply select-text;
   }
 
@@ -79,11 +80,13 @@
     @apply border-current border-b border-dashed hover:text-primary hover:border-solid;
   }
 
-  td, th {
+  td,
+  th {
     @apply p-2 py-3;
   }
 
-  b, strong {
+  b,
+  strong {
     @apply font-600;
   }
 
@@ -94,8 +97,8 @@
 }
 
 .slidev-layout,
-[dir=ltr],
-.slidev-layout [dir=ltr] {
+[dir='ltr'],
+.slidev-layout [dir='ltr'] {
   h1 {
     @apply -ml-[0.05em] mr-0;
   }
@@ -109,10 +112,10 @@
   }
 }
 
-[dir=rtl],
-.slidev-layout [dir=rtl] {
+[dir='rtl'],
+.slidev-layout [dir='rtl'] {
   h1 {
-    @apply -mr-[0.05em] ml-0; 
+    @apply -mr-[0.05em] ml-0;
   }
 
   h6 {

diff --git a/packages/client/styles/vars.css b/packages/client/styles/vars.css
@@ -7,7 +7,7 @@
   --slidev-code-line-height: 18px;
   --slidev-code-radius: 4px;
   --slidev-code-margin: 4px 0;
-  --slidev-theme-primary: #3AB9D5;
+  --slidev-theme-primary: #3ab9d5;
 
   --slidev-transition-duration: 0.5s;
   --slidev-slide-container-background: black;