build: custom-elements config (wip)

build/src/tasks/full-bundle.ts

@@ -7,10 +7,12 @@ import DefineOptions from 'unplugin-vue-define-options/rollup'
 import esbuild from 'rollup-plugin-esbuild'
 import { parallel } from 'gulp'
 import glob from 'fast-glob'
+import postcss from 'rollup-plugin-postcss'
 import { camelCase, upperFirst } from 'lodash-unified'
 import { version } from '../../../packages/puik/version'
 import { PuikAlias } from '../plugins/puik-alias'
 import {
+  themeRoot,
   puikRoot,
   puikOutput,
   localeRoot,
@@ -29,7 +31,15 @@ async function buildFullEntry(minify: boolean) {
     plugins: [
       PuikAlias(),
       vue({
+        preprocessStyles: true, // Preprocess styles with PostCSS
         isProduction: true,
+        customElement: true,
+      }),
+      postcss({
+        config: {
+          path: `${themeRoot}/postcss.config.js`,
+          ctx: {},
+        },
       }),
       DefineOptions(),
       nodeResolve({

packages/puik/component.ts

@@ -1,101 +1,103 @@
-import { PuikTag } from '@puik/components/tag'
-import { PuikChip } from '@puik/components/chip'
-import {
-  PuikTabNavigation,
-  PuikTabNavigationGroupPanels,
-  PuikTabNavigationTitle,
-  PuikTabNavigationGroupTitles,
-} from '@puik/components/tab-navigation'
-import {
-  PuikProgressStepper,
-  PuikProgressStepperStep,
-} from '@puik/components/progress-stepper'
-import { PuikTable } from '@puik/components/table'
-import { PuikSpinnerLoader } from '@puik/components/spinner-loader'
-import {
-  PuikSidebar,
-  PuikSidebarGroupItem,
-  PuikSidebarItem,
-  PuikSidebarTitle,
-} from '@puik/components/sidebar'
-import { PuikPagination } from '@puik/components/pagination'
-import { PuikTextarea } from '@puik/components/textarea'
-import { PuikBreadcrumb } from '@puik/components/breadcrumb'
 import { PuikAccordion, PuikAccordionGroup } from '@puik/components/accordion'
+import { PuikAlert } from '@puik/components/alert'
 import { PuikBadge } from '@puik/components/badge'
-import { PuikModal } from '@puik/components/modal'
+import { PuikBreadcrumb } from '@puik/components/breadcrumb'
+import { PuikButton, PuikButtonCe } from '@puik/components/button'
 import {
   PuikButtonGroup,
   PuikButtonGroupCe,
 } from '@puik/components/button-group'
+import { PuikCard } from '@puik/components/card'
+import { PuikCheckbox } from '@puik/components/checkbox'
+import { PuikChip } from '@puik/components/chip'
+import { PuikConfigProvider } from '@puik/components/config-provider'
+import { PuikIcon, PuikIconCe } from '@puik/components/icon'
+import { PuikInput, PuikInputCe } from '@puik/components/input'
+import { PuikLabel } from '@puik/components/label'
+import { PuikLink } from '@puik/components/link'
 import {
   PuikMenu,
   PuikMenuItem,
   PuikMenuItemSeparator,
   PuikMenuItemTitle,
 } from '@puik/components/menu'
+import { PuikModal } from '@puik/components/modal'
+import { PuikPagination } from '@puik/components/pagination'
 import { PuikProgressBar } from '@puik/components/progress-bar'
-import { PuikIcon } from '@puik/components/icon'
-import { PuikLink } from '@puik/components/link'
-import { PuikCard } from '@puik/components/card'
-import { PuikSnackbar } from '@puik/components/snackbar'
-import { PuikLabel } from '@puik/components/label'
-import { PuikCheckbox } from '@puik/components/checkbox'
+import {
+  PuikProgressStepper,
+  PuikProgressStepperStep,
+} from '@puik/components/progress-stepper'
 import { PuikRadio } from '@puik/components/radio'
 import { PuikSelect, PuikOption } from '@puik/components/select'
-import { PuikAlert } from '@puik/components/alert'
-import { PuikTooltip } from '@puik/components/tooltip'
+import {
+  PuikSidebar,
+  PuikSidebarGroupItem,
+  PuikSidebarItem,
+  PuikSidebarTitle,
+} from '@puik/components/sidebar'
+import { PuikSnackbar } from '@puik/components/snackbar'
+import { PuikSpinnerLoader } from '@puik/components/spinner-loader'
 import { PuikSwitch } from '@puik/components/switch'
-import { PuikButton, PuikButtonCe } from '@puik/components/button'
-import { PuikInput, PuikInputCe } from '@puik/components/input'
-import { PuikConfigProvider } from '@puik/components/config-provider'
+import { PuikTable } from '@puik/components/table'
+import {
+  PuikTabNavigation,
+  PuikTabNavigationGroupPanels,
+  PuikTabNavigationTitle,
+  PuikTabNavigationGroupTitles,
+} from '@puik/components/tab-navigation'
+import { PuikTag } from '@puik/components/tag'
+import { PuikTextarea } from '@puik/components/textarea'
+import { PuikTooltip, PuikTooltipCe } from '@puik/components/tooltip'
 import type { Plugin } from 'vue'
 
 // prettier-ignore
 export default [
-  PuikTag,
-  PuikChip,
-  PuikTabNavigationGroupPanels,
-  PuikTabNavigationTitle,
-  PuikTabNavigationGroupTitles,
-  PuikTabNavigation,
-  PuikProgressStepper,
-  PuikProgressStepperStep,
-  PuikTable,
-  PuikSpinnerLoader,
-  PuikSidebar,
-  PuikSidebarGroupItem,
-  PuikSidebarItem,
-  PuikSidebarTitle,
-  PuikPagination,
-  PuikTextarea,
-  PuikBreadcrumb,
   PuikAccordion,
   PuikAccordionGroup,
+  PuikAlert,
   PuikBadge,
-  PuikModal,
+  PuikBreadcrumb,
+  PuikButton,
+  PuikButtonCe,
   PuikButtonGroup,
   PuikButtonGroupCe,
+  PuikCard,
+  PuikCheckbox,
+  PuikChip,
+  PuikConfigProvider,
+  PuikIcon,
+  PuikIconCe,
+  PuikInput,
+  PuikInputCe,
+  PuikLabel,
+  PuikLink,
   PuikMenu,
   PuikMenuItem,
   PuikMenuItemSeparator,
   PuikMenuItemTitle,
+  PuikModal,
+  PuikOption,
+  PuikPagination,
   PuikProgressBar,
-  PuikIcon,
-  PuikLink,
-  PuikCard,
-  PuikSnackbar,
-  PuikLabel,
+  PuikProgressStepper,
+  PuikProgressStepperStep,
   PuikRadio,
-  PuikInput,
-  PuikInputCe,
-  PuikCheckbox,
-  PuikOption,
   PuikSelect,
-  PuikAlert,
-  PuikTooltip,
+  PuikSidebar,
+  PuikSidebarGroupItem,
+  PuikSidebarItem,
+  PuikSidebarTitle,
+  PuikSnackbar,
+  PuikSpinnerLoader,
   PuikSwitch,
-  PuikButton,
-  PuikButtonCe,
-  PuikConfigProvider,
+  PuikTable,
+  PuikTabNavigation,
+  PuikTabNavigationGroupPanels,
+  PuikTabNavigationGroupTitles,
+  PuikTabNavigationTitle,
+  PuikTag,
+  PuikTextarea,
+  PuikTooltip,
+  PuikTooltipCe,
 ] as Plugin[]