refactor(types): remove unnecessary types

empathyco · Nov 25, 2024 · 7397219 · 7397219
1 parent bd63dd9
commit 7397219
Show file tree

Hide file tree

Showing 30 changed files with 38 additions and 60 deletions.
diff --git a/packages/x-components/src/tailwind/plugin-options.ts b/packages/x-components/src/tailwind/plugin-options.ts
@@ -1,3 +1 @@
-import { PluginOptions } from '@empathyco/x-tailwindcss';
-
-export default {} as PluginOptions;
+export default {};
diff --git a/packages/x-tailwindcss/demo/src/components/xds-base-showcase.vue b/packages/x-tailwindcss/demo/src/components/xds-base-showcase.vue
@@ -18,7 +18,7 @@
       </div>
     </div>
     <div
-      class="bg-neutral-25 pointer-events-none fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 p-8 transition-opacity duration-300"
+      class="pointer-events-none fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-gray-300 p-8 transition-opacity duration-300"
       :class="isMessageVisible ? 'opacity-100' : 'opacity-0'"
     >
       CSS classes copied to Clipboard!

diff --git a/packages/x-tailwindcss/demo/src/components/xds-layout-fixed-header.vue b/packages/x-tailwindcss/demo/src/components/xds-layout-fixed-header.vue
@@ -6,7 +6,7 @@
     <div class="modal bg-white">
       <div :class="[cssClass, 'x-layout-min-margin-48 bg-gray-100']">
         <div class="x-scroll flex flex-col">
-          <div class="x-layout-item bg-neutral-0 border-b-1 border-neutral-25 sticky top-0">
+          <div class="x-layout-item border-b-1 sticky top-0 border-gray-300 bg-white">
             <div class="flex items-center justify-between py-2">
               <span class="x-title3">FIXED HEADER LAYOUT</span>
               <label for="layout-fixed-header-modal" class="x-button x-button-ghost ml-auto">
@@ -21,7 +21,7 @@
             </div>
           </div>
 
-          <div class="x-layout-item border-b-1 x-border-neutral-25">
+          <div class="x-layout-item border-b-1 border-gray-300">
             <div class="x-title3 flex justify-center p-4">SUBHEADER</div>
           </div>
 

diff --git a/packages/x-tailwindcss/demo/src/components/xds-layout-two-columns.vue b/packages/x-tailwindcss/demo/src/components/xds-layout-two-columns.vue
@@ -5,7 +5,7 @@
 
     <div class="modal bg-gray-100">
       <div :class="[cssClass, 'x-layout-min-margin-48']">
-        <div class="x-layout-item border-b-1 x-border-neutral-25 bg-white">
+        <div class="x-layout-item border-b-1 border-gray-300 bg-white">
           <div class="flex items-center justify-between py-2">
             <span class="x-title3">TWO COLUMNS LAYOUT</span>
             <label for="layout-two-columns-modal" class="x-button x-button-ghost ml-auto">
@@ -14,15 +14,15 @@
           </div>
         </div>
 
-        <div class="x-layout-item border-b-1 x-border-neutral-25">
+        <div class="x-layout-item border-b-1 border-gray-300">
           <div class="flex items-center justify-between py-4">
             <div class="x-title3">HEADER START</div>
             <div class="x-title2">HEADER MIDDLE</div>
             <div class="x-title3">HEADER END</div>
           </div>
         </div>
 
-        <div class="x-layout-item border-b-1 x-border-neutral-25">
+        <div class="x-layout-item border-b-1 border-gray-300">
           <div class="x-title3 flex justify-center p-4">SUB HEADER</div>
         </div>
 

diff --git a/packages/x-tailwindcss/demo/tailwind.config.ts b/packages/x-tailwindcss/demo/tailwind.config.ts
@@ -2,5 +2,5 @@ import xTailwindCss from '../src/x-tailwind-plugin/plugin';
 
 export default {
   content: ['./index.html', './**/*.vue'],
-  plugins: [xTailwindCss({})]
+  plugins: [xTailwindCss]
 };
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components.ts
@@ -1,3 +1,4 @@
+import { CSSRuleObject } from 'tailwindcss/types/config';
 import { TailwindHelpers } from '../types';
 import { inputGroup } from './components/input-group';
 import { variables } from './components/variables';
@@ -19,7 +20,6 @@ import { badge } from './components/badge';
 import { attach } from './components/attach';
 import { facetFilter } from './components/facet-filter';
 import { progressBar } from './components/progress-bar';
-import { CSSRuleObject } from 'tailwindcss/types/config';
 
 /**
  * Default component styles.
@@ -29,7 +29,7 @@ import { CSSRuleObject } from 'tailwindcss/types/config';
  *
  * @public
  */
-export default function components(helpers: TailwindHelpers): CSSRuleObject {
+export default function components(helpers: TailwindHelpers) {
   return {
     ...variables(helpers),
     ...button(helpers),
@@ -52,5 +52,5 @@ export default function components(helpers: TailwindHelpers): CSSRuleObject {
     ...facetFilter(helpers),
     ...progressBar(helpers),
     ...attach(helpers)
-  };
+  } as unknown as CSSRuleObject;
 }
diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/attach/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/attach/index.ts
@@ -1,5 +1,4 @@
 import { TailwindHelpers } from '../../../types';
-import { CSSRuleObject } from 'tailwindcss/types/config';
 
 /**
  * Returns the component util `attach` CSS, used to place components on top of others.
@@ -8,7 +7,7 @@ import { CSSRuleObject } from 'tailwindcss/types/config';
  * @returns The {@link CssStyleOptions} for the component.
  */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export function attach(helpers: TailwindHelpers): CSSRuleObject {
+export function attach(helpers: TailwindHelpers) {
   return {
     '.x-attach-container': {
       position: 'relative'

diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/badge/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/badge/index.ts
@@ -7,15 +7,14 @@ import { badgeLight } from './light';
 import { badgeOutlined } from './outlined';
 import { badgeCircle } from './circle';
 import { badgeBright } from './bright';
-import { CSSRuleObject } from 'tailwindcss/types/config';
 
 /**
  * Returns the component `badge` CSS.
  *
  * @param helpers - The {@link TailwindHelpers} to generate CSS.
  * @returns The {@link CssStyleOptions} for the component.
  */
-export function badge(helpers: TailwindHelpers): CSSRuleObject {
+export function badge(helpers: TailwindHelpers) {
   return {
     '.x-badge': {
       ...badgeDefault(helpers),

diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button-group/default.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button-group/default.ts
@@ -1,13 +1,12 @@
 import { TailwindHelpers } from '../../../types';
-import { CSSRuleObject } from 'tailwindcss/types/config';
 
 /**
  * Returns the default styles for component `button-group`.
  *
  * @param helpers - The {@link TailwindHelpers} to generate CSS.
  * @returns The {@link CssStyleOptions} for the component.
  */
-export function buttonGroupDefault(helpers: TailwindHelpers): CSSRuleObject {
+export function buttonGroupDefault(helpers: TailwindHelpers) {
   const { theme } = helpers;
 
   return {

diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button-group/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button-group/index.ts
@@ -2,15 +2,14 @@ import { rename } from '@empathyco/x-utils';
 import { TailwindHelpers } from '../../../types';
 import { buttonGroupDefault } from './default';
 import { buttonGroupDivider } from './divider';
-import { CSSRuleObject } from 'tailwindcss/types/config';
 
 /**
  * Returns the component `button-group` CSS.
  *
  * @param helpers - The {@link TailwindHelpers} to generate CSS.
  * @returns The {@link CssStyleOptions} for the component.
  */
-export function buttonGroup(helpers: TailwindHelpers): CSSRuleObject {
+export function buttonGroup(helpers: TailwindHelpers) {
   return {
     '.x-button-group': {
       ...buttonGroupDefault(helpers),

diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/button/index.ts
@@ -10,15 +10,14 @@ import { buttonLayouts } from './layouts';
 import { buttonLink } from './link';
 import { buttonOutlined } from './outlined';
 import { buttonSizes } from './sizes';
-import { CSSRuleObject } from 'tailwindcss/types/config';
 
 /**
  * Returns the component `button` CSS.
  *
  * @param helpers - The {@link TailwindHelpers} to generate CSS.
  * @returns The {@link CssStyleOptions} for the component.
  */
-export function button(helpers: TailwindHelpers): CSSRuleObject {
+export function button(helpers: TailwindHelpers) {
   return {
     '.x-button': deepMerge(
       buttonDefault(helpers),

diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/facet-filter/index.ts
@@ -7,15 +7,14 @@ import { facetFilterGhost } from './ghost';
 import { facetFilterSimple } from './simple';
 import { facetFilterSizes } from './sizes';
 import { facetFilterUnderline } from './underline';
-import { CSSRuleObject } from 'tailwindcss/types/config';
 
 /**
  * Returns the component `facet-filter` CSS.
  *
  * @param helpers - The {@link TailwindHelpers} to generate CSS.
  * @returns The {@link CssStyleOptions} for the component.
  */
-export function facetFilter(helpers: TailwindHelpers): CSSRuleObject {
+export function facetFilter(helpers: TailwindHelpers) {
   return {
     '.x-facet-filter': deepMerge(
       facetFilterDefault(helpers),

diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/highlight/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/highlight/index.ts
@@ -1,6 +1,5 @@
 import { TailwindHelpers } from '../../../types';
 import { highlightDefault } from './default';
-import { CSSRuleObject } from 'tailwindcss/types/config';
 
 /**
  * Returns the `highlight` component CSS. The highlight component serves to emphasize certain part
@@ -10,7 +9,7 @@ import { CSSRuleObject } from 'tailwindcss/types/config';
  * @returns The {@link CssStyleOptions} for the component.
  */
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-export function highlight(helpers: TailwindHelpers): CSSRuleObject {
+export function highlight(helpers: TailwindHelpers) {
   return {
     '.x-highlight-text': {
       ...highlightDefault(helpers)

diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/icon/index.ts
@@ -6,15 +6,14 @@ import { iconBackgroundColors } from './background-colors';
 import { iconSharp } from './sharp';
 import { iconSizes } from './sizes';
 import { iconStrokeWidths } from './stroke-widths';
-import { CSSRuleObject } from 'tailwindcss/types/config';
 
 /**
  * Returns the component `icon` CSS.
  *
  * @param helpers - The {@link TailwindHelpers} to generate CSS.
  * @returns The {@link CssStyleOptions} for the component.
  */
-export function icon(helpers: TailwindHelpers): CSSRuleObject {
+export function icon(helpers: TailwindHelpers) {
   return {
     '.x-icon': Object.assign(
       iconDefault(helpers),

diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/input-group/index.ts
@@ -6,15 +6,14 @@ import { inputGroupColors } from './colors';
 import { inputGroupDefault } from './default';
 import { inputGroupLine } from './line';
 import { inputGroupSizes } from './sizes';
-import { CSSRuleObject } from 'tailwindcss/types/config';
 
 /**
  * Returns the component `input-group` CSS.
  *
  * @param helpers - The {@link TailwindHelpers} to generate CSS.
  * @returns The {@link CssStyleOptions} for the component.
  */
-export function inputGroup(helpers: TailwindHelpers): CSSRuleObject {
+export function inputGroup(helpers: TailwindHelpers) {
   return {
     '.x-input-group': deepMerge(
       inputGroupDefault(helpers),

diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/input/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/input/index.ts
@@ -5,15 +5,14 @@ import { inputDefault } from './default';
 import { inputColors } from './colors';
 import { inputSizes } from './sizes';
 import { inputLine } from './line';
-import { CSSRuleObject } from 'tailwindcss/types/config';
 
 /**
  * Returns the component `input` CSS.
  *
  * @param helpers - The {@link TailwindHelpers} to generate CSS.
  * @returns The {@link CssStyleOptions} for the component.
  */
-export function input(helpers: TailwindHelpers): CSSRuleObject {
+export function input(helpers: TailwindHelpers) {
   return {
     '.x-input': deepMerge(
       inputDefault(helpers),

diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/layout/index.ts
@@ -6,15 +6,14 @@ import { minMargin } from './min-margin';
 import { item } from './item';
 import { maxWidth } from './max-width';
 import { utils } from './utils';
-import { CSSRuleObject } from 'tailwindcss/types/config';
 
 /**
  * Returns the component `layout` CSS.
  *
  * @param helpers - The {@link TailwindHelpers} to generate CSS.
  * @returns The {@link CssStyleOptions} for the component.
  */
-export function layout(helpers: TailwindHelpers): CSSRuleObject {
+export function layout(helpers: TailwindHelpers) {
   return {
     '.x-layout': rename(
       {

diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/picture/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/picture/index.ts
@@ -3,15 +3,14 @@ import { TailwindHelpers } from '../../../types';
 import { pictureDefault } from './default';
 import { overlay } from './overlay';
 import { zoom } from './zoom';
-import { CSSRuleObject } from 'tailwindcss/types/config';
 
 /**
  * Returns the component `picture` CSS.
  *
  * @param helpers - The {@link TailwindHelpers} to generate CSS.
  * @returns The {@link CssStyleOptions} for the component.
  */
-export function picture(helpers: TailwindHelpers): CSSRuleObject {
+export function picture(helpers: TailwindHelpers) {
   return {
     '.x-picture': {
       ...pictureDefault(helpers),

diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/progress-bar/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/progress-bar/index.ts
@@ -4,15 +4,14 @@ import { TailwindHelpers } from '../../../types';
 import { progressBarDefault } from './default';
 import { progressBarSizes } from './sizes';
 import { progressBarColors } from './colors';
-import { CSSRuleObject } from 'tailwindcss/types/config';
 
 /**
  * Returns the component `progress-bar` CSS.
  *
  * @param helpers - The {@link TailwindHelpers} to generate CSS.
  * @returns The {@link CssStyleOptions} for the component.
  */
-export function progressBar(helpers: TailwindHelpers): CSSRuleObject {
+export function progressBar(helpers: TailwindHelpers) {
   return {
     '.x-progress-bar': deepMerge(
       progressBarDefault(helpers),

diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/scroll/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/scroll/index.ts
@@ -1,13 +1,13 @@
 import { TailwindHelpers } from '../../../types';
 import { scrollDefault } from './default';
-import { CSSRuleObject } from 'tailwindcss/types/config';
+
 /**
  * Returns the component `scroll` CSS.
  *
  * @param helpers - The {@link TailwindHelpers} to generate CSS.
  * @returns The {@link CssStyleOptions} for the component.
  */
-export function scroll(helpers: TailwindHelpers): CSSRuleObject {
+export function scroll(helpers: TailwindHelpers) {
   return {
     '.x-scroll': {
       ...scrollDefault(helpers)

diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/sliding-panel/index.ts
@@ -2,15 +2,14 @@ import { deepMerge } from '@empathyco/x-deep-merge';
 import { TailwindHelpers } from '../../../types';
 import { slidingPanelDefault } from './default';
 import { slidingPanelFade } from './fade';
-import { CSSRuleObject } from 'tailwindcss/types/config';
 
 /**
  * Returns the component `sliding panel` CSS.
  *
  * @param helpers - The {@link TailwindHelpers} to generate CSS.
  * @returns The {@link CssStyleOptions} for the component.
  */
-export function slidingPanel(helpers: TailwindHelpers): CSSRuleObject {
+export function slidingPanel(helpers: TailwindHelpers) {
   return {
     '.x-sliding-panel': {
       ...deepMerge(slidingPanelDefault(), slidingPanelFade(helpers))

diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/button/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/button/index.ts
@@ -5,15 +5,14 @@ import { suggestionGroupButtonGhost } from './ghost';
 import { suggestionGroupButtonRectangle } from './rectangle';
 import { suggestionGroupLighterColors } from './lighter-colors';
 import { suggestionGroupButtonLighter } from './lighter';
-import { CSSRuleObject } from 'tailwindcss/types/config';
 
 /**
  * Returns the component `suggestion group button` CSS.
  *
  * @param helpers - The {@link TailwindHelpers} to generate CSS.
  * @returns The {@link CssStyleOptions} for the component.
  */
-export function suggestionGroupButton(helpers: TailwindHelpers): CSSRuleObject {
+export function suggestionGroupButton(helpers: TailwindHelpers) {
   return {
     '.x-suggestion-group-button': {
       ...suggestionGroupButtonDefault(),

diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion-group/index.ts
@@ -5,15 +5,14 @@ import { suggestionGroupColors } from './colors';
 import { suggestionGroupSizes } from './sizes';
 import { suggestionGroupOutlined } from './outlined';
 import { suggestionGroupGhost } from './ghost';
-import { CSSRuleObject } from 'tailwindcss/types/config';
 
 /**
  * Returns the component `suggestion group` CSS.
  *
  * @param helpers - The {@link TailwindHelpers} to generate CSS.
  * @returns The {@link CssStyleOptions} for the component.
  */
-export function suggestionGroup(helpers: TailwindHelpers): CSSRuleObject {
+export function suggestionGroup(helpers: TailwindHelpers) {
   return {
     '.x-suggestion-group': {
       ...suggestionGroupDefault(helpers),

diff --git a/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion/index.ts b/packages/x-tailwindcss/src/x-tailwind-plugin/components/suggestion/index.ts
@@ -5,15 +5,14 @@ import { suggestionColors } from './colors';
 import { suggestionGhost } from './ghost';
 import { suggestionOutlined } from './outlined';
 import { suggestionSizes } from './sizes';
-import { CSSRuleObject } from 'tailwindcss/types/config';
 
 /**
  * Returns the component `suggestion` CSS.
  *
  * @param helpers - The {@link TailwindHelpers} to generate CSS.
  * @returns The {@link CssStyleOptions} for the component.
  */
-export function suggestion(helpers: TailwindHelpers): CSSRuleObject {
+export function suggestion(helpers: TailwindHelpers) {
   return {
     '.x-suggestion': {
       ...suggestionDefault(helpers),