refactor: spacer component styling

drop prop, prefer tailwind

Author: cossssmin

src/components/Spacer.vue

@@ -1,53 +1,48 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, h, useAttrs } from 'vue'
 import { normalizeToPixels, outlookFallbackProp } from './utils.ts'
 import { useOutlookFallback } from '../composables/useOutlookFallback'
 
+defineOptions({ inheritAttrs: false })
+
 const props = defineProps({
   /** The type of spacer. */
   type: {
     type: String as () => 'vertical' | 'horizontal',
     default: 'vertical'
   },
-  /** The height of the spacer (vertical). */
-  height: {
-    type: [String, Number],
-    default: null
-  },
   /** The width of the spacer (horizontal). */
   width: {
     type: [String, Number],
     default: 16
   },
-  /** The alternative height to use in Outlook. */
-  msoHeight: {
-    type: [String, Number],
-    default: null
-  },
   outlookFallback: outlookFallbackProp,
 })
 
+const attrs = useAttrs()
 const outlookFallback = useOutlookFallback(props.outlookFallback)
 
-function parsePixelValue(value: string | number): number {
-  if (typeof value === 'number') return value
-  return Number.parseFloat(value) || 0
-}
+const HEIGHT_RE = /(?:^|\s)h-([\w./\-[\]%]+)/g
+const LEADING_RE = /(?:^|\s)leading-/
 
-const verticalStyles = computed(() => {
-  const s = []
+const verticalClass = computed(() => {
+  const userClass = (attrs.class as string) || ''
+  if (!userClass) return ''
 
-  if (props.height) {
-    s.push(`line-height: ${normalizeToPixels(props.height)};`)
-  }
+  const heights = [...userClass.matchAll(HEIGHT_RE)]
+  const stripped = userClass.replace(HEIGHT_RE, ' ').replace(/\s+/g, ' ').trim()
 
-  if (outlookFallback && props.msoHeight) {
-    s.push(`mso-line-height-alt: ${normalizeToPixels(props.msoHeight)};`)
-  }
+  if (!heights.length) return stripped
+  if (LEADING_RE.test(stripped)) return stripped
 
-  return s.join('')
+  return `${stripped} leading-${heights[heights.length - 1][1]}`.trim()
 })
 
+function parsePixelValue(value: string | number): number {
+  if (typeof value === 'number') return value
+  return Number.parseFloat(value) || 0
+}
+
 const horizontalStyles = computed(() => {
   const mso = outlookFallback ? msoFontWidth.value : ''
   return `display:inline-block; width: ${normalizeToPixels(props.width)}; font-size: 16px;${mso}`
@@ -71,14 +66,20 @@ const emspCount = computed(() => {
 })
 
 const emsps = computed(() => '\u2003'.repeat(emspCount.value))
+
+const HorizontalSpacer = () =>
+  h('i', { ...attrs, style: horizontalStyles.value }, emsps.value)
 </script>
 
 <template>
   <template v-if="type === 'horizontal'">
-    <i :style="horizontalStyles">{{ emsps }}</i>
+    <HorizontalSpacer />
   </template>
   <template v-else>
-    <div v-if="height" role="separator" :style="verticalStyles">&zwj;</div>
-    <div v-else role="separator">&zwj;</div>
+    <div
+      role="separator"
+      v-bind="{ ...$attrs, class: undefined }"
+      :class="verticalClass"
+    >&zwj;</div>
   </template>
 </template>

src/tests/components/Spacer.test.ts

@@ -3,61 +3,64 @@ import { mount } from '@vue/test-utils'
 import Spacer from '../../components/Spacer.vue'
 
 describe('Spacer', () => {
-  describe('defaults', () => {
+  describe('vertical', () => {
     it('renders a div with role="separator"', () => {
       const wrapper = mount(Spacer)
       expect(wrapper.html()).toContain('role="separator"')
     })
 
-    it('renders without style attribute when no height is set', () => {
+    it('renders without inline style by default', () => {
       const wrapper = mount(Spacer)
-      expect(wrapper.html()).not.toContain('line-height:')
+      expect(wrapper.html()).not.toContain('style=')
     })
 
     it('contains zero-width joiner', () => {
       const wrapper = mount(Spacer)
       expect(wrapper.text()).toContain('\u200D')
     })
-  })
 
-  describe('height prop', () => {
-    it('sets line-height when provided as string', () => {
-      const wrapper = mount(Spacer, { props: { height: '32px' } })
-      expect(wrapper.html()).toContain('line-height: 32px')
+    it('passes through user leading-* class', () => {
+      const wrapper = mount(Spacer, { attrs: { class: 'leading-8' } })
+      expect(wrapper.html()).toContain('leading-8')
     })
 
-    it('accepts a number and adds px suffix', () => {
-      const wrapper = mount(Spacer, { props: { height: 24 } })
-      expect(wrapper.html()).toContain('line-height: 24px')
+    it('passes through arbitrary mso-line-height-alt class', () => {
+      const wrapper = mount(Spacer, {
+        attrs: { class: 'leading-8 [mso-line-height-alt:40px]' },
+      })
+      const html = wrapper.html()
+      expect(html).toContain('leading-8')
+      expect(html).toContain('[mso-line-height-alt:40px]')
     })
 
-    it('preserves non-numeric string values', () => {
-      const wrapper = mount(Spacer, { props: { height: '2rem' } })
-      expect(wrapper.html()).toContain('line-height: 2rem')
-    })
-  })
-
-  describe('msoHeight prop', () => {
-    it('sets mso-line-height-alt', () => {
-      const wrapper = mount(Spacer, { props: { height: '32px', msoHeight: '40px' } })
-      expect(wrapper.html()).toContain('mso-line-height-alt: 40px')
+    it('rewrites h-* to leading-*', () => {
+      const wrapper = mount(Spacer, { attrs: { class: 'h-4' } })
+      const html = wrapper.html()
+      expect(html).toContain('leading-4')
+      expect(html).not.toContain('h-4')
     })
 
-    it('accepts a number and adds px suffix', () => {
-      const wrapper = mount(Spacer, { props: { height: '32px', msoHeight: 48 } })
-      expect(wrapper.html()).toContain('mso-line-height-alt: 48px')
+    it('rewrites arbitrary h-[3px] to leading-[3px]', () => {
+      const wrapper = mount(Spacer, { attrs: { class: 'h-[3px]' } })
+      const html = wrapper.html()
+      expect(html).toContain('leading-[3px]')
+      expect(html).not.toContain('h-[3px]')
     })
-  })
 
-  describe('conditional rendering', () => {
-    it('renders with style when height is provided', () => {
-      const wrapper = mount(Spacer, { props: { height: '16px' } })
-      expect(wrapper.html()).toContain('style=')
+    it('drops h-* when leading-* also passed', () => {
+      const wrapper = mount(Spacer, { attrs: { class: 'h-4 leading-none' } })
+      const html = wrapper.html()
+      expect(html).toContain('leading-none')
+      expect(html).not.toContain('h-4')
+      expect(html).not.toContain('leading-4')
     })
 
-    it('renders without style when no height is provided', () => {
-      const wrapper = mount(Spacer)
-      expect(wrapper.html()).not.toContain('style=')
+    it('preserves other classes alongside h-* rewrite', () => {
+      const wrapper = mount(Spacer, { attrs: { class: 'h-4 my-2' } })
+      const html = wrapper.html()
+      expect(html).toContain('my-2')
+      expect(html).toContain('leading-4')
+      expect(html).not.toContain('h-4')
     })
   })
 
@@ -126,14 +129,6 @@ describe('Spacer', () => {
   })
 
   describe('outlookFallback=false', () => {
-    it('omits mso-line-height-alt on vertical', () => {
-      const html = mount(Spacer, {
-        props: { outlookFallback: false, height: 32, msoHeight: 24 },
-      }).html()
-      expect(html).toContain('line-height: 32px')
-      expect(html).not.toContain('mso-line-height-alt')
-    })
-
     it('omits mso-font-width on horizontal', () => {
       const html = mount(Spacer, {
         props: { outlookFallback: false, type: 'horizontal', width: 32 },