From dc2913e887259d43b56daba91e6ea97023edf017 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Mon, 2 Oct 2023 11:46:09 +0100
Subject: [PATCH] Fixed #4530 - Export styles of all components

---
 .editorconfig                                 |  13 +
 .vscode/settings.team.json                    |   4 +
 build-meta.js                                 |  14 +-
 components/lib/accordion/BaseAccordion.vue    |  54 +-
 components/lib/accordion/package.json         |  16 +-
 .../lib/accordion/style/AccordionStyle.js     |  52 +
 components/lib/accordion/style/package.json   |   5 +
 .../lib/accordiontab/BaseAccordionTab.vue     |   2 +
 components/lib/accordiontab/package.json      |  16 +-
 .../accordiontab/style/AccordionTabStyle.js   |   1 +
 .../lib/accordiontab/style/package.json       |   5 +
 .../lib/autocomplete/BaseAutoComplete.vue     | 156 +--
 components/lib/autocomplete/package.json      |  16 +-
 .../autocomplete/style/AutoCompleteStyle.js   | 154 +++
 .../lib/autocomplete/style/package.json       |   5 +
 components/lib/avatar/BaseAvatar.vue          |  57 +-
 components/lib/avatar/package.json            |  16 +-
 components/lib/avatar/style/AvatarStyle.js    |  55 +
 components/lib/avatar/style/package.json      |   5 +
 .../lib/avatargroup/BaseAvatarGroup.vue       |  26 +-
 components/lib/avatargroup/package.json       |  16 +-
 .../lib/avatargroup/style/AvatarGroupStyle.js |  24 +
 components/lib/avatargroup/style/package.json |   5 +
 components/lib/badge/BaseBadge.vue            |  63 +-
 components/lib/badge/package.json             |  16 +-
 components/lib/badge/style/BadgeStyle.js      |  61 ++
 components/lib/badge/style/package.json       |   5 +
 .../lib/badgedirective/BaseBadgeDirective.js  |  50 +-
 components/lib/badgedirective/package.json    |  10 +-
 .../style/BadgeDirectiveStyle.js              |  48 +
 .../lib/badgedirective/style/package.json     |   5 +
 components/lib/base/Base.js                   |  33 +-
 components/lib/base/style/BaseStyle.js        |  48 +
 components/lib/base/style/package.json        |   5 +
 .../lib/basecomponent/BaseComponent.vue       | 379 +------
 components/lib/basecomponent/package.json     |  16 +-
 .../basecomponent/style/BaseComponentStyle.js | 364 +++++++
 .../lib/basecomponent/style/package.json      |   5 +
 components/lib/basedirective/BaseDirective.js |  12 +-
 components/lib/baseicon/BaseIcon.vue          |  39 +-
 components/lib/baseicon/package.json          |  14 +-
 .../lib/baseicon/style/BaseIconStyle.js       |  39 +
 components/lib/baseicon/style/package.json    |   5 +
 components/lib/blockui/BaseBlockUI.vue        |  29 +-
 components/lib/blockui/package.json           |  16 +-
 components/lib/blockui/style/BlockUIStyle.js  |  27 +
 components/lib/blockui/style/package.json     |   5 +
 components/lib/breadcrumb/BaseBreadcrumb.vue  |  62 +-
 components/lib/breadcrumb/package.json        |  17 +-
 .../lib/breadcrumb/style/BreadcrumbStyle.js   |  60 ++
 components/lib/breadcrumb/style/package.json  |   5 +
 components/lib/button/BaseButton.vue          |  38 +-
 components/lib/button/package.json            |  16 +-
 components/lib/button/style/ButtonStyle.js    |  40 +
 components/lib/button/style/package.json      |   5 +
 components/lib/calendar/BaseCalendar.vue      | 229 +----
 components/lib/calendar/package.json          |  16 +-
 .../lib/calendar/style/CalendarStyle.js       | 227 +++++
 components/lib/calendar/style/package.json    |   5 +
 components/lib/card/BaseCard.vue              |  15 +-
 components/lib/card/package.json              |  16 +-
 components/lib/card/style/CardStyle.js        |  17 +
 components/lib/card/style/package.json        |   5 +
 components/lib/carousel/BaseCarousel.vue      | 137 +--
 components/lib/carousel/package.json          |  16 +-
 .../lib/carousel/style/CarouselStyle.js       | 135 +++
 components/lib/carousel/style/package.json    |   5 +
 .../lib/cascadeselect/BaseCascadeSelect.vue   | 144 +--
 components/lib/cascadeselect/package.json     |  16 +-
 .../cascadeselect/style/CascadeSelectStyle.js | 142 +++
 .../lib/cascadeselect/style/package.json      |   5 +
 components/lib/chart/BaseChart.vue            |  21 +-
 components/lib/chart/package.json             |  16 +-
 components/lib/chart/style/ChartStyle.js      |  19 +
 components/lib/chart/style/package.json       |   5 +
 components/lib/checkbox/BaseCheckbox.vue      |  25 +-
 components/lib/checkbox/package.json          |  16 +-
 .../lib/checkbox/style/CheckboxStyle.js       |  27 +
 components/lib/checkbox/style/package.json    |   5 +
 components/lib/chip/BaseChip.vue              |  47 +-
 components/lib/chip/package.json              |  16 +-
 components/lib/chip/style/ChipStyle.js        |  45 +
 components/lib/chip/style/package.json        |   5 +
 components/lib/chips/BaseChips.vue            |  76 +-
 components/lib/chips/package.json             |  16 +-
 components/lib/chips/style/ChipsStyle.js      |  74 ++
 components/lib/chips/style/package.json       |   5 +
 .../lib/colorpicker/BaseColorPicker.vue       |  41 +-
 components/lib/colorpicker/package.json       |  16 +-
 .../lib/colorpicker/style/ColorPickerStyle.js |  39 +
 components/lib/colorpicker/style/package.json |   5 +
 components/lib/column/BaseColumn.vue          |   2 +
 components/lib/column/package.json            |  16 +-
 components/lib/column/style/ColumnStyle.js    |   1 +
 components/lib/column/style/package.json      |   5 +
 .../lib/columngroup/BaseColumnGroup.vue       |   2 +
 components/lib/columngroup/package.json       |  16 +-
 .../lib/columngroup/style/ColumnGroupStyle.js |   1 +
 components/lib/columngroup/style/package.json |   5 +
 components/lib/config/package.json            |  10 +-
 .../lib/confirmationeventbus/package.json     |   2 +-
 .../lib/confirmationservice/package.json      |  10 +-
 .../lib/confirmdialog/BaseConfirmDialog.vue   |  13 +-
 components/lib/confirmdialog/package.json     |  16 +-
 .../confirmdialog/style/ConfirmDialogStyle.js |  15 +
 .../lib/confirmdialog/style/package.json      |   5 +
 .../lib/confirmpopup/BaseConfirmPopup.vue     |  99 +-
 components/lib/confirmpopup/package.json      |  16 +-
 .../confirmpopup/style/ConfirmPopupStyle.js   |  97 ++
 .../lib/confirmpopup/style/package.json       |   5 +
 .../lib/contextmenu/BaseContextMenu.vue       |  86 +-
 components/lib/contextmenu/package.json       |  16 +-
 .../lib/contextmenu/style/ContextMenuStyle.js |  84 ++
 components/lib/contextmenu/style/package.json |   5 +
 components/lib/datatable/BaseDataTable.vue    | 475 +--------
 components/lib/datatable/package.json         |  16 +-
 .../lib/datatable/style/DataTableStyle.js     | 473 +++++++++
 components/lib/datatable/style/package.json   |   5 +
 components/lib/dataview/BaseDataView.vue      |  22 +-
 components/lib/dataview/package.json          |  16 +-
 .../lib/dataview/style/DataViewStyle.js       |  24 +
 components/lib/dataview/style/package.json    |   5 +
 .../BaseDataViewLayoutOptions.vue             |  21 +-
 .../lib/dataviewlayoutoptions/package.json    |  16 +-
 .../style/DataViewLayoutOptionsStyle.js       |  23 +
 .../dataviewlayoutoptions/style/package.json  |   5 +
 .../lib/deferredcontent/DeferredContent.vue   |   2 +
 components/lib/deferredcontent/package.json   |  16 +-
 .../style/DeferredContentStyle.js             |   1 +
 .../lib/deferredcontent/style/package.json    |   5 +
 components/lib/dialog/BaseDialog.vue          | 199 +---
 components/lib/dialog/package.json            |  16 +-
 components/lib/dialog/style/DialogStyle.js    | 197 ++++
 components/lib/dialog/style/package.json      |   5 +
 components/lib/divider/BaseDivider.vue        |  98 +-
 components/lib/divider/package.json           |  16 +-
 components/lib/divider/style/DividerStyle.js  |  96 ++
 components/lib/divider/style/package.json     |   5 +
 components/lib/dock/BaseDock.vue              | 146 +--
 components/lib/dock/package.json              |   4 +-
 components/lib/dock/style/DockStyle.js        | 144 +++
 components/lib/dock/style/package.json        |   5 +
 components/lib/dropdown/BaseDropdown.vue      | 154 +--
 components/lib/dropdown/package.json          |  16 +-
 .../lib/dropdown/style/DropdownStyle.js       | 152 +++
 components/lib/dropdown/style/package.json    |   5 +
 .../lib/dynamicdialog/BaseDynamicDialog.vue   |  16 +
 .../lib/dynamicdialog/DynamicDialog.vue       |   4 +-
 .../dynamicdialog/style/DynamicDialogStyle.js |   1 +
 .../lib/dynamicdialog/style/package.json      |   5 +
 components/lib/editor/BaseEditor.vue          | 964 +-----------------
 components/lib/editor/package.json            |  16 +-
 components/lib/editor/style/EditorStyle.js    | 961 +++++++++++++++++
 components/lib/editor/style/package.json      |   5 +
 components/lib/fieldset/BaseFieldset.vue      |  47 +-
 components/lib/fieldset/package.json          |  16 +-
 .../lib/fieldset/style/FieldsetStyle.js       |  45 +
 components/lib/fieldset/style/package.json    |   5 +
 components/lib/fileupload/BaseFileUpload.vue  |  84 +-
 components/lib/fileupload/package.json        |  16 +-
 .../lib/fileupload/style/FileUploadStyle.js   |  82 ++
 components/lib/fileupload/style/package.json  |   5 +
 components/lib/focustrap/BaseFocusTrap.js     |   5 +-
 components/lib/focustrap/package.json         |   2 +-
 .../lib/focustrap/style/FocusTrapStyle.js     |   1 +
 components/lib/focustrap/style/package.json   |   5 +
 components/lib/galleria/BaseGalleria.vue      | 380 +------
 components/lib/galleria/package.json          |  16 +-
 .../lib/galleria/style/GalleriaStyle.js       | 378 +++++++
 components/lib/galleria/style/package.json    |   5 +
 .../lib/icons/angledoubledown/package.json    |   4 +-
 .../lib/icons/angledoubleleft/package.json    |   4 +-
 .../lib/icons/angledoubleright/package.json   |   4 +-
 .../lib/icons/angledoubleup/package.json      |   4 +-
 components/lib/icons/angledown/package.json   |   4 +-
 components/lib/icons/angleleft/package.json   |   4 +-
 components/lib/icons/angleright/package.json  |   4 +-
 components/lib/icons/angleup/package.json     |   4 +-
 components/lib/icons/arrowdown/package.json   |   4 +-
 components/lib/icons/arrowup/package.json     |   4 +-
 components/lib/icons/ban/package.json         |   4 +-
 components/lib/icons/bars/package.json        |   4 +-
 components/lib/icons/calendar/package.json    |   4 +-
 components/lib/icons/check/package.json       |   4 +-
 components/lib/icons/chevrondown/package.json |   4 +-
 components/lib/icons/chevronleft/package.json |   4 +-
 .../lib/icons/chevronright/package.json       |   4 +-
 components/lib/icons/chevronup/package.json   |   4 +-
 .../icons/exclamationtriangle/package.json    |   4 +-
 components/lib/icons/eye/package.json         |   4 +-
 components/lib/icons/eyeslash/package.json    |   4 +-
 components/lib/icons/filter/package.json      |   4 +-
 components/lib/icons/filterslash/package.json |   4 +-
 components/lib/icons/infocircle/package.json  |   4 +-
 components/lib/icons/minus/package.json       |   4 +-
 components/lib/icons/pencil/package.json      |   4 +-
 components/lib/icons/plus/package.json        |   4 +-
 components/lib/icons/refresh/package.json     |   4 +-
 components/lib/icons/search/package.json      |   4 +-
 components/lib/icons/searchminus/package.json |   4 +-
 components/lib/icons/searchplus/package.json  |   4 +-
 components/lib/icons/sortalt/package.json     |   4 +-
 .../lib/icons/sortamountdown/package.json     |   4 +-
 .../lib/icons/sortamountupalt/package.json    |   4 +-
 components/lib/icons/spinner/package.json     |   4 +-
 components/lib/icons/star/package.json        |   4 +-
 components/lib/icons/starfill/package.json    |   4 +-
 components/lib/icons/thlarge/package.json     |   4 +-
 components/lib/icons/times/package.json       |   4 +-
 components/lib/icons/timescircle/package.json |   4 +-
 components/lib/icons/trash/package.json       |   4 +-
 components/lib/icons/undo/package.json        |   4 +-
 components/lib/icons/upload/package.json      |   4 +-
 .../lib/icons/windowmaximize/package.json     |  16 +-
 .../lib/icons/windowminimize/package.json     |   4 +-
 components/lib/image/BaseImage.vue            | 106 +-
 components/lib/image/package.json             |   4 +-
 components/lib/image/style/ImageStyle.js      | 104 ++
 components/lib/image/style/package.json       |   5 +
 .../lib/inlinemessage/BaseInlineMessage.vue   |  35 +-
 components/lib/inlinemessage/package.json     |  16 +-
 .../inlinemessage/style/InlineMessageStyle.js |  33 +
 .../lib/inlinemessage/style/package.json      |   5 +
 components/lib/inplace/BaseInplace.vue        |  37 +-
 components/lib/inplace/package.json           |  16 +-
 components/lib/inplace/style/InplaceStyle.js  |  35 +
 components/lib/inplace/style/package.json     |   5 +
 components/lib/inputmask/BaseInputMask.vue    |  14 +-
 components/lib/inputmask/package.json         |  16 +-
 .../lib/inputmask/style/InputMaskStyle.js     |  16 +
 components/lib/inputmask/style/package.json   |   5 +
 .../lib/inputnumber/BaseInputNumber.vue       | 141 +--
 components/lib/inputnumber/package.json       |  16 +-
 .../lib/inputnumber/style/InputNumberStyle.js | 139 +++
 components/lib/inputnumber/style/package.json |   5 +
 .../lib/inputswitch/BaseInputSwitch.vue       |  50 +-
 components/lib/inputswitch/package.json       |  16 +-
 .../lib/inputswitch/style/InputSwitchStyle.js |  48 +
 components/lib/inputswitch/style/package.json |   5 +
 components/lib/inputtext/BaseInputText.vue    |  16 +-
 components/lib/inputtext/package.json         |  16 +-
 .../lib/inputtext/style/InputTextStyle.js     |  18 +
 components/lib/inputtext/style/package.json   |   5 +
 components/lib/knob/BaseKnob.vue              |  39 +-
 components/lib/knob/package.json              |  16 +-
 components/lib/knob/style/KnobStyle.js        |  37 +
 components/lib/knob/style/package.json        |   5 +
 components/lib/listbox/BaseListbox.vue        |  73 +-
 components/lib/listbox/package.json           |  16 +-
 components/lib/listbox/style/ListboxStyle.js  |  71 ++
 components/lib/listbox/style/package.json     |   5 +
 components/lib/megamenu/BaseMegaMenu.vue      | 199 +---
 components/lib/megamenu/package.json          |  16 +-
 .../lib/megamenu/style/MegaMenuStyle.js       | 197 ++++
 components/lib/megamenu/style/package.json    |   5 +
 components/lib/menu/BaseMenu.vue              |  65 +-
 components/lib/menu/package.json              |  16 +-
 components/lib/menu/style/MenuStyle.js        |  63 ++
 components/lib/menu/style/package.json        |   5 +
 components/lib/menubar/BaseMenubar.vue        | 124 +--
 components/lib/menubar/package.json           |  16 +-
 components/lib/menubar/style/MenubarStyle.js  | 122 +++
 components/lib/menubar/style/package.json     |   5 +
 components/lib/message/BaseMessage.vue        |  71 +-
 components/lib/message/package.json           |  16 +-
 components/lib/message/style/MessageStyle.js  |  69 ++
 components/lib/message/style/package.json     |   5 +
 .../lib/multiselect/BaseMultiSelect.vue       | 195 +---
 components/lib/multiselect/package.json       |  16 +-
 .../lib/multiselect/style/MultiSelectStyle.js | 193 ++++
 components/lib/multiselect/style/package.json |   5 +
 components/lib/orderlist/BaseOrderList.vue    |  71 +-
 components/lib/orderlist/package.json         |  16 +-
 .../lib/orderlist/style/OrderListStyle.js     |  69 ++
 components/lib/orderlist/style/package.json   |   5 +
 .../BaseOrganizationChart.vue                 |  80 +-
 components/lib/organizationchart/package.json |  16 +-
 .../style/OrganizationChartStyle.js           |  78 ++
 .../lib/organizationchart/style/package.json  |   5 +
 components/lib/overlayeventbus/package.json   |   2 +-
 .../lib/overlaypanel/BaseOverlayPanel.vue     |  96 +-
 components/lib/overlaypanel/package.json      |  16 +-
 .../overlaypanel/style/OverlayPanelStyle.js   |  94 ++
 .../lib/overlaypanel/style/package.json       |   5 +
 components/lib/paginator/BasePaginator.vue    | 104 +-
 components/lib/paginator/package.json         |  16 +-
 .../lib/paginator/style/PaginatorStyle.js     | 102 ++
 components/lib/paginator/style/package.json   |   5 +
 components/lib/panel/BasePanel.vue            |  49 +-
 components/lib/panel/package.json             |  16 +-
 components/lib/panel/style/PanelStyle.js      |  47 +
 components/lib/panel/style/package.json       |   5 +
 components/lib/panelmenu/BasePanelMenu.vue    |  91 +-
 components/lib/panelmenu/package.json         |  16 +-
 .../lib/panelmenu/style/PanelMenuStyle.js     |  89 ++
 components/lib/panelmenu/style/package.json   |   5 +
 components/lib/passthrough/package.json       |   2 +-
 .../lib/passthrough/tailwind/package.json     |   2 +-
 components/lib/password/BasePassword.vue      |  72 +-
 components/lib/password/package.json          |  16 +-
 .../lib/password/style/PasswordStyle.js       |  70 ++
 components/lib/password/style/package.json    |   5 +
 components/lib/picklist/BasePickList.vue      |  72 +-
 components/lib/picklist/package.json          |  16 +-
 .../lib/picklist/style/PickListStyle.js       |  70 ++
 components/lib/picklist/style/package.json    |   5 +
 components/lib/portal/package.json            |  14 +-
 components/lib/portal/style/PortalStyle.js    |   1 +
 components/lib/portal/style/package.json      |   5 +
 .../lib/progressbar/BaseProgressBar.vue       | 135 +--
 components/lib/progressbar/package.json       |  16 +-
 .../lib/progressbar/style/ProgressBarStyle.js | 133 +++
 components/lib/progressbar/style/package.json |   5 +
 .../progressspinner/BaseProgressSpinner.vue   |  45 +-
 components/lib/progressspinner/package.json   |  16 +-
 .../style/ProgressSpinnerStyle.js             |  43 +
 .../lib/progressspinner/style/package.json    |   5 +
 .../lib/radiobutton/BaseRadioButton.vue       |  25 +-
 components/lib/radiobutton/package.json       |  16 +-
 .../lib/radiobutton/style/RadioButtonStyle.js |  27 +
 components/lib/radiobutton/style/package.json |   5 +
 components/lib/rating/BaseRating.vue          |  55 +-
 components/lib/rating/package.json            |  16 +-
 components/lib/rating/style/RatingStyle.js    |  53 +
 components/lib/rating/style/package.json      |   5 +
 components/lib/ripple/BaseRipple.js           |  46 +-
 components/lib/ripple/package.json            |  10 +-
 components/lib/ripple/style/RippleStyle.js    |  44 +
 components/lib/ripple/style/package.json      |   5 +
 components/lib/row/package.json               |  16 +-
 components/lib/row/style/RowStyle.js          |   1 +
 components/lib/row/style/package.json         |   5 +
 .../lib/scrollpanel/BaseScrollPanel.vue       |  77 +-
 components/lib/scrollpanel/package.json       |  16 +-
 .../lib/scrollpanel/style/ScrollPanelStyle.js |  75 ++
 components/lib/scrollpanel/style/package.json |   5 +
 components/lib/scrolltop/BaseScrollTop.vue    |  51 +-
 components/lib/scrolltop/package.json         |  16 +-
 .../lib/scrolltop/style/ScrollTopStyle.js     |  49 +
 components/lib/scrolltop/style/package.json   |   5 +
 .../lib/selectbutton/BaseSelectButton.vue     |  17 +-
 components/lib/selectbutton/package.json      |  16 +-
 .../selectbutton/style/SelectButtonStyle.js   |  19 +
 .../lib/selectbutton/style/package.json       |   5 +
 components/lib/sidebar/BaseSidebar.vue        | 208 +---
 components/lib/sidebar/package.json           |  16 +-
 components/lib/sidebar/style/SidebarStyle.js  | 205 ++++
 components/lib/sidebar/style/package.json     |   5 +
 components/lib/skeleton/BaseSkeleton.vue      |  61 +-
 components/lib/skeleton/package.json          |  16 +-
 .../lib/skeleton/style/SkeletonStyle.js       |  59 ++
 components/lib/skeleton/style/package.json    |   5 +
 components/lib/slider/BaseSlider.vue          |  70 +-
 components/lib/slider/package.json            |  16 +-
 components/lib/slider/style/SliderStyle.js    |  68 ++
 components/lib/slider/style/package.json      |   5 +
 components/lib/speeddial/BaseSpeedDial.vue    | 140 +--
 components/lib/speeddial/package.json         |   4 +-
 .../lib/speeddial/style/SpeedDialStyle.js     | 138 +++
 components/lib/speeddial/style/package.json   |   5 +
 .../lib/splitbutton/BaseSplitButton.vue       |  62 +-
 components/lib/splitbutton/package.json       |  16 +-
 .../lib/splitbutton/style/SplitButtonStyle.js |  60 ++
 components/lib/splitbutton/style/package.json |   5 +
 components/lib/splitter/BaseSplitter.vue      |  70 +-
 components/lib/splitter/package.json          |  16 +-
 .../lib/splitter/style/SplitterStyle.js       |  68 ++
 components/lib/splitter/style/package.json    |   5 +
 .../lib/splitterpanel/BaseSplitterPanel.vue   |  30 +-
 components/lib/splitterpanel/package.json     |  16 +-
 .../splitterpanel/style/SplitterPanelStyle.js |  28 +
 .../lib/splitterpanel/style/package.json      |   5 +
 components/lib/steps/BaseSteps.vue            |  86 +-
 components/lib/steps/package.json             |  16 +-
 components/lib/steps/style/StepsStyle.js      |  84 ++
 components/lib/steps/style/package.json       |   5 +
 components/lib/styleclass/package.json        |   2 +-
 .../lib/styleclass/style/StyleClassStyle.js   |   1 +
 components/lib/styleclass/style/package.json  |   5 +
 components/lib/tabmenu/BaseTabMenu.vue        |  69 +-
 components/lib/tabmenu/package.json           |  16 +-
 components/lib/tabmenu/style/TabMenuStyle.js  |  67 ++
 components/lib/tabmenu/style/package.json     |   5 +
 components/lib/tabpanel/BaseTabPanel.vue      |   4 +-
 components/lib/tabpanel/package.json          |  16 +-
 .../lib/tabpanel/style/TabPanelStyle.js       |   1 +
 components/lib/tabpanel/style/package.json    |   5 +
 components/lib/tabview/BaseTabView.vue        | 112 +-
 components/lib/tabview/package.json           |  16 +-
 components/lib/tabview/style/TabViewStyle.js  | 110 ++
 components/lib/tabview/style/package.json     |   5 +
 components/lib/tag/BaseTag.vue                |  44 +-
 components/lib/tag/package.json               |  16 +-
 components/lib/tag/style/TagStyle.js          |  42 +
 components/lib/tag/style/package.json         |   5 +
 components/lib/terminal/BaseTerminal.vue      |  46 +-
 components/lib/terminal/package.json          |  16 +-
 .../lib/terminal/style/TerminalStyle.js       |  44 +
 components/lib/terminal/style/package.json    |   5 +
 components/lib/terminalservice/package.json   |  10 +-
 components/lib/textarea/BaseTextarea.vue      |  32 +-
 components/lib/textarea/package.json          |  16 +-
 .../lib/textarea/style/TextareaStyle.js       |  30 +
 components/lib/textarea/style/package.json    |   5 +
 components/lib/tieredmenu/BaseTieredMenu.vue  |  91 +-
 components/lib/tieredmenu/package.json        |  16 +-
 .../lib/tieredmenu/style/TieredMenuStyle.js   |  89 ++
 components/lib/tieredmenu/style/package.json  |   5 +
 components/lib/timeline/BaseTimeline.vue      | 134 +--
 components/lib/timeline/package.json          |  16 +-
 .../lib/timeline/style/TimelineStyle.js       | 132 +++
 components/lib/timeline/style/package.json    |   5 +
 components/lib/toast/BaseToast.vue            | 132 +--
 components/lib/toast/package.json             |  16 +-
 components/lib/toast/style/ToastStyle.js      | 130 +++
 components/lib/toast/style/package.json       |   5 +
 components/lib/toasteventbus/package.json     |   2 +-
 components/lib/toastservice/package.json      |  10 +-
 .../lib/togglebutton/BaseToggleButton.vue     |  25 +-
 components/lib/togglebutton/package.json      |  16 +-
 .../togglebutton/style/ToggleButtonStyle.js   |  27 +
 .../lib/togglebutton/style/package.json       |   5 +
 components/lib/toolbar/BaseToolbar.vue        |  40 +-
 components/lib/toolbar/package.json           |  16 +-
 components/lib/toolbar/style/ToolbarStyle.js  |  38 +
 components/lib/toolbar/style/package.json     |   5 +
 components/lib/tooltip/BaseTooltip.js         |  74 +-
 components/lib/tooltip/package.json           |  10 +-
 components/lib/tooltip/style/TooltipStyle.js  |  72 ++
 components/lib/tooltip/style/package.json     |   5 +
 components/lib/tree/BaseTree.vue              | 136 +--
 components/lib/tree/package.json              |  16 +-
 components/lib/tree/style/TreeStyle.js        | 134 +++
 components/lib/tree/style/package.json        |   5 +
 components/lib/treeselect/BaseTreeSelect.vue  | 103 +-
 components/lib/treeselect/package.json        |   4 +-
 .../lib/treeselect/style/TreeSelectStyle.js   | 101 ++
 components/lib/treeselect/style/package.json  |   5 +
 components/lib/treetable/BaseTreeTable.vue    | 273 +----
 components/lib/treetable/package.json         |  16 +-
 .../lib/treetable/style/TreeTableStyle.js     | 271 +++++
 components/lib/treetable/style/package.json   |   5 +
 .../tristatecheckbox/BaseTriStateCheckbox.vue |  27 +-
 components/lib/tristatecheckbox/package.json  |  16 +-
 .../style/TriStateCheckboxStyle.js            |  29 +
 .../lib/tristatecheckbox/style/package.json   |   5 +
 components/lib/useconfirm/package.json        |  10 +-
 components/lib/usedialog/package.json         |   2 +-
 components/lib/usestyle/UseStyle.d.ts         |   3 +-
 components/lib/usestyle/UseStyle.js           |   9 +-
 components/lib/usestyle/package.json          |   2 +-
 components/lib/usetoast/package.json          |  10 +-
 components/lib/utils/package.json             |   8 +-
 .../virtualscroller/BaseVirtualScroller.vue   |  70 +-
 components/lib/virtualscroller/package.json   |   4 +-
 .../style/VirtualScrollerStyle.js             |  69 ++
 .../lib/virtualscroller/style/package.json    |   5 +
 doc/common/apidoc/index.json                  |   2 +-
 package-build.json                            |  18 +-
 package.json                                  |   6 +-
 rollup.config.js                              | 121 ++-
 tsconfig.json                                 |  36 +-
 vite.config.js                                | 204 +++-
 463 files changed, 10696 insertions(+), 9670 deletions(-)
 create mode 100644 .editorconfig
 create mode 100644 components/lib/accordion/style/AccordionStyle.js
 create mode 100644 components/lib/accordion/style/package.json
 create mode 100644 components/lib/accordiontab/style/AccordionTabStyle.js
 create mode 100644 components/lib/accordiontab/style/package.json
 create mode 100644 components/lib/autocomplete/style/AutoCompleteStyle.js
 create mode 100644 components/lib/autocomplete/style/package.json
 create mode 100644 components/lib/avatar/style/AvatarStyle.js
 create mode 100644 components/lib/avatar/style/package.json
 create mode 100644 components/lib/avatargroup/style/AvatarGroupStyle.js
 create mode 100644 components/lib/avatargroup/style/package.json
 create mode 100644 components/lib/badge/style/BadgeStyle.js
 create mode 100644 components/lib/badge/style/package.json
 create mode 100644 components/lib/badgedirective/style/BadgeDirectiveStyle.js
 create mode 100644 components/lib/badgedirective/style/package.json
 create mode 100644 components/lib/base/style/BaseStyle.js
 create mode 100644 components/lib/base/style/package.json
 create mode 100644 components/lib/basecomponent/style/BaseComponentStyle.js
 create mode 100644 components/lib/basecomponent/style/package.json
 create mode 100644 components/lib/baseicon/style/BaseIconStyle.js
 create mode 100644 components/lib/baseicon/style/package.json
 create mode 100644 components/lib/blockui/style/BlockUIStyle.js
 create mode 100644 components/lib/blockui/style/package.json
 create mode 100644 components/lib/breadcrumb/style/BreadcrumbStyle.js
 create mode 100644 components/lib/breadcrumb/style/package.json
 create mode 100644 components/lib/button/style/ButtonStyle.js
 create mode 100644 components/lib/button/style/package.json
 create mode 100644 components/lib/calendar/style/CalendarStyle.js
 create mode 100644 components/lib/calendar/style/package.json
 create mode 100644 components/lib/card/style/CardStyle.js
 create mode 100644 components/lib/card/style/package.json
 create mode 100644 components/lib/carousel/style/CarouselStyle.js
 create mode 100644 components/lib/carousel/style/package.json
 create mode 100644 components/lib/cascadeselect/style/CascadeSelectStyle.js
 create mode 100644 components/lib/cascadeselect/style/package.json
 create mode 100644 components/lib/chart/style/ChartStyle.js
 create mode 100644 components/lib/chart/style/package.json
 create mode 100644 components/lib/checkbox/style/CheckboxStyle.js
 create mode 100644 components/lib/checkbox/style/package.json
 create mode 100644 components/lib/chip/style/ChipStyle.js
 create mode 100644 components/lib/chip/style/package.json
 create mode 100644 components/lib/chips/style/ChipsStyle.js
 create mode 100644 components/lib/chips/style/package.json
 create mode 100644 components/lib/colorpicker/style/ColorPickerStyle.js
 create mode 100644 components/lib/colorpicker/style/package.json
 create mode 100644 components/lib/column/style/ColumnStyle.js
 create mode 100644 components/lib/column/style/package.json
 create mode 100644 components/lib/columngroup/style/ColumnGroupStyle.js
 create mode 100644 components/lib/columngroup/style/package.json
 create mode 100644 components/lib/confirmdialog/style/ConfirmDialogStyle.js
 create mode 100644 components/lib/confirmdialog/style/package.json
 create mode 100644 components/lib/confirmpopup/style/ConfirmPopupStyle.js
 create mode 100644 components/lib/confirmpopup/style/package.json
 create mode 100644 components/lib/contextmenu/style/ContextMenuStyle.js
 create mode 100644 components/lib/contextmenu/style/package.json
 create mode 100644 components/lib/datatable/style/DataTableStyle.js
 create mode 100644 components/lib/datatable/style/package.json
 create mode 100644 components/lib/dataview/style/DataViewStyle.js
 create mode 100644 components/lib/dataview/style/package.json
 create mode 100644 components/lib/dataviewlayoutoptions/style/DataViewLayoutOptionsStyle.js
 create mode 100644 components/lib/dataviewlayoutoptions/style/package.json
 create mode 100644 components/lib/deferredcontent/style/DeferredContentStyle.js
 create mode 100644 components/lib/deferredcontent/style/package.json
 create mode 100644 components/lib/dialog/style/DialogStyle.js
 create mode 100644 components/lib/dialog/style/package.json
 create mode 100644 components/lib/divider/style/DividerStyle.js
 create mode 100644 components/lib/divider/style/package.json
 create mode 100644 components/lib/dock/style/DockStyle.js
 create mode 100644 components/lib/dock/style/package.json
 create mode 100644 components/lib/dropdown/style/DropdownStyle.js
 create mode 100644 components/lib/dropdown/style/package.json
 create mode 100644 components/lib/dynamicdialog/BaseDynamicDialog.vue
 create mode 100644 components/lib/dynamicdialog/style/DynamicDialogStyle.js
 create mode 100644 components/lib/dynamicdialog/style/package.json
 create mode 100644 components/lib/editor/style/EditorStyle.js
 create mode 100644 components/lib/editor/style/package.json
 create mode 100644 components/lib/fieldset/style/FieldsetStyle.js
 create mode 100644 components/lib/fieldset/style/package.json
 create mode 100644 components/lib/fileupload/style/FileUploadStyle.js
 create mode 100644 components/lib/fileupload/style/package.json
 create mode 100644 components/lib/focustrap/style/FocusTrapStyle.js
 create mode 100644 components/lib/focustrap/style/package.json
 create mode 100644 components/lib/galleria/style/GalleriaStyle.js
 create mode 100644 components/lib/galleria/style/package.json
 create mode 100644 components/lib/image/style/ImageStyle.js
 create mode 100644 components/lib/image/style/package.json
 create mode 100644 components/lib/inlinemessage/style/InlineMessageStyle.js
 create mode 100644 components/lib/inlinemessage/style/package.json
 create mode 100644 components/lib/inplace/style/InplaceStyle.js
 create mode 100644 components/lib/inplace/style/package.json
 create mode 100644 components/lib/inputmask/style/InputMaskStyle.js
 create mode 100644 components/lib/inputmask/style/package.json
 create mode 100644 components/lib/inputnumber/style/InputNumberStyle.js
 create mode 100644 components/lib/inputnumber/style/package.json
 create mode 100644 components/lib/inputswitch/style/InputSwitchStyle.js
 create mode 100644 components/lib/inputswitch/style/package.json
 create mode 100644 components/lib/inputtext/style/InputTextStyle.js
 create mode 100644 components/lib/inputtext/style/package.json
 create mode 100644 components/lib/knob/style/KnobStyle.js
 create mode 100644 components/lib/knob/style/package.json
 create mode 100644 components/lib/listbox/style/ListboxStyle.js
 create mode 100644 components/lib/listbox/style/package.json
 create mode 100644 components/lib/megamenu/style/MegaMenuStyle.js
 create mode 100644 components/lib/megamenu/style/package.json
 create mode 100644 components/lib/menu/style/MenuStyle.js
 create mode 100644 components/lib/menu/style/package.json
 create mode 100644 components/lib/menubar/style/MenubarStyle.js
 create mode 100644 components/lib/menubar/style/package.json
 create mode 100644 components/lib/message/style/MessageStyle.js
 create mode 100644 components/lib/message/style/package.json
 create mode 100644 components/lib/multiselect/style/MultiSelectStyle.js
 create mode 100644 components/lib/multiselect/style/package.json
 create mode 100644 components/lib/orderlist/style/OrderListStyle.js
 create mode 100644 components/lib/orderlist/style/package.json
 create mode 100644 components/lib/organizationchart/style/OrganizationChartStyle.js
 create mode 100644 components/lib/organizationchart/style/package.json
 create mode 100644 components/lib/overlaypanel/style/OverlayPanelStyle.js
 create mode 100644 components/lib/overlaypanel/style/package.json
 create mode 100644 components/lib/paginator/style/PaginatorStyle.js
 create mode 100644 components/lib/paginator/style/package.json
 create mode 100644 components/lib/panel/style/PanelStyle.js
 create mode 100644 components/lib/panel/style/package.json
 create mode 100644 components/lib/panelmenu/style/PanelMenuStyle.js
 create mode 100644 components/lib/panelmenu/style/package.json
 create mode 100644 components/lib/password/style/PasswordStyle.js
 create mode 100644 components/lib/password/style/package.json
 create mode 100644 components/lib/picklist/style/PickListStyle.js
 create mode 100644 components/lib/picklist/style/package.json
 create mode 100644 components/lib/portal/style/PortalStyle.js
 create mode 100644 components/lib/portal/style/package.json
 create mode 100644 components/lib/progressbar/style/ProgressBarStyle.js
 create mode 100644 components/lib/progressbar/style/package.json
 create mode 100644 components/lib/progressspinner/style/ProgressSpinnerStyle.js
 create mode 100644 components/lib/progressspinner/style/package.json
 create mode 100644 components/lib/radiobutton/style/RadioButtonStyle.js
 create mode 100644 components/lib/radiobutton/style/package.json
 create mode 100644 components/lib/rating/style/RatingStyle.js
 create mode 100644 components/lib/rating/style/package.json
 create mode 100644 components/lib/ripple/style/RippleStyle.js
 create mode 100644 components/lib/ripple/style/package.json
 create mode 100644 components/lib/row/style/RowStyle.js
 create mode 100644 components/lib/row/style/package.json
 create mode 100644 components/lib/scrollpanel/style/ScrollPanelStyle.js
 create mode 100644 components/lib/scrollpanel/style/package.json
 create mode 100644 components/lib/scrolltop/style/ScrollTopStyle.js
 create mode 100644 components/lib/scrolltop/style/package.json
 create mode 100644 components/lib/selectbutton/style/SelectButtonStyle.js
 create mode 100644 components/lib/selectbutton/style/package.json
 create mode 100644 components/lib/sidebar/style/SidebarStyle.js
 create mode 100644 components/lib/sidebar/style/package.json
 create mode 100644 components/lib/skeleton/style/SkeletonStyle.js
 create mode 100644 components/lib/skeleton/style/package.json
 create mode 100644 components/lib/slider/style/SliderStyle.js
 create mode 100644 components/lib/slider/style/package.json
 create mode 100644 components/lib/speeddial/style/SpeedDialStyle.js
 create mode 100644 components/lib/speeddial/style/package.json
 create mode 100644 components/lib/splitbutton/style/SplitButtonStyle.js
 create mode 100644 components/lib/splitbutton/style/package.json
 create mode 100644 components/lib/splitter/style/SplitterStyle.js
 create mode 100644 components/lib/splitter/style/package.json
 create mode 100644 components/lib/splitterpanel/style/SplitterPanelStyle.js
 create mode 100644 components/lib/splitterpanel/style/package.json
 create mode 100644 components/lib/steps/style/StepsStyle.js
 create mode 100644 components/lib/steps/style/package.json
 create mode 100644 components/lib/styleclass/style/StyleClassStyle.js
 create mode 100644 components/lib/styleclass/style/package.json
 create mode 100644 components/lib/tabmenu/style/TabMenuStyle.js
 create mode 100644 components/lib/tabmenu/style/package.json
 create mode 100644 components/lib/tabpanel/style/TabPanelStyle.js
 create mode 100644 components/lib/tabpanel/style/package.json
 create mode 100644 components/lib/tabview/style/TabViewStyle.js
 create mode 100644 components/lib/tabview/style/package.json
 create mode 100644 components/lib/tag/style/TagStyle.js
 create mode 100644 components/lib/tag/style/package.json
 create mode 100644 components/lib/terminal/style/TerminalStyle.js
 create mode 100644 components/lib/terminal/style/package.json
 create mode 100644 components/lib/textarea/style/TextareaStyle.js
 create mode 100644 components/lib/textarea/style/package.json
 create mode 100644 components/lib/tieredmenu/style/TieredMenuStyle.js
 create mode 100644 components/lib/tieredmenu/style/package.json
 create mode 100644 components/lib/timeline/style/TimelineStyle.js
 create mode 100644 components/lib/timeline/style/package.json
 create mode 100644 components/lib/toast/style/ToastStyle.js
 create mode 100644 components/lib/toast/style/package.json
 create mode 100644 components/lib/togglebutton/style/ToggleButtonStyle.js
 create mode 100644 components/lib/togglebutton/style/package.json
 create mode 100644 components/lib/toolbar/style/ToolbarStyle.js
 create mode 100644 components/lib/toolbar/style/package.json
 create mode 100644 components/lib/tooltip/style/TooltipStyle.js
 create mode 100644 components/lib/tooltip/style/package.json
 create mode 100644 components/lib/tree/style/TreeStyle.js
 create mode 100644 components/lib/tree/style/package.json
 create mode 100644 components/lib/treeselect/style/TreeSelectStyle.js
 create mode 100644 components/lib/treeselect/style/package.json
 create mode 100644 components/lib/treetable/style/TreeTableStyle.js
 create mode 100644 components/lib/treetable/style/package.json
 create mode 100644 components/lib/tristatecheckbox/style/TriStateCheckboxStyle.js
 create mode 100644 components/lib/tristatecheckbox/style/package.json
 create mode 100644 components/lib/virtualscroller/style/VirtualScrollerStyle.js
 create mode 100644 components/lib/virtualscroller/style/package.json

diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 000000000..b585a7616
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,13 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
diff --git a/.vscode/settings.team.json b/.vscode/settings.team.json
index 36ff951d8..f633bc475 100644
--- a/.vscode/settings.team.json
+++ b/.vscode/settings.team.json
@@ -15,5 +15,9 @@
     "[typescript]": {
         "editor.defaultFormatter": "esbenp.prettier-vscode",
         "editor.formatOnSave": true
+    },
+    "[json]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
+        "editor.formatOnSave": true
     }
 }
diff --git a/build-meta.js b/build-meta.js
index f6a85e403..fb7b86a1d 100644
--- a/build-meta.js
+++ b/build-meta.js
@@ -1,7 +1,7 @@
 const fs = require('fs-extra');
 const path = require('path');
 
-function copyDependencies(inFolder, outFolder) {
+function copyDependencies(inFolder, outFolder, subFolder) {
     fs.readdirSync(path.resolve(__dirname, inFolder), { withFileTypes: true })
         .filter((dir) => dir.isDirectory())
         .forEach(({ name: folderName }) => {
@@ -10,10 +10,20 @@ function copyDependencies(inFolder, outFolder) {
                     fs.copySync(path.resolve(__dirname, inFolder + folderName) + '/' + file, outFolder + folderName + '/' + file);
                 }
             });
+
+            if (subFolder) {
+                try {
+                    fs.readdirSync(path.resolve(__dirname, inFolder + folderName + subFolder)).forEach((subFile) => {
+                        if (subFile === 'package.json' || subFile.endsWith('d.ts') || subFile.endsWith('vue')) {
+                            fs.copySync(path.resolve(__dirname, inFolder + folderName + subFolder) + '/' + subFile, outFolder + folderName + subFolder + '/' + subFile);
+                        }
+                    });
+                } catch {}
+            }
         });
 }
 
-copyDependencies('./components/lib/', 'dist/');
+copyDependencies('./components/lib/', 'dist/', '/style');
 copyDependencies('./components/lib/icons/', 'dist/icons/');
 copyDependencies('./components/lib/passthrough/', 'dist/passthrough/');
 
diff --git a/components/lib/accordion/BaseAccordion.vue b/components/lib/accordion/BaseAccordion.vue
index 1e52f77cc..3838578c3 100644
--- a/components/lib/accordion/BaseAccordion.vue
+++ b/components/lib/accordion/BaseAccordion.vue
@@ -1,53 +1,6 @@
 <script>
+import AccordionStyle from 'primevue/accordion/style';
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-accordion-header-action {
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        user-select: none;
-        position: relative;
-        text-decoration: none;
-    }
-    
-    .p-accordion-header-action:focus {
-        z-index: 1;
-    }
-    
-    .p-accordion-header-text {
-        line-height: 1;
-    }
-}
-`;
-
-const classes = {
-    root: 'p-accordion p-component',
-    tab: {
-        root: ({ instance, index }) => [
-            'p-accordion-tab',
-            {
-                'p-accordion-tab-active': instance.isTabActive(index)
-            }
-        ],
-        header: ({ instance, tab, index }) => [
-            'p-accordion-header',
-            {
-                'p-highlight': instance.isTabActive(index),
-                'p-disabled': instance.getTabProp(tab, 'disabled')
-            }
-        ],
-        headerAction: 'p-accordion-header-link p-accordion-header-action',
-        headerIcon: 'p-accordion-toggle-icon',
-        headerTitle: 'p-accordion-header-text',
-        toggleableContent: 'p-toggleable-content',
-        content: 'p-accordion-content'
-    }
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'accordion', manual: true });
 
 export default {
     name: 'BaseAccordion',
@@ -82,10 +35,7 @@ export default {
             default: false
         }
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: AccordionStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/accordion/package.json b/components/lib/accordion/package.json
index adf2abe3d..2833f400f 100644
--- a/components/lib/accordion/package.json
+++ b/components/lib/accordion/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./accordion.cjs.js",
-  "module": "./accordion.esm.js",
-  "unpkg": "./accordion.min.js",
-  "types": "./Accordion.d.ts",
-  "browser": {
-    "./sfc": "./Accordion.vue"
-  }
-}
\ No newline at end of file
+    "main": "./accordion.cjs.js",
+    "module": "./accordion.esm.js",
+    "unpkg": "./accordion.min.js",
+    "types": "./Accordion.d.ts",
+    "browser": {
+        "./sfc": "./Accordion.vue"
+    }
+}
diff --git a/components/lib/accordion/style/AccordionStyle.js b/components/lib/accordion/style/AccordionStyle.js
new file mode 100644
index 000000000..539d8d3eb
--- /dev/null
+++ b/components/lib/accordion/style/AccordionStyle.js
@@ -0,0 +1,52 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-accordion-header-action {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        user-select: none;
+        position: relative;
+        text-decoration: none;
+    }
+    
+    .p-accordion-header-action:focus {
+        z-index: 1;
+    }
+    
+    .p-accordion-header-text {
+        line-height: 1;
+    }
+}
+`;
+
+const classes = {
+    root: 'p-accordion p-component',
+    tab: {
+        root: ({ instance, index }) => [
+            'p-accordion-tab',
+            {
+                'p-accordion-tab-active': instance.isTabActive(index)
+            }
+        ],
+        header: ({ instance, tab, index }) => [
+            'p-accordion-header',
+            {
+                'p-highlight': instance.isTabActive(index),
+                'p-disabled': instance.getTabProp(tab, 'disabled')
+            }
+        ],
+        headerAction: 'p-accordion-header-link p-accordion-header-action',
+        headerIcon: 'p-accordion-toggle-icon',
+        headerTitle: 'p-accordion-header-text',
+        toggleableContent: 'p-toggleable-content',
+        content: 'p-accordion-content'
+    }
+};
+
+export default BaseStyle.extend({
+    name: 'accordion',
+    css,
+    classes
+});
diff --git a/components/lib/accordion/style/package.json b/components/lib/accordion/style/package.json
new file mode 100644
index 000000000..046961812
--- /dev/null
+++ b/components/lib/accordion/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./accordionstyle.cjs.js",
+    "module": "./accordionstyle.esm.js",
+    "unpkg": "./accordionstyle.min.js"
+}
diff --git a/components/lib/accordiontab/BaseAccordionTab.vue b/components/lib/accordiontab/BaseAccordionTab.vue
index 4426ba212..d62cb70c0 100644
--- a/components/lib/accordiontab/BaseAccordionTab.vue
+++ b/components/lib/accordiontab/BaseAccordionTab.vue
@@ -1,4 +1,5 @@
 <script>
+import AccordionTabStyle from 'primevue/accordiontab/style';
 import BaseComponent from 'primevue/basecomponent';
 
 export default {
@@ -15,6 +16,7 @@ export default {
         contentProps: null,
         disabled: Boolean
     },
+    style: AccordionTabStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/accordiontab/package.json b/components/lib/accordiontab/package.json
index 415127406..1f5367312 100644
--- a/components/lib/accordiontab/package.json
+++ b/components/lib/accordiontab/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./accordiontab.cjs.js",
-  "module": "./accordiontab.esm.js",
-  "unpkg": "./accordiontab.min.js",
-  "types": "./AccordionTab.d.ts",
-  "browser": {
-    "./sfc": "./AccordionTab.vue"
-  }
-}
\ No newline at end of file
+    "main": "./accordiontab.cjs.js",
+    "module": "./accordiontab.esm.js",
+    "unpkg": "./accordiontab.min.js",
+    "types": "./AccordionTab.d.ts",
+    "browser": {
+        "./sfc": "./AccordionTab.vue"
+    }
+}
diff --git a/components/lib/accordiontab/style/AccordionTabStyle.js b/components/lib/accordiontab/style/AccordionTabStyle.js
new file mode 100644
index 000000000..ff8b4c563
--- /dev/null
+++ b/components/lib/accordiontab/style/AccordionTabStyle.js
@@ -0,0 +1 @@
+export default {};
diff --git a/components/lib/accordiontab/style/package.json b/components/lib/accordiontab/style/package.json
new file mode 100644
index 000000000..327c666c0
--- /dev/null
+++ b/components/lib/accordiontab/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./accordiontabstyle.cjs.js",
+    "module": "./accordiontabstyle.esm.js",
+    "unpkg": "./accordiontabstyle.min.js"
+}
diff --git a/components/lib/autocomplete/BaseAutoComplete.vue b/components/lib/autocomplete/BaseAutoComplete.vue
index d846d13e9..9076fe5bd 100644
--- a/components/lib/autocomplete/BaseAutoComplete.vue
+++ b/components/lib/autocomplete/BaseAutoComplete.vue
@@ -1,154 +1,6 @@
 <script>
+import AutoCompleteStyle from 'primevue/autocomplete/style';
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-import { ObjectUtils } from 'primevue/utils';
-
-const styles = `
-@layer primevue {
-    .p-autocomplete {
-        display: inline-flex;
-    }
-
-    .p-autocomplete-loader {
-        position: absolute;
-        top: 50%;
-        margin-top: -0.5rem;
-    }
-
-    .p-autocomplete-dd .p-autocomplete-input {
-        flex: 1 1 auto;
-        width: 1%;
-    }
-
-    .p-autocomplete-dd .p-autocomplete-input,
-    .p-autocomplete-dd .p-autocomplete-multiple-container {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-    }
-
-    .p-autocomplete-dd .p-autocomplete-dropdown {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0px;
-    }
-
-    .p-autocomplete .p-autocomplete-panel {
-        min-width: 100%;
-    }
-
-    .p-autocomplete-panel {
-        position: absolute;
-        overflow: auto;
-        top: 0;
-        left: 0;
-    }
-
-    .p-autocomplete-items {
-        margin: 0;
-        padding: 0;
-        list-style-type: none;
-    }
-
-    .p-autocomplete-item {
-        cursor: pointer;
-        white-space: nowrap;
-        position: relative;
-        overflow: hidden;
-    }
-
-    .p-autocomplete-multiple-container {
-        margin: 0;
-        padding: 0;
-        list-style-type: none;
-        cursor: text;
-        overflow: hidden;
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-    }
-
-    .p-autocomplete-token {
-        cursor: default;
-        display: inline-flex;
-        align-items: center;
-        flex: 0 0 auto;
-    }
-
-    .p-autocomplete-token-icon {
-        cursor: pointer;
-    }
-
-    .p-autocomplete-input-token {
-        flex: 1 1 auto;
-        display: inline-flex;
-    }
-
-    .p-autocomplete-input-token input {
-        border: 0 none;
-        outline: 0 none;
-        background-color: transparent;
-        margin: 0;
-        padding: 0;
-        box-shadow: none;
-        border-radius: 0;
-        width: 100%;
-    }
-
-    .p-fluid .p-autocomplete {
-        display: flex;
-    }
-
-    .p-fluid .p-autocomplete-dd .p-autocomplete-input {
-        width: 1%;
-    }
-}
-`;
-
-const inlineStyles = {
-    root: { position: 'relative' }
-};
-
-const classes = {
-    root: ({ instance, props }) => [
-        'p-autocomplete p-component p-inputwrapper',
-        {
-            'p-disabled': props.disabled,
-            'p-focus': instance.focused,
-            'p-autocomplete-dd': props.dropdown,
-            'p-autocomplete-multiple': props.multiple,
-            'p-inputwrapper-filled': props.modelValue || ObjectUtils.isNotEmpty(instance.inputValue),
-            'p-inputwrapper-focus': instance.focused,
-            'p-overlay-open': instance.overlayVisible
-        }
-    ],
-    input: ({ props }) => ['p-autocomplete-input p-inputtext p-component', { 'p-autocomplete-dd-input': props.dropdown }],
-    container: 'p-autocomplete-multiple-container p-component p-inputtext',
-    token: ({ instance, i }) => ['p-autocomplete-token', { 'p-focus': instance.focusedMultipleOptionIndex === i }],
-    tokenLabel: 'p-autocomplete-token-label',
-    removeTokenIcon: 'p-autocomplete-token-icon',
-    inputToken: 'p-autocomplete-input-token',
-    loadingIcon: 'p-autocomplete-loader',
-    dropdownButton: 'p-autocomplete-dropdown',
-    panel: ({ instance }) => [
-        'p-autocomplete-panel p-component',
-        {
-            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
-        }
-    ],
-    list: 'p-autocomplete-items',
-    itemGroup: 'p-autocomplete-item-group',
-    item: ({ instance, option, i, getItemOptions }) => [
-        'p-autocomplete-item',
-        {
-            'p-highlight': instance.isSelected(option),
-            'p-focus': instance.focusedOptionIndex === instance.getOptionIndex(i, getItemOptions),
-            'p-disabled': instance.isOptionDisabled(option)
-        }
-    ],
-    emptyMessage: 'p-autocomplete-empty-message'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'autocomplete', manual: true });
 
 export default {
     name: 'BaseAutoComplete',
@@ -314,11 +166,7 @@ export default {
             default: null
         }
     },
-    css: {
-        classes,
-        inlineStyles,
-        loadStyle
-    },
+    style: AutoCompleteStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/autocomplete/package.json b/components/lib/autocomplete/package.json
index 0ae8266a1..6a2649baa 100644
--- a/components/lib/autocomplete/package.json
+++ b/components/lib/autocomplete/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./autocomplete.cjs.js",
-  "module": "./autocomplete.esm.js",
-  "unpkg": "./autocomplete.min.js",
-  "types": "./AutoComplete.d.ts",
-  "browser": {
-    "./sfc": "./AutoComplete.vue"
-  }
-}
\ No newline at end of file
+    "main": "./autocomplete.cjs.js",
+    "module": "./autocomplete.esm.js",
+    "unpkg": "./autocomplete.min.js",
+    "types": "./AutoComplete.d.ts",
+    "browser": {
+        "./sfc": "./AutoComplete.vue"
+    }
+}
diff --git a/components/lib/autocomplete/style/AutoCompleteStyle.js b/components/lib/autocomplete/style/AutoCompleteStyle.js
new file mode 100644
index 000000000..ba06e76c9
--- /dev/null
+++ b/components/lib/autocomplete/style/AutoCompleteStyle.js
@@ -0,0 +1,154 @@
+import BaseStyle from 'primevue/base/style';
+import { ObjectUtils } from 'primevue/utils';
+
+const css = `
+@layer primevue {
+    .p-autocomplete {
+        display: inline-flex;
+    }
+
+    .p-autocomplete-loader {
+        position: absolute;
+        top: 50%;
+        margin-top: -0.5rem;
+    }
+
+    .p-autocomplete-dd .p-autocomplete-input {
+        flex: 1 1 auto;
+        width: 1%;
+    }
+
+    .p-autocomplete-dd .p-autocomplete-input,
+    .p-autocomplete-dd .p-autocomplete-multiple-container {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    .p-autocomplete-dd .p-autocomplete-dropdown {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0px;
+    }
+
+    .p-autocomplete .p-autocomplete-panel {
+        min-width: 100%;
+    }
+
+    .p-autocomplete-panel {
+        position: absolute;
+        overflow: auto;
+        top: 0;
+        left: 0;
+    }
+
+    .p-autocomplete-items {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+    }
+
+    .p-autocomplete-item {
+        cursor: pointer;
+        white-space: nowrap;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .p-autocomplete-multiple-container {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+        cursor: text;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+    }
+
+    .p-autocomplete-token {
+        cursor: default;
+        display: inline-flex;
+        align-items: center;
+        flex: 0 0 auto;
+    }
+
+    .p-autocomplete-token-icon {
+        cursor: pointer;
+    }
+
+    .p-autocomplete-input-token {
+        flex: 1 1 auto;
+        display: inline-flex;
+    }
+
+    .p-autocomplete-input-token input {
+        border: 0 none;
+        outline: 0 none;
+        background-color: transparent;
+        margin: 0;
+        padding: 0;
+        box-shadow: none;
+        border-radius: 0;
+        width: 100%;
+    }
+
+    .p-fluid .p-autocomplete {
+        display: flex;
+    }
+
+    .p-fluid .p-autocomplete-dd .p-autocomplete-input {
+        width: 1%;
+    }
+}
+`;
+
+const inlineStyles = {
+    root: { position: 'relative' }
+};
+
+const classes = {
+    root: ({ instance, props }) => [
+        'p-autocomplete p-component p-inputwrapper',
+        {
+            'p-disabled': props.disabled,
+            'p-focus': instance.focused,
+            'p-autocomplete-dd': props.dropdown,
+            'p-autocomplete-multiple': props.multiple,
+            'p-inputwrapper-filled': props.modelValue || ObjectUtils.isNotEmpty(instance.inputValue),
+            'p-inputwrapper-focus': instance.focused,
+            'p-overlay-open': instance.overlayVisible
+        }
+    ],
+    input: ({ props }) => ['p-autocomplete-input p-inputtext p-component', { 'p-autocomplete-dd-input': props.dropdown }],
+    container: 'p-autocomplete-multiple-container p-component p-inputtext',
+    token: ({ instance, i }) => ['p-autocomplete-token', { 'p-focus': instance.focusedMultipleOptionIndex === i }],
+    tokenLabel: 'p-autocomplete-token-label',
+    removeTokenIcon: 'p-autocomplete-token-icon',
+    inputToken: 'p-autocomplete-input-token',
+    loadingIcon: 'p-autocomplete-loader',
+    dropdownButton: 'p-autocomplete-dropdown',
+    panel: ({ instance }) => [
+        'p-autocomplete-panel p-component',
+        {
+            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
+            'p-ripple-disabled': instance.$primevue.config.ripple === false
+        }
+    ],
+    list: 'p-autocomplete-items',
+    itemGroup: 'p-autocomplete-item-group',
+    item: ({ instance, option, i, getItemOptions }) => [
+        'p-autocomplete-item',
+        {
+            'p-highlight': instance.isSelected(option),
+            'p-focus': instance.focusedOptionIndex === instance.getOptionIndex(i, getItemOptions),
+            'p-disabled': instance.isOptionDisabled(option)
+        }
+    ],
+    emptyMessage: 'p-autocomplete-empty-message'
+};
+
+export default BaseStyle.extend({
+    name: 'autocomplete',
+    css,
+    classes,
+    inlineStyles
+});
diff --git a/components/lib/autocomplete/style/package.json b/components/lib/autocomplete/style/package.json
new file mode 100644
index 000000000..56bcdae07
--- /dev/null
+++ b/components/lib/autocomplete/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./autocompletestyle.cjs.js",
+    "module": "./autocompletestyle.esm.js",
+    "unpkg": "./autocompletestyle.min.js"
+}
diff --git a/components/lib/avatar/BaseAvatar.vue b/components/lib/avatar/BaseAvatar.vue
index ab244e831..264be3e9e 100644
--- a/components/lib/avatar/BaseAvatar.vue
+++ b/components/lib/avatar/BaseAvatar.vue
@@ -1,56 +1,6 @@
 <script>
+import AvatarStyle from 'primevue/avatar/style';
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-avatar {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        width: 2rem;
-        height: 2rem;
-        font-size: 1rem;
-    }
-    
-    .p-avatar.p-avatar-image {
-        background-color: transparent;
-    }
-    
-    .p-avatar.p-avatar-circle {
-        border-radius: 50%;
-    }
-    
-    .p-avatar-circle img {
-        border-radius: 50%;
-    }
-    
-    .p-avatar .p-avatar-icon {
-        font-size: 1rem;
-    }
-    
-    .p-avatar img {
-        width: 100%;
-        height: 100%;
-    }
-}
-`;
-
-const classes = {
-    root: ({ props }) => [
-        'p-avatar p-component',
-        {
-            'p-avatar-image': props.image != null,
-            'p-avatar-circle': props.shape === 'circle',
-            'p-avatar-lg': props.size === 'large',
-            'p-avatar-xl': props.size === 'xlarge'
-        }
-    ],
-    label: 'p-avatar-text',
-    icon: 'p-avatar-icon'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'avatar', manual: true });
 
 export default {
     name: 'BaseAvatar',
@@ -85,10 +35,7 @@ export default {
             default: null
         }
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: AvatarStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/avatar/package.json b/components/lib/avatar/package.json
index eb047f377..cdf785c53 100644
--- a/components/lib/avatar/package.json
+++ b/components/lib/avatar/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./avatar.cjs.js",
-  "module": "./avatar.esm.js",
-  "unpkg": "./avatar.min.js",
-  "types": "./Avatar.d.ts",
-  "browser": {
-    "./sfc": "./Avatar.vue"
-  }
-}
\ No newline at end of file
+    "main": "./avatar.cjs.js",
+    "module": "./avatar.esm.js",
+    "unpkg": "./avatar.min.js",
+    "types": "./Avatar.d.ts",
+    "browser": {
+        "./sfc": "./Avatar.vue"
+    }
+}
diff --git a/components/lib/avatar/style/AvatarStyle.js b/components/lib/avatar/style/AvatarStyle.js
new file mode 100644
index 000000000..a482d9714
--- /dev/null
+++ b/components/lib/avatar/style/AvatarStyle.js
@@ -0,0 +1,55 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-avatar {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 2rem;
+        height: 2rem;
+        font-size: 1rem;
+    }
+
+    .p-avatar.p-avatar-image {
+        background-color: transparent;
+    }
+
+    .p-avatar.p-avatar-circle {
+        border-radius: 50%;
+    }
+
+    .p-avatar-circle img {
+        border-radius: 50%;
+    }
+
+    .p-avatar .p-avatar-icon {
+        font-size: 1rem;
+    }
+
+    .p-avatar img {
+        width: 100%;
+        height: 100%;
+    }
+}
+`;
+
+const classes = {
+    root: ({ props }) => [
+        'p-avatar p-component',
+        {
+            'p-avatar-image': props.image != null,
+            'p-avatar-circle': props.shape === 'circle',
+            'p-avatar-lg': props.size === 'large',
+            'p-avatar-xl': props.size === 'xlarge'
+        }
+    ],
+    label: 'p-avatar-text',
+    icon: 'p-avatar-icon'
+};
+
+export default BaseStyle.extend({
+    name: 'avatar',
+    css,
+    classes
+});
diff --git a/components/lib/avatar/style/package.json b/components/lib/avatar/style/package.json
new file mode 100644
index 000000000..9161db968
--- /dev/null
+++ b/components/lib/avatar/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./avatarstyle.cjs.js",
+    "module": "./avatarstyle.esm.js",
+    "unpkg": "./avatarstyle.min.js"
+}
diff --git a/components/lib/avatargroup/BaseAvatarGroup.vue b/components/lib/avatargroup/BaseAvatarGroup.vue
index 1b92e6f1f..1f88c9470 100644
--- a/components/lib/avatargroup/BaseAvatarGroup.vue
+++ b/components/lib/avatargroup/BaseAvatarGroup.vue
@@ -1,33 +1,11 @@
 <script>
+import AvatarGroupStyle from 'primevue/avatargroup/style';
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-avatar-group .p-avatar + .p-avatar {
-        margin-left: -1rem;
-    }
-    
-    .p-avatar-group {
-        display: flex;
-        align-items: center;
-    }
-}
-`;
-
-const classes = {
-    root: 'p-avatar-group p-component'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'avatargroup', manual: true });
 
 export default {
     name: 'BaseAvatarGroup',
     extends: BaseComponent,
-    css: {
-        classes,
-        loadStyle
-    },
+    style: AvatarGroupStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/avatargroup/package.json b/components/lib/avatargroup/package.json
index 5ade6d698..40196e58f 100644
--- a/components/lib/avatargroup/package.json
+++ b/components/lib/avatargroup/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./avatargroup.cjs.js",
-  "module": "./avatargroup.esm.js",
-  "unpkg": "./avatargroup.min.js",
-  "types": "./AvatarGroup.d.ts",
-  "browser": {
-    "./sfc": "./AvatarGroup.vue"
-  }
-}
\ No newline at end of file
+    "main": "./avatargroup.cjs.js",
+    "module": "./avatargroup.esm.js",
+    "unpkg": "./avatargroup.min.js",
+    "types": "./AvatarGroup.d.ts",
+    "browser": {
+        "./sfc": "./AvatarGroup.vue"
+    }
+}
diff --git a/components/lib/avatargroup/style/AvatarGroupStyle.js b/components/lib/avatargroup/style/AvatarGroupStyle.js
new file mode 100644
index 000000000..c9c5b2f8b
--- /dev/null
+++ b/components/lib/avatargroup/style/AvatarGroupStyle.js
@@ -0,0 +1,24 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-avatar-group .p-avatar + .p-avatar {
+        margin-left: -1rem;
+    }
+
+    .p-avatar-group {
+        display: flex;
+        align-items: center;
+    }
+}
+`;
+
+const classes = {
+    root: 'p-avatar-group p-component'
+};
+
+export default BaseStyle.extend({
+    name: 'avatargroup',
+    css,
+    classes
+});
diff --git a/components/lib/avatargroup/style/package.json b/components/lib/avatargroup/style/package.json
new file mode 100644
index 000000000..9bf2f5f5b
--- /dev/null
+++ b/components/lib/avatargroup/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./avatargroupstyle.cjs.js",
+    "module": "./avatargroupstyle.esm.js",
+    "unpkg": "./avatargroupstyle.min.js"
+}
diff --git a/components/lib/badge/BaseBadge.vue b/components/lib/badge/BaseBadge.vue
index fdd607f40..2d4f8bf9c 100644
--- a/components/lib/badge/BaseBadge.vue
+++ b/components/lib/badge/BaseBadge.vue
@@ -1,62 +1,6 @@
 <script>
+import BadgeStyle from 'primevue/badge/style';
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-import { ObjectUtils } from 'primevue/utils';
-
-const styles = `
-@layer primevue {
-    .p-badge {
-        display: inline-block;
-        border-radius: 10px;
-        text-align: center;
-        padding: 0 .5rem;
-    }
-    
-    .p-overlay-badge {
-        position: relative;
-    }
-    
-    .p-overlay-badge .p-badge {
-        position: absolute;
-        top: 0;
-        right: 0;
-        transform: translate(50%,-50%);
-        transform-origin: 100% 0;
-        margin: 0;
-    }
-    
-    .p-badge-dot {
-        width: .5rem;
-        min-width: .5rem;
-        height: .5rem;
-        border-radius: 50%;
-        padding: 0;
-    }
-    
-    .p-badge-no-gutter {
-        padding: 0;
-        border-radius: 50%;
-    }
-}
-`;
-
-const classes = {
-    root: ({ props, instance }) => [
-        'p-badge p-component',
-        {
-            'p-badge-no-gutter': ObjectUtils.isNotEmpty(props.value) && String(props.value).length === 1,
-            'p-badge-dot': ObjectUtils.isEmpty(props.value) && !instance.$slots.default,
-            'p-badge-lg': props.size === 'large',
-            'p-badge-xl': props.size === 'xlarge',
-            'p-badge-info': props.severity === 'info',
-            'p-badge-success': props.severity === 'success',
-            'p-badge-warning': props.severity === 'warning',
-            'p-badge-danger': props.severity === 'danger'
-        }
-    ]
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'badge', manual: true });
 
 export default {
     name: 'BaseBadge',
@@ -75,10 +19,7 @@ export default {
             default: null
         }
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: BadgeStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/badge/package.json b/components/lib/badge/package.json
index 36312010d..a4d6e2626 100644
--- a/components/lib/badge/package.json
+++ b/components/lib/badge/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./badge.cjs.js",
-  "module": "./badge.esm.js",
-  "unpkg": "./badge.min.js",
-  "types": "./Badge.d.ts",
-  "browser": {
-    "./sfc": "./Badge.vue"
-  }
-}
\ No newline at end of file
+    "main": "./badge.cjs.js",
+    "module": "./badge.esm.js",
+    "unpkg": "./badge.min.js",
+    "types": "./Badge.d.ts",
+    "browser": {
+        "./sfc": "./Badge.vue"
+    }
+}
diff --git a/components/lib/badge/style/BadgeStyle.js b/components/lib/badge/style/BadgeStyle.js
new file mode 100644
index 000000000..25e700ca8
--- /dev/null
+++ b/components/lib/badge/style/BadgeStyle.js
@@ -0,0 +1,61 @@
+import BaseStyle from 'primevue/base/style';
+import { ObjectUtils } from 'primevue/utils';
+
+const css = `
+@layer primevue {
+    .p-badge {
+        display: inline-block;
+        border-radius: 10px;
+        text-align: center;
+        padding: 0 .5rem;
+    }
+
+    .p-overlay-badge {
+        position: relative;
+    }
+
+    .p-overlay-badge .p-badge {
+        position: absolute;
+        top: 0;
+        right: 0;
+        transform: translate(50%,-50%);
+        transform-origin: 100% 0;
+        margin: 0;
+    }
+
+    .p-badge-dot {
+        width: .5rem;
+        min-width: .5rem;
+        height: .5rem;
+        border-radius: 50%;
+        padding: 0;
+    }
+
+    .p-badge-no-gutter {
+        padding: 0;
+        border-radius: 50%;
+    }
+}
+`;
+
+const classes = {
+    root: ({ props, instance }) => [
+        'p-badge p-component',
+        {
+            'p-badge-no-gutter': ObjectUtils.isNotEmpty(props.value) && String(props.value).length === 1,
+            'p-badge-dot': ObjectUtils.isEmpty(props.value) && !instance.$slots.default,
+            'p-badge-lg': props.size === 'large',
+            'p-badge-xl': props.size === 'xlarge',
+            'p-badge-info': props.severity === 'info',
+            'p-badge-success': props.severity === 'success',
+            'p-badge-warning': props.severity === 'warning',
+            'p-badge-danger': props.severity === 'danger'
+        }
+    ]
+};
+
+export default BaseStyle.extend({
+    name: 'badge',
+    css,
+    classes
+});
diff --git a/components/lib/badge/style/package.json b/components/lib/badge/style/package.json
new file mode 100644
index 000000000..f785f50d6
--- /dev/null
+++ b/components/lib/badge/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./badgestyle.cjs.js",
+    "module": "./badgestyle.esm.js",
+    "unpkg": "./badgestyle.min.js"
+}
diff --git a/components/lib/badgedirective/BaseBadgeDirective.js b/components/lib/badgedirective/BaseBadgeDirective.js
index df3a40c78..332057436 100644
--- a/components/lib/badgedirective/BaseBadgeDirective.js
+++ b/components/lib/badgedirective/BaseBadgeDirective.js
@@ -1,54 +1,8 @@
+import BadgeDirectiveStyle from 'primevue/badgedirective/style';
 import BaseDirective from 'primevue/basedirective';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-badge {
-        display: inline-block;
-        border-radius: 10px;
-        text-align: center;
-        padding: 0 .5rem;
-    }
-    
-    .p-overlay-badge {
-        position: relative;
-    }
-    
-    .p-overlay-badge .p-badge {
-        position: absolute;
-        top: 0;
-        right: 0;
-        transform: translate(50%,-50%);
-        transform-origin: 100% 0;
-        margin: 0;
-    }
-    
-    .p-badge-dot {
-        width: .5rem;
-        min-width: .5rem;
-        height: .5rem;
-        border-radius: 50%;
-        padding: 0;
-    }
-
-    .p-badge-no-gutter {
-        padding: 0;
-        border-radius: 50%;
-    }
-}
-`;
-
-const classes = {
-    root: 'p-badge p-component'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'badge', manual: true });
 
 const BaseBadgeDirective = BaseDirective.extend({
-    css: {
-        classes,
-        loadStyle
-    }
+    style: BadgeDirectiveStyle
 });
 
 export default BaseBadgeDirective;
diff --git a/components/lib/badgedirective/package.json b/components/lib/badgedirective/package.json
index a58e7b158..bbf1f719b 100644
--- a/components/lib/badgedirective/package.json
+++ b/components/lib/badgedirective/package.json
@@ -1,6 +1,6 @@
 {
-  "main": "./badgedirective.cjs.js",
-  "module": "./badgedirective.esm.js",
-  "unpkg": "./badgedirective.min.js",
-  "types": "./BadgeDirective.d.ts"
-}
\ No newline at end of file
+    "main": "./badgedirective.cjs.js",
+    "module": "./badgedirective.esm.js",
+    "unpkg": "./badgedirective.min.js",
+    "types": "./BadgeDirective.d.ts"
+}
diff --git a/components/lib/badgedirective/style/BadgeDirectiveStyle.js b/components/lib/badgedirective/style/BadgeDirectiveStyle.js
new file mode 100644
index 000000000..aa1a29bb8
--- /dev/null
+++ b/components/lib/badgedirective/style/BadgeDirectiveStyle.js
@@ -0,0 +1,48 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-badge {
+        display: inline-block;
+        border-radius: 10px;
+        text-align: center;
+        padding: 0 .5rem;
+    }
+
+    .p-overlay-badge {
+        position: relative;
+    }
+
+    .p-overlay-badge .p-badge {
+        position: absolute;
+        top: 0;
+        right: 0;
+        transform: translate(50%,-50%);
+        transform-origin: 100% 0;
+        margin: 0;
+    }
+
+    .p-badge-dot {
+        width: .5rem;
+        min-width: .5rem;
+        height: .5rem;
+        border-radius: 50%;
+        padding: 0;
+    }
+
+    .p-badge-no-gutter {
+        padding: 0;
+        border-radius: 50%;
+    }
+}
+`;
+
+const classes = {
+    root: 'p-badge p-component'
+};
+
+export default BaseStyle.extend({
+    name: 'badge',
+    css,
+    classes
+});
diff --git a/components/lib/badgedirective/style/package.json b/components/lib/badgedirective/style/package.json
new file mode 100644
index 000000000..e8df9ea14
--- /dev/null
+++ b/components/lib/badgedirective/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./badgedirectivestyle.cjs.js",
+    "module": "./badgedirectivestyle.esm.js",
+    "unpkg": "./badgedirectivestyle.min.js"
+}
diff --git a/components/lib/base/Base.js b/components/lib/base/Base.js
index 8798c8fdb..ff8b4c563 100644
--- a/components/lib/base/Base.js
+++ b/components/lib/base/Base.js
@@ -1,32 +1 @@
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-.p-hidden-accessible {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-}
-
-.p-hidden-accessible input,
-.p-hidden-accessible select {
-    transform: scale(0);
-}
-
-.p-overflow-hidden {
-    overflow: hidden;
-    padding-right: var(--scrollbar-width);
-}
-`;
-
-export const { load: loadBaseStyle } = useStyle(styles, { name: 'base', manual: true });
-
-const Base = {
-    styles
-};
-
-export default Base;
+export default {};
diff --git a/components/lib/base/style/BaseStyle.js b/components/lib/base/style/BaseStyle.js
new file mode 100644
index 000000000..176689d49
--- /dev/null
+++ b/components/lib/base/style/BaseStyle.js
@@ -0,0 +1,48 @@
+import { useStyle } from 'primevue/usestyle';
+
+const css = `
+.p-hidden-accessible {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+}
+
+.p-hidden-accessible input,
+.p-hidden-accessible select {
+    transform: scale(0);
+}
+
+.p-overflow-hidden {
+    overflow: hidden;
+    padding-right: var(--scrollbar-width);
+}
+`;
+
+const classes = {};
+
+const inlineStyles = {};
+
+export default {
+    name: 'base',
+    css,
+    classes,
+    inlineStyles,
+    loadStyle(options = {}) {
+        return useStyle(this.css, { name: this.name, ...options });
+    },
+    getStyleSheet(extendedCSS = '', props = {}) {
+        const _props = Object.entries(props)
+            .reduce((acc, [k, v]) => acc.push(`${k}="${v}"`) && acc, [])
+            .join(' ');
+
+        return `<style type="text/css" data-primevue-style-id="${this.name}" ${_props}>${this.css}${extendedCSS}</style>`;
+    },
+    extend(style) {
+        return { ...this, ...style };
+    }
+};
diff --git a/components/lib/base/style/package.json b/components/lib/base/style/package.json
new file mode 100644
index 000000000..1cf44f44e
--- /dev/null
+++ b/components/lib/base/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./basestyle.cjs.js",
+    "module": "./basestyle.esm.js",
+    "unpkg": "./basestyle.min.js"
+}
diff --git a/components/lib/basecomponent/BaseComponent.vue b/components/lib/basecomponent/BaseComponent.vue
index f93a99ac1..5b1d13831 100644
--- a/components/lib/basecomponent/BaseComponent.vue
+++ b/components/lib/basecomponent/BaseComponent.vue
@@ -1,365 +1,8 @@
 <script>
-import { loadBaseStyle } from 'primevue/base';
-import { useStyle } from 'primevue/usestyle';
+import BaseStyle from 'primevue/base/style';
 import { ObjectUtils } from 'primevue/utils';
 import { mergeProps } from 'vue';
-
-const inlineStyles = {};
-
-const buttonStyles = `
-.p-button {
-    display: inline-flex;
-    cursor: pointer;
-    user-select: none;
-    align-items: center;
-    vertical-align: bottom;
-    text-align: center;
-    overflow: hidden;
-    position: relative;
-}
-
-.p-button-label {
-    flex: 1 1 auto;
-}
-
-.p-button-icon-right {
-    order: 1;
-}
-
-.p-button:disabled {
-    cursor: default;
-}
-
-.p-button-icon-only {
-    justify-content: center;
-}
-
-.p-button-icon-only .p-button-label {
-    visibility: hidden;
-    width: 0;
-    flex: 0 0 auto;
-}
-
-.p-button-vertical {
-    flex-direction: column;
-}
-
-.p-button-icon-bottom {
-    order: 2;
-}
-
-.p-buttonset .p-button {
-    margin: 0;
-}
-
-.p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover {
-    border-right: 0 none;
-}
-
-.p-buttonset .p-button:not(:first-of-type):not(:last-of-type) {
-    border-radius: 0;
-}
-
-.p-buttonset .p-button:first-of-type:not(:only-of-type) {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-}
-
-.p-buttonset .p-button:last-of-type:not(:only-of-type) {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-}
-
-.p-buttonset .p-button:focus {
-    position: relative;
-    z-index: 1;
-}
-`;
-const checkboxStyles = `
-.p-checkbox {
-    display: inline-flex;
-    cursor: pointer;
-    user-select: none;
-    vertical-align: bottom;
-    position: relative;
-}
-
-.p-checkbox.p-checkbox-disabled {
-    cursor: default;
-}
-
-.p-checkbox-box {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-`;
-const inputTextStyles = `
-.p-fluid .p-inputtext {
-    width: 100%;
-}
-
-/* InputGroup */
-.p-inputgroup {
-    display: flex;
-    align-items: stretch;
-    width: 100%;
-}
-
-.p-inputgroup-addon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.p-inputgroup .p-float-label {
-    display: flex;
-    align-items: stretch;
-    width: 100%;
-}
-
-.p-inputgroup .p-inputtext,
-.p-fluid .p-inputgroup .p-inputtext,
-.p-inputgroup .p-inputwrapper,
-.p-fluid .p-inputgroup .p-input {
-    flex: 1 1 auto;
-    width: 1%;
-}
-
-/* Floating Label */
-.p-float-label {
-    display: block;
-    position: relative;
-}
-
-.p-float-label label {
-    position: absolute;
-    pointer-events: none;
-    top: 50%;
-    margin-top: -.5rem;
-    transition-property: all;
-    transition-timing-function: ease;
-    line-height: 1;
-}
-
-.p-float-label textarea ~ label {
-    top: 1rem;
-}
-
-.p-float-label input:focus ~ label,
-.p-float-label input.p-filled ~ label,
-.p-float-label textarea:focus ~ label,
-.p-float-label textarea.p-filled ~ label,
-.p-float-label .p-inputwrapper-focus ~ label,
-.p-float-label .p-inputwrapper-filled ~ label {
-    top: -.75rem;
-    font-size: 12px;
-}
-
-.p-float-label .input:-webkit-autofill ~ label {
-    top: -20px;
-    font-size: 12px;
-}
-
-.p-float-label .p-placeholder,
-.p-float-label input::placeholder,
-.p-float-label .p-inputtext::placeholder {
-    opacity: 0;
-    transition-property: all;
-    transition-timing-function: ease;
-}
-
-.p-float-label .p-focus .p-placeholder,
-.p-float-label input:focus::placeholder,
-.p-float-label .p-inputtext:focus::placeholder {
-    opacity: 1;
-    transition-property: all;
-    transition-timing-function: ease;
-}
-
-.p-input-icon-left,
-.p-input-icon-right {
-    position: relative;
-    display: inline-block;
-}
-
-.p-input-icon-left > i,
-.p-input-icon-left > svg,
-.p-input-icon-right > i,
-.p-input-icon-right > svg {
-    position: absolute;
-    top: 50%;
-    margin-top: -.5rem;
-}
-
-.p-fluid .p-input-icon-left,
-.p-fluid .p-input-icon-right {
-    display: block;
-    width: 100%;
-}
-`;
-const radioButtonStyles = `
-.p-radiobutton {
-    position: relative;
-    display: inline-flex;
-    cursor: pointer;
-    user-select: none;
-    vertical-align: bottom;
-}
-
-.p-radiobutton.p-radiobutton-disabled {
-    cursor: default;
-}
-
-.p-radiobutton-box {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.p-radiobutton-icon {
-    -webkit-backface-visibility: hidden;
-    backface-visibility: hidden;
-    transform: translateZ(0) scale(.1);
-    border-radius: 50%;
-    visibility: hidden;
-}
-
-.p-radiobutton-box.p-highlight .p-radiobutton-icon {
-    transform: translateZ(0) scale(1.0, 1.0);
-    visibility: visible;
-}
-`;
-const styles = `
-@layer primevue {
-.p-component, .p-component * {
-    box-sizing: border-box;
-}
-
-.p-hidden-space {
-    visibility: hidden;
-}
-
-.p-reset {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    outline: 0;
-    text-decoration: none;
-    font-size: 100%;
-    list-style: none;
-}
-
-.p-disabled, .p-disabled * {
-    cursor: default !important;
-    pointer-events: none;
-    user-select: none;
-}
-
-.p-component-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-}
-
-.p-unselectable-text {
-    user-select: none;
-}
-
-.p-sr-only {
-    border: 0;
-    clip: rect(1px, 1px, 1px, 1px);
-    clip-path: inset(50%);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-    word-wrap: normal !important;
-}
-
-.p-link {
-	text-align: left;
-	background-color: transparent;
-	margin: 0;
-	padding: 0;
-	border: none;
-    cursor: pointer;
-    user-select: none;
-}
-
-.p-link:disabled {
-	cursor: default;
-}
-
-/* Non vue overlay animations */
-.p-connected-overlay {
-    opacity: 0;
-    transform: scaleY(0.8);
-    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
-}
-
-.p-connected-overlay-visible {
-    opacity: 1;
-    transform: scaleY(1);
-}
-
-.p-connected-overlay-hidden {
-    opacity: 0;
-    transform: scaleY(1);
-    transition: opacity .1s linear;
-}
-
-/* Vue based overlay animations */
-.p-connected-overlay-enter-from {
-    opacity: 0;
-    transform: scaleY(0.8);
-}
-
-.p-connected-overlay-leave-to {
-    opacity: 0;
-}
-
-.p-connected-overlay-enter-active {
-    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
-}
-
-.p-connected-overlay-leave-active {
-    transition: opacity .1s linear;
-}
-
-/* Toggleable Content */
-.p-toggleable-content-enter-from,
-.p-toggleable-content-leave-to {
-    max-height: 0;
-}
-
-.p-toggleable-content-enter-to,
-.p-toggleable-content-leave-from {
-    max-height: 1000px;
-}
-
-.p-toggleable-content-leave-active {
-    overflow: hidden;
-    transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
-}
-
-.p-toggleable-content-enter-active {
-    overflow: hidden;
-    transition: max-height 1s ease-in-out;
-}
-${buttonStyles}
-${checkboxStyles}
-${inputTextStyles}
-${radioButtonStyles}
-}
-`;
-
-const { load: loadStyle } = useStyle(styles, { name: 'common', manual: true });
-const { load: loadGlobalStyle } = useStyle('', { name: 'global', manual: true });
+import BaseComponentStyle from './style/BaseComponentStyle';
 
 export default {
     name: 'BaseComponent',
@@ -387,8 +30,8 @@ export default {
             immediate: true,
             handler(newValue) {
                 if (!newValue) {
-                    loadStyle(undefined, { nonce: this.$config?.csp?.nonce });
-                    this.$options.css && this.$css.loadStyle(undefined, { nonce: this.$config?.csp?.nonce });
+                    BaseComponentStyle.loadStyle({ nonce: this.$config?.csp?.nonce });
+                    this.$options.style && this.$style.loadStyle({ nonce: this.$config?.csp?.nonce });
                 }
             }
         }
@@ -410,7 +53,7 @@ export default {
         this._hook('onCreated');
     },
     beforeMount() {
-        loadBaseStyle(undefined, { nonce: this.$config?.csp?.nonce });
+        BaseStyle.loadStyle({ nonce: this.$config?.csp?.nonce });
         this._loadGlobalStyles();
         this._hook('onBeforeMount');
     },
@@ -452,7 +95,7 @@ export default {
 
             const globalCSS = this._useGlobalPT(this._getOptionValue, 'global.css', this.$params);
 
-            ObjectUtils.isNotEmpty(globalCSS) && loadGlobalStyle(globalCSS, { nonce: this.$config?.csp?.nonce });
+            ObjectUtils.isNotEmpty(globalCSS) && BaseComponentStyle.loadGlobalStyle(globalCSS, { nonce: this.$config?.csp?.nonce });
         },
         _getHostInstance(instance) {
             return instance ? (this.$options.hostName ? (instance.$.type.name === this.$options.hostName ? instance : this._getHostInstance(instance.$parentInstance)) : instance.$parentInstance) : undefined;
@@ -535,12 +178,12 @@ export default {
             return this._getPTValue(obj, key, { instance: this, ...params }, false);
         },
         cx(key = '', params = {}) {
-            return !this.isUnstyled ? this._getOptionValue(this.$css.classes, key, { ...this.$params, ...params }) : undefined;
+            return !this.isUnstyled ? this._getOptionValue(this.$style.classes, key, { ...this.$params, ...params }) : undefined;
         },
         sx(key = '', when = true, params = {}) {
             if (when) {
-                const self = this._getOptionValue(this.$css.inlineStyles, key, { ...this.$params, ...params });
-                const base = this._getOptionValue(inlineStyles, key, { ...this.$params, ...params });
+                const self = this._getOptionValue(this.$style.inlineStyles, key, { ...this.$params, ...params });
+                const base = this._getOptionValue(BaseComponentStyle.inlineStyles, key, { ...this.$params, ...params });
 
                 return [base, self];
             }
@@ -561,8 +204,8 @@ export default {
         $params() {
             return { instance: this, props: this.$props, state: this.$data, parentInstance: this.$parentInstance };
         },
-        $css() {
-            return { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, loadCustomStyle: () => {}, ...(this._getHostInstance(this) || {}).$css, ...this.$options.css };
+        $style() {
+            return { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, loadCustomStyle: () => {}, ...(this._getHostInstance(this) || {}).$style, ...this.$options.style };
         },
         $config() {
             return this.$primevue?.config;
diff --git a/components/lib/basecomponent/package.json b/components/lib/basecomponent/package.json
index a44fa6ca0..ffd66c259 100644
--- a/components/lib/basecomponent/package.json
+++ b/components/lib/basecomponent/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./basecomponent.cjs.js",
-  "module": "./basecomponent.esm.js",
-  "unpkg": "./basecomponent.min.js",
-  "types": "./BaseComponent.d.ts",
-  "browser": {
-    "./sfc": "./BaseComponent.vue"
-  }
-}
\ No newline at end of file
+    "main": "./basecomponent.cjs.js",
+    "module": "./basecomponent.esm.js",
+    "unpkg": "./basecomponent.min.js",
+    "types": "./BaseComponent.d.ts",
+    "browser": {
+        "./sfc": "./BaseComponent.vue"
+    }
+}
diff --git a/components/lib/basecomponent/style/BaseComponentStyle.js b/components/lib/basecomponent/style/BaseComponentStyle.js
new file mode 100644
index 000000000..d30236578
--- /dev/null
+++ b/components/lib/basecomponent/style/BaseComponentStyle.js
@@ -0,0 +1,364 @@
+import BaseStyle from 'primevue/base/style';
+import { useStyle } from 'primevue/usestyle';
+
+const buttonCSS = `
+.p-button {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+    align-items: center;
+    vertical-align: bottom;
+    text-align: center;
+    overflow: hidden;
+    position: relative;
+}
+
+.p-button-label {
+    flex: 1 1 auto;
+}
+
+.p-button-icon-right {
+    order: 1;
+}
+
+.p-button:disabled {
+    cursor: default;
+}
+
+.p-button-icon-only {
+    justify-content: center;
+}
+
+.p-button-icon-only .p-button-label {
+    visibility: hidden;
+    width: 0;
+    flex: 0 0 auto;
+}
+
+.p-button-vertical {
+    flex-direction: column;
+}
+
+.p-button-icon-bottom {
+    order: 2;
+}
+
+.p-buttonset .p-button {
+    margin: 0;
+}
+
+.p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover {
+    border-right: 0 none;
+}
+
+.p-buttonset .p-button:not(:first-of-type):not(:last-of-type) {
+    border-radius: 0;
+}
+
+.p-buttonset .p-button:first-of-type:not(:only-of-type) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.p-buttonset .p-button:last-of-type:not(:only-of-type) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.p-buttonset .p-button:focus {
+    position: relative;
+    z-index: 1;
+}
+`;
+
+const checkboxCSS = `
+.p-checkbox {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+    vertical-align: bottom;
+    position: relative;
+}
+
+.p-checkbox.p-checkbox-disabled {
+    cursor: default;
+}
+
+.p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+`;
+
+const inputTextCSS = `
+.p-fluid .p-inputtext {
+    width: 100%;
+}
+
+/* InputGroup */
+.p-inputgroup {
+    display: flex;
+    align-items: stretch;
+    width: 100%;
+}
+
+.p-inputgroup-addon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.p-inputgroup .p-float-label {
+    display: flex;
+    align-items: stretch;
+    width: 100%;
+}
+
+.p-inputgroup .p-inputtext,
+.p-fluid .p-inputgroup .p-inputtext,
+.p-inputgroup .p-inputwrapper,
+.p-fluid .p-inputgroup .p-input {
+    flex: 1 1 auto;
+    width: 1%;
+}
+
+/* Floating Label */
+.p-float-label {
+    display: block;
+    position: relative;
+}
+
+.p-float-label label {
+    position: absolute;
+    pointer-events: none;
+    top: 50%;
+    margin-top: -.5rem;
+    transition-property: all;
+    transition-timing-function: ease;
+    line-height: 1;
+}
+
+.p-float-label textarea ~ label {
+    top: 1rem;
+}
+
+.p-float-label input:focus ~ label,
+.p-float-label input.p-filled ~ label,
+.p-float-label textarea:focus ~ label,
+.p-float-label textarea.p-filled ~ label,
+.p-float-label .p-inputwrapper-focus ~ label,
+.p-float-label .p-inputwrapper-filled ~ label {
+    top: -.75rem;
+    font-size: 12px;
+}
+
+.p-float-label .input:-webkit-autofill ~ label {
+    top: -20px;
+    font-size: 12px;
+}
+
+.p-float-label .p-placeholder,
+.p-float-label input::placeholder,
+.p-float-label .p-inputtext::placeholder {
+    opacity: 0;
+    transition-property: all;
+    transition-timing-function: ease;
+}
+
+.p-float-label .p-focus .p-placeholder,
+.p-float-label input:focus::placeholder,
+.p-float-label .p-inputtext:focus::placeholder {
+    opacity: 1;
+    transition-property: all;
+    transition-timing-function: ease;
+}
+
+.p-input-icon-left,
+.p-input-icon-right {
+    position: relative;
+    display: inline-block;
+}
+
+.p-input-icon-left > i,
+.p-input-icon-left > svg,
+.p-input-icon-right > i,
+.p-input-icon-right > svg {
+    position: absolute;
+    top: 50%;
+    margin-top: -.5rem;
+}
+
+.p-fluid .p-input-icon-left,
+.p-fluid .p-input-icon-right {
+    display: block;
+    width: 100%;
+}
+`;
+
+const radioButtonCSS = `
+.p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+    vertical-align: bottom;
+}
+
+.p-radiobutton.p-radiobutton-disabled {
+    cursor: default;
+}
+
+.p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(.1);
+    border-radius: 50%;
+    visibility: hidden;
+}
+
+.p-radiobutton-box.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1.0, 1.0);
+    visibility: visible;
+}
+`;
+
+const css = `
+@layer primevue {
+.p-component, .p-component * {
+    box-sizing: border-box;
+}
+
+.p-hidden-space {
+    visibility: hidden;
+}
+
+.p-reset {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    outline: 0;
+    text-decoration: none;
+    font-size: 100%;
+    list-style: none;
+}
+
+.p-disabled, .p-disabled * {
+    cursor: default !important;
+    pointer-events: none;
+    user-select: none;
+}
+
+.p-component-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.p-unselectable-text {
+    user-select: none;
+}
+
+.p-sr-only {
+    border: 0;
+    clip: rect(1px, 1px, 1px, 1px);
+    clip-path: inset(50%);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+    word-wrap: normal !important;
+}
+
+.p-link {
+	text-align: left;
+	background-color: transparent;
+	margin: 0;
+	padding: 0;
+	border: none;
+    cursor: pointer;
+    user-select: none;
+}
+
+.p-link:disabled {
+	cursor: default;
+}
+
+/* Non vue overlay animations */
+.p-connected-overlay {
+    opacity: 0;
+    transform: scaleY(0.8);
+    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
+}
+
+.p-connected-overlay-visible {
+    opacity: 1;
+    transform: scaleY(1);
+}
+
+.p-connected-overlay-hidden {
+    opacity: 0;
+    transform: scaleY(1);
+    transition: opacity .1s linear;
+}
+
+/* Vue based overlay animations */
+.p-connected-overlay-enter-from {
+    opacity: 0;
+    transform: scaleY(0.8);
+}
+
+.p-connected-overlay-leave-to {
+    opacity: 0;
+}
+
+.p-connected-overlay-enter-active {
+    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
+}
+
+.p-connected-overlay-leave-active {
+    transition: opacity .1s linear;
+}
+
+/* Toggleable Content */
+.p-toggleable-content-enter-from,
+.p-toggleable-content-leave-to {
+    max-height: 0;
+}
+
+.p-toggleable-content-enter-to,
+.p-toggleable-content-leave-from {
+    max-height: 1000px;
+}
+
+.p-toggleable-content-leave-active {
+    overflow: hidden;
+    transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
+}
+
+.p-toggleable-content-enter-active {
+    overflow: hidden;
+    transition: max-height 1s ease-in-out;
+}
+${buttonCSS}
+${checkboxCSS}
+${inputTextCSS}
+${radioButtonCSS}
+}
+`;
+
+export default BaseStyle.extend({
+    name: 'common',
+    css,
+    loadGlobalStyle: (globalCSS, options = {}) => useStyle(globalCSS, { name: 'global', ...options })
+});
diff --git a/components/lib/basecomponent/style/package.json b/components/lib/basecomponent/style/package.json
new file mode 100644
index 000000000..c418a0caa
--- /dev/null
+++ b/components/lib/basecomponent/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./basecomponentstyle.cjs.js",
+    "module": "./basecomponentstyle.esm.js",
+    "unpkg": "./basecomponentstyle.min.js"
+}
diff --git a/components/lib/basedirective/BaseDirective.js b/components/lib/basedirective/BaseDirective.js
index 1fe4d4cb6..3784e4e2d 100644
--- a/components/lib/basedirective/BaseDirective.js
+++ b/components/lib/basedirective/BaseDirective.js
@@ -1,4 +1,4 @@
-import { loadBaseStyle } from 'primevue/base';
+import BaseStyle from 'primevue/base/style';
 import { ObjectUtils } from 'primevue/utils';
 import { mergeProps } from 'vue';
 
@@ -94,7 +94,7 @@ const BaseDirective = {
                 $host: el,
                 $binding: binding,
                 $el: $prevInstance['$el'] || undefined,
-                $css: { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, ...options?.css },
+                $style: { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, ...options?.style },
                 $config: config,
                 /* computed instance variables */
                 defaultPT: BaseDirective._getPT(config?.pt, undefined, (value) => value?.directives?.[name]),
@@ -102,8 +102,8 @@ const BaseDirective = {
                 /* instance's methods */
                 ptm: (key = '', params = {}) => BaseDirective._getPTValue(el.$instance, el.$instance?.$binding?.value?.pt, key, { ...params }),
                 ptmo: (obj = {}, key = '', params = {}) => BaseDirective._getPTValue(el.$instance, obj, key, params, false),
-                cx: (key = '', params = {}) => (!el.$instance?.isUnstyled ? BaseDirective._getOptionValue(el.$instance?.$css?.classes, key, { ...params }) : undefined),
-                sx: (key = '', when = true, params = {}) => (when ? BaseDirective._getOptionValue(el.$instance?.$css?.inlineStyles, key, { ...params }) : undefined),
+                cx: (key = '', params = {}) => (!el.$instance?.isUnstyled ? BaseDirective._getOptionValue(el.$instance?.$style?.classes, key, { ...params }) : undefined),
+                sx: (key = '', when = true, params = {}) => (when ? BaseDirective._getOptionValue(el.$instance?.$style?.inlineStyles, key, { ...params }) : undefined),
                 ...$options
             };
 
@@ -119,8 +119,8 @@ const BaseDirective = {
             beforeMount: (el, binding, vnode, prevVnode) => {
                 const config = binding?.instance?.$primevue?.config;
 
-                loadBaseStyle(undefined, { nonce: config?.csp?.nonce });
-                !el.$instance?.isUnstyled && el.$instance?.$css?.loadStyle(undefined, { nonce: config?.csp?.nonce });
+                BaseStyle.loadStyle(undefined, { nonce: config?.csp?.nonce });
+                !el.$instance?.isUnstyled && el.$instance?.$style?.loadStyle(undefined, { nonce: config?.csp?.nonce });
                 handleHook('beforeMount', el, binding, vnode, prevVnode);
             },
             mounted: (el, binding, vnode, prevVnode) => {
diff --git a/components/lib/baseicon/BaseIcon.vue b/components/lib/baseicon/BaseIcon.vue
index 0ed4b6349..d8d48eda8 100644
--- a/components/lib/baseicon/BaseIcon.vue
+++ b/components/lib/baseicon/BaseIcon.vue
@@ -1,42 +1,7 @@
 <script>
-import { useStyle } from 'primevue/usestyle';
+import BaseIconStyle from 'primevue/baseicon/style';
 import { ObjectUtils } from 'primevue/utils';
 
-const styles = `
-.p-icon {
-    display: inline-block;
-}
-
-.p-icon-spin {
-    -webkit-animation: p-icon-spin 2s infinite linear;
-    animation: p-icon-spin 2s infinite linear;
-}
-
-@-webkit-keyframes p-icon-spin {
-    0% {
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-    100% {
-        -webkit-transform: rotate(359deg);
-        transform: rotate(359deg);
-    }
-}
-
-@keyframes p-icon-spin {
-    0% {
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-    100% {
-        -webkit-transform: rotate(359deg);
-        transform: rotate(359deg);
-    }
-}
-`;
-
-const { load: loadStyle } = useStyle(styles, { name: 'baseicon', manual: true });
-
 export default {
     name: 'BaseIcon',
     props: {
@@ -50,7 +15,7 @@ export default {
         }
     },
     beforeMount() {
-        loadStyle(undefined, { nonce: this.$config?.csp?.nonce });
+        BaseIconStyle.loadStyle({ nonce: this.$config?.csp?.nonce });
     },
     methods: {
         pti() {
diff --git a/components/lib/baseicon/package.json b/components/lib/baseicon/package.json
index 4924d4ca0..b7f13074e 100644
--- a/components/lib/baseicon/package.json
+++ b/components/lib/baseicon/package.json
@@ -1,8 +1,8 @@
 {
-  "main": "./baseicon.cjs.js",
-  "module": "./baseicon.esm.js",
-  "unpkg": "./baseicon.min.js",
-  "browser": {
-    "./sfc": "./BaseIcon.vue"
-  }
-}
\ No newline at end of file
+    "main": "./baseicon.cjs.js",
+    "module": "./baseicon.esm.js",
+    "unpkg": "./baseicon.min.js",
+    "browser": {
+        "./sfc": "./BaseIcon.vue"
+    }
+}
diff --git a/components/lib/baseicon/style/BaseIconStyle.js b/components/lib/baseicon/style/BaseIconStyle.js
new file mode 100644
index 000000000..6986e063f
--- /dev/null
+++ b/components/lib/baseicon/style/BaseIconStyle.js
@@ -0,0 +1,39 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+.p-icon {
+    display: inline-block;
+}
+
+.p-icon-spin {
+    -webkit-animation: p-icon-spin 2s infinite linear;
+    animation: p-icon-spin 2s infinite linear;
+}
+
+@-webkit-keyframes p-icon-spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(359deg);
+        transform: rotate(359deg);
+    }
+}
+
+@keyframes p-icon-spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(359deg);
+        transform: rotate(359deg);
+    }
+}
+`;
+
+export default BaseStyle.extend({
+    name: 'baseicon',
+    css
+});
diff --git a/components/lib/baseicon/style/package.json b/components/lib/baseicon/style/package.json
new file mode 100644
index 000000000..5d62aa94c
--- /dev/null
+++ b/components/lib/baseicon/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./baseiconstyle.cjs.js",
+    "module": "./baseiconstyle.esm.js",
+    "unpkg": "./baseiconstyle.min.js"
+}
diff --git a/components/lib/blockui/BaseBlockUI.vue b/components/lib/blockui/BaseBlockUI.vue
index 9ff0c0dc8..6c70b866b 100644
--- a/components/lib/blockui/BaseBlockUI.vue
+++ b/components/lib/blockui/BaseBlockUI.vue
@@ -1,28 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-blockui-container {
-        position: relative;
-    }
-    
-    .p-blockui.p-component-overlay {
-        position: absolute;
-    }
-    
-    .p-blockui-document.p-component-overlay {
-        position: fixed;
-    }
-}
-`;
-
-const classes = {
-    root: 'p-blockui-container'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'blockui', manual: true });
+import BlockUIStyle from 'primevue/blockui/style';
 
 export default {
     name: 'BaseBlockUI',
@@ -45,10 +23,7 @@ export default {
             default: true
         }
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: BlockUIStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/blockui/package.json b/components/lib/blockui/package.json
index 9909ce560..f96277e69 100644
--- a/components/lib/blockui/package.json
+++ b/components/lib/blockui/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./blockui.cjs.js",
-  "module": "./blockui.esm.js",
-  "unpkg": "./blockui.min.js",
-  "types": "./BlockUI.d.ts",
-  "browser": {
-    "./sfc": "./BlockUI.vue"
-  }
-}
\ No newline at end of file
+    "main": "./blockui.cjs.js",
+    "module": "./blockui.esm.js",
+    "unpkg": "./blockui.min.js",
+    "types": "./BlockUI.d.ts",
+    "browser": {
+        "./sfc": "./BlockUI.vue"
+    }
+}
diff --git a/components/lib/blockui/style/BlockUIStyle.js b/components/lib/blockui/style/BlockUIStyle.js
new file mode 100644
index 000000000..1847d0a0d
--- /dev/null
+++ b/components/lib/blockui/style/BlockUIStyle.js
@@ -0,0 +1,27 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-blockui-container {
+        position: relative;
+    }
+
+    .p-blockui.p-component-overlay {
+        position: absolute;
+    }
+
+    .p-blockui-document.p-component-overlay {
+        position: fixed;
+    }
+}
+`;
+
+const classes = {
+    root: 'p-blockui-container'
+};
+
+export default BaseStyle.extend({
+    name: 'blockui',
+    css,
+    classes
+});
diff --git a/components/lib/blockui/style/package.json b/components/lib/blockui/style/package.json
new file mode 100644
index 000000000..b045799fa
--- /dev/null
+++ b/components/lib/blockui/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./blockuistyle.cjs.js",
+    "module": "./blockuistyle.esm.js",
+    "unpkg": "./blockuistyle.min.js"
+}
diff --git a/components/lib/breadcrumb/BaseBreadcrumb.vue b/components/lib/breadcrumb/BaseBreadcrumb.vue
index f779f3925..4d61e8ebc 100644
--- a/components/lib/breadcrumb/BaseBreadcrumb.vue
+++ b/components/lib/breadcrumb/BaseBreadcrumb.vue
@@ -1,61 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-breadcrumb {
-        overflow-x: auto;
-    }
-    
-    .p-breadcrumb .p-breadcrumb-list {
-        margin: 0;
-        padding: 0;
-        list-style-type: none;
-        display: flex;
-        align-items: center;
-        flex-wrap: nowrap;
-    }
-    
-    .p-breadcrumb .p-menuitem-text {
-        line-height: 1;
-    }
-    
-    .p-breadcrumb .p-menuitem-link {
-        text-decoration: none;
-        display: flex;
-        align-items: center;
-    }
-    
-    .p-breadcrumb .p-menuitem-separator {
-        display: flex;
-        align-items: center;
-    }
-    
-    .p-breadcrumb::-webkit-scrollbar {
-        display: none;
-    }
-}
-`;
-
-const classes = {
-    root: 'p-breadcrumb p-component',
-    menu: 'p-breadcrumb-list',
-    home: 'p-breadcrumb-home',
-    separator: 'p-menuitem-separator',
-    menuitem: ({ instance }) => ['p-menuitem', { 'p-disabled': instance.disabled() }],
-    action: ({ props, isActive, isExactActive }) => [
-        'p-menuitem-link',
-        {
-            'router-link-active': isActive,
-            'router-link-active-exact': props.exact && isExactActive
-        }
-    ],
-    icon: 'p-menuitem-icon',
-    label: 'p-menuitem-text'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'breadcrumb', manual: true });
+import BreadcrumbStyle from 'primevue/breadcrumb/style';
 
 export default {
     name: 'BaseBreadcrumb',
@@ -74,10 +19,7 @@ export default {
             default: true
         }
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: BreadcrumbStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/breadcrumb/package.json b/components/lib/breadcrumb/package.json
index b84efc8a1..b0800985d 100644
--- a/components/lib/breadcrumb/package.json
+++ b/components/lib/breadcrumb/package.json
@@ -1,10 +1,9 @@
 {
-  "main": "./breadcrumb.cjs.js",
-  "module": "./breadcrumb.esm.js",
-  "unpkg": "./breadcrumb.min.js",
-  "types": "./Breadcrumb.d.ts"
-  ,
-  "browser": {
-    "./sfc": "./Breadcrumb.vue"
-  }
-}
\ No newline at end of file
+    "main": "./breadcrumb.cjs.js",
+    "module": "./breadcrumb.esm.js",
+    "unpkg": "./breadcrumb.min.js",
+    "types": "./Breadcrumb.d.ts",
+    "browser": {
+        "./sfc": "./Breadcrumb.vue"
+    }
+}
diff --git a/components/lib/breadcrumb/style/BreadcrumbStyle.js b/components/lib/breadcrumb/style/BreadcrumbStyle.js
new file mode 100644
index 000000000..8111bb0c6
--- /dev/null
+++ b/components/lib/breadcrumb/style/BreadcrumbStyle.js
@@ -0,0 +1,60 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-breadcrumb {
+        overflow-x: auto;
+    }
+
+    .p-breadcrumb .p-breadcrumb-list {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+        display: flex;
+        align-items: center;
+        flex-wrap: nowrap;
+    }
+
+    .p-breadcrumb .p-menuitem-text {
+        line-height: 1;
+    }
+
+    .p-breadcrumb .p-menuitem-link {
+        text-decoration: none;
+        display: flex;
+        align-items: center;
+    }
+
+    .p-breadcrumb .p-menuitem-separator {
+        display: flex;
+        align-items: center;
+    }
+
+    .p-breadcrumb::-webkit-scrollbar {
+        display: none;
+    }
+}
+`;
+
+const classes = {
+    root: 'p-breadcrumb p-component',
+    menu: 'p-breadcrumb-list',
+    home: 'p-breadcrumb-home',
+    separator: 'p-menuitem-separator',
+    menuitem: ({ instance }) => ['p-menuitem', { 'p-disabled': instance.disabled() }],
+    action: ({ props, isActive, isExactActive }) => [
+        'p-menuitem-link',
+        {
+            'router-link-active': isActive,
+            'router-link-active-exact': props.exact && isExactActive
+        }
+    ],
+    icon: 'p-menuitem-icon',
+    label: 'p-menuitem-text'
+};
+
+export default BaseStyle.extend({
+    name: 'breadcrumb',
+    css,
+    classes
+});
diff --git a/components/lib/breadcrumb/style/package.json b/components/lib/breadcrumb/style/package.json
new file mode 100644
index 000000000..b5b7ad9b4
--- /dev/null
+++ b/components/lib/breadcrumb/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./breadcrumbstyle.cjs.js",
+    "module": "./breadcrumbstyle.esm.js",
+    "unpkg": "./breadcrumbstyle.min.js"
+}
diff --git a/components/lib/button/BaseButton.vue b/components/lib/button/BaseButton.vue
index 181e51348..ecd864615 100644
--- a/components/lib/button/BaseButton.vue
+++ b/components/lib/button/BaseButton.vue
@@ -1,38 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-
-const classes = {
-    root: ({ instance, props }) => [
-        'p-button p-component',
-        {
-            'p-button-icon-only': instance.hasIcon && !props.label && !props.badge,
-            'p-button-vertical': (props.iconPos === 'top' || props.iconPos === 'bottom') && props.label,
-            'p-disabled': instance.$attrs.disabled || instance.$attrs.disabled === '' || props.loading,
-            'p-button-loading': props.loading,
-            'p-button-loading-label-only': props.loading && !instance.hasIcon && props.label,
-            'p-button-link': props.link,
-            [`p-button-${props.severity}`]: props.severity,
-            'p-button-raised': props.raised,
-            'p-button-rounded': props.rounded,
-            'p-button-text': props.text,
-            'p-button-outlined': props.outlined,
-            'p-button-sm': props.size === 'small',
-            'p-button-lg': props.size === 'large',
-            'p-button-plain': props.plain
-        }
-    ],
-    loadingIcon: 'p-button-loading-icon pi-spin',
-    icon: ({ props }) => [
-        'p-button-icon',
-        {
-            'p-button-icon-left': props.iconPos === 'left' && props.label,
-            'p-button-icon-right': props.iconPos === 'right' && props.label,
-            'p-button-icon-top': props.iconPos === 'top' && props.label,
-            'p-button-icon-bottom': props.iconPos === 'bottom' && props.label
-        }
-    ],
-    label: 'p-button-label'
-};
+import ButtonStyle from 'primevue/button/style';
 
 export default {
     name: 'BaseButton',
@@ -103,9 +71,7 @@ export default {
             default: false
         }
     },
-    css: {
-        classes
-    },
+    style: ButtonStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/button/package.json b/components/lib/button/package.json
index 30406f96f..4d08032e3 100644
--- a/components/lib/button/package.json
+++ b/components/lib/button/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./button.cjs.js",
-  "module": "./button.esm.js",
-  "unpkg": "./button.min.js",
-  "types": "./Button.d.ts",
-  "browser": {
-    "./sfc": "./Button.vue"
-  }
-}
\ No newline at end of file
+    "main": "./button.cjs.js",
+    "module": "./button.esm.js",
+    "unpkg": "./button.min.js",
+    "types": "./Button.d.ts",
+    "browser": {
+        "./sfc": "./Button.vue"
+    }
+}
diff --git a/components/lib/button/style/ButtonStyle.js b/components/lib/button/style/ButtonStyle.js
new file mode 100644
index 000000000..7176adba3
--- /dev/null
+++ b/components/lib/button/style/ButtonStyle.js
@@ -0,0 +1,40 @@
+import BaseStyle from 'primevue/base/style';
+
+const classes = {
+    root: ({ instance, props }) => [
+        'p-button p-component',
+        {
+            'p-button-icon-only': instance.hasIcon && !props.label && !props.badge,
+            'p-button-vertical': (props.iconPos === 'top' || props.iconPos === 'bottom') && props.label,
+            'p-disabled': instance.$attrs.disabled || instance.$attrs.disabled === '' || props.loading,
+            'p-button-loading': props.loading,
+            'p-button-loading-label-only': props.loading && !instance.hasIcon && props.label,
+            'p-button-link': props.link,
+            [`p-button-${props.severity}`]: props.severity,
+            'p-button-raised': props.raised,
+            'p-button-rounded': props.rounded,
+            'p-button-text': props.text,
+            'p-button-outlined': props.outlined,
+            'p-button-sm': props.size === 'small',
+            'p-button-lg': props.size === 'large',
+            'p-button-plain': props.plain
+        }
+    ],
+    loadingIcon: 'p-button-loading-icon pi-spin',
+    icon: ({ props }) => [
+        'p-button-icon',
+        {
+            'p-button-icon-left': props.iconPos === 'left' && props.label,
+            'p-button-icon-right': props.iconPos === 'right' && props.label,
+            'p-button-icon-top': props.iconPos === 'top' && props.label,
+            'p-button-icon-bottom': props.iconPos === 'bottom' && props.label
+        }
+    ],
+    label: 'p-button-label'
+};
+
+export default BaseStyle.extend({
+    name: 'button',
+    classes,
+    loadStyle: () => {}
+});
diff --git a/components/lib/button/style/package.json b/components/lib/button/style/package.json
new file mode 100644
index 000000000..6cda9f587
--- /dev/null
+++ b/components/lib/button/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./buttonstyle.cjs.js",
+    "module": "./buttonstyle.esm.js",
+    "unpkg": "./buttonstyle.min.js"
+}
diff --git a/components/lib/calendar/BaseCalendar.vue b/components/lib/calendar/BaseCalendar.vue
index 4c21b29f1..7e266da4e 100644
--- a/components/lib/calendar/BaseCalendar.vue
+++ b/components/lib/calendar/BaseCalendar.vue
@@ -1,227 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-calendar {
-        display: inline-flex;
-        max-width: 100%;
-    }
-    
-    .p-calendar .p-inputtext {
-        flex: 1 1 auto;
-        width: 1%;
-    }
-    
-    .p-calendar-w-btn .p-inputtext {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-    }
-    
-    .p-calendar-w-btn .p-datepicker-trigger {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-    }
-    
-    /* Fluid */
-    .p-fluid .p-calendar {
-        display: flex;
-    }
-    
-    .p-fluid .p-calendar .p-inputtext {
-        width: 1%;
-    }
-    
-    /* Datepicker */
-    .p-calendar .p-datepicker {
-        min-width: 100%;
-    }
-    
-    .p-datepicker {
-        width: auto;
-    }
-    
-    .p-datepicker-inline {
-        display: inline-block;
-        overflow-x: auto;
-    }
-    
-    /* Header */
-    .p-datepicker-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-    }
-    
-    .p-datepicker-header .p-datepicker-title {
-        margin: 0 auto;
-    }
-    
-    .p-datepicker-prev,
-    .p-datepicker-next {
-        cursor: pointer;
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-        overflow: hidden;
-        position: relative;
-    }
-    
-    /* Multiple Month DatePicker */
-    .p-datepicker-multiple-month .p-datepicker-group-container {
-        display: flex;
-    }
-    
-    .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group {
-        flex: 1 1 auto;
-    }
-    
-    /* DatePicker Table */
-    .p-datepicker table {
-        width: 100%;
-        border-collapse: collapse;
-    }
-    
-    .p-datepicker td > span {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        cursor: pointer;
-        margin: 0 auto;
-        overflow: hidden;
-        position: relative;
-    }
-    
-    /* Month Picker */
-    .p-monthpicker-month {
-        width: 33.3%;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        overflow: hidden;
-        position: relative;
-    }
-    
-    /* Year Picker */
-    .p-yearpicker-year {
-        width: 50%;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        overflow: hidden;
-        position: relative;
-    }
-    
-    /*  Button Bar */
-    .p-datepicker-buttonbar {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-    }
-    
-    /* Time Picker */
-    .p-timepicker {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-    
-    .p-timepicker button {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        overflow: hidden;
-        position: relative;
-    }
-    
-    .p-timepicker > div {
-        display: flex;
-        align-items: center;
-        flex-direction: column;
-    }
-    
-    /* Touch UI */
-    .p-datepicker-touch-ui,
-    .p-calendar .p-datepicker-touch-ui {
-        min-width: 80vw;
-    }
-}
-`;
-
-const inlineStyles = {
-    root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
-};
-
-const classes = {
-    root: ({ props, state }) => [
-        'p-calendar p-component p-inputwrapper',
-        {
-            'p-calendar-w-btn': props.showIcon,
-            'p-calendar-timeonly': props.timeOnly,
-            'p-calendar-disabled': props.disabled,
-            'p-inputwrapper-filled': props.modelValue,
-            'p-inputwrapper-focus': state.focused,
-            'p-focus': state.focused || state.overlayVisible
-        }
-    ],
-    input: 'p-inputtext p-component',
-    dropdownButton: 'p-datepicker-trigger',
-    panel: ({ instance, props, state }) => [
-        'p-datepicker p-component',
-        {
-            'p-datepicker-inline': props.inline,
-            'p-disabled': props.disabled,
-            'p-datepicker-timeonly': props.timeOnly,
-            'p-datepicker-multiple-month': props.numberOfMonths > 1,
-            'p-datepicker-monthpicker': state.currentView === 'month',
-            'p-datepicker-yearpicker': state.currentView === 'year',
-            'p-datepicker-touch-ui': props.touchUI,
-            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
-        }
-    ],
-    groupContainer: 'p-datepicker-group-container',
-    group: 'p-datepicker-group',
-    header: 'p-datepicker-header',
-    previousButton: 'p-datepicker-prev p-link',
-    previousIcon: 'p-datepicker-prev-icon',
-    title: 'p-datepicker-title',
-    monthTitle: 'p-datepicker-month p-link',
-    yearTitle: 'p-datepicker-year p-link',
-    decadeTitle: 'p-datepicker-decade',
-    nextButton: 'p-datepicker-next p-link',
-    nextIcon: 'p-datepicker-next-icon',
-    container: 'p-datepicker-calendar-container',
-    table: 'p-datepicker-calendar',
-    weekHeader: 'p-datepicker-weekheader p-disabled',
-    weekNumber: 'p-datepicker-weeknumber',
-    weekLabelContainer: 'p-disabled',
-    day: ({ date }) => [{ 'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today }],
-    dayLabel: ({ instance, date }) => [{ 'p-highlight': instance.isSelected(date) && date.selectable, 'p-disabled': !date.selectable }],
-    monthPicker: 'p-monthpicker',
-    month: ({ instance, month, index }) => ['p-monthpicker-month', { 'p-highlight': instance.isMonthSelected(index), 'p-disabled': !month.selectable }],
-    yearPicker: 'p-yearpicker',
-    year: ({ instance, year }) => ['p-yearpicker-year', { 'p-highlight': instance.isYearSelected(year.value), 'p-disabled': !year.selectable }],
-    timePicker: 'p-timepicker',
-    hourPicker: 'p-hour-picker',
-    incrementButton: 'p-link',
-    decrementButton: 'p-link',
-    separatorContainer: 'p-separator',
-    minutePicker: 'p-minute-picker',
-    incrementButton: 'p-link',
-    decrementButton: 'p-link',
-    secondPicker: 'p-second-picker',
-    ampmPicker: 'p-ampm-picker',
-    buttonbar: 'p-datepicker-buttonbar',
-    todayButton: 'p-button-text',
-    clearButton: 'p-button-text'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'calendar', manual: true });
+import CalendarStyle from 'primevue/calendar/style';
 
 export default {
     name: 'BaseCalendar',
@@ -442,11 +221,7 @@ export default {
             default: null
         }
     },
-    css: {
-        inlineStyles,
-        classes,
-        loadStyle
-    },
+    style: CalendarStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/calendar/package.json b/components/lib/calendar/package.json
index d64211699..8da5e9caa 100644
--- a/components/lib/calendar/package.json
+++ b/components/lib/calendar/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./calendar.cjs.js",
-  "module": "./calendar.esm.js",
-  "unpkg": "./calendar.min.js",
-  "types": "./Calendar.d.ts",
-  "browser": {
-    "./sfc": "./Calendar.vue"
-  }
-}
\ No newline at end of file
+    "main": "./calendar.cjs.js",
+    "module": "./calendar.esm.js",
+    "unpkg": "./calendar.min.js",
+    "types": "./Calendar.d.ts",
+    "browser": {
+        "./sfc": "./Calendar.vue"
+    }
+}
diff --git a/components/lib/calendar/style/CalendarStyle.js b/components/lib/calendar/style/CalendarStyle.js
new file mode 100644
index 000000000..b5c95014c
--- /dev/null
+++ b/components/lib/calendar/style/CalendarStyle.js
@@ -0,0 +1,227 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-calendar {
+        display: inline-flex;
+        max-width: 100%;
+    }
+
+    .p-calendar .p-inputtext {
+        flex: 1 1 auto;
+        width: 1%;
+    }
+
+    .p-calendar-w-btn .p-inputtext {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    .p-calendar-w-btn .p-datepicker-trigger {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+
+    /* Fluid */
+    .p-fluid .p-calendar {
+        display: flex;
+    }
+
+    .p-fluid .p-calendar .p-inputtext {
+        width: 1%;
+    }
+
+    /* Datepicker */
+    .p-calendar .p-datepicker {
+        min-width: 100%;
+    }
+
+    .p-datepicker {
+        width: auto;
+    }
+
+    .p-datepicker-inline {
+        display: inline-block;
+        overflow-x: auto;
+    }
+
+    /* Header */
+    .p-datepicker-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .p-datepicker-header .p-datepicker-title {
+        margin: 0 auto;
+    }
+
+    .p-datepicker-prev,
+    .p-datepicker-next {
+        cursor: pointer;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+        position: relative;
+    }
+
+    /* Multiple Month DatePicker */
+    .p-datepicker-multiple-month .p-datepicker-group-container {
+        display: flex;
+    }
+
+    .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group {
+        flex: 1 1 auto;
+    }
+
+    /* DatePicker Table */
+    .p-datepicker table {
+        width: 100%;
+        border-collapse: collapse;
+    }
+
+    .p-datepicker td > span {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        margin: 0 auto;
+        overflow: hidden;
+        position: relative;
+    }
+
+    /* Month Picker */
+    .p-monthpicker-month {
+        width: 33.3%;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        overflow: hidden;
+        position: relative;
+    }
+
+    /* Year Picker */
+    .p-yearpicker-year {
+        width: 50%;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        overflow: hidden;
+        position: relative;
+    }
+
+    /*  Button Bar */
+    .p-datepicker-buttonbar {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    /* Time Picker */
+    .p-timepicker {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .p-timepicker button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .p-timepicker > div {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+    }
+
+    /* Touch UI */
+    .p-datepicker-touch-ui,
+    .p-calendar .p-datepicker-touch-ui {
+        min-width: 80vw;
+    }
+}
+`;
+
+const inlineStyles = {
+    root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
+};
+
+const classes = {
+    root: ({ props, state }) => [
+        'p-calendar p-component p-inputwrapper',
+        {
+            'p-calendar-w-btn': props.showIcon,
+            'p-calendar-timeonly': props.timeOnly,
+            'p-calendar-disabled': props.disabled,
+            'p-inputwrapper-filled': props.modelValue,
+            'p-inputwrapper-focus': state.focused,
+            'p-focus': state.focused || state.overlayVisible
+        }
+    ],
+    input: 'p-inputtext p-component',
+    dropdownButton: 'p-datepicker-trigger',
+    panel: ({ instance, props, state }) => [
+        'p-datepicker p-component',
+        {
+            'p-datepicker-inline': props.inline,
+            'p-disabled': props.disabled,
+            'p-datepicker-timeonly': props.timeOnly,
+            'p-datepicker-multiple-month': props.numberOfMonths > 1,
+            'p-datepicker-monthpicker': state.currentView === 'month',
+            'p-datepicker-yearpicker': state.currentView === 'year',
+            'p-datepicker-touch-ui': props.touchUI,
+            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
+            'p-ripple-disabled': instance.$primevue.config.ripple === false
+        }
+    ],
+    groupContainer: 'p-datepicker-group-container',
+    group: 'p-datepicker-group',
+    header: 'p-datepicker-header',
+    previousButton: 'p-datepicker-prev p-link',
+    previousIcon: 'p-datepicker-prev-icon',
+    title: 'p-datepicker-title',
+    monthTitle: 'p-datepicker-month p-link',
+    yearTitle: 'p-datepicker-year p-link',
+    decadeTitle: 'p-datepicker-decade',
+    nextButton: 'p-datepicker-next p-link',
+    nextIcon: 'p-datepicker-next-icon',
+    container: 'p-datepicker-calendar-container',
+    table: 'p-datepicker-calendar',
+    weekHeader: 'p-datepicker-weekheader p-disabled',
+    weekNumber: 'p-datepicker-weeknumber',
+    weekLabelContainer: 'p-disabled',
+    day: ({ date }) => [{ 'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today }],
+    dayLabel: ({ instance, date }) => [{ 'p-highlight': instance.isSelected(date) && date.selectable, 'p-disabled': !date.selectable }],
+    monthPicker: 'p-monthpicker',
+    month: ({ instance, month, index }) => ['p-monthpicker-month', { 'p-highlight': instance.isMonthSelected(index), 'p-disabled': !month.selectable }],
+    yearPicker: 'p-yearpicker',
+    year: ({ instance, year }) => ['p-yearpicker-year', { 'p-highlight': instance.isYearSelected(year.value), 'p-disabled': !year.selectable }],
+    timePicker: 'p-timepicker',
+    hourPicker: 'p-hour-picker',
+    incrementButton: 'p-link',
+    decrementButton: 'p-link',
+    separatorContainer: 'p-separator',
+    minutePicker: 'p-minute-picker',
+    incrementButton: 'p-link',
+    decrementButton: 'p-link',
+    secondPicker: 'p-second-picker',
+    ampmPicker: 'p-ampm-picker',
+    buttonbar: 'p-datepicker-buttonbar',
+    todayButton: 'p-button-text',
+    clearButton: 'p-button-text'
+};
+
+export default BaseStyle.extend({
+    name: 'calendar',
+    css,
+    classes,
+    inlineStyles
+});
diff --git a/components/lib/calendar/style/package.json b/components/lib/calendar/style/package.json
new file mode 100644
index 000000000..aed544586
--- /dev/null
+++ b/components/lib/calendar/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./calendarstyle.cjs.js",
+    "module": "./calendarstyle.esm.js",
+    "unpkg": "./calendarstyle.min.js"
+}
diff --git a/components/lib/card/BaseCard.vue b/components/lib/card/BaseCard.vue
index a3f8fc6b1..7750f53c5 100644
--- a/components/lib/card/BaseCard.vue
+++ b/components/lib/card/BaseCard.vue
@@ -1,21 +1,10 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-
-const classes = {
-    root: 'p-card p-component',
-    header: 'p-card-header',
-    body: 'p-card-body',
-    title: 'p-card-title',
-    subtitle: 'p-card-subtitle',
-    content: 'p-card-content',
-    footer: 'p-card-footer'
-};
+import CardStyle from 'primevue/card/style';
 
 export default {
     name: 'BaseCard',
     extends: BaseComponent,
-    css: {
-        classes
-    }
+    style: CardStyle
 };
 </script>
diff --git a/components/lib/card/package.json b/components/lib/card/package.json
index 7158047e2..8428e0ecd 100644
--- a/components/lib/card/package.json
+++ b/components/lib/card/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./card.cjs.js",
-  "module": "./card.esm.js",
-  "unpkg": "./card.min.js",
-  "types": "./Card.d.ts",
-  "browser": {
-    "./sfc": "./Card.vue"
-  }
-}
\ No newline at end of file
+    "main": "./card.cjs.js",
+    "module": "./card.esm.js",
+    "unpkg": "./card.min.js",
+    "types": "./Card.d.ts",
+    "browser": {
+        "./sfc": "./Card.vue"
+    }
+}
diff --git a/components/lib/card/style/CardStyle.js b/components/lib/card/style/CardStyle.js
new file mode 100644
index 000000000..f0dfcfd86
--- /dev/null
+++ b/components/lib/card/style/CardStyle.js
@@ -0,0 +1,17 @@
+import BaseStyle from 'primevue/base/style';
+
+const classes = {
+    root: 'p-card p-component',
+    header: 'p-card-header',
+    body: 'p-card-body',
+    title: 'p-card-title',
+    subtitle: 'p-card-subtitle',
+    content: 'p-card-content',
+    footer: 'p-card-footer'
+};
+
+export default BaseStyle.extend({
+    name: 'card',
+    classes,
+    loadStyle: () => {}
+});
diff --git a/components/lib/card/style/package.json b/components/lib/card/style/package.json
new file mode 100644
index 000000000..b96785ec3
--- /dev/null
+++ b/components/lib/card/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./cardstyle.cjs.js",
+    "module": "./cardstyle.esm.js",
+    "unpkg": "./cardstyle.min.js"
+}
diff --git a/components/lib/carousel/BaseCarousel.vue b/components/lib/carousel/BaseCarousel.vue
index 192f6ea63..aebfa47c4 100644
--- a/components/lib/carousel/BaseCarousel.vue
+++ b/components/lib/carousel/BaseCarousel.vue
@@ -1,136 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-carousel {
-        display: flex;
-        flex-direction: column;
-    }
-    
-    .p-carousel-content {
-        display: flex;
-        flex-direction: column;
-        overflow: auto;
-    }
-    
-    .p-carousel-prev,
-    .p-carousel-next {
-        align-self: center;
-        flex-grow: 0;
-        flex-shrink: 0;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        overflow: hidden;
-        position: relative;
-    }
-    
-    .p-carousel-container {
-        display: flex;
-        flex-direction: row;
-    }
-    
-    .p-carousel-items-content {
-        overflow: hidden;
-        width: 100%;
-    }
-    
-    .p-carousel-items-container {
-        display: flex;
-        flex-direction: row;
-    }
-    
-    .p-carousel-indicators {
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-        flex-wrap: wrap;
-    }
-    
-    .p-carousel-indicator > button {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-    
-    /* Vertical */
-    .p-carousel-vertical .p-carousel-container {
-        flex-direction: column;
-    }
-    
-    .p-carousel-vertical .p-carousel-items-container {
-        flex-direction: column;
-        height: 100%;
-    }
-    
-    /* Keyboard Support */
-    .p-items-hidden .p-carousel-item {
-        visibility: hidden;
-    }
-    
-    .p-items-hidden .p-carousel-item.p-carousel-item-active {
-        visibility: visible;
-    }
-}
-`;
-
-const classes = {
-    root: ({ instance }) => [
-        'p-carousel p-component',
-        {
-            'p-carousel-vertical': instance.isVertical(),
-            'p-carousel-horizontal': !instance.isVertical()
-        }
-    ],
-    header: 'p-carousel-header',
-    content: 'p-carousel-content',
-    container: 'p-carousel-container',
-    previousButton: ({ instance }) => [
-        'p-carousel-prev p-link',
-        {
-            'p-disabled': instance.backwardIsDisabled
-        }
-    ],
-    previousButtonIcon: 'p-carousel-next-icon',
-    itemsContent: 'p-carousel-items-content',
-    itemsContainer: 'p-carousel-items-container',
-    itemCloned: ({ index, value, totalShiftedItems, d_numVisible }) => [
-        'p-carousel-item p-carousel-item-cloned',
-        {
-            'p-carousel-item-active': totalShiftedItems * -1 === value.length + d_numVisible,
-            'p-carousel-item-start': index === 0,
-            'p-carousel-item-end': value.slice(-1 * d_numVisible).length - 1 === index
-        }
-    ],
-    item: ({ instance, index }) => [
-        'p-carousel-item',
-        {
-            'p-carousel-item-active': instance.firstIndex() <= index && instance.lastIndex() >= index,
-            'p-carousel-item-start': instance.firstIndex() === index,
-            'p-carousel-item-end': instance.lastIndex() === index
-        }
-    ],
-    nextButton: ({ instance }) => [
-        'p-carousel-next p-link',
-        {
-            'p-disabled': instance.forwardIsDisabled
-        }
-    ],
-    nextButtonIcon: 'p-carousel-prev-icon',
-    indicators: 'p-carousel-indicators p-reset',
-    indicator: ({ instance, index }) => [
-        'p-carousel-indicator',
-        {
-            'p-highlight': instance.d_page === index
-        }
-    ],
-    indicatorButton: 'p-link',
-    footer: 'p-carousel-footer'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'carousel', manual: true });
+import CarouselStyle from 'primevue/carousel/style';
 
 export default {
     name: 'BaseCarousel',
@@ -186,10 +56,7 @@ export default {
             default: null
         }
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: CarouselStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/carousel/package.json b/components/lib/carousel/package.json
index 14eb00e41..8606e2388 100644
--- a/components/lib/carousel/package.json
+++ b/components/lib/carousel/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./carousel.cjs.js",
-  "module": "./carousel.esm.js",
-  "unpkg": "./carousel.min.js",
-  "types": "./Carousel.d.ts",
-  "browser": {
-    "./sfc": "./Carousel.vue"
-  }
-}
\ No newline at end of file
+    "main": "./carousel.cjs.js",
+    "module": "./carousel.esm.js",
+    "unpkg": "./carousel.min.js",
+    "types": "./Carousel.d.ts",
+    "browser": {
+        "./sfc": "./Carousel.vue"
+    }
+}
diff --git a/components/lib/carousel/style/CarouselStyle.js b/components/lib/carousel/style/CarouselStyle.js
new file mode 100644
index 000000000..ff977fba7
--- /dev/null
+++ b/components/lib/carousel/style/CarouselStyle.js
@@ -0,0 +1,135 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-carousel {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .p-carousel-content {
+        display: flex;
+        flex-direction: column;
+        overflow: auto;
+    }
+
+    .p-carousel-prev,
+    .p-carousel-next {
+        align-self: center;
+        flex-grow: 0;
+        flex-shrink: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .p-carousel-container {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .p-carousel-items-content {
+        overflow: hidden;
+        width: 100%;
+    }
+
+    .p-carousel-items-container {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .p-carousel-indicators {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        flex-wrap: wrap;
+    }
+
+    .p-carousel-indicator > button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    /* Vertical */
+    .p-carousel-vertical .p-carousel-container {
+        flex-direction: column;
+    }
+
+    .p-carousel-vertical .p-carousel-items-container {
+        flex-direction: column;
+        height: 100%;
+    }
+
+    /* Keyboard Support */
+    .p-items-hidden .p-carousel-item {
+        visibility: hidden;
+    }
+
+    .p-items-hidden .p-carousel-item.p-carousel-item-active {
+        visibility: visible;
+    }
+}
+`;
+
+const classes = {
+    root: ({ instance }) => [
+        'p-carousel p-component',
+        {
+            'p-carousel-vertical': instance.isVertical(),
+            'p-carousel-horizontal': !instance.isVertical()
+        }
+    ],
+    header: 'p-carousel-header',
+    content: 'p-carousel-content',
+    container: 'p-carousel-container',
+    previousButton: ({ instance }) => [
+        'p-carousel-prev p-link',
+        {
+            'p-disabled': instance.backwardIsDisabled
+        }
+    ],
+    previousButtonIcon: 'p-carousel-next-icon',
+    itemsContent: 'p-carousel-items-content',
+    itemsContainer: 'p-carousel-items-container',
+    itemCloned: ({ index, value, totalShiftedItems, d_numVisible }) => [
+        'p-carousel-item p-carousel-item-cloned',
+        {
+            'p-carousel-item-active': totalShiftedItems * -1 === value.length + d_numVisible,
+            'p-carousel-item-start': index === 0,
+            'p-carousel-item-end': value.slice(-1 * d_numVisible).length - 1 === index
+        }
+    ],
+    item: ({ instance, index }) => [
+        'p-carousel-item',
+        {
+            'p-carousel-item-active': instance.firstIndex() <= index && instance.lastIndex() >= index,
+            'p-carousel-item-start': instance.firstIndex() === index,
+            'p-carousel-item-end': instance.lastIndex() === index
+        }
+    ],
+    nextButton: ({ instance }) => [
+        'p-carousel-next p-link',
+        {
+            'p-disabled': instance.forwardIsDisabled
+        }
+    ],
+    nextButtonIcon: 'p-carousel-prev-icon',
+    indicators: 'p-carousel-indicators p-reset',
+    indicator: ({ instance, index }) => [
+        'p-carousel-indicator',
+        {
+            'p-highlight': instance.d_page === index
+        }
+    ],
+    indicatorButton: 'p-link',
+    footer: 'p-carousel-footer'
+};
+
+export default BaseStyle.extend({
+    name: 'carousel',
+    css,
+    classes
+});
diff --git a/components/lib/carousel/style/package.json b/components/lib/carousel/style/package.json
new file mode 100644
index 000000000..74df4db69
--- /dev/null
+++ b/components/lib/carousel/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./carouselstyle.cjs.js",
+    "module": "./carouselstyle.esm.js",
+    "unpkg": "./carouselstyle.min.js"
+}
diff --git a/components/lib/cascadeselect/BaseCascadeSelect.vue b/components/lib/cascadeselect/BaseCascadeSelect.vue
index d1d91057f..170c910be 100644
--- a/components/lib/cascadeselect/BaseCascadeSelect.vue
+++ b/components/lib/cascadeselect/BaseCascadeSelect.vue
@@ -1,142 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-cascadeselect {
-        display: inline-flex;
-        cursor: pointer;
-        user-select: none;
-    }
-    
-    .p-cascadeselect-trigger {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
-    }
-    
-    .p-cascadeselect-label {
-        display: block;
-        white-space: nowrap;
-        overflow: hidden;
-        flex: 1 1 auto;
-        width: 1%;
-        text-overflow: ellipsis;
-        cursor: pointer;
-    }
-    
-    .p-cascadeselect-label-empty {
-        overflow: hidden;
-        visibility: hidden;
-    }
-    
-    .p-cascadeselect .p-cascadeselect-panel {
-        min-width: 100%;
-    }
-    
-    .p-cascadeselect-item {
-        cursor: pointer;
-        font-weight: normal;
-        white-space: nowrap;
-    }
-    
-    .p-cascadeselect-item-content {
-        display: flex;
-        align-items: center;
-        overflow: hidden;
-        position: relative;
-    }
-    
-    .p-cascadeselect-group-icon {
-        margin-left: auto;
-    }
-    
-    .p-cascadeselect-items {
-        margin: 0;
-        padding: 0;
-        list-style-type: none;
-        min-width: 100%;
-    }
-    
-    .p-fluid .p-cascadeselect {
-        display: flex;
-    }
-    
-    .p-fluid .p-cascadeselect .p-cascadeselect-label {
-        width: 1%;
-    }
-    
-    .p-cascadeselect-sublist {
-        position: absolute;
-        min-width: 100%;
-        z-index: 1;
-        display: none;
-    }
-    
-    .p-cascadeselect-item-active {
-        overflow: visible !important;
-    }
-    
-    .p-cascadeselect-item-active > .p-cascadeselect-sublist {
-        display: block;
-        left: 100%;
-        top: 0;
-    }
-}
-`;
-
-const inlineStyles = {
-    root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
-};
-
-const classes = {
-    root: ({ instance, props }) => [
-        'p-cascadeselect p-component p-inputwrapper',
-        {
-            'p-disabled': props.disabled,
-            'p-focus': instance.focused,
-            'p-inputwrapper-filled': props.modelValue,
-            'p-inputwrapper-focus': instance.focused || instance.overlayVisible,
-            'p-overlay-open': instance.overlayVisible
-        }
-    ],
-    label: ({ instance, props }) => [
-        'p-cascadeselect-label p-inputtext',
-        {
-            'p-placeholder': instance.label === props.placeholder,
-            'p-cascadeselect-label-empty': !instance.$slots['value'] && (instance.label === 'p-emptylabel' || instance.label.length === 0)
-        }
-    ],
-    dropdownButton: 'p-cascadeselect-trigger',
-    loadingIcon: 'p-cascadeselect-trigger-icon',
-    dropdownIcon: 'p-cascadeselect-trigger-icon',
-    panel: ({ instance }) => [
-        'p-cascadeselect-panel p-component',
-        {
-            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
-        }
-    ],
-    wrapper: 'p-cascadeselect-items-wrapper',
-    list: 'p-cascadeselect-panel p-cascadeselect-items',
-    item: ({ instance, processedOption }) => [
-        'p-cascadeselect-item',
-        {
-            'p-cascadeselect-item-group': instance.isOptionGroup(processedOption),
-            'p-cascadeselect-item-active p-highlight': instance.isOptionActive(processedOption),
-            'p-focus': instance.isOptionFocused(processedOption),
-            'p-disabled': instance.isOptionDisabled(processedOption)
-        }
-    ],
-    content: 'p-cascadeselect-item-content',
-    text: 'p-cascadeselect-item-text',
-    groupIcon: 'p-cascadeselect-group-icon',
-    sublist: 'p-cascadeselect-sublist'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'cascadeselect', manual: true });
+import CascadeSelectStyle from 'primevue/cascadeselect/style';
 
 export default {
     name: 'BaseCascadeSelect',
@@ -245,11 +109,7 @@ export default {
             default: null
         }
     },
-    css: {
-        classes,
-        inlineStyles,
-        loadStyle
-    },
+    style: CascadeSelectStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/cascadeselect/package.json b/components/lib/cascadeselect/package.json
index 017c6f39e..f5e66a302 100644
--- a/components/lib/cascadeselect/package.json
+++ b/components/lib/cascadeselect/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./cascadeselect.cjs.js",
-  "module": "./cascadeselect.esm.js",
-  "unpkg": "./cascadeselect.min.js",
-  "types": "./CascadeSelect.d.ts",
-  "browser": {
-    "./sfc": "./CascadeSelect.vue"
-  }
-}
\ No newline at end of file
+    "main": "./cascadeselect.cjs.js",
+    "module": "./cascadeselect.esm.js",
+    "unpkg": "./cascadeselect.min.js",
+    "types": "./CascadeSelect.d.ts",
+    "browser": {
+        "./sfc": "./CascadeSelect.vue"
+    }
+}
diff --git a/components/lib/cascadeselect/style/CascadeSelectStyle.js b/components/lib/cascadeselect/style/CascadeSelectStyle.js
new file mode 100644
index 000000000..e1efbe54d
--- /dev/null
+++ b/components/lib/cascadeselect/style/CascadeSelectStyle.js
@@ -0,0 +1,142 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-cascadeselect {
+        display: inline-flex;
+        cursor: pointer;
+        user-select: none;
+    }
+
+    .p-cascadeselect-trigger {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+    }
+
+    .p-cascadeselect-label {
+        display: block;
+        white-space: nowrap;
+        overflow: hidden;
+        flex: 1 1 auto;
+        width: 1%;
+        text-overflow: ellipsis;
+        cursor: pointer;
+    }
+
+    .p-cascadeselect-label-empty {
+        overflow: hidden;
+        visibility: hidden;
+    }
+
+    .p-cascadeselect .p-cascadeselect-panel {
+        min-width: 100%;
+    }
+
+    .p-cascadeselect-item {
+        cursor: pointer;
+        font-weight: normal;
+        white-space: nowrap;
+    }
+
+    .p-cascadeselect-item-content {
+        display: flex;
+        align-items: center;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .p-cascadeselect-group-icon {
+        margin-left: auto;
+    }
+
+    .p-cascadeselect-items {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+        min-width: 100%;
+    }
+
+    .p-fluid .p-cascadeselect {
+        display: flex;
+    }
+
+    .p-fluid .p-cascadeselect .p-cascadeselect-label {
+        width: 1%;
+    }
+
+    .p-cascadeselect-sublist {
+        position: absolute;
+        min-width: 100%;
+        z-index: 1;
+        display: none;
+    }
+
+    .p-cascadeselect-item-active {
+        overflow: visible !important;
+    }
+
+    .p-cascadeselect-item-active > .p-cascadeselect-sublist {
+        display: block;
+        left: 100%;
+        top: 0;
+    }
+}
+`;
+
+const inlineStyles = {
+    root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
+};
+
+const classes = {
+    root: ({ instance, props }) => [
+        'p-cascadeselect p-component p-inputwrapper',
+        {
+            'p-disabled': props.disabled,
+            'p-focus': instance.focused,
+            'p-inputwrapper-filled': props.modelValue,
+            'p-inputwrapper-focus': instance.focused || instance.overlayVisible,
+            'p-overlay-open': instance.overlayVisible
+        }
+    ],
+    label: ({ instance, props }) => [
+        'p-cascadeselect-label p-inputtext',
+        {
+            'p-placeholder': instance.label === props.placeholder,
+            'p-cascadeselect-label-empty': !instance.$slots['value'] && (instance.label === 'p-emptylabel' || instance.label.length === 0)
+        }
+    ],
+    dropdownButton: 'p-cascadeselect-trigger',
+    loadingIcon: 'p-cascadeselect-trigger-icon',
+    dropdownIcon: 'p-cascadeselect-trigger-icon',
+    panel: ({ instance }) => [
+        'p-cascadeselect-panel p-component',
+        {
+            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
+            'p-ripple-disabled': instance.$primevue.config.ripple === false
+        }
+    ],
+    wrapper: 'p-cascadeselect-items-wrapper',
+    list: 'p-cascadeselect-panel p-cascadeselect-items',
+    item: ({ instance, processedOption }) => [
+        'p-cascadeselect-item',
+        {
+            'p-cascadeselect-item-group': instance.isOptionGroup(processedOption),
+            'p-cascadeselect-item-active p-highlight': instance.isOptionActive(processedOption),
+            'p-focus': instance.isOptionFocused(processedOption),
+            'p-disabled': instance.isOptionDisabled(processedOption)
+        }
+    ],
+    content: 'p-cascadeselect-item-content',
+    text: 'p-cascadeselect-item-text',
+    groupIcon: 'p-cascadeselect-group-icon',
+    sublist: 'p-cascadeselect-sublist'
+};
+
+export default BaseStyle.extend({
+    name: 'cascadeselect',
+    css,
+    classes,
+    inlineStyles
+});
diff --git a/components/lib/cascadeselect/style/package.json b/components/lib/cascadeselect/style/package.json
new file mode 100644
index 000000000..62dbb99be
--- /dev/null
+++ b/components/lib/cascadeselect/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./cascadeselectstyle.cjs.js",
+    "module": "./cascadeselectstyle.esm.js",
+    "unpkg": "./cascadeselectstyle.min.js"
+}
diff --git a/components/lib/chart/BaseChart.vue b/components/lib/chart/BaseChart.vue
index ce3f58bed..7120fd702 100644
--- a/components/lib/chart/BaseChart.vue
+++ b/components/lib/chart/BaseChart.vue
@@ -1,20 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-chart {
-        position: relative;
-    }
-}
-`;
-
-const classes = {
-    root: 'p-chart'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'chart', manual: true });
+import ChartStyle from 'primevue/chart/style';
 
 export default {
     name: 'BaseChart',
@@ -37,10 +23,7 @@ export default {
             default: null
         }
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: ChartStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/chart/package.json b/components/lib/chart/package.json
index ff33763d9..9518c6a15 100644
--- a/components/lib/chart/package.json
+++ b/components/lib/chart/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./chart.cjs.js",
-  "module": "./chart.esm.js",
-  "unpkg": "./chart.min.js",
-  "types": "./Chart.d.ts",
-  "browser": {
-    "./sfc": "./Chart.vue"
-  }
-}
\ No newline at end of file
+    "main": "./chart.cjs.js",
+    "module": "./chart.esm.js",
+    "unpkg": "./chart.min.js",
+    "types": "./Chart.d.ts",
+    "browser": {
+        "./sfc": "./Chart.vue"
+    }
+}
diff --git a/components/lib/chart/style/ChartStyle.js b/components/lib/chart/style/ChartStyle.js
new file mode 100644
index 000000000..caec2009a
--- /dev/null
+++ b/components/lib/chart/style/ChartStyle.js
@@ -0,0 +1,19 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-chart {
+        position: relative;
+    }
+}
+`;
+
+const classes = {
+    root: 'p-chart'
+};
+
+export default BaseStyle.extend({
+    name: 'chart',
+    css,
+    classes
+});
diff --git a/components/lib/chart/style/package.json b/components/lib/chart/style/package.json
new file mode 100644
index 000000000..287bdb64e
--- /dev/null
+++ b/components/lib/chart/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./chartstyle.cjs.js",
+    "module": "./chartstyle.esm.js",
+    "unpkg": "./chartstyle.min.js"
+}
diff --git a/components/lib/checkbox/BaseCheckbox.vue b/components/lib/checkbox/BaseCheckbox.vue
index e9b025765..fbadb5001 100644
--- a/components/lib/checkbox/BaseCheckbox.vue
+++ b/components/lib/checkbox/BaseCheckbox.vue
@@ -1,25 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-
-const classes = {
-    root: ({ instance, props }) => [
-        'p-checkbox p-component',
-        {
-            'p-checkbox-checked': instance.checked,
-            'p-checkbox-disabled': props.disabled,
-            'p-checkbox-focused': instance.focused
-        }
-    ],
-    input: ({ instance, props }) => [
-        'p-checkbox-box',
-        {
-            'p-highlight': instance.checked,
-            'p-disabled': props.disabled,
-            'p-focus': instance.focused
-        }
-    ],
-    icon: 'p-checkbox-icon'
-};
+import CheckboxStyle from 'primevue/checkbox/style';
 
 export default {
     name: 'BaseCheckbox',
@@ -81,9 +62,7 @@ export default {
             default: null
         }
     },
-    css: {
-        classes
-    },
+    style: CheckboxStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/checkbox/package.json b/components/lib/checkbox/package.json
index d24b36c3e..ae5278104 100644
--- a/components/lib/checkbox/package.json
+++ b/components/lib/checkbox/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./checkbox.cjs.js",
-  "module": "./checkbox.esm.js",
-  "unpkg": "./checkbox.min.js",
-  "types": "./Checkbox.d.ts",
-  "browser": {
-    "./sfc": "./Checkbox.vue"
-  }
-}
\ No newline at end of file
+    "main": "./checkbox.cjs.js",
+    "module": "./checkbox.esm.js",
+    "unpkg": "./checkbox.min.js",
+    "types": "./Checkbox.d.ts",
+    "browser": {
+        "./sfc": "./Checkbox.vue"
+    }
+}
diff --git a/components/lib/checkbox/style/CheckboxStyle.js b/components/lib/checkbox/style/CheckboxStyle.js
new file mode 100644
index 000000000..c65e9fa48
--- /dev/null
+++ b/components/lib/checkbox/style/CheckboxStyle.js
@@ -0,0 +1,27 @@
+import BaseStyle from 'primevue/base/style';
+
+const classes = {
+    root: ({ instance, props }) => [
+        'p-checkbox p-component',
+        {
+            'p-checkbox-checked': instance.checked,
+            'p-checkbox-disabled': props.disabled,
+            'p-checkbox-focused': instance.focused
+        }
+    ],
+    input: ({ instance, props }) => [
+        'p-checkbox-box',
+        {
+            'p-highlight': instance.checked,
+            'p-disabled': props.disabled,
+            'p-focus': instance.focused
+        }
+    ],
+    icon: 'p-checkbox-icon'
+};
+
+export default BaseStyle.extend({
+    name: 'checkbox',
+    classes,
+    loadStyle: () => {}
+});
diff --git a/components/lib/checkbox/style/package.json b/components/lib/checkbox/style/package.json
new file mode 100644
index 000000000..abce85ad7
--- /dev/null
+++ b/components/lib/checkbox/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./checkboxstyle.cjs.js",
+    "module": "./checkboxstyle.esm.js",
+    "unpkg": "./checkboxstyle.min.js"
+}
diff --git a/components/lib/chip/BaseChip.vue b/components/lib/chip/BaseChip.vue
index 87e88bb37..19d70b86a 100644
--- a/components/lib/chip/BaseChip.vue
+++ b/components/lib/chip/BaseChip.vue
@@ -1,46 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-chip {
-        display: inline-flex;
-        align-items: center;
-    }
-    
-    .p-chip-text {
-        line-height: 1.5;
-    }
-    
-    .p-chip-icon.pi {
-        line-height: 1.5;
-    }
-    
-    .p-chip-remove-icon {
-        line-height: 1.5;
-        cursor: pointer;
-    }
-    
-    .p-chip img {
-        border-radius: 50%;
-    }
-}
-`;
-
-const classes = {
-    root: ({ props }) => [
-        'p-chip p-component',
-        {
-            'p-chip-image': props.image != null
-        }
-    ],
-    icon: 'p-chip-icon',
-    label: 'p-chip-text',
-    removeIcon: 'p-chip-remove-icon'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'chip', manual: true });
+import ChipStyle from 'primevue/chip/style';
 
 export default {
     name: 'BaseChip',
@@ -67,10 +27,7 @@ export default {
             default: undefined
         }
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: ChipStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/chip/package.json b/components/lib/chip/package.json
index bfa7d1331..867e62045 100644
--- a/components/lib/chip/package.json
+++ b/components/lib/chip/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./chip.cjs.js",
-  "module": "./chip.esm.js",
-  "unpkg": "./chip.min.js",
-  "types": "./Chip.d.ts",
-  "browser": {
-    "./sfc": "./Chip.vue"
-  }
-}
\ No newline at end of file
+    "main": "./chip.cjs.js",
+    "module": "./chip.esm.js",
+    "unpkg": "./chip.min.js",
+    "types": "./Chip.d.ts",
+    "browser": {
+        "./sfc": "./Chip.vue"
+    }
+}
diff --git a/components/lib/chip/style/ChipStyle.js b/components/lib/chip/style/ChipStyle.js
new file mode 100644
index 000000000..8b8b6d214
--- /dev/null
+++ b/components/lib/chip/style/ChipStyle.js
@@ -0,0 +1,45 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-chip {
+        display: inline-flex;
+        align-items: center;
+    }
+
+    .p-chip-text {
+        line-height: 1.5;
+    }
+
+    .p-chip-icon.pi {
+        line-height: 1.5;
+    }
+
+    .p-chip-remove-icon {
+        line-height: 1.5;
+        cursor: pointer;
+    }
+
+    .p-chip img {
+        border-radius: 50%;
+    }
+}
+`;
+
+const classes = {
+    root: ({ props }) => [
+        'p-chip p-component',
+        {
+            'p-chip-image': props.image != null
+        }
+    ],
+    icon: 'p-chip-icon',
+    label: 'p-chip-text',
+    removeIcon: 'p-chip-remove-icon'
+};
+
+export default BaseStyle.extend({
+    name: 'chip',
+    css,
+    classes
+});
diff --git a/components/lib/chip/style/package.json b/components/lib/chip/style/package.json
new file mode 100644
index 000000000..27265cd15
--- /dev/null
+++ b/components/lib/chip/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./chipstyle.cjs.js",
+    "module": "./chipstyle.esm.js",
+    "unpkg": "./chipstyle.min.js"
+}
diff --git a/components/lib/chips/BaseChips.vue b/components/lib/chips/BaseChips.vue
index 9acb6a8c5..8125febb1 100644
--- a/components/lib/chips/BaseChips.vue
+++ b/components/lib/chips/BaseChips.vue
@@ -1,75 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-chips {
-        display: inline-flex;
-    }
-    
-    .p-chips-multiple-container {
-        margin: 0;
-        padding: 0;
-        list-style-type: none;
-        cursor: text;
-        overflow: hidden;
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-    }
-    
-    .p-chips-token {
-        cursor: default;
-        display: inline-flex;
-        align-items: center;
-        flex: 0 0 auto;
-    }
-    
-    .p-chips-input-token {
-        flex: 1 1 auto;
-        display: inline-flex;
-    }
-    
-    .p-chips-token-icon {
-        cursor: pointer;
-    }
-    
-    .p-chips-input-token input {
-        border: 0 none;
-        outline: 0 none;
-        background-color: transparent;
-        margin: 0;
-        padding: 0;
-        box-shadow: none;
-        border-radius: 0;
-        width: 100%;
-    }
-    
-    .p-fluid .p-chips {
-        display: flex;
-    }
-}
-`;
-
-const classes = {
-    root: ({ instance, props }) => [
-        'p-chips p-component p-inputwrapper',
-        {
-            'p-disabled': props.disabled,
-            'p-focus': instance.focused,
-            'p-inputwrapper-filled': (props.modelValue && props.modelValue.length) || (instance.inputValue && instance.inputValue.length),
-            'p-inputwrapper-focus': instance.focused
-        }
-    ],
-    container: 'p-inputtext p-chips-multiple-container',
-    token: ({ state, index }) => ['p-chips-token', { 'p-focus': state.focusedIndex === index }],
-    label: 'p-chips-token-label',
-    removeTokenIcon: 'p-chips-token-icon',
-    inputToken: 'p-chips-input-token'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'chips', manual: true });
+import ChipsStyle from 'primevue/chips/style';
 
 export default {
     name: 'BaseChips',
@@ -132,10 +63,7 @@ export default {
             default: null
         }
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: ChipsStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/chips/package.json b/components/lib/chips/package.json
index f5f0049b0..70140f4b2 100644
--- a/components/lib/chips/package.json
+++ b/components/lib/chips/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./chips.cjs.js",
-  "module": "./chips.esm.js",
-  "unpkg": "./chips.min.js",
-  "types": "./Chips.d.ts",
-  "browser": {
-    "./sfc": "./Chips.vue"
-  }
-}
\ No newline at end of file
+    "main": "./chips.cjs.js",
+    "module": "./chips.esm.js",
+    "unpkg": "./chips.min.js",
+    "types": "./Chips.d.ts",
+    "browser": {
+        "./sfc": "./Chips.vue"
+    }
+}
diff --git a/components/lib/chips/style/ChipsStyle.js b/components/lib/chips/style/ChipsStyle.js
new file mode 100644
index 000000000..aed5a9554
--- /dev/null
+++ b/components/lib/chips/style/ChipsStyle.js
@@ -0,0 +1,74 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-chips {
+        display: inline-flex;
+    }
+
+    .p-chips-multiple-container {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+        cursor: text;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+    }
+
+    .p-chips-token {
+        cursor: default;
+        display: inline-flex;
+        align-items: center;
+        flex: 0 0 auto;
+    }
+
+    .p-chips-input-token {
+        flex: 1 1 auto;
+        display: inline-flex;
+    }
+
+    .p-chips-token-icon {
+        cursor: pointer;
+    }
+
+    .p-chips-input-token input {
+        border: 0 none;
+        outline: 0 none;
+        background-color: transparent;
+        margin: 0;
+        padding: 0;
+        box-shadow: none;
+        border-radius: 0;
+        width: 100%;
+    }
+
+    .p-fluid .p-chips {
+        display: flex;
+    }
+}
+`;
+
+const classes = {
+    root: ({ instance, props }) => [
+        'p-chips p-component p-inputwrapper',
+        {
+            'p-disabled': props.disabled,
+            'p-focus': instance.focused,
+            'p-inputwrapper-filled': (props.modelValue && props.modelValue.length) || (instance.inputValue && instance.inputValue.length),
+            'p-inputwrapper-focus': instance.focused
+        }
+    ],
+    container: 'p-inputtext p-chips-multiple-container',
+    token: ({ state, index }) => ['p-chips-token', { 'p-focus': state.focusedIndex === index }],
+    label: 'p-chips-token-label',
+    removeTokenIcon: 'p-chips-token-icon',
+    inputToken: 'p-chips-input-token'
+};
+
+export default BaseStyle.extend({
+    name: 'chips',
+    css,
+    classes
+});
diff --git a/components/lib/chips/style/package.json b/components/lib/chips/style/package.json
new file mode 100644
index 000000000..7aa568e2e
--- /dev/null
+++ b/components/lib/chips/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./chipsstyle.cjs.js",
+    "module": "./chipsstyle.esm.js",
+    "unpkg": "./chipsstyle.min.js"
+}
diff --git a/components/lib/colorpicker/BaseColorPicker.vue b/components/lib/colorpicker/BaseColorPicker.vue
index 1b8c4a857..148af6fde 100644
--- a/components/lib/colorpicker/BaseColorPicker.vue
+++ b/components/lib/colorpicker/BaseColorPicker.vue
@@ -1,40 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-colorpicker-panel .p-colorpicker-color {
-        background: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 100%), linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%)
-    }
-    
-    .p-colorpicker-panel .p-colorpicker-hue {
-        background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red)
-    }
-}
-`;
-
-const classes = {
-    root: ({ props }) => ['p-colorpicker p-component', { 'p-colorpicker-overlay': !props.inline }],
-    input: ({ props }) => ['p-colorpicker-preview p-inputtext', { 'p-disabled': props.disabled }],
-    panel: ({ instance, props }) => [
-        'p-colorpicker-panel',
-        {
-            'p-colorpicker-overlay-panel': !props.inline,
-            'p-disabled': props.disabled,
-            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
-        }
-    ],
-    content: 'p-colorpicker-content',
-    selector: 'p-colorpicker-color-selector',
-    color: 'p-colorpicker-color',
-    colorHandle: 'p-colorpicker-color-handle',
-    hue: 'p-colorpicker-hue',
-    hueHandle: 'p-colorpicker-hue-handle'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'colorpicker', manual: true });
+import ColorPickerStyle from 'primevue/colorpicker/style';
 
 export default {
     name: 'BaseColorPicker',
@@ -78,10 +44,7 @@ export default {
         },
         panelClass: null
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: ColorPickerStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/colorpicker/package.json b/components/lib/colorpicker/package.json
index d016adfb4..f3e107173 100644
--- a/components/lib/colorpicker/package.json
+++ b/components/lib/colorpicker/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./colorpicker.cjs.js",
-  "module": "./colorpicker.esm.js",
-  "unpkg": "./colorpicker.min.js",
-  "types": "./ColorPicker.d.ts",
-  "browser": {
-    "./sfc": "./ColorPicker.vue"
-  }
-}
\ No newline at end of file
+    "main": "./colorpicker.cjs.js",
+    "module": "./colorpicker.esm.js",
+    "unpkg": "./colorpicker.min.js",
+    "types": "./ColorPicker.d.ts",
+    "browser": {
+        "./sfc": "./ColorPicker.vue"
+    }
+}
diff --git a/components/lib/colorpicker/style/ColorPickerStyle.js b/components/lib/colorpicker/style/ColorPickerStyle.js
new file mode 100644
index 000000000..7783c107b
--- /dev/null
+++ b/components/lib/colorpicker/style/ColorPickerStyle.js
@@ -0,0 +1,39 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-colorpicker-panel .p-colorpicker-color {
+        background: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 100%), linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%)
+    }
+
+    .p-colorpicker-panel .p-colorpicker-hue {
+        background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red)
+    }
+}
+`;
+
+const classes = {
+    root: ({ props }) => ['p-colorpicker p-component', { 'p-colorpicker-overlay': !props.inline }],
+    input: ({ props }) => ['p-colorpicker-preview p-inputtext', { 'p-disabled': props.disabled }],
+    panel: ({ instance, props }) => [
+        'p-colorpicker-panel',
+        {
+            'p-colorpicker-overlay-panel': !props.inline,
+            'p-disabled': props.disabled,
+            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
+            'p-ripple-disabled': instance.$primevue.config.ripple === false
+        }
+    ],
+    content: 'p-colorpicker-content',
+    selector: 'p-colorpicker-color-selector',
+    color: 'p-colorpicker-color',
+    colorHandle: 'p-colorpicker-color-handle',
+    hue: 'p-colorpicker-hue',
+    hueHandle: 'p-colorpicker-hue-handle'
+};
+
+export default BaseStyle.extend({
+    name: 'colorpicker',
+    css,
+    classes
+});
diff --git a/components/lib/colorpicker/style/package.json b/components/lib/colorpicker/style/package.json
new file mode 100644
index 000000000..f2de8ed0d
--- /dev/null
+++ b/components/lib/colorpicker/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./colorpickerstyle.cjs.js",
+    "module": "./colorpickerstyle.esm.js",
+    "unpkg": "./colorpickerstyle.min.js"
+}
diff --git a/components/lib/column/BaseColumn.vue b/components/lib/column/BaseColumn.vue
index 827985920..fa7f4243f 100644
--- a/components/lib/column/BaseColumn.vue
+++ b/components/lib/column/BaseColumn.vue
@@ -1,5 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
+import ColumnStyle from 'primevue/column/style';
 
 export default {
     name: 'BaseColumn',
@@ -182,6 +183,7 @@ export default {
             default: false
         }
     },
+    style: ColumnStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/column/package.json b/components/lib/column/package.json
index c24d869dc..53930cdb6 100644
--- a/components/lib/column/package.json
+++ b/components/lib/column/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./column.cjs.js",
-  "module": "./column.esm.js",
-  "unpkg": "./column.min.js",
-  "types": "./Column.d.ts",
-  "browser": {
-    "./sfc": "./Column.vue"
-  }
-}
\ No newline at end of file
+    "main": "./column.cjs.js",
+    "module": "./column.esm.js",
+    "unpkg": "./column.min.js",
+    "types": "./Column.d.ts",
+    "browser": {
+        "./sfc": "./Column.vue"
+    }
+}
diff --git a/components/lib/column/style/ColumnStyle.js b/components/lib/column/style/ColumnStyle.js
new file mode 100644
index 000000000..ff8b4c563
--- /dev/null
+++ b/components/lib/column/style/ColumnStyle.js
@@ -0,0 +1 @@
+export default {};
diff --git a/components/lib/column/style/package.json b/components/lib/column/style/package.json
new file mode 100644
index 000000000..5aeaf8948
--- /dev/null
+++ b/components/lib/column/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./columnstyle.cjs.js",
+    "module": "./columnstyle.esm.js",
+    "unpkg": "./columnstyle.min.js"
+}
diff --git a/components/lib/columngroup/BaseColumnGroup.vue b/components/lib/columngroup/BaseColumnGroup.vue
index adaed74ab..74542a840 100644
--- a/components/lib/columngroup/BaseColumnGroup.vue
+++ b/components/lib/columngroup/BaseColumnGroup.vue
@@ -1,5 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
+import ColumnGroupStyle from 'primevue/columngroup/style';
 
 export default {
     name: 'BaseColumnGroup',
@@ -10,6 +11,7 @@ export default {
             default: null
         }
     },
+    style: ColumnGroupStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/columngroup/package.json b/components/lib/columngroup/package.json
index a7b4358bf..0bf0b7d4b 100644
--- a/components/lib/columngroup/package.json
+++ b/components/lib/columngroup/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./columngroup.cjs.js",
-  "module": "./columngroup.esm.js",
-  "unpkg": "./columngroup.min.js",
-  "types": "./ColumnGroup.d.ts",
-  "browser": {
-    "./sfc": "./ColumnGroup.vue"
-  }
-}
\ No newline at end of file
+    "main": "./columngroup.cjs.js",
+    "module": "./columngroup.esm.js",
+    "unpkg": "./columngroup.min.js",
+    "types": "./ColumnGroup.d.ts",
+    "browser": {
+        "./sfc": "./ColumnGroup.vue"
+    }
+}
diff --git a/components/lib/columngroup/style/ColumnGroupStyle.js b/components/lib/columngroup/style/ColumnGroupStyle.js
new file mode 100644
index 000000000..ff8b4c563
--- /dev/null
+++ b/components/lib/columngroup/style/ColumnGroupStyle.js
@@ -0,0 +1 @@
+export default {};
diff --git a/components/lib/columngroup/style/package.json b/components/lib/columngroup/style/package.json
new file mode 100644
index 000000000..d000eeb3a
--- /dev/null
+++ b/components/lib/columngroup/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./columngroupstyle.cjs.js",
+    "module": "./columngroupstyle.esm.js",
+    "unpkg": "./columngroupstyle.min.js"
+}
diff --git a/components/lib/config/package.json b/components/lib/config/package.json
index 4e2da42d3..3a2bb7973 100644
--- a/components/lib/config/package.json
+++ b/components/lib/config/package.json
@@ -1,6 +1,6 @@
 {
-  "main": "./config.cjs.js",
-  "module": "./config.esm.js",
-  "unpkg": "./config.min.js",
-  "types": "./PrimeVue.d.ts"
-}
\ No newline at end of file
+    "main": "./config.cjs.js",
+    "module": "./config.esm.js",
+    "unpkg": "./config.min.js",
+    "types": "./PrimeVue.d.ts"
+}
diff --git a/components/lib/confirmationeventbus/package.json b/components/lib/confirmationeventbus/package.json
index 84b4ed833..aac1f3df7 100644
--- a/components/lib/confirmationeventbus/package.json
+++ b/components/lib/confirmationeventbus/package.json
@@ -2,4 +2,4 @@
     "main": "./confirmationeventbus.cjs.js",
     "module": "./confirmationeventbus.esm.js",
     "unpkg": "./confirmationeventbus.min.js"
-  }
\ No newline at end of file
+}
diff --git a/components/lib/confirmationservice/package.json b/components/lib/confirmationservice/package.json
index c6f800733..48d3bbbef 100644
--- a/components/lib/confirmationservice/package.json
+++ b/components/lib/confirmationservice/package.json
@@ -1,6 +1,6 @@
 {
-  "main": "./confirmationservice.cjs.js",
-  "module": "./confirmationservice.esm.js",
-  "unpkg": "./confirmationservice.min.js",
-  "types": "./ConfirmationService.d.ts"
-}
\ No newline at end of file
+    "main": "./confirmationservice.cjs.js",
+    "module": "./confirmationservice.esm.js",
+    "unpkg": "./confirmationservice.min.js",
+    "types": "./ConfirmationService.d.ts"
+}
diff --git a/components/lib/confirmdialog/BaseConfirmDialog.vue b/components/lib/confirmdialog/BaseConfirmDialog.vue
index 0d82e1a8a..7be91657a 100644
--- a/components/lib/confirmdialog/BaseConfirmDialog.vue
+++ b/components/lib/confirmdialog/BaseConfirmDialog.vue
@@ -1,13 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-
-const classes = {
-    root: 'p-confirm-dialog',
-    icon: ({ instance }) => ['p-confirm-dialog-icon', instance.confirmation ? instance.confirmation.icon : null],
-    message: 'p-confirm-dialog-message',
-    rejectButton: ({ instance }) => ['p-confirm-dialog-reject', instance.confirmation && !instance.confirmation.rejectClass ? 'p-button-text' : null],
-    acceptButton: 'p-confirm-dialog-accept'
-};
+import ConfirmDialogStyle from 'primevue/confirmdialog/style';
 
 export default {
     name: 'BaseConfirmDialog',
@@ -23,9 +16,7 @@ export default {
             default: true
         }
     },
-    css: {
-        classes
-    },
+    style: ConfirmDialogStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/confirmdialog/package.json b/components/lib/confirmdialog/package.json
index fd1b774df..1765f1910 100644
--- a/components/lib/confirmdialog/package.json
+++ b/components/lib/confirmdialog/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./confirmdialog.cjs.js",
-  "module": "./confirmdialog.esm.js",
-  "unpkg": "./confirmdialog.min.js",
-  "types": "./ConfirmDialog.d.ts",
-  "browser": {
-    "./sfc": "./ConfirmDialog.vue"
-  }
-}
\ No newline at end of file
+    "main": "./confirmdialog.cjs.js",
+    "module": "./confirmdialog.esm.js",
+    "unpkg": "./confirmdialog.min.js",
+    "types": "./ConfirmDialog.d.ts",
+    "browser": {
+        "./sfc": "./ConfirmDialog.vue"
+    }
+}
diff --git a/components/lib/confirmdialog/style/ConfirmDialogStyle.js b/components/lib/confirmdialog/style/ConfirmDialogStyle.js
new file mode 100644
index 000000000..19bb012db
--- /dev/null
+++ b/components/lib/confirmdialog/style/ConfirmDialogStyle.js
@@ -0,0 +1,15 @@
+import BaseStyle from 'primevue/base/style';
+
+const classes = {
+    root: 'p-confirm-dialog',
+    icon: ({ instance }) => ['p-confirm-dialog-icon', instance.confirmation ? instance.confirmation.icon : null],
+    message: 'p-confirm-dialog-message',
+    rejectButton: ({ instance }) => ['p-confirm-dialog-reject', instance.confirmation && !instance.confirmation.rejectClass ? 'p-button-text' : null],
+    acceptButton: 'p-confirm-dialog-accept'
+};
+
+export default BaseStyle.extend({
+    name: 'confirmdialog',
+    classes,
+    loadStyle: () => {}
+});
diff --git a/components/lib/confirmdialog/style/package.json b/components/lib/confirmdialog/style/package.json
new file mode 100644
index 000000000..8ba97071f
--- /dev/null
+++ b/components/lib/confirmdialog/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./confirmdialogstyle.cjs.js",
+    "module": "./confirmdialogstyle.esm.js",
+    "unpkg": "./confirmdialogstyle.min.js"
+}
diff --git a/components/lib/confirmpopup/BaseConfirmPopup.vue b/components/lib/confirmpopup/BaseConfirmPopup.vue
index 7de1c4c6f..09b2ceca6 100644
--- a/components/lib/confirmpopup/BaseConfirmPopup.vue
+++ b/components/lib/confirmpopup/BaseConfirmPopup.vue
@@ -1,98 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-confirm-popup {
-        position: absolute;
-        margin-top: 10px;
-        top: 0;
-        left: 0;
-    }
-    
-    .p-confirm-popup-flipped {
-        margin-top: 0;
-        margin-bottom: 10px;
-    }
-    
-    /* Animation */
-    .p-confirm-popup-enter-from {
-        opacity: 0;
-        transform: scaleY(0.8);
-    }
-    
-    .p-confirm-popup-leave-to {
-        opacity: 0;
-    }
-    
-    .p-confirm-popup-enter-active {
-        transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
-    }
-    
-    .p-confirm-popup-leave-active {
-        transition: opacity 0.1s linear;
-    }
-    
-    .p-confirm-popup:after,
-    .p-confirm-popup:before {
-        bottom: 100%;
-        left: calc(var(--overlayArrowLeft, 0) + 1.25rem);
-        content: ' ';
-        height: 0;
-        width: 0;
-        position: absolute;
-        pointer-events: none;
-    }
-    
-    .p-confirm-popup:after {
-        border-width: 8px;
-        margin-left: -8px;
-    }
-    
-    .p-confirm-popup:before {
-        border-width: 10px;
-        margin-left: -10px;
-    }
-    
-    .p-confirm-popup-flipped:after,
-    .p-confirm-popup-flipped:before {
-        bottom: auto;
-        top: 100%;
-    }
-    
-    .p-confirm-popup.p-confirm-popup-flipped:after {
-        border-bottom-color: transparent;
-    }
-    
-    .p-confirm-popup.p-confirm-popup-flipped:before {
-        border-bottom-color: transparent;
-    }
-    
-    .p-confirm-popup .p-confirm-popup-content {
-        display: flex;
-        align-items: center;
-    }
-}
-`;
-
-const classes = {
-    root: ({ instance }) => [
-        'p-confirm-popup p-component',
-        {
-            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
-        }
-    ],
-    content: 'p-confirm-popup-content',
-    icon: ({ instance }) => ['p-confirm-popup-icon', instance.confirmation ? instance.confirmation.icon : null],
-    message: 'p-confirm-popup-message',
-    footer: 'p-confirm-popup-footer',
-    rejectButton: ({ instance }) => ['p-confirm-dialog-reject', instance.confirmation && !instance.confirmation.rejectClass ? 'p-button-text' : null],
-    acceptButton: 'p-confirm-dialog-accept'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'confirmpopup', manual: true });
+import ConfirmPopupStyle from 'primevue/confirmpopup/style';
 
 export default {
     name: 'BaseConfirmPopup',
@@ -100,10 +8,7 @@ export default {
     props: {
         group: String
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: ConfirmPopupStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/confirmpopup/package.json b/components/lib/confirmpopup/package.json
index 7595d1d69..26f2418d7 100644
--- a/components/lib/confirmpopup/package.json
+++ b/components/lib/confirmpopup/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./confirmpopup.cjs.js",
-  "module": "./confirmpopup.esm.js",
-  "unpkg": "./confirmpopup.min.js",
-  "types": "./ConfirmPopup.d.ts",
-  "browser": {
-    "./sfc": "./ConfirmPopup.vue"
-  }
-}
\ No newline at end of file
+    "main": "./confirmpopup.cjs.js",
+    "module": "./confirmpopup.esm.js",
+    "unpkg": "./confirmpopup.min.js",
+    "types": "./ConfirmPopup.d.ts",
+    "browser": {
+        "./sfc": "./ConfirmPopup.vue"
+    }
+}
diff --git a/components/lib/confirmpopup/style/ConfirmPopupStyle.js b/components/lib/confirmpopup/style/ConfirmPopupStyle.js
new file mode 100644
index 000000000..740aa0c69
--- /dev/null
+++ b/components/lib/confirmpopup/style/ConfirmPopupStyle.js
@@ -0,0 +1,97 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-confirm-popup {
+        position: absolute;
+        margin-top: 10px;
+        top: 0;
+        left: 0;
+    }
+
+    .p-confirm-popup-flipped {
+        margin-top: 0;
+        margin-bottom: 10px;
+    }
+
+    /* Animation */
+    .p-confirm-popup-enter-from {
+        opacity: 0;
+        transform: scaleY(0.8);
+    }
+
+    .p-confirm-popup-leave-to {
+        opacity: 0;
+    }
+
+    .p-confirm-popup-enter-active {
+        transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
+    }
+
+    .p-confirm-popup-leave-active {
+        transition: opacity 0.1s linear;
+    }
+
+    .p-confirm-popup:after,
+    .p-confirm-popup:before {
+        bottom: 100%;
+        left: calc(var(--overlayArrowLeft, 0) + 1.25rem);
+        content: ' ';
+        height: 0;
+        width: 0;
+        position: absolute;
+        pointer-events: none;
+    }
+
+    .p-confirm-popup:after {
+        border-width: 8px;
+        margin-left: -8px;
+    }
+
+    .p-confirm-popup:before {
+        border-width: 10px;
+        margin-left: -10px;
+    }
+
+    .p-confirm-popup-flipped:after,
+    .p-confirm-popup-flipped:before {
+        bottom: auto;
+        top: 100%;
+    }
+
+    .p-confirm-popup.p-confirm-popup-flipped:after {
+        border-bottom-color: transparent;
+    }
+
+    .p-confirm-popup.p-confirm-popup-flipped:before {
+        border-bottom-color: transparent;
+    }
+
+    .p-confirm-popup .p-confirm-popup-content {
+        display: flex;
+        align-items: center;
+    }
+}
+`;
+
+const classes = {
+    root: ({ instance }) => [
+        'p-confirm-popup p-component',
+        {
+            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
+            'p-ripple-disabled': instance.$primevue.config.ripple === false
+        }
+    ],
+    content: 'p-confirm-popup-content',
+    icon: ({ instance }) => ['p-confirm-popup-icon', instance.confirmation ? instance.confirmation.icon : null],
+    message: 'p-confirm-popup-message',
+    footer: 'p-confirm-popup-footer',
+    rejectButton: ({ instance }) => ['p-confirm-dialog-reject', instance.confirmation && !instance.confirmation.rejectClass ? 'p-button-text' : null],
+    acceptButton: 'p-confirm-dialog-accept'
+};
+
+export default BaseStyle.extend({
+    name: 'confirmpopup',
+    css,
+    classes
+});
diff --git a/components/lib/confirmpopup/style/package.json b/components/lib/confirmpopup/style/package.json
new file mode 100644
index 000000000..89d9c4f64
--- /dev/null
+++ b/components/lib/confirmpopup/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./confirmpopupstyle.cjs.js",
+    "module": "./confirmpopupstyle.esm.js",
+    "unpkg": "./confirmpopupstyle.min.js"
+}
diff --git a/components/lib/contextmenu/BaseContextMenu.vue b/components/lib/contextmenu/BaseContextMenu.vue
index 2da54c6e3..a3e4a5292 100644
--- a/components/lib/contextmenu/BaseContextMenu.vue
+++ b/components/lib/contextmenu/BaseContextMenu.vue
@@ -1,85 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-contextmenu ul {
-        margin: 0;
-        padding: 0;
-        list-style: none;
-    }
-    
-    .p-contextmenu .p-submenu-list {
-        position: absolute;
-        min-width: 100%;
-        z-index: 1;
-    }
-    
-    .p-contextmenu .p-menuitem-link {
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        text-decoration: none;
-        overflow: hidden;
-        position: relative;
-    }
-    
-    .p-contextmenu .p-menuitem-text {
-        line-height: 1;
-    }
-    
-    .p-contextmenu .p-menuitem {
-        position: relative;
-    }
-    
-    .p-contextmenu .p-menuitem-link .p-submenu-icon {
-        margin-left: auto;
-    }
-    
-    .p-contextmenu-enter-from {
-        opacity: 0;
-    }
-    
-    .p-contextmenu-enter-active {
-        transition: opacity 250ms;
-    }
-}
-`;
-
-const classes = {
-    root: ({ instance }) => [
-        'p-contextmenu p-component',
-        {
-            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
-        }
-    ],
-    menu: 'p-contextmenu-root-list',
-    menuitem: ({ instance, processedItem }) => [
-        'p-menuitem',
-        {
-            'p-menuitem-active p-highlight': instance.isItemActive(processedItem),
-            'p-focus': instance.isItemFocused(processedItem),
-            'p-disabled': instance.isItemDisabled(processedItem)
-        }
-    ],
-    content: 'p-menuitem-content',
-    action: ({ props, isActive, isExactActive }) => [
-        'p-menuitem-link',
-        {
-            'router-link-active': isActive,
-            'router-link-active-exact': props.exact && isExactActive
-        }
-    ],
-    icon: 'p-menuitem-icon',
-    label: 'p-menuitem-text',
-    submenuIcon: 'p-submenu-icon',
-    submenu: 'p-submenu-list',
-    separator: 'p-menuitem-separator'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'contextmenu', manual: true });
+import ContextMenuStyle from 'primevue/contextmenu/style';
 
 export default {
     name: 'BaseContextMenu',
@@ -122,10 +43,7 @@ export default {
             default: null
         }
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: ContextMenuStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/contextmenu/package.json b/components/lib/contextmenu/package.json
index 0a0614126..e94a7d805 100644
--- a/components/lib/contextmenu/package.json
+++ b/components/lib/contextmenu/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./contextmenu.cjs.js",
-  "module": "./contextmenu.esm.js",
-  "unpkg": "./contextmenu.min.js",
-  "types": "./ContextMenu.d.ts",
-  "browser": {
-    "./sfc": "./ContextMenu.vue"
-  }
-}
\ No newline at end of file
+    "main": "./contextmenu.cjs.js",
+    "module": "./contextmenu.esm.js",
+    "unpkg": "./contextmenu.min.js",
+    "types": "./ContextMenu.d.ts",
+    "browser": {
+        "./sfc": "./ContextMenu.vue"
+    }
+}
diff --git a/components/lib/contextmenu/style/ContextMenuStyle.js b/components/lib/contextmenu/style/ContextMenuStyle.js
new file mode 100644
index 000000000..bab02c8bd
--- /dev/null
+++ b/components/lib/contextmenu/style/ContextMenuStyle.js
@@ -0,0 +1,84 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-contextmenu ul {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    .p-contextmenu .p-submenu-list {
+        position: absolute;
+        min-width: 100%;
+        z-index: 1;
+    }
+
+    .p-contextmenu .p-menuitem-link {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        text-decoration: none;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .p-contextmenu .p-menuitem-text {
+        line-height: 1;
+    }
+
+    .p-contextmenu .p-menuitem {
+        position: relative;
+    }
+
+    .p-contextmenu .p-menuitem-link .p-submenu-icon {
+        margin-left: auto;
+    }
+
+    .p-contextmenu-enter-from {
+        opacity: 0;
+    }
+
+    .p-contextmenu-enter-active {
+        transition: opacity 250ms;
+    }
+}
+`;
+
+const classes = {
+    root: ({ instance }) => [
+        'p-contextmenu p-component',
+        {
+            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
+            'p-ripple-disabled': instance.$primevue.config.ripple === false
+        }
+    ],
+    menu: 'p-contextmenu-root-list',
+    menuitem: ({ instance, processedItem }) => [
+        'p-menuitem',
+        {
+            'p-menuitem-active p-highlight': instance.isItemActive(processedItem),
+            'p-focus': instance.isItemFocused(processedItem),
+            'p-disabled': instance.isItemDisabled(processedItem)
+        }
+    ],
+    content: 'p-menuitem-content',
+    action: ({ props, isActive, isExactActive }) => [
+        'p-menuitem-link',
+        {
+            'router-link-active': isActive,
+            'router-link-active-exact': props.exact && isExactActive
+        }
+    ],
+    icon: 'p-menuitem-icon',
+    label: 'p-menuitem-text',
+    submenuIcon: 'p-submenu-icon',
+    submenu: 'p-submenu-list',
+    separator: 'p-menuitem-separator'
+};
+
+export default BaseStyle.extend({
+    name: 'contextmenu',
+    css,
+    classes
+});
diff --git a/components/lib/contextmenu/style/package.json b/components/lib/contextmenu/style/package.json
new file mode 100644
index 000000000..31306068c
--- /dev/null
+++ b/components/lib/contextmenu/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./contextmenustyle.cjs.js",
+    "module": "./contextmenustyle.esm.js",
+    "unpkg": "./contextmenustyle.min.js"
+}
diff --git a/components/lib/datatable/BaseDataTable.vue b/components/lib/datatable/BaseDataTable.vue
index c24f05d56..51015d0c7 100644
--- a/components/lib/datatable/BaseDataTable.vue
+++ b/components/lib/datatable/BaseDataTable.vue
@@ -1,473 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-datatable {
-        position: relative;
-    }
-    
-    .p-datatable-table {
-        border-spacing: 0px;
-        width: 100%;
-    }
-    
-    .p-datatable .p-sortable-column {
-        cursor: pointer;
-        user-select: none;
-    }
-    
-    .p-datatable .p-sortable-column .p-column-title,
-    .p-datatable .p-sortable-column .p-sortable-column-icon,
-    .p-datatable .p-sortable-column .p-sortable-column-badge {
-        vertical-align: middle;
-    }
-    
-    .p-datatable .p-sortable-column .p-sortable-column-badge {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-    }
-    
-    .p-datatable-hoverable-rows .p-selectable-row {
-        cursor: pointer;
-    }
-    
-    /* Scrollable */
-    .p-datatable-scrollable > .p-datatable-wrapper {
-        position: relative;
-    }
-    
-    .p-datatable-scrollable-table > .p-datatable-thead {
-        top: 0;
-        z-index: 1;
-    }
-    
-    .p-datatable-scrollable-table > .p-datatable-frozen-tbody {
-        position: sticky;
-        z-index: 1;
-    }
-    
-    .p-datatable-scrollable-table > .p-datatable-tfoot {
-        bottom: 0;
-        z-index: 1;
-    }
-    
-    .p-datatable-scrollable .p-frozen-column {
-        position: sticky;
-        background: inherit;
-    }
-    
-    .p-datatable-scrollable th.p-frozen-column {
-        z-index: 1;
-    }
-    
-    .p-datatable-flex-scrollable {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-    }
-    
-    .p-datatable-flex-scrollable > .p-datatable-wrapper {
-        display: flex;
-        flex-direction: column;
-        flex: 1;
-        height: 100%;
-    }
-    
-    .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header {
-        position: sticky;
-        z-index: 1;
-    }
-    
-    /* Resizable */
-    .p-datatable-resizable-table > .p-datatable-thead > tr > th,
-    .p-datatable-resizable-table > .p-datatable-tfoot > tr > td,
-    .p-datatable-resizable-table > .p-datatable-tbody > tr > td {
-        overflow: hidden;
-        white-space: nowrap;
-    }
-    
-    .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) {
-        background-clip: padding-box;
-        position: relative;
-    }
-    
-    .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer {
-        display: none;
-    }
-    
-    .p-datatable .p-column-resizer {
-        display: block;
-        position: absolute !important;
-        top: 0;
-        right: 0;
-        margin: 0;
-        width: 0.5rem;
-        height: 100%;
-        padding: 0px;
-        cursor: col-resize;
-        border: 1px solid transparent;
-    }
-    
-    .p-datatable .p-column-header-content {
-        display: flex;
-        align-items: center;
-    }
-    
-    .p-datatable .p-column-resizer-helper {
-        width: 1px;
-        position: absolute;
-        z-index: 10;
-        display: none;
-    }
-    
-    .p-datatable .p-row-editor-init,
-    .p-datatable .p-row-editor-save,
-    .p-datatable .p-row-editor-cancel {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        overflow: hidden;
-        position: relative;
-    }
-    
-    /* Expand */
-    .p-datatable .p-row-toggler {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        overflow: hidden;
-        position: relative;
-    }
-    
-    /* Reorder */
-    .p-datatable-reorder-indicator-up,
-    .p-datatable-reorder-indicator-down {
-        position: absolute;
-        display: none;
-    }
-    
-    .p-reorderable-column,
-    .p-datatable-reorderablerow-handle {
-        cursor: move;
-    }
-    
-    /* Loader */
-    .p-datatable .p-datatable-loading-overlay {
-        position: absolute;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        z-index: 2;
-    }
-    
-    /* Filter */
-    .p-column-filter-row {
-        display: flex;
-        align-items: center;
-        width: 100%;
-    }
-    
-    .p-column-filter-menu {
-        display: inline-flex;
-        margin-left: auto;
-    }
-    
-    .p-column-filter-row .p-column-filter-element {
-        flex: 1 1 auto;
-        width: 1%;
-    }
-    
-    .p-column-filter-menu-button,
-    .p-column-filter-clear-button {
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-        cursor: pointer;
-        text-decoration: none;
-        overflow: hidden;
-        position: relative;
-    }
-    
-    .p-column-filter-row-items {
-        margin: 0;
-        padding: 0;
-        list-style: none;
-    }
-    
-    .p-column-filter-row-item {
-        cursor: pointer;
-    }
-    
-    .p-column-filter-add-button,
-    .p-column-filter-remove-button {
-        justify-content: center;
-    }
-    
-    .p-column-filter-add-button .p-button-label,
-    .p-column-filter-remove-button .p-button-label {
-        flex-grow: 0;
-    }
-    
-    .p-column-filter-buttonbar {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-    }
-    
-    .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) {
-        width: auto;
-    }
-    
-    /* Responsive */
-    .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
-        display: none;
-    }
-    
-    /* VirtualScroller */
-    .p-datatable-virtualscroller-spacer {
-        display: flex;
-    }
-    
-    .p-datatable .p-virtualscroller .p-virtualscroller-loading {
-        transform: none !important;
-        min-height: 0;
-        position: sticky;
-        top: 0;
-        left: 0;
-    }
-}
-`;
-
-const inlineStyles = {
-    wrapper: { overflow: 'auto' },
-    thead: { position: 'sticky' },
-    tfoot: { position: 'sticky' }
-};
-
-const classes = {
-    root: ({ instance, props }) => [
-        'p-datatable p-component',
-        {
-            'p-datatable-hoverable-rows': props.rowHover || props.selectionMode,
-            'p-datatable-resizable': props.resizableColumns,
-            'p-datatable-resizable-fit': props.resizableColumns && props.columnResizeMode === 'fit',
-            'p-datatable-scrollable': props.scrollable,
-            'p-datatable-flex-scrollable': props.scrollable && props.scrollHeight === 'flex',
-            'p-datatable-responsive-stack': props.responsiveLayout === 'stack',
-            'p-datatable-responsive-scroll': props.responsiveLayout === 'scroll',
-            'p-datatable-striped': props.stripedRows,
-            'p-datatable-gridlines': props.showGridlines,
-            'p-datatable-grouped-header': instance.headerColumnGroup != null,
-            'p-datatable-grouped-footer': instance.footerColumnGroup != null,
-            'p-datatable-sm': props.size === 'small',
-            'p-datatable-lg': props.size === 'large'
-        }
-    ],
-    loadingOverlay: 'p-datatable-loading-overlay p-component-overlay',
-    loadingIcon: 'p-datatable-loading-icon',
-    header: 'p-datatable-header',
-    paginator: ({ instance }) => (instance.paginatorTop ? 'p-paginator-top' : instance.paginatorBottom ? 'p-paginator-bottom' : ''),
-    wrapper: 'p-datatable-wrapper',
-    table: ({ props }) => [
-        'p-datatable-table',
-        {
-            'p-datatable-scrollable-table': props.scrollable,
-            'p-datatable-resizable-table': props.resizableColumns,
-            'p-datatable-resizable-table-fit': props.resizableColumns && props.columnResizeMode === 'fit'
-        }
-    ],
-    //tablehead
-    thead: 'p-datatable-thead',
-    // headercell
-    headerCell: ({ instance, props, column }) =>
-        column && !instance.columnProp(column, 'hidden') && (props.rowGroupMode !== 'subheader' || props.groupRowsBy !== instance.columnProp(column, 'field'))
-            ? [
-                  'p-filter-column',
-                  {
-                      'p-frozen-column': instance.columnProp(column, 'frozen')
-                  }
-              ]
-            : [
-                  {
-                      'p-sortable-column': instance.columnProp('sortable'),
-                      'p-resizable-column': instance.resizableColumns,
-                      'p-highlight': instance.isColumnSorted(),
-                      'p-filter-column': props.filterColumn,
-                      'p-frozen-column': instance.columnProp('frozen'),
-                      'p-reorderable-column': props.reorderableColumns
-                  }
-              ],
-    columnResizer: 'p-column-resizer',
-    headerContent: 'p-column-header-content',
-    headerTitle: 'p-column-title',
-    sortIcon: 'p-sortable-column-icon',
-    sortBadge: 'p-sortable-column-badge',
-    //headercheckbox
-    headerCheckboxWrapper: ({ instance }) => [
-        'p-checkbox p-component',
-        {
-            'p-checkbox-focused': instance.focused,
-            'p-disabled': instance.disabled
-        }
-    ],
-    headerCheckbox: ({ instance }) => [
-        'p-checkbox-box p-component',
-        {
-            'p-highlight': instance.checked,
-            'p-disabled': instance.disabled,
-            'p-focus': instance.focused
-        }
-    ],
-    headerCheckboxIcon: 'p-checkbox-icon',
-    // columnfilter
-    columnFilter: ({ props }) => [
-        'p-column-filter p-fluid',
-        {
-            'p-column-filter-row': props.display === 'row',
-            'p-column-filter-menu': props.display === 'menu'
-        }
-    ],
-    filterInput: 'p-fluid p-column-filter-element',
-    filterMenuButton: ({ instance }) => [
-        'p-column-filter-menu-button p-link',
-        {
-            'p-column-filter-menu-button-open': instance.overlayVisible,
-            'p-column-filter-menu-button-active': instance.hasFilter()
-        }
-    ],
-    headerFilterClearButton: ({ instance }) => [
-        'p-column-filter-clear-button p-link',
-        {
-            'p-hidden-space': !instance.hasRowFilter()
-        }
-    ],
-    filterOverlay: ({ instance, props }) => [
-        {
-            'p-column-filter-overlay p-component p-fluid': true,
-            'p-column-filter-overlay-menu': props.display === 'menu',
-            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
-        }
-    ],
-    filterRowItems: 'p-column-filter-row-items',
-    filterRowItem: ({ instance, matchMode }) => [
-        'p-column-filter-row-item',
-        {
-            'p-highlight': matchMode && instance.isRowMatchModeSelected(matchMode.value)
-        }
-    ],
-    filterSeparator: 'p-column-filter-separator',
-    filterOperator: 'p-column-filter-operator',
-    filterOperatorDropdown: 'p-column-filter-operator-dropdown',
-    filterConstraints: 'p-column-filter-constraints',
-    filterConstraint: 'p-column-filter-constraint',
-    filterMatchModeDropdown: 'p-column-filter-matchmode-dropdown',
-    filterRemoveButton: 'p-column-filter-remove-button p-button-text p-button-danger p-button-sm',
-    filterAddRule: 'p-column-filter-add-rule',
-    filterAddRuleButton: 'p-column-filter-add-button p-button-text p-button-sm',
-    filterButtonbar: 'p-column-filter-buttonbar',
-    filterClearButton: 'p-button-outlined p-button-sm',
-    filterApplyButton: 'p-button-sm',
-    //tablebody
-    tbody: ({ props }) => (props.frozenRow ? 'p-datatable-tbody p-datatable-frozen-tbody' : 'p-datatable-tbody'),
-    rowgroupHeader: 'p-rowgroup-header',
-    rowGroupToggler: 'p-row-toggler p-link',
-    rowGroupTogglerIcon: 'p-row-toggler-icon',
-    row: ({ instance, props, rowData }) => {
-        let rowStyleClass = [];
-
-        if (props.selectionMode) {
-            rowStyleClass.push('p-selectable-row');
-        }
-
-        if (props.selection) {
-            rowStyleClass.push({
-                'p-highlight': instance.isSelected(rowData)
-            });
-        }
-
-        if (props.contextMenuSelection) {
-            rowStyleClass.push({
-                'p-highlight-contextmenu': instance.isSelectedWithContextMenu(rowData)
-            });
-        }
-
-        return rowStyleClass;
-    },
-    rowExpansion: 'p-datatable-row-expansion',
-    rowgroupFooter: 'p-rowgroup-footer',
-    emptyMessage: 'p-datatable-emptymessage',
-    //bodycell
-    bodyCell: ({ instance }) => [
-        {
-            'p-selection-column': instance.columnProp('selectionMode') != null,
-            'p-editable-column': instance.isEditable(),
-            'p-cell-editing': instance.d_editing,
-            'p-frozen-column': instance.columnProp('frozen')
-        }
-    ],
-    columnTitle: 'p-column-title',
-    rowReorderIcon: 'p-datatable-reorderablerow-handle',
-    rowToggler: 'p-row-toggler p-link',
-    rowTogglerIcon: 'p-row-toggler-icon',
-    rowEditorInitButton: 'p-row-editor-init p-link',
-    rowEditorInitIcon: 'p-row-editor-init-icon',
-    rowEditorSaveButton: 'p-row-editor-save p-link',
-    rowEditorSaveIcon: 'p-row-editor-save-icon',
-    rowEditorCancelButton: 'p-row-editor-cancel p-link',
-    rowEditorCancelIcon: 'p-row-editor-cancel-icon',
-    //rowcheckbox
-    checkboxWrapper: ({ instance }) => [
-        'p-checkbox p-component',
-        {
-            'p-checkbox-focused': instance.focused
-        }
-    ],
-    checkbox: ({ instance }) => [
-        'p-checkbox-box p-component',
-        {
-            'p-highlight': instance.checked,
-            'p-disabled': instance.$attrs.disabled,
-            'p-focus': instance.focused
-        }
-    ],
-    checkboxIcon: 'p-checkbox-icon',
-    //rowradiobutton
-    radiobuttonWrapper: ({ instance }) => [
-        'p-radiobutton p-component',
-        {
-            'p-radiobutton-focused': instance.focused
-        }
-    ],
-    radiobutton: ({ instance }) => [
-        'p-radiobutton-box p-component',
-        {
-            'p-highlight': instance.checked,
-            'p-disabled': instance.$attrs.disabled,
-            'p-focus': instance.focused
-        }
-    ],
-    radiobuttonIcon: 'p-radiobutton-icon',
-    //tablefooter
-    tfoot: 'p-datatable-tfoot',
-    //footercell
-    footerCell: ({ instance }) => [
-        {
-            'p-frozen-column': instance.columnProp('frozen')
-        }
-    ],
-    //datatable
-    virtualScrollerSpacer: 'p-datatable-virtualscroller-spacer',
-    footer: 'p-datatable-footer',
-    resizeHelper: 'p-column-resizer-helper',
-    reorderIndicatorUp: 'p-datatable-reorder-indicator-up',
-    reorderIndicatorDown: 'p-datatable-reorder-indicator-down'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'datatable', manual: true });
+import DataTableStyle from 'primevue/datatable/style';
 
 export default {
     name: 'BaseDataTable',
@@ -734,11 +267,7 @@ export default {
             default: null
         }
     },
-    css: {
-        classes,
-        inlineStyles,
-        loadStyle
-    },
+    style: DataTableStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/datatable/package.json b/components/lib/datatable/package.json
index ad93005e2..02085c486 100644
--- a/components/lib/datatable/package.json
+++ b/components/lib/datatable/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./datatable.cjs.js",
-  "module": "./datatable.esm.js",
-  "unpkg": "./datatable.min.js",
-  "types": "./DataTable.d.ts",
-  "browser": {
-    "./sfc": "./DataTable.vue"
-  }
-}
\ No newline at end of file
+    "main": "./datatable.cjs.js",
+    "module": "./datatable.esm.js",
+    "unpkg": "./datatable.min.js",
+    "types": "./DataTable.d.ts",
+    "browser": {
+        "./sfc": "./DataTable.vue"
+    }
+}
diff --git a/components/lib/datatable/style/DataTableStyle.js b/components/lib/datatable/style/DataTableStyle.js
new file mode 100644
index 000000000..1b46d9c72
--- /dev/null
+++ b/components/lib/datatable/style/DataTableStyle.js
@@ -0,0 +1,473 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-datatable {
+        position: relative;
+    }
+
+    .p-datatable-table {
+        border-spacing: 0px;
+        width: 100%;
+    }
+
+    .p-datatable .p-sortable-column {
+        cursor: pointer;
+        user-select: none;
+    }
+
+    .p-datatable .p-sortable-column .p-column-title,
+    .p-datatable .p-sortable-column .p-sortable-column-icon,
+    .p-datatable .p-sortable-column .p-sortable-column-badge {
+        vertical-align: middle;
+    }
+
+    .p-datatable .p-sortable-column .p-sortable-column-badge {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .p-datatable-hoverable-rows .p-selectable-row {
+        cursor: pointer;
+    }
+
+    /* Scrollable */
+    .p-datatable-scrollable > .p-datatable-wrapper {
+        position: relative;
+    }
+
+    .p-datatable-scrollable-table > .p-datatable-thead {
+        top: 0;
+        z-index: 1;
+    }
+
+    .p-datatable-scrollable-table > .p-datatable-frozen-tbody {
+        position: sticky;
+        z-index: 1;
+    }
+
+    .p-datatable-scrollable-table > .p-datatable-tfoot {
+        bottom: 0;
+        z-index: 1;
+    }
+
+    .p-datatable-scrollable .p-frozen-column {
+        position: sticky;
+        background: inherit;
+    }
+
+    .p-datatable-scrollable th.p-frozen-column {
+        z-index: 1;
+    }
+
+    .p-datatable-flex-scrollable {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+    }
+
+    .p-datatable-flex-scrollable > .p-datatable-wrapper {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        height: 100%;
+    }
+
+    .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header {
+        position: sticky;
+        z-index: 1;
+    }
+
+    /* Resizable */
+    .p-datatable-resizable-table > .p-datatable-thead > tr > th,
+    .p-datatable-resizable-table > .p-datatable-tfoot > tr > td,
+    .p-datatable-resizable-table > .p-datatable-tbody > tr > td {
+        overflow: hidden;
+        white-space: nowrap;
+    }
+
+    .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) {
+        background-clip: padding-box;
+        position: relative;
+    }
+
+    .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer {
+        display: none;
+    }
+
+    .p-datatable .p-column-resizer {
+        display: block;
+        position: absolute !important;
+        top: 0;
+        right: 0;
+        margin: 0;
+        width: 0.5rem;
+        height: 100%;
+        padding: 0px;
+        cursor: col-resize;
+        border: 1px solid transparent;
+    }
+
+    .p-datatable .p-column-header-content {
+        display: flex;
+        align-items: center;
+    }
+
+    .p-datatable .p-column-resizer-helper {
+        width: 1px;
+        position: absolute;
+        z-index: 10;
+        display: none;
+    }
+
+    .p-datatable .p-row-editor-init,
+    .p-datatable .p-row-editor-save,
+    .p-datatable .p-row-editor-cancel {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        position: relative;
+    }
+
+    /* Expand */
+    .p-datatable .p-row-toggler {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        position: relative;
+    }
+
+    /* Reorder */
+    .p-datatable-reorder-indicator-up,
+    .p-datatable-reorder-indicator-down {
+        position: absolute;
+        display: none;
+    }
+
+    .p-reorderable-column,
+    .p-datatable-reorderablerow-handle {
+        cursor: move;
+    }
+
+    /* Loader */
+    .p-datatable .p-datatable-loading-overlay {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 2;
+    }
+
+    /* Filter */
+    .p-column-filter-row {
+        display: flex;
+        align-items: center;
+        width: 100%;
+    }
+
+    .p-column-filter-menu {
+        display: inline-flex;
+        margin-left: auto;
+    }
+
+    .p-column-filter-row .p-column-filter-element {
+        flex: 1 1 auto;
+        width: 1%;
+    }
+
+    .p-column-filter-menu-button,
+    .p-column-filter-clear-button {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        text-decoration: none;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .p-column-filter-row-items {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    .p-column-filter-row-item {
+        cursor: pointer;
+    }
+
+    .p-column-filter-add-button,
+    .p-column-filter-remove-button {
+        justify-content: center;
+    }
+
+    .p-column-filter-add-button .p-button-label,
+    .p-column-filter-remove-button .p-button-label {
+        flex-grow: 0;
+    }
+
+    .p-column-filter-buttonbar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) {
+        width: auto;
+    }
+
+    /* Responsive */
+    .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
+        display: none;
+    }
+
+    /* VirtualScroller */
+    .p-datatable-virtualscroller-spacer {
+        display: flex;
+    }
+
+    .p-datatable .p-virtualscroller .p-virtualscroller-loading {
+        transform: none !important;
+        min-height: 0;
+        position: sticky;
+        top: 0;
+        left: 0;
+    }
+}
+`;
+
+const classes = {
+    root: ({ instance, props }) => [
+        'p-datatable p-component',
+        {
+            'p-datatable-hoverable-rows': props.rowHover || props.selectionMode,
+            'p-datatable-resizable': props.resizableColumns,
+            'p-datatable-resizable-fit': props.resizableColumns && props.columnResizeMode === 'fit',
+            'p-datatable-scrollable': props.scrollable,
+            'p-datatable-flex-scrollable': props.scrollable && props.scrollHeight === 'flex',
+            'p-datatable-responsive-stack': props.responsiveLayout === 'stack',
+            'p-datatable-responsive-scroll': props.responsiveLayout === 'scroll',
+            'p-datatable-striped': props.stripedRows,
+            'p-datatable-gridlines': props.showGridlines,
+            'p-datatable-grouped-header': instance.headerColumnGroup != null,
+            'p-datatable-grouped-footer': instance.footerColumnGroup != null,
+            'p-datatable-sm': props.size === 'small',
+            'p-datatable-lg': props.size === 'large'
+        }
+    ],
+    loadingOverlay: 'p-datatable-loading-overlay p-component-overlay',
+    loadingIcon: 'p-datatable-loading-icon',
+    header: 'p-datatable-header',
+    paginator: ({ instance }) => (instance.paginatorTop ? 'p-paginator-top' : instance.paginatorBottom ? 'p-paginator-bottom' : ''),
+    wrapper: 'p-datatable-wrapper',
+    table: ({ props }) => [
+        'p-datatable-table',
+        {
+            'p-datatable-scrollable-table': props.scrollable,
+            'p-datatable-resizable-table': props.resizableColumns,
+            'p-datatable-resizable-table-fit': props.resizableColumns && props.columnResizeMode === 'fit'
+        }
+    ],
+    //tablehead
+    thead: 'p-datatable-thead',
+    // headercell
+    headerCell: ({ instance, props, column }) =>
+        column && !instance.columnProp(column, 'hidden') && (props.rowGroupMode !== 'subheader' || props.groupRowsBy !== instance.columnProp(column, 'field'))
+            ? [
+                  'p-filter-column',
+                  {
+                      'p-frozen-column': instance.columnProp(column, 'frozen')
+                  }
+              ]
+            : [
+                  {
+                      'p-sortable-column': instance.columnProp('sortable'),
+                      'p-resizable-column': instance.resizableColumns,
+                      'p-highlight': instance.isColumnSorted(),
+                      'p-filter-column': props.filterColumn,
+                      'p-frozen-column': instance.columnProp('frozen'),
+                      'p-reorderable-column': props.reorderableColumns
+                  }
+              ],
+    columnResizer: 'p-column-resizer',
+    headerContent: 'p-column-header-content',
+    headerTitle: 'p-column-title',
+    sortIcon: 'p-sortable-column-icon',
+    sortBadge: 'p-sortable-column-badge',
+    //headercheckbox
+    headerCheckboxWrapper: ({ instance }) => [
+        'p-checkbox p-component',
+        {
+            'p-checkbox-focused': instance.focused,
+            'p-disabled': instance.disabled
+        }
+    ],
+    headerCheckbox: ({ instance }) => [
+        'p-checkbox-box p-component',
+        {
+            'p-highlight': instance.checked,
+            'p-disabled': instance.disabled,
+            'p-focus': instance.focused
+        }
+    ],
+    headerCheckboxIcon: 'p-checkbox-icon',
+    // columnfilter
+    columnFilter: ({ props }) => [
+        'p-column-filter p-fluid',
+        {
+            'p-column-filter-row': props.display === 'row',
+            'p-column-filter-menu': props.display === 'menu'
+        }
+    ],
+    filterInput: 'p-fluid p-column-filter-element',
+    filterMenuButton: ({ instance }) => [
+        'p-column-filter-menu-button p-link',
+        {
+            'p-column-filter-menu-button-open': instance.overlayVisible,
+            'p-column-filter-menu-button-active': instance.hasFilter()
+        }
+    ],
+    headerFilterClearButton: ({ instance }) => [
+        'p-column-filter-clear-button p-link',
+        {
+            'p-hidden-space': !instance.hasRowFilter()
+        }
+    ],
+    filterOverlay: ({ instance, props }) => [
+        {
+            'p-column-filter-overlay p-component p-fluid': true,
+            'p-column-filter-overlay-menu': props.display === 'menu',
+            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
+            'p-ripple-disabled': instance.$primevue.config.ripple === false
+        }
+    ],
+    filterRowItems: 'p-column-filter-row-items',
+    filterRowItem: ({ instance, matchMode }) => [
+        'p-column-filter-row-item',
+        {
+            'p-highlight': matchMode && instance.isRowMatchModeSelected(matchMode.value)
+        }
+    ],
+    filterSeparator: 'p-column-filter-separator',
+    filterOperator: 'p-column-filter-operator',
+    filterOperatorDropdown: 'p-column-filter-operator-dropdown',
+    filterConstraints: 'p-column-filter-constraints',
+    filterConstraint: 'p-column-filter-constraint',
+    filterMatchModeDropdown: 'p-column-filter-matchmode-dropdown',
+    filterRemoveButton: 'p-column-filter-remove-button p-button-text p-button-danger p-button-sm',
+    filterAddRule: 'p-column-filter-add-rule',
+    filterAddRuleButton: 'p-column-filter-add-button p-button-text p-button-sm',
+    filterButtonbar: 'p-column-filter-buttonbar',
+    filterClearButton: 'p-button-outlined p-button-sm',
+    filterApplyButton: 'p-button-sm',
+    //tablebody
+    tbody: ({ props }) => (props.frozenRow ? 'p-datatable-tbody p-datatable-frozen-tbody' : 'p-datatable-tbody'),
+    rowgroupHeader: 'p-rowgroup-header',
+    rowGroupToggler: 'p-row-toggler p-link',
+    rowGroupTogglerIcon: 'p-row-toggler-icon',
+    row: ({ instance, props, rowData }) => {
+        let rowStyleClass = [];
+
+        if (props.selectionMode) {
+            rowStyleClass.push('p-selectable-row');
+        }
+
+        if (props.selection) {
+            rowStyleClass.push({
+                'p-highlight': instance.isSelected(rowData)
+            });
+        }
+
+        if (props.contextMenuSelection) {
+            rowStyleClass.push({
+                'p-highlight-contextmenu': instance.isSelectedWithContextMenu(rowData)
+            });
+        }
+
+        return rowStyleClass;
+    },
+    rowExpansion: 'p-datatable-row-expansion',
+    rowgroupFooter: 'p-rowgroup-footer',
+    emptyMessage: 'p-datatable-emptymessage',
+    //bodycell
+    bodyCell: ({ instance }) => [
+        {
+            'p-selection-column': instance.columnProp('selectionMode') != null,
+            'p-editable-column': instance.isEditable(),
+            'p-cell-editing': instance.d_editing,
+            'p-frozen-column': instance.columnProp('frozen')
+        }
+    ],
+    columnTitle: 'p-column-title',
+    rowReorderIcon: 'p-datatable-reorderablerow-handle',
+    rowToggler: 'p-row-toggler p-link',
+    rowTogglerIcon: 'p-row-toggler-icon',
+    rowEditorInitButton: 'p-row-editor-init p-link',
+    rowEditorInitIcon: 'p-row-editor-init-icon',
+    rowEditorSaveButton: 'p-row-editor-save p-link',
+    rowEditorSaveIcon: 'p-row-editor-save-icon',
+    rowEditorCancelButton: 'p-row-editor-cancel p-link',
+    rowEditorCancelIcon: 'p-row-editor-cancel-icon',
+    //rowcheckbox
+    checkboxWrapper: ({ instance }) => [
+        'p-checkbox p-component',
+        {
+            'p-checkbox-focused': instance.focused
+        }
+    ],
+    checkbox: ({ instance }) => [
+        'p-checkbox-box p-component',
+        {
+            'p-highlight': instance.checked,
+            'p-disabled': instance.$attrs.disabled,
+            'p-focus': instance.focused
+        }
+    ],
+    checkboxIcon: 'p-checkbox-icon',
+    //rowradiobutton
+    radiobuttonWrapper: ({ instance }) => [
+        'p-radiobutton p-component',
+        {
+            'p-radiobutton-focused': instance.focused
+        }
+    ],
+    radiobutton: ({ instance }) => [
+        'p-radiobutton-box p-component',
+        {
+            'p-highlight': instance.checked,
+            'p-disabled': instance.$attrs.disabled,
+            'p-focus': instance.focused
+        }
+    ],
+    radiobuttonIcon: 'p-radiobutton-icon',
+    //tablefooter
+    tfoot: 'p-datatable-tfoot',
+    //footercell
+    footerCell: ({ instance }) => [
+        {
+            'p-frozen-column': instance.columnProp('frozen')
+        }
+    ],
+    //datatable
+    virtualScrollerSpacer: 'p-datatable-virtualscroller-spacer',
+    footer: 'p-datatable-footer',
+    resizeHelper: 'p-column-resizer-helper',
+    reorderIndicatorUp: 'p-datatable-reorder-indicator-up',
+    reorderIndicatorDown: 'p-datatable-reorder-indicator-down'
+};
+
+const inlineStyles = {
+    wrapper: { overflow: 'auto' },
+    thead: { position: 'sticky' },
+    tfoot: { position: 'sticky' }
+};
+
+export default BaseStyle.extend({
+    name: 'datatable',
+    css,
+    classes,
+    inlineStyles
+});
diff --git a/components/lib/datatable/style/package.json b/components/lib/datatable/style/package.json
new file mode 100644
index 000000000..2ee182dc2
--- /dev/null
+++ b/components/lib/datatable/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./datatablestyle.cjs.js",
+    "module": "./datatablestyle.esm.js",
+    "unpkg": "./datatablestyle.min.js"
+}
diff --git a/components/lib/dataview/BaseDataView.vue b/components/lib/dataview/BaseDataView.vue
index 92d6e998d..2d9111ac0 100644
--- a/components/lib/dataview/BaseDataView.vue
+++ b/components/lib/dataview/BaseDataView.vue
@@ -1,22 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-
-const classes = {
-    root: ({ props }) => [
-        'p-dataview p-component',
-        {
-            'p-dataview-list': props.layout === 'list',
-            'p-dataview-grid': props.layout === 'grid'
-        }
-    ],
-    header: 'p-dataview-header',
-    paginator: ({ instance }) => (instance.paginatorTop ? 'p-paginator-top' : instance.paginatorBottom ? 'p-paginator-bottom' : ''),
-    content: 'p-dataview-content',
-    grid: 'p-grid p-nogutter grid grid-nogutter',
-    column: 'p-col col',
-    emptyMessage: 'p-dataview-emptymessage',
-    footer: 'p-dataview-footer'
-};
+import DataViewStyle from 'primevue/dataview/style';
 
 export default {
     name: 'BaseDataView',
@@ -87,9 +71,7 @@ export default {
             default: null
         }
     },
-    css: {
-        classes
-    },
+    style: DataViewStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/dataview/package.json b/components/lib/dataview/package.json
index edf9eef65..09a6f4f17 100644
--- a/components/lib/dataview/package.json
+++ b/components/lib/dataview/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./dataview.cjs.js",
-  "module": "./dataview.esm.js",
-  "unpkg": "./dataview.min.js",
-  "types": "./DataView.d.ts",
-  "browser": {
-    "./sfc": "./DataView.vue"
-  }
-}
\ No newline at end of file
+    "main": "./dataview.cjs.js",
+    "module": "./dataview.esm.js",
+    "unpkg": "./dataview.min.js",
+    "types": "./DataView.d.ts",
+    "browser": {
+        "./sfc": "./DataView.vue"
+    }
+}
diff --git a/components/lib/dataview/style/DataViewStyle.js b/components/lib/dataview/style/DataViewStyle.js
new file mode 100644
index 000000000..eaebd1ca8
--- /dev/null
+++ b/components/lib/dataview/style/DataViewStyle.js
@@ -0,0 +1,24 @@
+import BaseStyle from 'primevue/base/style';
+
+const classes = {
+    root: ({ props }) => [
+        'p-dataview p-component',
+        {
+            'p-dataview-list': props.layout === 'list',
+            'p-dataview-grid': props.layout === 'grid'
+        }
+    ],
+    header: 'p-dataview-header',
+    paginator: ({ instance }) => (instance.paginatorTop ? 'p-paginator-top' : instance.paginatorBottom ? 'p-paginator-bottom' : ''),
+    content: 'p-dataview-content',
+    grid: 'p-grid p-nogutter grid grid-nogutter',
+    column: 'p-col col',
+    emptyMessage: 'p-dataview-emptymessage',
+    footer: 'p-dataview-footer'
+};
+
+export default BaseStyle.extend({
+    name: 'dataview',
+    classes,
+    loadStyle: () => {}
+});
diff --git a/components/lib/dataview/style/package.json b/components/lib/dataview/style/package.json
new file mode 100644
index 000000000..6ef444ab3
--- /dev/null
+++ b/components/lib/dataview/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./dataviewstyle.cjs.js",
+    "module": "./dataviewstyle.esm.js",
+    "unpkg": "./dataviewstyle.min.js"
+}
diff --git a/components/lib/dataviewlayoutoptions/BaseDataViewLayoutOptions.vue b/components/lib/dataviewlayoutoptions/BaseDataViewLayoutOptions.vue
index a97f4f0ee..88cc9530a 100644
--- a/components/lib/dataviewlayoutoptions/BaseDataViewLayoutOptions.vue
+++ b/components/lib/dataviewlayoutoptions/BaseDataViewLayoutOptions.vue
@@ -1,21 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-
-const classes = {
-    root: 'p-dataview-layout-options p-selectbutton p-buttonset',
-    listButton: ({ props }) => [
-        'p-button p-button-icon-only',
-        {
-            'p-highlight': props.modelValue === 'list'
-        }
-    ],
-    gridButton: ({ props }) => [
-        'p-button p-button-icon-only',
-        {
-            'p-highlight': props.modelValue === 'grid'
-        }
-    ]
-};
+import DataViewLayoutOptionsStyle from 'primevue/dataviewlayoutoptions/style';
 
 export default {
     name: 'BaseDataViewLayoutOptions',
@@ -23,9 +8,7 @@ export default {
     props: {
         modelValue: String
     },
-    css: {
-        classes
-    },
+    style: DataViewLayoutOptionsStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/dataviewlayoutoptions/package.json b/components/lib/dataviewlayoutoptions/package.json
index d6e721909..3b647bf26 100644
--- a/components/lib/dataviewlayoutoptions/package.json
+++ b/components/lib/dataviewlayoutoptions/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./dataviewlayoutoptions.cjs.js",
-  "module": "./dataviewlayoutoptions.esm.js",
-  "unpkg": "./dataviewlayoutoptions.min.js",
-  "types": "./DataViewLayoutOptions.d.ts",
-  "browser": {
-    "./sfc": "./DataViewLayoutOptions.vue"
-  }
-}
\ No newline at end of file
+    "main": "./dataviewlayoutoptions.cjs.js",
+    "module": "./dataviewlayoutoptions.esm.js",
+    "unpkg": "./dataviewlayoutoptions.min.js",
+    "types": "./DataViewLayoutOptions.d.ts",
+    "browser": {
+        "./sfc": "./DataViewLayoutOptions.vue"
+    }
+}
diff --git a/components/lib/dataviewlayoutoptions/style/DataViewLayoutOptionsStyle.js b/components/lib/dataviewlayoutoptions/style/DataViewLayoutOptionsStyle.js
new file mode 100644
index 000000000..222dcc074
--- /dev/null
+++ b/components/lib/dataviewlayoutoptions/style/DataViewLayoutOptionsStyle.js
@@ -0,0 +1,23 @@
+import BaseStyle from 'primevue/base/style';
+
+const classes = {
+    root: 'p-dataview-layout-options p-selectbutton p-buttonset',
+    listButton: ({ props }) => [
+        'p-button p-button-icon-only',
+        {
+            'p-highlight': props.modelValue === 'list'
+        }
+    ],
+    gridButton: ({ props }) => [
+        'p-button p-button-icon-only',
+        {
+            'p-highlight': props.modelValue === 'grid'
+        }
+    ]
+};
+
+export default BaseStyle.extend({
+    name: 'dataviewlayoutoptions',
+    classes,
+    loadStyle: () => {}
+});
diff --git a/components/lib/dataviewlayoutoptions/style/package.json b/components/lib/dataviewlayoutoptions/style/package.json
new file mode 100644
index 000000000..f58fad50e
--- /dev/null
+++ b/components/lib/dataviewlayoutoptions/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./dataviewlayoutoptionsstyle.cjs.js",
+    "module": "./dataviewlayoutoptionsstyle.esm.js",
+    "unpkg": "./dataviewlayoutoptionsstyle.min.js"
+}
diff --git a/components/lib/deferredcontent/DeferredContent.vue b/components/lib/deferredcontent/DeferredContent.vue
index a7b93e0ab..93c37748a 100755
--- a/components/lib/deferredcontent/DeferredContent.vue
+++ b/components/lib/deferredcontent/DeferredContent.vue
@@ -6,11 +6,13 @@
 
 <script>
 import BaseComponent from 'primevue/basecomponent';
+import DeferredContentStyle from 'primevue/deferredcontent/style';
 
 export default {
     name: 'DeferredContent',
     extends: BaseComponent,
     emits: ['load'],
+    style: DeferredContentStyle,
     data() {
         return {
             loaded: false
diff --git a/components/lib/deferredcontent/package.json b/components/lib/deferredcontent/package.json
index 0b25a42fb..b4aebf40a 100644
--- a/components/lib/deferredcontent/package.json
+++ b/components/lib/deferredcontent/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./deferredcontent.cjs.js",
-  "module": "./deferredcontent.esm.js",
-  "unpkg": "./deferredcontent.min.js",
-  "types": "./DeferredContent.d.ts",
-  "browser": {
-    "./sfc": "./DeferredContent.vue"
-  }
-}
\ No newline at end of file
+    "main": "./deferredcontent.cjs.js",
+    "module": "./deferredcontent.esm.js",
+    "unpkg": "./deferredcontent.min.js",
+    "types": "./DeferredContent.d.ts",
+    "browser": {
+        "./sfc": "./DeferredContent.vue"
+    }
+}
diff --git a/components/lib/deferredcontent/style/DeferredContentStyle.js b/components/lib/deferredcontent/style/DeferredContentStyle.js
new file mode 100644
index 000000000..ff8b4c563
--- /dev/null
+++ b/components/lib/deferredcontent/style/DeferredContentStyle.js
@@ -0,0 +1 @@
+export default {};
diff --git a/components/lib/deferredcontent/style/package.json b/components/lib/deferredcontent/style/package.json
new file mode 100644
index 000000000..e2bf99a51
--- /dev/null
+++ b/components/lib/deferredcontent/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./deferredcontentstyle.cjs.js",
+    "module": "./deferredcontentstyle.esm.js",
+    "unpkg": "./deferredcontentstyle.min.js"
+}
diff --git a/components/lib/dialog/BaseDialog.vue b/components/lib/dialog/BaseDialog.vue
index e59f37382..f4108f47c 100644
--- a/components/lib/dialog/BaseDialog.vue
+++ b/components/lib/dialog/BaseDialog.vue
@@ -1,197 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-dialog-mask.p-component-overlay {
-        pointer-events: auto;
-    }
-    
-    .p-dialog {
-        max-height: 90%;
-        transform: scale(1);
-    }
-    
-    .p-dialog-content {
-        overflow-y: auto;
-    }
-    
-    .p-dialog-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        flex-shrink: 0;
-    }
-    
-    .p-dialog-footer {
-        flex-shrink: 0;
-    }
-    
-    .p-dialog .p-dialog-header-icons {
-        display: flex;
-        align-items: center;
-    }
-    
-    .p-dialog .p-dialog-header-icon {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        overflow: hidden;
-        position: relative;
-    }
-    
-    /* Fluid */
-    .p-fluid .p-dialog-footer .p-button {
-        width: auto;
-    }
-    
-    /* Animation */
-    /* Center */
-    .p-dialog-enter-active {
-        transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
-    }
-    .p-dialog-leave-active {
-        transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
-    }
-    .p-dialog-enter-from,
-    .p-dialog-leave-to {
-        opacity: 0;
-        transform: scale(0.7);
-    }
-    
-    /* Top, Bottom, Left, Right, Top* and Bottom* */
-    .p-dialog-top .p-dialog,
-    .p-dialog-bottom .p-dialog,
-    .p-dialog-left .p-dialog,
-    .p-dialog-right .p-dialog,
-    .p-dialog-topleft .p-dialog,
-    .p-dialog-topright .p-dialog,
-    .p-dialog-bottomleft .p-dialog,
-    .p-dialog-bottomright .p-dialog {
-        margin: 0.75rem;
-        transform: translate3d(0px, 0px, 0px);
-    }
-    .p-dialog-top .p-dialog-enter-active,
-    .p-dialog-top .p-dialog-leave-active,
-    .p-dialog-bottom .p-dialog-enter-active,
-    .p-dialog-bottom .p-dialog-leave-active,
-    .p-dialog-left .p-dialog-enter-active,
-    .p-dialog-left .p-dialog-leave-active,
-    .p-dialog-right .p-dialog-enter-active,
-    .p-dialog-right .p-dialog-leave-active,
-    .p-dialog-topleft .p-dialog-enter-active,
-    .p-dialog-topleft .p-dialog-leave-active,
-    .p-dialog-topright .p-dialog-enter-active,
-    .p-dialog-topright .p-dialog-leave-active,
-    .p-dialog-bottomleft .p-dialog-enter-active,
-    .p-dialog-bottomleft .p-dialog-leave-active,
-    .p-dialog-bottomright .p-dialog-enter-active,
-    .p-dialog-bottomright .p-dialog-leave-active {
-        transition: all 0.3s ease-out;
-    }
-    .p-dialog-top .p-dialog-enter-from,
-    .p-dialog-top .p-dialog-leave-to {
-        transform: translate3d(0px, -100%, 0px);
-    }
-    .p-dialog-bottom .p-dialog-enter-from,
-    .p-dialog-bottom .p-dialog-leave-to {
-        transform: translate3d(0px, 100%, 0px);
-    }
-    .p-dialog-left .p-dialog-enter-from,
-    .p-dialog-left .p-dialog-leave-to,
-    .p-dialog-topleft .p-dialog-enter-from,
-    .p-dialog-topleft .p-dialog-leave-to,
-    .p-dialog-bottomleft .p-dialog-enter-from,
-    .p-dialog-bottomleft .p-dialog-leave-to {
-        transform: translate3d(-100%, 0px, 0px);
-    }
-    .p-dialog-right .p-dialog-enter-from,
-    .p-dialog-right .p-dialog-leave-to,
-    .p-dialog-topright .p-dialog-enter-from,
-    .p-dialog-topright .p-dialog-leave-to,
-    .p-dialog-bottomright .p-dialog-enter-from,
-    .p-dialog-bottomright .p-dialog-leave-to {
-        transform: translate3d(100%, 0px, 0px);
-    }
-    
-    /* Maximize */
-    .p-dialog-maximized {
-        -webkit-transition: none;
-        transition: none;
-        transform: none;
-        width: 100vw !important;
-        height: 100vh !important;
-        top: 0px !important;
-        left: 0px !important;
-        max-height: 100%;
-        height: 100%;
-    }
-    .p-dialog-maximized .p-dialog-content {
-        flex-grow: 1;
-    }
-    
-    .p-confirm-dialog .p-dialog-content {
-        display: flex;
-        align-items: center;
-    }
-}
-`;
-
-/* Position */
-const inlineStyles = {
-    mask: ({ position, modal }) => ({
-        position: 'fixed',
-        height: '100%',
-        width: '100%',
-        left: 0,
-        top: 0,
-        display: 'flex',
-        justifyContent: position === 'left' || position === 'topleft' || position === 'bottomleft' ? 'flex-start' : position === 'right' || position === 'topright' || position === 'bottomright' ? 'flex-end' : 'center',
-        alignItems: position === 'top' || position === 'topleft' || position === 'topright' ? 'flex-start' : position === 'bottom' || position === 'bottomleft' || position === 'bottomright' ? 'flex-end' : 'center',
-        pointerEvents: modal ? 'auto' : 'none'
-    }),
-    root: {
-        display: 'flex',
-        flexDirection: 'column',
-        pointerEvents: 'auto'
-    }
-};
-
-const classes = {
-    mask: ({ props }) => {
-        const positions = ['left', 'right', 'top', 'topleft', 'topright', 'bottom', 'bottomleft', 'bottomright'];
-        const pos = positions.find((item) => item === props.position);
-
-        return [
-            'p-dialog-mask',
-            {
-                'p-component-overlay p-component-overlay-enter': props.modal
-            },
-            pos ? `p-dialog-${pos}` : ''
-        ];
-    },
-    root: ({ props, instance }) => [
-        'p-dialog p-component',
-        {
-            'p-dialog-rtl': props.rtl,
-            'p-dialog-maximized': props.maximizable && instance.maximized,
-            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
-        }
-    ],
-    header: 'p-dialog-header',
-    headerTitle: 'p-dialog-title',
-    headerIcons: 'p-dialog-header-icons',
-    maximizableButton: 'p-dialog-header-icon p-dialog-header-maximize p-link',
-    maximizableIcon: 'p-dialog-header-maximize-icon',
-    closeButton: 'p-dialog-header-icon p-dialog-header-close p-link',
-    closeButtonIcon: 'p-dialog-header-close-icon',
-    content: 'p-dialog-content',
-    footer: 'p-dialog-footer'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'dialog', manual: true });
+import DialogStyle from 'primevue/dialog/style';
 
 export default {
     name: 'BaseDialog',
@@ -307,11 +116,7 @@ export default {
         },
         _instance: null
     },
-    css: {
-        classes,
-        inlineStyles,
-        loadStyle
-    },
+    style: DialogStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/dialog/package.json b/components/lib/dialog/package.json
index 575095477..0d3427c59 100644
--- a/components/lib/dialog/package.json
+++ b/components/lib/dialog/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./dialog.cjs.js",
-  "module": "./dialog.esm.js",
-  "unpkg": "./dialog.min.js",
-  "types": "./Dialog.d.ts",
-  "browser": {
-    "./sfc": "./Dialog.vue"
-  }
-}
\ No newline at end of file
+    "main": "./dialog.cjs.js",
+    "module": "./dialog.esm.js",
+    "unpkg": "./dialog.min.js",
+    "types": "./Dialog.d.ts",
+    "browser": {
+        "./sfc": "./Dialog.vue"
+    }
+}
diff --git a/components/lib/dialog/style/DialogStyle.js b/components/lib/dialog/style/DialogStyle.js
new file mode 100644
index 000000000..b3851bf6b
--- /dev/null
+++ b/components/lib/dialog/style/DialogStyle.js
@@ -0,0 +1,197 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-dialog-mask.p-component-overlay {
+        pointer-events: auto;
+    }
+
+    .p-dialog {
+        max-height: 90%;
+        transform: scale(1);
+    }
+
+    .p-dialog-content {
+        overflow-y: auto;
+    }
+
+    .p-dialog-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-shrink: 0;
+    }
+
+    .p-dialog-footer {
+        flex-shrink: 0;
+    }
+
+    .p-dialog .p-dialog-header-icons {
+        display: flex;
+        align-items: center;
+    }
+
+    .p-dialog .p-dialog-header-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        position: relative;
+    }
+
+    /* Fluid */
+    .p-fluid .p-dialog-footer .p-button {
+        width: auto;
+    }
+
+    /* Animation */
+    /* Center */
+    .p-dialog-enter-active {
+        transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
+    }
+    .p-dialog-leave-active {
+        transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .p-dialog-enter-from,
+    .p-dialog-leave-to {
+        opacity: 0;
+        transform: scale(0.7);
+    }
+
+    /* Top, Bottom, Left, Right, Top* and Bottom* */
+    .p-dialog-top .p-dialog,
+    .p-dialog-bottom .p-dialog,
+    .p-dialog-left .p-dialog,
+    .p-dialog-right .p-dialog,
+    .p-dialog-topleft .p-dialog,
+    .p-dialog-topright .p-dialog,
+    .p-dialog-bottomleft .p-dialog,
+    .p-dialog-bottomright .p-dialog {
+        margin: 0.75rem;
+        transform: translate3d(0px, 0px, 0px);
+    }
+    .p-dialog-top .p-dialog-enter-active,
+    .p-dialog-top .p-dialog-leave-active,
+    .p-dialog-bottom .p-dialog-enter-active,
+    .p-dialog-bottom .p-dialog-leave-active,
+    .p-dialog-left .p-dialog-enter-active,
+    .p-dialog-left .p-dialog-leave-active,
+    .p-dialog-right .p-dialog-enter-active,
+    .p-dialog-right .p-dialog-leave-active,
+    .p-dialog-topleft .p-dialog-enter-active,
+    .p-dialog-topleft .p-dialog-leave-active,
+    .p-dialog-topright .p-dialog-enter-active,
+    .p-dialog-topright .p-dialog-leave-active,
+    .p-dialog-bottomleft .p-dialog-enter-active,
+    .p-dialog-bottomleft .p-dialog-leave-active,
+    .p-dialog-bottomright .p-dialog-enter-active,
+    .p-dialog-bottomright .p-dialog-leave-active {
+        transition: all 0.3s ease-out;
+    }
+    .p-dialog-top .p-dialog-enter-from,
+    .p-dialog-top .p-dialog-leave-to {
+        transform: translate3d(0px, -100%, 0px);
+    }
+    .p-dialog-bottom .p-dialog-enter-from,
+    .p-dialog-bottom .p-dialog-leave-to {
+        transform: translate3d(0px, 100%, 0px);
+    }
+    .p-dialog-left .p-dialog-enter-from,
+    .p-dialog-left .p-dialog-leave-to,
+    .p-dialog-topleft .p-dialog-enter-from,
+    .p-dialog-topleft .p-dialog-leave-to,
+    .p-dialog-bottomleft .p-dialog-enter-from,
+    .p-dialog-bottomleft .p-dialog-leave-to {
+        transform: translate3d(-100%, 0px, 0px);
+    }
+    .p-dialog-right .p-dialog-enter-from,
+    .p-dialog-right .p-dialog-leave-to,
+    .p-dialog-topright .p-dialog-enter-from,
+    .p-dialog-topright .p-dialog-leave-to,
+    .p-dialog-bottomright .p-dialog-enter-from,
+    .p-dialog-bottomright .p-dialog-leave-to {
+        transform: translate3d(100%, 0px, 0px);
+    }
+
+    /* Maximize */
+    .p-dialog-maximized {
+        -webkit-transition: none;
+        transition: none;
+        transform: none;
+        width: 100vw !important;
+        height: 100vh !important;
+        top: 0px !important;
+        left: 0px !important;
+        max-height: 100%;
+        height: 100%;
+    }
+    .p-dialog-maximized .p-dialog-content {
+        flex-grow: 1;
+    }
+
+    .p-confirm-dialog .p-dialog-content {
+        display: flex;
+        align-items: center;
+    }
+}
+`;
+
+/* Position */
+const inlineStyles = {
+    mask: ({ position, modal }) => ({
+        position: 'fixed',
+        height: '100%',
+        width: '100%',
+        left: 0,
+        top: 0,
+        display: 'flex',
+        justifyContent: position === 'left' || position === 'topleft' || position === 'bottomleft' ? 'flex-start' : position === 'right' || position === 'topright' || position === 'bottomright' ? 'flex-end' : 'center',
+        alignItems: position === 'top' || position === 'topleft' || position === 'topright' ? 'flex-start' : position === 'bottom' || position === 'bottomleft' || position === 'bottomright' ? 'flex-end' : 'center',
+        pointerEvents: modal ? 'auto' : 'none'
+    }),
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        pointerEvents: 'auto'
+    }
+};
+
+const classes = {
+    mask: ({ props }) => {
+        const positions = ['left', 'right', 'top', 'topleft', 'topright', 'bottom', 'bottomleft', 'bottomright'];
+        const pos = positions.find((item) => item === props.position);
+
+        return [
+            'p-dialog-mask',
+            {
+                'p-component-overlay p-component-overlay-enter': props.modal
+            },
+            pos ? `p-dialog-${pos}` : ''
+        ];
+    },
+    root: ({ props, instance }) => [
+        'p-dialog p-component',
+        {
+            'p-dialog-rtl': props.rtl,
+            'p-dialog-maximized': props.maximizable && instance.maximized,
+            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
+            'p-ripple-disabled': instance.$primevue.config.ripple === false
+        }
+    ],
+    header: 'p-dialog-header',
+    headerTitle: 'p-dialog-title',
+    headerIcons: 'p-dialog-header-icons',
+    maximizableButton: 'p-dialog-header-icon p-dialog-header-maximize p-link',
+    maximizableIcon: 'p-dialog-header-maximize-icon',
+    closeButton: 'p-dialog-header-icon p-dialog-header-close p-link',
+    closeButtonIcon: 'p-dialog-header-close-icon',
+    content: 'p-dialog-content',
+    footer: 'p-dialog-footer'
+};
+
+export default BaseStyle.extend({
+    name: 'dialog',
+    css,
+    classes,
+    inlineStyles
+});
diff --git a/components/lib/dialog/style/package.json b/components/lib/dialog/style/package.json
new file mode 100644
index 000000000..b8328d2c8
--- /dev/null
+++ b/components/lib/dialog/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./dialogstyle.cjs.js",
+    "module": "./dialogstyle.esm.js",
+    "unpkg": "./dialogstyle.min.js"
+}
diff --git a/components/lib/divider/BaseDivider.vue b/components/lib/divider/BaseDivider.vue
index 736d311ed..1c9973c5f 100644
--- a/components/lib/divider/BaseDivider.vue
+++ b/components/lib/divider/BaseDivider.vue
@@ -1,96 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-divider-horizontal {
-        display: flex;
-        width: 100%;
-        position: relative;
-        align-items: center;
-    }
-    
-    .p-divider-horizontal:before {
-        position: absolute;
-        display: block;
-        top: 50%;
-        left: 0;
-        width: 100%;
-        content: '';
-    }
-    
-    .p-divider-content {
-        z-index: 1;
-    }
-    
-    .p-divider-vertical {
-        min-height: 100%;
-        margin: 0 1rem;
-        display: flex;
-        position: relative;
-        justify-content: center;
-    }
-    
-    .p-divider-vertical:before {
-        position: absolute;
-        display: block;
-        top: 0;
-        left: 50%;
-        height: 100%;
-        content: '';
-    }
-    
-    .p-divider-solid.p-divider-horizontal:before {
-        border-top-style: solid;
-    }
-    
-    .p-divider-solid.p-divider-vertical:before {
-        border-left-style: solid;
-    }
-    
-    .p-divider-dashed.p-divider-horizontal:before {
-        border-top-style: dashed;
-    }
-    
-    .p-divider-dashed.p-divider-vertical:before {
-        border-left-style: dashed;
-    }
-    
-    .p-divider-dotted.p-divider-horizontal:before {
-        border-top-style: dotted;
-    }
-    
-    .p-divider-dotted.p-divider-vertical:before {
-        border-left-style: dotted;
-    }
-}
-`;
-
-/* Position */
-const inlineStyles = {
-    root: ({ props }) => ({
-        justifyContent: props.layout === 'horizontal' ? (props.align === 'center' || props.align === null ? 'center' : props.align === 'left' ? 'flex-start' : props.align === 'right' ? 'flex-end' : null) : null,
-        alignItems: props.layout === 'vertical' ? (props.align === 'center' || props.align === null ? 'center' : props.align === 'top' ? 'flex-start' : props.align === 'bottom' ? 'flex-end' : null) : null
-    })
-};
-
-const classes = {
-    root: ({ props }) => [
-        'p-divider p-component',
-        'p-divider-' + props.layout,
-        'p-divider-' + props.type,
-        { 'p-divider-left': props.layout === 'horizontal' && (!props.align || props.align === 'left') },
-        { 'p-divider-center': props.layout === 'horizontal' && props.align === 'center' },
-        { 'p-divider-right': props.layout === 'horizontal' && props.align === 'right' },
-        { 'p-divider-top': props.layout === 'vertical' && props.align === 'top' },
-        { 'p-divider-center': props.layout === 'vertical' && (!props.align || props.align === 'center') },
-        { 'p-divider-bottom': props.layout === 'vertical' && props.align === 'bottom' }
-    ],
-    content: 'p-divider-content'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'divider', manual: true });
+import DividerStyle from 'primevue/divider/style';
 
 export default {
     name: 'BaseDivider',
@@ -109,11 +19,7 @@ export default {
             default: 'solid'
         }
     },
-    css: {
-        classes,
-        inlineStyles,
-        loadStyle
-    },
+    style: DividerStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/divider/package.json b/components/lib/divider/package.json
index a03287086..a88f381fb 100644
--- a/components/lib/divider/package.json
+++ b/components/lib/divider/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./divider.cjs.js",
-  "module": "./divider.esm.js",
-  "unpkg": "./divider.min.js",
-  "types": "./Divider.d.ts",
-  "browser": {
-    "./sfc": "./Divider.vue"
-  }
-}
\ No newline at end of file
+    "main": "./divider.cjs.js",
+    "module": "./divider.esm.js",
+    "unpkg": "./divider.min.js",
+    "types": "./Divider.d.ts",
+    "browser": {
+        "./sfc": "./Divider.vue"
+    }
+}
diff --git a/components/lib/divider/style/DividerStyle.js b/components/lib/divider/style/DividerStyle.js
new file mode 100644
index 000000000..28be12b4e
--- /dev/null
+++ b/components/lib/divider/style/DividerStyle.js
@@ -0,0 +1,96 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-divider-horizontal {
+        display: flex;
+        width: 100%;
+        position: relative;
+        align-items: center;
+    }
+
+    .p-divider-horizontal:before {
+        position: absolute;
+        display: block;
+        top: 50%;
+        left: 0;
+        width: 100%;
+        content: '';
+    }
+
+    .p-divider-content {
+        z-index: 1;
+    }
+
+    .p-divider-vertical {
+        min-height: 100%;
+        margin: 0 1rem;
+        display: flex;
+        position: relative;
+        justify-content: center;
+    }
+
+    .p-divider-vertical:before {
+        position: absolute;
+        display: block;
+        top: 0;
+        left: 50%;
+        height: 100%;
+        content: '';
+    }
+
+    .p-divider-solid.p-divider-horizontal:before {
+        border-top-style: solid;
+    }
+
+    .p-divider-solid.p-divider-vertical:before {
+        border-left-style: solid;
+    }
+
+    .p-divider-dashed.p-divider-horizontal:before {
+        border-top-style: dashed;
+    }
+
+    .p-divider-dashed.p-divider-vertical:before {
+        border-left-style: dashed;
+    }
+
+    .p-divider-dotted.p-divider-horizontal:before {
+        border-top-style: dotted;
+    }
+
+    .p-divider-dotted.p-divider-vertical:before {
+        border-left-style: dotted;
+    }
+}
+`;
+
+/* Position */
+const inlineStyles = {
+    root: ({ props }) => ({
+        justifyContent: props.layout === 'horizontal' ? (props.align === 'center' || props.align === null ? 'center' : props.align === 'left' ? 'flex-start' : props.align === 'right' ? 'flex-end' : null) : null,
+        alignItems: props.layout === 'vertical' ? (props.align === 'center' || props.align === null ? 'center' : props.align === 'top' ? 'flex-start' : props.align === 'bottom' ? 'flex-end' : null) : null
+    })
+};
+
+const classes = {
+    root: ({ props }) => [
+        'p-divider p-component',
+        'p-divider-' + props.layout,
+        'p-divider-' + props.type,
+        { 'p-divider-left': props.layout === 'horizontal' && (!props.align || props.align === 'left') },
+        { 'p-divider-center': props.layout === 'horizontal' && props.align === 'center' },
+        { 'p-divider-right': props.layout === 'horizontal' && props.align === 'right' },
+        { 'p-divider-top': props.layout === 'vertical' && props.align === 'top' },
+        { 'p-divider-center': props.layout === 'vertical' && (!props.align || props.align === 'center') },
+        { 'p-divider-bottom': props.layout === 'vertical' && props.align === 'bottom' }
+    ],
+    content: 'p-divider-content'
+};
+
+export default BaseStyle.extend({
+    name: 'divider',
+    css,
+    classes,
+    inlineStyles
+});
diff --git a/components/lib/divider/style/package.json b/components/lib/divider/style/package.json
new file mode 100644
index 000000000..1e3a01a5e
--- /dev/null
+++ b/components/lib/divider/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./dividerstyle.cjs.js",
+    "module": "./dividerstyle.esm.js",
+    "unpkg": "./dividerstyle.min.js"
+}
diff --git a/components/lib/dock/BaseDock.vue b/components/lib/dock/BaseDock.vue
index d6c16c5c9..f190fd110 100644
--- a/components/lib/dock/BaseDock.vue
+++ b/components/lib/dock/BaseDock.vue
@@ -1,145 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-dock {
-        position: absolute;
-        z-index: 1;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        pointer-events: none;
-    }
-    
-    .p-dock-list-container {
-        display: flex;
-        pointer-events: auto;
-    }
-    
-    .p-dock-list {
-        margin: 0;
-        padding: 0;
-        list-style: none;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-    
-    .p-dock-item {
-        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-        will-change: transform;
-    }
-    
-    .p-dock-link {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        position: relative;
-        overflow: hidden;
-        cursor: default;
-    }
-    
-    .p-dock-item-second-prev,
-    .p-dock-item-second-next {
-        transform: scale(1.2);
-    }
-    
-    .p-dock-item-prev,
-    .p-dock-item-next {
-        transform: scale(1.4);
-    }
-    
-    .p-dock-item-current {
-        transform: scale(1.6);
-        z-index: 1;
-    }
-    
-    /* Position */
-    /* top */
-    .p-dock-top {
-        left: 0;
-        top: 0;
-        width: 100%;
-    }
-    
-    .p-dock-top .p-dock-item {
-        transform-origin: center top;
-    }
-    
-    /* bottom */
-    .p-dock-bottom {
-        left: 0;
-        bottom: 0;
-        width: 100%;
-    }
-    
-    .p-dock-bottom .p-dock-item {
-        transform-origin: center bottom;
-    }
-    
-    /* right */
-    .p-dock-right {
-        right: 0;
-        top: 0;
-        height: 100%;
-    }
-    
-    .p-dock-right .p-dock-item {
-        transform-origin: center right;
-    }
-    
-    .p-dock-right .p-dock-list {
-        flex-direction: column;
-    }
-    
-    /* left */
-    .p-dock-left {
-        left: 0;
-        top: 0;
-        height: 100%;
-    }
-    
-    .p-dock-left .p-dock-item {
-        transform-origin: center left;
-    }
-    
-    .p-dock-left .p-dock-list {
-        flex-direction: column;
-    }
-}
-`;
-
-const classes = {
-    root: ({ props }) => ['p-dock p-component', `p-dock-${props.position}`],
-    container: 'p-dock-list-container',
-    menu: 'p-dock-list',
-    menuitem: ({ instance, processedItem, index, id }) => [
-        'p-dock-item',
-        {
-            'p-focus': instance.isItemActive(id),
-            'p-disabled': instance.disabled(processedItem),
-            'p-dock-item-second-prev': instance.currentIndex - 2 === index,
-            'p-dock-item-prev': instance.currentIndex - 1 === index,
-            'p-dock-item-current': instance.currentIndex === index,
-            'p-dock-item-next': instance.currentIndex + 1 === index,
-            'p-dock-item-second-next': instance.currentIndex + 2 === index
-        }
-    ],
-    content: 'p-menuitem-content',
-    action: ({ props, isActive, isExactActive }) => [
-        'p-dock-link',
-        {
-            'router-link-active': isActive,
-            'router-link-active-exact': props.exact && isExactActive
-        }
-    ],
-    icon: 'p-dock-icon'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'dock', manual: true });
+import DockStyle from 'primevue/dock/style';
 
 export default {
     name: 'BaseDock',
@@ -174,10 +35,7 @@ export default {
             default: null
         }
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: DockStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/dock/package.json b/components/lib/dock/package.json
index a60167bef..e7a08c74b 100644
--- a/components/lib/dock/package.json
+++ b/components/lib/dock/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./dock.min.js",
     "types": "./Dock.d.ts",
     "browser": {
-      "./sfc": "./Dock.vue"
+        "./sfc": "./Dock.vue"
     }
-  }
\ No newline at end of file
+}
diff --git a/components/lib/dock/style/DockStyle.js b/components/lib/dock/style/DockStyle.js
new file mode 100644
index 000000000..954a9888c
--- /dev/null
+++ b/components/lib/dock/style/DockStyle.js
@@ -0,0 +1,144 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-dock {
+        position: absolute;
+        z-index: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        pointer-events: none;
+    }
+
+    .p-dock-list-container {
+        display: flex;
+        pointer-events: auto;
+    }
+
+    .p-dock-list {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .p-dock-item {
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+        will-change: transform;
+    }
+
+    .p-dock-link {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        overflow: hidden;
+        cursor: default;
+    }
+
+    .p-dock-item-second-prev,
+    .p-dock-item-second-next {
+        transform: scale(1.2);
+    }
+
+    .p-dock-item-prev,
+    .p-dock-item-next {
+        transform: scale(1.4);
+    }
+
+    .p-dock-item-current {
+        transform: scale(1.6);
+        z-index: 1;
+    }
+
+    /* Position */
+    /* top */
+    .p-dock-top {
+        left: 0;
+        top: 0;
+        width: 100%;
+    }
+
+    .p-dock-top .p-dock-item {
+        transform-origin: center top;
+    }
+
+    /* bottom */
+    .p-dock-bottom {
+        left: 0;
+        bottom: 0;
+        width: 100%;
+    }
+
+    .p-dock-bottom .p-dock-item {
+        transform-origin: center bottom;
+    }
+
+    /* right */
+    .p-dock-right {
+        right: 0;
+        top: 0;
+        height: 100%;
+    }
+
+    .p-dock-right .p-dock-item {
+        transform-origin: center right;
+    }
+
+    .p-dock-right .p-dock-list {
+        flex-direction: column;
+    }
+
+    /* left */
+    .p-dock-left {
+        left: 0;
+        top: 0;
+        height: 100%;
+    }
+
+    .p-dock-left .p-dock-item {
+        transform-origin: center left;
+    }
+
+    .p-dock-left .p-dock-list {
+        flex-direction: column;
+    }
+}
+`;
+
+const classes = {
+    root: ({ props }) => ['p-dock p-component', `p-dock-${props.position}`],
+    container: 'p-dock-list-container',
+    menu: 'p-dock-list',
+    menuitem: ({ instance, processedItem, index, id }) => [
+        'p-dock-item',
+        {
+            'p-focus': instance.isItemActive(id),
+            'p-disabled': instance.disabled(processedItem),
+            'p-dock-item-second-prev': instance.currentIndex - 2 === index,
+            'p-dock-item-prev': instance.currentIndex - 1 === index,
+            'p-dock-item-current': instance.currentIndex === index,
+            'p-dock-item-next': instance.currentIndex + 1 === index,
+            'p-dock-item-second-next': instance.currentIndex + 2 === index
+        }
+    ],
+    content: 'p-menuitem-content',
+    action: ({ props, isActive, isExactActive }) => [
+        'p-dock-link',
+        {
+            'router-link-active': isActive,
+            'router-link-active-exact': props.exact && isExactActive
+        }
+    ],
+    icon: 'p-dock-icon'
+};
+
+export default BaseStyle.extend({
+    name: 'dock',
+    css,
+    classes
+});
diff --git a/components/lib/dock/style/package.json b/components/lib/dock/style/package.json
new file mode 100644
index 000000000..830374584
--- /dev/null
+++ b/components/lib/dock/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./dockstyle.cjs.js",
+    "module": "./dockstyle.esm.js",
+    "unpkg": "./dockstyle.min.js"
+}
diff --git a/components/lib/dropdown/BaseDropdown.vue b/components/lib/dropdown/BaseDropdown.vue
index 57e68d744..022d0651a 100644
--- a/components/lib/dropdown/BaseDropdown.vue
+++ b/components/lib/dropdown/BaseDropdown.vue
@@ -1,153 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-dropdown {
-        display: inline-flex;
-        cursor: pointer;
-        position: relative;
-        user-select: none;
-    }
-    
-    .p-dropdown-clear-icon {
-        position: absolute;
-        top: 50%;
-        margin-top: -0.5rem;
-    }
-    
-    .p-dropdown-trigger {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
-    }
-    
-    .p-dropdown-label {
-        display: block;
-        white-space: nowrap;
-        overflow: hidden;
-        flex: 1 1 auto;
-        width: 1%;
-        text-overflow: ellipsis;
-        cursor: pointer;
-    }
-    
-    .p-dropdown-label-empty {
-        overflow: hidden;
-        opacity: 0;
-    }
-    
-    input.p-dropdown-label {
-        cursor: default;
-    }
-    
-    .p-dropdown .p-dropdown-panel {
-        min-width: 100%;
-    }
-    
-    .p-dropdown-panel {
-        position: absolute;
-        top: 0;
-        left: 0;
-    }
-    
-    .p-dropdown-items-wrapper {
-        overflow: auto;
-    }
-    
-    .p-dropdown-item {
-        cursor: pointer;
-        font-weight: normal;
-        white-space: nowrap;
-        position: relative;
-        overflow: hidden;
-    }
-    
-    .p-dropdown-item-group {
-        cursor: auto;
-    }
-    
-    .p-dropdown-items {
-        margin: 0;
-        padding: 0;
-        list-style-type: none;
-    }
-    
-    .p-dropdown-filter {
-        width: 100%;
-    }
-    
-    .p-dropdown-filter-container {
-        position: relative;
-    }
-    
-    .p-dropdown-filter-icon {
-        position: absolute;
-        top: 50%;
-        margin-top: -0.5rem;
-    }
-    
-    .p-fluid .p-dropdown {
-        display: flex;
-    }
-    
-    .p-fluid .p-dropdown .p-dropdown-label {
-        width: 1%;
-    }
-}
-`;
-
-const classes = {
-    root: ({ instance, props, state }) => [
-        'p-dropdown p-component p-inputwrapper',
-        {
-            'p-disabled': props.disabled,
-            'p-dropdown-clearable': props.showClear && !props.disabled,
-            'p-focus': state.focused,
-            'p-inputwrapper-filled': instance.hasSelectedOption,
-            'p-inputwrapper-focus': state.focused || state.overlayVisible,
-            'p-overlay-open': state.overlayVisible
-        }
-    ],
-    input: ({ instance, props }) => [
-        'p-dropdown-label p-inputtext',
-        {
-            'p-placeholder': !props.editable && instance.label === props.placeholder,
-            'p-dropdown-label-empty': !props.editable && !instance.$slots['value'] && (instance.label === 'p-emptylabel' || instance.label.length === 0)
-        }
-    ],
-    clearIcon: 'p-dropdown-clear-icon',
-    trigger: 'p-dropdown-trigger',
-    loadingicon: 'p-dropdown-trigger-icon',
-    dropdownIcon: 'p-dropdown-trigger-icon',
-    panel: ({ instance }) => [
-        'p-dropdown-panel p-component',
-        {
-            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
-        }
-    ],
-    header: 'p-dropdown-header',
-    filterContainer: 'p-dropdown-filter-container',
-    filterInput: 'p-dropdown-filter p-inputtext p-component',
-    filterIcon: 'p-dropdown-filter-icon',
-    wrapper: 'p-dropdown-items-wrapper',
-    list: 'p-dropdown-items',
-    itemGroup: 'p-dropdown-item-group',
-    item: ({ instance, state, option, focusedOption }) => [
-        'p-dropdown-item',
-        {
-            'p-highlight': instance.isSelected(option),
-            'p-focus': state.focusedOptionIndex === focusedOption,
-            'p-disabled': instance.isOptionDisabled(option)
-        }
-    ],
-    emptyMessage: 'p-dropdown-empty-message'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'dropdown', manual: true });
+import DropdownStyle from 'primevue/dropdown/style';
 
 export default {
     name: 'BaseDropdown',
@@ -302,10 +155,7 @@ export default {
             default: null
         }
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: DropdownStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/dropdown/package.json b/components/lib/dropdown/package.json
index 101b4f8c9..e4007c4db 100644
--- a/components/lib/dropdown/package.json
+++ b/components/lib/dropdown/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./dropdown.cjs.js",
-  "module": "./dropdown.esm.js",
-  "unpkg": "./dropdown.min.js",
-  "types": "./Dropdown.d.ts",
-  "browser": {
-    "./sfc": "./Dropdown.vue"
-  }
-}
\ No newline at end of file
+    "main": "./dropdown.cjs.js",
+    "module": "./dropdown.esm.js",
+    "unpkg": "./dropdown.min.js",
+    "types": "./Dropdown.d.ts",
+    "browser": {
+        "./sfc": "./Dropdown.vue"
+    }
+}
diff --git a/components/lib/dropdown/style/DropdownStyle.js b/components/lib/dropdown/style/DropdownStyle.js
new file mode 100644
index 000000000..9ddb31966
--- /dev/null
+++ b/components/lib/dropdown/style/DropdownStyle.js
@@ -0,0 +1,152 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-dropdown {
+        display: inline-flex;
+        cursor: pointer;
+        position: relative;
+        user-select: none;
+    }
+
+    .p-dropdown-clear-icon {
+        position: absolute;
+        top: 50%;
+        margin-top: -0.5rem;
+    }
+
+    .p-dropdown-trigger {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+    }
+
+    .p-dropdown-label {
+        display: block;
+        white-space: nowrap;
+        overflow: hidden;
+        flex: 1 1 auto;
+        width: 1%;
+        text-overflow: ellipsis;
+        cursor: pointer;
+    }
+
+    .p-dropdown-label-empty {
+        overflow: hidden;
+        opacity: 0;
+    }
+
+    input.p-dropdown-label {
+        cursor: default;
+    }
+
+    .p-dropdown .p-dropdown-panel {
+        min-width: 100%;
+    }
+
+    .p-dropdown-panel {
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+
+    .p-dropdown-items-wrapper {
+        overflow: auto;
+    }
+
+    .p-dropdown-item {
+        cursor: pointer;
+        font-weight: normal;
+        white-space: nowrap;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .p-dropdown-item-group {
+        cursor: auto;
+    }
+
+    .p-dropdown-items {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+    }
+
+    .p-dropdown-filter {
+        width: 100%;
+    }
+
+    .p-dropdown-filter-container {
+        position: relative;
+    }
+
+    .p-dropdown-filter-icon {
+        position: absolute;
+        top: 50%;
+        margin-top: -0.5rem;
+    }
+
+    .p-fluid .p-dropdown {
+        display: flex;
+    }
+
+    .p-fluid .p-dropdown .p-dropdown-label {
+        width: 1%;
+    }
+}
+`;
+
+const classes = {
+    root: ({ instance, props, state }) => [
+        'p-dropdown p-component p-inputwrapper',
+        {
+            'p-disabled': props.disabled,
+            'p-dropdown-clearable': props.showClear && !props.disabled,
+            'p-focus': state.focused,
+            'p-inputwrapper-filled': instance.hasSelectedOption,
+            'p-inputwrapper-focus': state.focused || state.overlayVisible,
+            'p-overlay-open': state.overlayVisible
+        }
+    ],
+    input: ({ instance, props }) => [
+        'p-dropdown-label p-inputtext',
+        {
+            'p-placeholder': !props.editable && instance.label === props.placeholder,
+            'p-dropdown-label-empty': !props.editable && !instance.$slots['value'] && (instance.label === 'p-emptylabel' || instance.label.length === 0)
+        }
+    ],
+    clearIcon: 'p-dropdown-clear-icon',
+    trigger: 'p-dropdown-trigger',
+    loadingicon: 'p-dropdown-trigger-icon',
+    dropdownIcon: 'p-dropdown-trigger-icon',
+    panel: ({ instance }) => [
+        'p-dropdown-panel p-component',
+        {
+            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
+            'p-ripple-disabled': instance.$primevue.config.ripple === false
+        }
+    ],
+    header: 'p-dropdown-header',
+    filterContainer: 'p-dropdown-filter-container',
+    filterInput: 'p-dropdown-filter p-inputtext p-component',
+    filterIcon: 'p-dropdown-filter-icon',
+    wrapper: 'p-dropdown-items-wrapper',
+    list: 'p-dropdown-items',
+    itemGroup: 'p-dropdown-item-group',
+    item: ({ instance, state, option, focusedOption }) => [
+        'p-dropdown-item',
+        {
+            'p-highlight': instance.isSelected(option),
+            'p-focus': state.focusedOptionIndex === focusedOption,
+            'p-disabled': instance.isOptionDisabled(option)
+        }
+    ],
+    emptyMessage: 'p-dropdown-empty-message'
+};
+
+export default BaseStyle.extend({
+    name: 'dropdown',
+    css,
+    classes
+});
diff --git a/components/lib/dropdown/style/package.json b/components/lib/dropdown/style/package.json
new file mode 100644
index 000000000..db32bf393
--- /dev/null
+++ b/components/lib/dropdown/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./dropdownstyle.cjs.js",
+    "module": "./dropdownstyle.esm.js",
+    "unpkg": "./dropdownstyle.min.js"
+}
diff --git a/components/lib/dynamicdialog/BaseDynamicDialog.vue b/components/lib/dynamicdialog/BaseDynamicDialog.vue
new file mode 100644
index 000000000..963604015
--- /dev/null
+++ b/components/lib/dynamicdialog/BaseDynamicDialog.vue
@@ -0,0 +1,16 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import DynamicDialogStyle from 'primevue/dynamicdialog/style';
+
+export default {
+    name: 'BaseDynamicDialog',
+    extends: BaseComponent,
+    props: {},
+    style: DynamicDialogStyle,
+    provide() {
+        return {
+            $parentInstance: this
+        };
+    }
+};
+</script>
diff --git a/components/lib/dynamicdialog/DynamicDialog.vue b/components/lib/dynamicdialog/DynamicDialog.vue
index 18c90d3de..eaf532a3e 100644
--- a/components/lib/dynamicdialog/DynamicDialog.vue
+++ b/components/lib/dynamicdialog/DynamicDialog.vue
@@ -13,14 +13,14 @@
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
 import Dialog from 'primevue/dialog';
 import DynamicDialogEventBus from 'primevue/dynamicdialogeventbus';
 import { UniqueComponentId } from 'primevue/utils';
+import BaseDynamicDialog from './BaseDynamicDialog.vue';
 
 export default {
     name: 'DynamicDialog',
-    extends: BaseComponent,
+    extends: BaseDynamicDialog,
     inheritAttrs: false,
     data() {
         return {
diff --git a/components/lib/dynamicdialog/style/DynamicDialogStyle.js b/components/lib/dynamicdialog/style/DynamicDialogStyle.js
new file mode 100644
index 000000000..ff8b4c563
--- /dev/null
+++ b/components/lib/dynamicdialog/style/DynamicDialogStyle.js
@@ -0,0 +1 @@
+export default {};
diff --git a/components/lib/dynamicdialog/style/package.json b/components/lib/dynamicdialog/style/package.json
new file mode 100644
index 000000000..09cc10145
--- /dev/null
+++ b/components/lib/dynamicdialog/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./dynamicdialogstyle.cjs.js",
+    "module": "./dynamicdialogstyle.esm.js",
+    "unpkg": "./dynamicdialogstyle.min.js"
+}
diff --git a/components/lib/editor/BaseEditor.vue b/components/lib/editor/BaseEditor.vue
index bc0790774..55543395d 100644
--- a/components/lib/editor/BaseEditor.vue
+++ b/components/lib/editor/BaseEditor.vue
@@ -1,962 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const quillStyles = `
-/*!
- * Quill Editor v1.3.3
- * https://quilljs.com/
- * Copyright (c) 2014, Jason Chen
- * Copyright (c) 2013, salesforce.com
- */
-.ql-container {
-    box-sizing: border-box;
-    font-family: Helvetica, Arial, sans-serif;
-    font-size: 13px;
-    height: 100%;
-    margin: 0px;
-    position: relative;
-}
-.ql-container.ql-disabled .ql-tooltip {
-    visibility: hidden;
-}
-.ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
-    pointer-events: none;
-}
-.ql-clipboard {
-    left: -100000px;
-    height: 1px;
-    overflow-y: hidden;
-    position: absolute;
-    top: 50%;
-}
-.ql-clipboard p {
-    margin: 0;
-    padding: 0;
-}
-.ql-editor {
-    box-sizing: border-box;
-    line-height: 1.42;
-    height: 100%;
-    outline: none;
-    overflow-y: auto;
-    padding: 12px 15px;
-    tab-size: 4;
-    -moz-tab-size: 4;
-    text-align: left;
-    white-space: pre-wrap;
-    word-wrap: break-word;
-}
-.ql-editor > * {
-    cursor: text;
-}
-.ql-editor p,
-.ql-editor ol,
-.ql-editor ul,
-.ql-editor pre,
-.ql-editor blockquote,
-.ql-editor h1,
-.ql-editor h2,
-.ql-editor h3,
-.ql-editor h4,
-.ql-editor h5,
-.ql-editor h6 {
-    margin: 0;
-    padding: 0;
-    counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
-}
-.ql-editor ol,
-.ql-editor ul {
-    padding-left: 1.5rem;
-}
-.ql-editor ol > li,
-.ql-editor ul > li {
-    list-style-type: none;
-}
-.ql-editor ul > li::before {
-    content: '\\2022';
-}
-.ql-editor ul[data-checked='true'],
-.ql-editor ul[data-checked='false'] {
-    pointer-events: none;
-}
-.ql-editor ul[data-checked='true'] > li *,
-.ql-editor ul[data-checked='false'] > li * {
-    pointer-events: all;
-}
-.ql-editor ul[data-checked='true'] > li::before,
-.ql-editor ul[data-checked='false'] > li::before {
-    color: #777;
-    cursor: pointer;
-    pointer-events: all;
-}
-.ql-editor ul[data-checked='true'] > li::before {
-    content: '\\2611';
-}
-.ql-editor ul[data-checked='false'] > li::before {
-    content: '\\2610';
-}
-.ql-editor li::before {
-    display: inline-block;
-    white-space: nowrap;
-    width: 1.2rem;
-}
-.ql-editor li:not(.ql-direction-rtl)::before {
-    margin-left: -1.5rem;
-    margin-right: 0.3rem;
-    text-align: right;
-}
-.ql-editor li.ql-direction-rtl::before {
-    margin-left: 0.3rem;
-    margin-right: -1.5rem;
-}
-.ql-editor ol li:not(.ql-direction-rtl),
-.ql-editor ul li:not(.ql-direction-rtl) {
-    padding-left: 1.5rem;
-}
-.ql-editor ol li.ql-direction-rtl,
-.ql-editor ul li.ql-direction-rtl {
-    padding-right: 1.5rem;
-}
-.ql-editor ol li {
-    counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
-    counter-increment: list-0;
-}
-.ql-editor ol li:before {
-    content: counter(list-0, decimal) '. ';
-}
-.ql-editor ol li.ql-indent-1 {
-    counter-increment: list-1;
-}
-.ql-editor ol li.ql-indent-1:before {
-    content: counter(list-1, lower-alpha) '. ';
-}
-.ql-editor ol li.ql-indent-1 {
-    counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
-}
-.ql-editor ol li.ql-indent-2 {
-    counter-increment: list-2;
-}
-.ql-editor ol li.ql-indent-2:before {
-    content: counter(list-2, lower-roman) '. ';
-}
-.ql-editor ol li.ql-indent-2 {
-    counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
-}
-.ql-editor ol li.ql-indent-3 {
-    counter-increment: list-3;
-}
-.ql-editor ol li.ql-indent-3:before {
-    content: counter(list-3, decimal) '. ';
-}
-.ql-editor ol li.ql-indent-3 {
-    counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
-}
-.ql-editor ol li.ql-indent-4 {
-    counter-increment: list-4;
-}
-.ql-editor ol li.ql-indent-4:before {
-    content: counter(list-4, lower-alpha) '. ';
-}
-.ql-editor ol li.ql-indent-4 {
-    counter-reset: list-5 list-6 list-7 list-8 list-9;
-}
-.ql-editor ol li.ql-indent-5 {
-    counter-increment: list-5;
-}
-.ql-editor ol li.ql-indent-5:before {
-    content: counter(list-5, lower-roman) '. ';
-}
-.ql-editor ol li.ql-indent-5 {
-    counter-reset: list-6 list-7 list-8 list-9;
-}
-.ql-editor ol li.ql-indent-6 {
-    counter-increment: list-6;
-}
-.ql-editor ol li.ql-indent-6:before {
-    content: counter(list-6, decimal) '. ';
-}
-.ql-editor ol li.ql-indent-6 {
-    counter-reset: list-7 list-8 list-9;
-}
-.ql-editor ol li.ql-indent-7 {
-    counter-increment: list-7;
-}
-.ql-editor ol li.ql-indent-7:before {
-    content: counter(list-7, lower-alpha) '. ';
-}
-.ql-editor ol li.ql-indent-7 {
-    counter-reset: list-8 list-9;
-}
-.ql-editor ol li.ql-indent-8 {
-    counter-increment: list-8;
-}
-.ql-editor ol li.ql-indent-8:before {
-    content: counter(list-8, lower-roman) '. ';
-}
-.ql-editor ol li.ql-indent-8 {
-    counter-reset: list-9;
-}
-.ql-editor ol li.ql-indent-9 {
-    counter-increment: list-9;
-}
-.ql-editor ol li.ql-indent-9:before {
-    content: counter(list-9, decimal) '. ';
-}
-.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
-    padding-left: 3rem;
-}
-.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
-    padding-left: 4.5rem;
-}
-.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
-    padding-right: 3rem;
-}
-.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
-    padding-right: 4.5rem;
-}
-.ql-editor .ql-indent-2:not(.ql-direction-rtl) {
-    padding-left: 6rem;
-}
-.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
-    padding-left: 7.5rem;
-}
-.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
-    padding-right: 6rem;
-}
-.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
-    padding-right: 7.5rem;
-}
-.ql-editor .ql-indent-3:not(.ql-direction-rtl) {
-    padding-left: 9rem;
-}
-.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
-    padding-left: 10.5rem;
-}
-.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
-    padding-right: 9rem;
-}
-.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
-    padding-right: 10.5rem;
-}
-.ql-editor .ql-indent-4:not(.ql-direction-rtl) {
-    padding-left: 12rem;
-}
-.ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
-    padding-left: 13.5rem;
-}
-.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
-    padding-right: 12rem;
-}
-.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
-    padding-right: 13.5rem;
-}
-.ql-editor .ql-indent-5:not(.ql-direction-rtl) {
-    padding-left: 15rem;
-}
-.ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
-    padding-left: 16.5rem;
-}
-.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
-    padding-right: 15rem;
-}
-.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
-    padding-right: 16.5rem;
-}
-.ql-editor .ql-indent-6:not(.ql-direction-rtl) {
-    padding-left: 18rem;
-}
-.ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
-    padding-left: 19.5rem;
-}
-.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
-    padding-right: 18rem;
-}
-.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
-    padding-right: 19.5rem;
-}
-.ql-editor .ql-indent-7:not(.ql-direction-rtl) {
-    padding-left: 21rem;
-}
-.ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
-    padding-left: 22.5rem;
-}
-.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
-    padding-right: 21rem;
-}
-.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
-    padding-right: 22.5rem;
-}
-.ql-editor .ql-indent-8:not(.ql-direction-rtl) {
-    padding-left: 24rem;
-}
-.ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
-    padding-left: 25.5rem;
-}
-.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
-    padding-right: 24rem;
-}
-.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
-    padding-right: 25.5rem;
-}
-.ql-editor .ql-indent-9:not(.ql-direction-rtl) {
-    padding-left: 27rem;
-}
-.ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
-    padding-left: 28.5rem;
-}
-.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
-    padding-right: 27rem;
-}
-.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
-    padding-right: 28.5rem;
-}
-.ql-editor .ql-video {
-    display: block;
-    max-width: 100%;
-}
-.ql-editor .ql-video.ql-align-center {
-    margin: 0 auto;
-}
-.ql-editor .ql-video.ql-align-right {
-    margin: 0 0 0 auto;
-}
-.ql-editor .ql-bg-black {
-    background-color: #000;
-}
-.ql-editor .ql-bg-red {
-    background-color: #e60000;
-}
-.ql-editor .ql-bg-orange {
-    background-color: #f90;
-}
-.ql-editor .ql-bg-yellow {
-    background-color: #ff0;
-}
-.ql-editor .ql-bg-green {
-    background-color: #008a00;
-}
-.ql-editor .ql-bg-blue {
-    background-color: #06c;
-}
-.ql-editor .ql-bg-purple {
-    background-color: #93f;
-}
-.ql-editor .ql-color-white {
-    color: #fff;
-}
-.ql-editor .ql-color-red {
-    color: #e60000;
-}
-.ql-editor .ql-color-orange {
-    color: #f90;
-}
-.ql-editor .ql-color-yellow {
-    color: #ff0;
-}
-.ql-editor .ql-color-green {
-    color: #008a00;
-}
-.ql-editor .ql-color-blue {
-    color: #06c;
-}
-.ql-editor .ql-color-purple {
-    color: #93f;
-}
-.ql-editor .ql-font-serif {
-    font-family: Georgia, Times New Roman, serif;
-}
-.ql-editor .ql-font-monospace {
-    font-family: Monaco, Courier New, monospace;
-}
-.ql-editor .ql-size-small {
-    font-size: 0.75rem;
-}
-.ql-editor .ql-size-large {
-    font-size: 1.5rem;
-}
-.ql-editor .ql-size-huge {
-    font-size: 2.5rem;
-}
-.ql-editor .ql-direction-rtl {
-    direction: rtl;
-    text-align: inherit;
-}
-.ql-editor .ql-align-center {
-    text-align: center;
-}
-.ql-editor .ql-align-justify {
-    text-align: justify;
-}
-.ql-editor .ql-align-right {
-    text-align: right;
-}
-.ql-editor.ql-blank::before {
-    color: rgba(0, 0, 0, 0.6);
-    content: attr(data-placeholder);
-    font-style: italic;
-    left: 15px;
-    pointer-events: none;
-    position: absolute;
-    right: 15px;
-}
-.ql-snow.ql-toolbar:after,
-.ql-snow .ql-toolbar:after {
-    clear: both;
-    content: '';
-    display: table;
-}
-.ql-snow.ql-toolbar button,
-.ql-snow .ql-toolbar button {
-    background: none;
-    border: none;
-    cursor: pointer;
-    display: inline-block;
-    float: left;
-    height: 24px;
-    padding: 3px 5px;
-    width: 28px;
-}
-.ql-snow.ql-toolbar button svg,
-.ql-snow .ql-toolbar button svg {
-    float: left;
-    height: 100%;
-}
-.ql-snow.ql-toolbar button:active:hover,
-.ql-snow .ql-toolbar button:active:hover {
-    outline: none;
-}
-.ql-snow.ql-toolbar input.ql-image[type='file'],
-.ql-snow .ql-toolbar input.ql-image[type='file'] {
-    display: none;
-}
-.ql-snow.ql-toolbar button:hover,
-.ql-snow .ql-toolbar button:hover,
-.ql-snow.ql-toolbar button:focus,
-.ql-snow .ql-toolbar button:focus,
-.ql-snow.ql-toolbar button.ql-active,
-.ql-snow .ql-toolbar button.ql-active,
-.ql-snow.ql-toolbar .ql-picker-label:hover,
-.ql-snow .ql-toolbar .ql-picker-label:hover,
-.ql-snow.ql-toolbar .ql-picker-label.ql-active,
-.ql-snow .ql-toolbar .ql-picker-label.ql-active,
-.ql-snow.ql-toolbar .ql-picker-item:hover,
-.ql-snow .ql-toolbar .ql-picker-item:hover,
-.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
-.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
-    color: #06c;
-}
-.ql-snow.ql-toolbar button:hover .ql-fill,
-.ql-snow .ql-toolbar button:hover .ql-fill,
-.ql-snow.ql-toolbar button:focus .ql-fill,
-.ql-snow .ql-toolbar button:focus .ql-fill,
-.ql-snow.ql-toolbar button.ql-active .ql-fill,
-.ql-snow .ql-toolbar button.ql-active .ql-fill,
-.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
-.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
-.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
-.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
-.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
-.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
-.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
-.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
-.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
-.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,
-.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
-.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,
-.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
-.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
-.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
-.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
-.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
-.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
-.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
-.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
-.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
-.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
-    fill: #06c;
-}
-.ql-snow.ql-toolbar button:hover .ql-stroke,
-.ql-snow .ql-toolbar button:hover .ql-stroke,
-.ql-snow.ql-toolbar button:focus .ql-stroke,
-.ql-snow .ql-toolbar button:focus .ql-stroke,
-.ql-snow.ql-toolbar button.ql-active .ql-stroke,
-.ql-snow .ql-toolbar button.ql-active .ql-stroke,
-.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
-.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
-.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
-.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
-.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
-.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
-.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
-.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
-.ql-snow.ql-toolbar button:hover .ql-stroke-miter,
-.ql-snow .ql-toolbar button:hover .ql-stroke-miter,
-.ql-snow.ql-toolbar button:focus .ql-stroke-miter,
-.ql-snow .ql-toolbar button:focus .ql-stroke-miter,
-.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
-.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
-.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
-.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
-.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
-.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
-.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
-.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
-.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
-.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
-    stroke: #06c;
-}
-@media (pointer: coarse) {
-    .ql-snow.ql-toolbar button:hover:not(.ql-active),
-    .ql-snow .ql-toolbar button:hover:not(.ql-active) {
-        color: #444;
-    }
-    .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,
-    .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,
-    .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
-    .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
-        fill: #444;
-    }
-    .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
-    .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
-    .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
-    .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
-        stroke: #444;
-    }
-}
-.ql-snow {
-    box-sizing: border-box;
-}
-.ql-snow * {
-    box-sizing: border-box;
-}
-.ql-snow .ql-hidden {
-    display: none;
-}
-.ql-snow .ql-out-bottom,
-.ql-snow .ql-out-top {
-    visibility: hidden;
-}
-.ql-snow .ql-tooltip {
-    position: absolute;
-    transform: translateY(10px);
-}
-.ql-snow .ql-tooltip a {
-    cursor: pointer;
-    text-decoration: none;
-}
-.ql-snow .ql-tooltip.ql-flip {
-    transform: translateY(-10px);
-}
-.ql-snow .ql-formats {
-    display: inline-block;
-    vertical-align: middle;
-}
-.ql-snow .ql-formats:after {
-    clear: both;
-    content: '';
-    display: table;
-}
-.ql-snow .ql-stroke {
-    fill: none;
-    stroke: #444;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    stroke-width: 2;
-}
-.ql-snow .ql-stroke-miter {
-    fill: none;
-    stroke: #444;
-    stroke-miterlimit: 10;
-    stroke-width: 2;
-}
-.ql-snow .ql-fill,
-.ql-snow .ql-stroke.ql-fill {
-    fill: #444;
-}
-.ql-snow .ql-empty {
-    fill: none;
-}
-.ql-snow .ql-even {
-    fill-rule: evenodd;
-}
-.ql-snow .ql-thin,
-.ql-snow .ql-stroke.ql-thin {
-    stroke-width: 1;
-}
-.ql-snow .ql-transparent {
-    opacity: 0.4;
-}
-.ql-snow .ql-direction svg:last-child {
-    display: none;
-}
-.ql-snow .ql-direction.ql-active svg:last-child {
-    display: inline;
-}
-.ql-snow .ql-direction.ql-active svg:first-child {
-    display: none;
-}
-.ql-snow .ql-editor h1 {
-    font-size: 2rem;
-}
-.ql-snow .ql-editor h2 {
-    font-size: 1.5rem;
-}
-.ql-snow .ql-editor h3 {
-    font-size: 1.17rem;
-}
-.ql-snow .ql-editor h4 {
-    font-size: 1rem;
-}
-.ql-snow .ql-editor h5 {
-    font-size: 0.83rem;
-}
-.ql-snow .ql-editor h6 {
-    font-size: 0.67rem;
-}
-.ql-snow .ql-editor a {
-    text-decoration: underline;
-}
-.ql-snow .ql-editor blockquote {
-    border-left: 4px solid #ccc;
-    margin-bottom: 5px;
-    margin-top: 5px;
-    padding-left: 16px;
-}
-.ql-snow .ql-editor code,
-.ql-snow .ql-editor pre {
-    background-color: #f0f0f0;
-    border-radius: 3px;
-}
-.ql-snow .ql-editor pre {
-    white-space: pre-wrap;
-    margin-bottom: 5px;
-    margin-top: 5px;
-    padding: 5px 10px;
-}
-.ql-snow .ql-editor code {
-    font-size: 85%;
-    padding: 2px 4px;
-}
-.ql-snow .ql-editor pre.ql-syntax {
-    background-color: #23241f;
-    color: #f8f8f2;
-    overflow: visible;
-}
-.ql-snow .ql-editor img {
-    max-width: 100%;
-}
-.ql-snow .ql-picker {
-    color: #444;
-    display: inline-block;
-    float: left;
-    font-size: 14px;
-    font-weight: 500;
-    height: 24px;
-    position: relative;
-    vertical-align: middle;
-}
-.ql-snow .ql-picker-label {
-    cursor: pointer;
-    display: inline-block;
-    height: 100%;
-    padding-left: 8px;
-    padding-right: 2px;
-    position: relative;
-    width: 100%;
-}
-.ql-snow .ql-picker-label::before {
-    display: inline-block;
-    line-height: 22px;
-}
-.ql-snow .ql-picker-options {
-    background-color: #fff;
-    display: none;
-    min-width: 100%;
-    padding: 4px 8px;
-    position: absolute;
-    white-space: nowrap;
-}
-.ql-snow .ql-picker-options .ql-picker-item {
-    cursor: pointer;
-    display: block;
-    padding-bottom: 5px;
-    padding-top: 5px;
-}
-.ql-snow .ql-picker.ql-expanded .ql-picker-label {
-    color: #ccc;
-    z-index: 2;
-}
-.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
-    fill: #ccc;
-}
-.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
-    stroke: #ccc;
-}
-.ql-snow .ql-picker.ql-expanded .ql-picker-options {
-    display: block;
-    margin-top: -1px;
-    top: 100%;
-    z-index: 1;
-}
-.ql-snow .ql-color-picker,
-.ql-snow .ql-icon-picker {
-    width: 28px;
-}
-.ql-snow .ql-color-picker .ql-picker-label,
-.ql-snow .ql-icon-picker .ql-picker-label {
-    padding: 2px 4px;
-}
-.ql-snow .ql-color-picker .ql-picker-label svg,
-.ql-snow .ql-icon-picker .ql-picker-label svg {
-    right: 4px;
-}
-.ql-snow .ql-icon-picker .ql-picker-options {
-    padding: 4px 0px;
-}
-.ql-snow .ql-icon-picker .ql-picker-item {
-    height: 24px;
-    width: 24px;
-    padding: 2px 4px;
-}
-.ql-snow .ql-color-picker .ql-picker-options {
-    padding: 3px 5px;
-    width: 152px;
-}
-.ql-snow .ql-color-picker .ql-picker-item {
-    border: 1px solid transparent;
-    float: left;
-    height: 16px;
-    margin: 2px;
-    padding: 0px;
-    width: 16px;
-}
-.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
-    position: absolute;
-    margin-top: -9px;
-    right: 0;
-    top: 50%;
-    width: 18px;
-}
-.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,
-.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,
-.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,
-.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,
-.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before {
-    content: attr(data-label);
-}
-.ql-snow .ql-picker.ql-header {
-    width: 98px;
-}
-.ql-snow .ql-picker.ql-header .ql-picker-label::before,
-.ql-snow .ql-picker.ql-header .ql-picker-item::before {
-    content: 'Normal';
-}
-.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before,
-.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before {
-    content: 'Heading 1';
-}
-.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before,
-.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before {
-    content: 'Heading 2';
-}
-.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before,
-.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before {
-    content: 'Heading 3';
-}
-.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before,
-.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before {
-    content: 'Heading 4';
-}
-.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before,
-.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before {
-    content: 'Heading 5';
-}
-.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before,
-.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before {
-    content: 'Heading 6';
-}
-.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before {
-    font-size: 2rem;
-}
-.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before {
-    font-size: 1.5rem;
-}
-.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before {
-    font-size: 1.17rem;
-}
-.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before {
-    font-size: 1rem;
-}
-.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before {
-    font-size: 0.83rem;
-}
-.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before {
-    font-size: 0.67rem;
-}
-.ql-snow .ql-picker.ql-font {
-    width: 108px;
-}
-.ql-snow .ql-picker.ql-font .ql-picker-label::before,
-.ql-snow .ql-picker.ql-font .ql-picker-item::before {
-    content: 'Sans Serif';
-}
-.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='serif']::before,
-.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before {
-    content: 'Serif';
-}
-.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='monospace']::before,
-.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before {
-    content: 'Monospace';
-}
-.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before {
-    font-family: Georgia, Times New Roman, serif;
-}
-.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before {
-    font-family: Monaco, Courier New, monospace;
-}
-.ql-snow .ql-picker.ql-size {
-    width: 98px;
-}
-.ql-snow .ql-picker.ql-size .ql-picker-label::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item::before {
-    content: 'Normal';
-}
-.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='small']::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before {
-    content: 'Small';
-}
-.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='large']::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before {
-    content: 'Large';
-}
-.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='huge']::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before {
-    content: 'Huge';
-}
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before {
-    font-size: 10px;
-}
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before {
-    font-size: 18px;
-}
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before {
-    font-size: 32px;
-}
-.ql-snow .ql-color-picker.ql-background .ql-picker-item {
-    background-color: #fff;
-}
-.ql-snow .ql-color-picker.ql-color .ql-picker-item {
-    background-color: #000;
-}
-.ql-toolbar.ql-snow {
-    border: 1px solid #ccc;
-    box-sizing: border-box;
-    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
-    padding: 8px;
-}
-.ql-toolbar.ql-snow .ql-formats {
-    margin-right: 15px;
-}
-.ql-toolbar.ql-snow .ql-picker-label {
-    border: 1px solid transparent;
-}
-.ql-toolbar.ql-snow .ql-picker-options {
-    border: 1px solid transparent;
-    box-shadow: rgba(0, 0, 0, 0.2) 0 2px 8px;
-}
-.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
-    border-color: #ccc;
-}
-.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
-    border-color: #ccc;
-}
-.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,
-.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover {
-    border-color: #000;
-}
-.ql-toolbar.ql-snow + .ql-container.ql-snow {
-    border-top: 0px;
-}
-.ql-snow .ql-tooltip {
-    background-color: #fff;
-    border: 1px solid #ccc;
-    box-shadow: 0px 0px 5px #ddd;
-    color: #444;
-    padding: 5px 12px;
-    white-space: nowrap;
-}
-.ql-snow .ql-tooltip::before {
-    content: 'Visit URL:';
-    line-height: 26px;
-    margin-right: 8px;
-}
-.ql-snow .ql-tooltip input[type='text'] {
-    display: none;
-    border: 1px solid #ccc;
-    font-size: 13px;
-    height: 26px;
-    margin: 0px;
-    padding: 3px 5px;
-    width: 170px;
-}
-.ql-snow .ql-tooltip a.ql-preview {
-    display: inline-block;
-    max-width: 200px;
-    overflow-x: hidden;
-    text-overflow: ellipsis;
-    vertical-align: top;
-}
-.ql-snow .ql-tooltip a.ql-action::after {
-    border-right: 1px solid #ccc;
-    content: 'Edit';
-    margin-left: 16px;
-    padding-right: 8px;
-}
-.ql-snow .ql-tooltip a.ql-remove::before {
-    content: 'Remove';
-    margin-left: 8px;
-}
-.ql-snow .ql-tooltip a {
-    line-height: 26px;
-}
-.ql-snow .ql-tooltip.ql-editing a.ql-preview,
-.ql-snow .ql-tooltip.ql-editing a.ql-remove {
-    display: none;
-}
-.ql-snow .ql-tooltip.ql-editing input[type='text'] {
-    display: inline-block;
-}
-.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
-    border-right: 0px;
-    content: 'Save';
-    padding-right: 0px;
-}
-.ql-snow .ql-tooltip[data-mode='link']::before {
-    content: 'Enter link:';
-}
-.ql-snow .ql-tooltip[data-mode='formula']::before {
-    content: 'Enter formula:';
-}
-.ql-snow .ql-tooltip[data-mode='video']::before {
-    content: 'Enter video:';
-}
-.ql-snow a {
-    color: #06c;
-}
-.ql-container.ql-snow {
-    border: 1px solid #ccc;
-}
-`;
-
-const classes = {
-    root: 'p-editor-container',
-    toolbar: 'p-editor-toolbar',
-    content: 'p-editor-content'
-};
-
-const { load: loadStyle } = useStyle(quillStyles, { name: 'editor', manual: true });
+import EditorStyle from 'primevue/editor/style';
 
 export default {
     name: 'BaseEditor',
@@ -969,16 +13,14 @@ export default {
         editorStyle: null,
         modules: null
     },
+    style: EditorStyle,
     provide() {
         return {
             $parentInstance: this
         };
     },
     beforeMount() {
-        loadStyle();
-    },
-    css: {
-        classes
+        EditorStyle.loadStyle({ nonce: this.$primevue?.config?.csp?.nonce });
     }
 };
 </script>
diff --git a/components/lib/editor/package.json b/components/lib/editor/package.json
index dc6386c2b..7d3a27b95 100644
--- a/components/lib/editor/package.json
+++ b/components/lib/editor/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./editor.cjs.js",
-  "module": "./editor.esm.js",
-  "unpkg": "./editor.min.js",
-  "types": "./Editor.d.ts",
-  "browser": {
-    "./sfc": "./Editor.vue"
-  }
-}
\ No newline at end of file
+    "main": "./editor.cjs.js",
+    "module": "./editor.esm.js",
+    "unpkg": "./editor.min.js",
+    "types": "./Editor.d.ts",
+    "browser": {
+        "./sfc": "./Editor.vue"
+    }
+}
diff --git a/components/lib/editor/style/EditorStyle.js b/components/lib/editor/style/EditorStyle.js
new file mode 100644
index 000000000..412c95d8f
--- /dev/null
+++ b/components/lib/editor/style/EditorStyle.js
@@ -0,0 +1,961 @@
+import BaseStyle from 'primevue/base/style';
+
+const quillCSS = `
+/*!
+ * Quill Editor v1.3.3
+ * https://quilljs.com/
+ * Copyright (c) 2014, Jason Chen
+ * Copyright (c) 2013, salesforce.com
+ */
+.ql-container {
+    box-sizing: border-box;
+    font-family: Helvetica, Arial, sans-serif;
+    font-size: 13px;
+    height: 100%;
+    margin: 0px;
+    position: relative;
+}
+.ql-container.ql-disabled .ql-tooltip {
+    visibility: hidden;
+}
+.ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
+    pointer-events: none;
+}
+.ql-clipboard {
+    left: -100000px;
+    height: 1px;
+    overflow-y: hidden;
+    position: absolute;
+    top: 50%;
+}
+.ql-clipboard p {
+    margin: 0;
+    padding: 0;
+}
+.ql-editor {
+    box-sizing: border-box;
+    line-height: 1.42;
+    height: 100%;
+    outline: none;
+    overflow-y: auto;
+    padding: 12px 15px;
+    tab-size: 4;
+    -moz-tab-size: 4;
+    text-align: left;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+.ql-editor > * {
+    cursor: text;
+}
+.ql-editor p,
+.ql-editor ol,
+.ql-editor ul,
+.ql-editor pre,
+.ql-editor blockquote,
+.ql-editor h1,
+.ql-editor h2,
+.ql-editor h3,
+.ql-editor h4,
+.ql-editor h5,
+.ql-editor h6 {
+    margin: 0;
+    padding: 0;
+    counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol,
+.ql-editor ul {
+    padding-left: 1.5rem;
+}
+.ql-editor ol > li,
+.ql-editor ul > li {
+    list-style-type: none;
+}
+.ql-editor ul > li::before {
+    content: '\\2022';
+}
+.ql-editor ul[data-checked='true'],
+.ql-editor ul[data-checked='false'] {
+    pointer-events: none;
+}
+.ql-editor ul[data-checked='true'] > li *,
+.ql-editor ul[data-checked='false'] > li * {
+    pointer-events: all;
+}
+.ql-editor ul[data-checked='true'] > li::before,
+.ql-editor ul[data-checked='false'] > li::before {
+    color: #777;
+    cursor: pointer;
+    pointer-events: all;
+}
+.ql-editor ul[data-checked='true'] > li::before {
+    content: '\\2611';
+}
+.ql-editor ul[data-checked='false'] > li::before {
+    content: '\\2610';
+}
+.ql-editor li::before {
+    display: inline-block;
+    white-space: nowrap;
+    width: 1.2rem;
+}
+.ql-editor li:not(.ql-direction-rtl)::before {
+    margin-left: -1.5rem;
+    margin-right: 0.3rem;
+    text-align: right;
+}
+.ql-editor li.ql-direction-rtl::before {
+    margin-left: 0.3rem;
+    margin-right: -1.5rem;
+}
+.ql-editor ol li:not(.ql-direction-rtl),
+.ql-editor ul li:not(.ql-direction-rtl) {
+    padding-left: 1.5rem;
+}
+.ql-editor ol li.ql-direction-rtl,
+.ql-editor ul li.ql-direction-rtl {
+    padding-right: 1.5rem;
+}
+.ql-editor ol li {
+    counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+    counter-increment: list-0;
+}
+.ql-editor ol li:before {
+    content: counter(list-0, decimal) '. ';
+}
+.ql-editor ol li.ql-indent-1 {
+    counter-increment: list-1;
+}
+.ql-editor ol li.ql-indent-1:before {
+    content: counter(list-1, lower-alpha) '. ';
+}
+.ql-editor ol li.ql-indent-1 {
+    counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-2 {
+    counter-increment: list-2;
+}
+.ql-editor ol li.ql-indent-2:before {
+    content: counter(list-2, lower-roman) '. ';
+}
+.ql-editor ol li.ql-indent-2 {
+    counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-3 {
+    counter-increment: list-3;
+}
+.ql-editor ol li.ql-indent-3:before {
+    content: counter(list-3, decimal) '. ';
+}
+.ql-editor ol li.ql-indent-3 {
+    counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-4 {
+    counter-increment: list-4;
+}
+.ql-editor ol li.ql-indent-4:before {
+    content: counter(list-4, lower-alpha) '. ';
+}
+.ql-editor ol li.ql-indent-4 {
+    counter-reset: list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-5 {
+    counter-increment: list-5;
+}
+.ql-editor ol li.ql-indent-5:before {
+    content: counter(list-5, lower-roman) '. ';
+}
+.ql-editor ol li.ql-indent-5 {
+    counter-reset: list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-6 {
+    counter-increment: list-6;
+}
+.ql-editor ol li.ql-indent-6:before {
+    content: counter(list-6, decimal) '. ';
+}
+.ql-editor ol li.ql-indent-6 {
+    counter-reset: list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-7 {
+    counter-increment: list-7;
+}
+.ql-editor ol li.ql-indent-7:before {
+    content: counter(list-7, lower-alpha) '. ';
+}
+.ql-editor ol li.ql-indent-7 {
+    counter-reset: list-8 list-9;
+}
+.ql-editor ol li.ql-indent-8 {
+    counter-increment: list-8;
+}
+.ql-editor ol li.ql-indent-8:before {
+    content: counter(list-8, lower-roman) '. ';
+}
+.ql-editor ol li.ql-indent-8 {
+    counter-reset: list-9;
+}
+.ql-editor ol li.ql-indent-9 {
+    counter-increment: list-9;
+}
+.ql-editor ol li.ql-indent-9:before {
+    content: counter(list-9, decimal) '. ';
+}
+.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
+    padding-left: 3rem;
+}
+.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
+    padding-left: 4.5rem;
+}
+.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
+    padding-right: 3rem;
+}
+.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
+    padding-right: 4.5rem;
+}
+.ql-editor .ql-indent-2:not(.ql-direction-rtl) {
+    padding-left: 6rem;
+}
+.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
+    padding-left: 7.5rem;
+}
+.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
+    padding-right: 6rem;
+}
+.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
+    padding-right: 7.5rem;
+}
+.ql-editor .ql-indent-3:not(.ql-direction-rtl) {
+    padding-left: 9rem;
+}
+.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
+    padding-left: 10.5rem;
+}
+.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
+    padding-right: 9rem;
+}
+.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
+    padding-right: 10.5rem;
+}
+.ql-editor .ql-indent-4:not(.ql-direction-rtl) {
+    padding-left: 12rem;
+}
+.ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
+    padding-left: 13.5rem;
+}
+.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
+    padding-right: 12rem;
+}
+.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
+    padding-right: 13.5rem;
+}
+.ql-editor .ql-indent-5:not(.ql-direction-rtl) {
+    padding-left: 15rem;
+}
+.ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
+    padding-left: 16.5rem;
+}
+.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
+    padding-right: 15rem;
+}
+.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
+    padding-right: 16.5rem;
+}
+.ql-editor .ql-indent-6:not(.ql-direction-rtl) {
+    padding-left: 18rem;
+}
+.ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
+    padding-left: 19.5rem;
+}
+.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
+    padding-right: 18rem;
+}
+.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
+    padding-right: 19.5rem;
+}
+.ql-editor .ql-indent-7:not(.ql-direction-rtl) {
+    padding-left: 21rem;
+}
+.ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
+    padding-left: 22.5rem;
+}
+.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
+    padding-right: 21rem;
+}
+.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
+    padding-right: 22.5rem;
+}
+.ql-editor .ql-indent-8:not(.ql-direction-rtl) {
+    padding-left: 24rem;
+}
+.ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
+    padding-left: 25.5rem;
+}
+.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
+    padding-right: 24rem;
+}
+.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
+    padding-right: 25.5rem;
+}
+.ql-editor .ql-indent-9:not(.ql-direction-rtl) {
+    padding-left: 27rem;
+}
+.ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
+    padding-left: 28.5rem;
+}
+.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
+    padding-right: 27rem;
+}
+.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
+    padding-right: 28.5rem;
+}
+.ql-editor .ql-video {
+    display: block;
+    max-width: 100%;
+}
+.ql-editor .ql-video.ql-align-center {
+    margin: 0 auto;
+}
+.ql-editor .ql-video.ql-align-right {
+    margin: 0 0 0 auto;
+}
+.ql-editor .ql-bg-black {
+    background-color: #000;
+}
+.ql-editor .ql-bg-red {
+    background-color: #e60000;
+}
+.ql-editor .ql-bg-orange {
+    background-color: #f90;
+}
+.ql-editor .ql-bg-yellow {
+    background-color: #ff0;
+}
+.ql-editor .ql-bg-green {
+    background-color: #008a00;
+}
+.ql-editor .ql-bg-blue {
+    background-color: #06c;
+}
+.ql-editor .ql-bg-purple {
+    background-color: #93f;
+}
+.ql-editor .ql-color-white {
+    color: #fff;
+}
+.ql-editor .ql-color-red {
+    color: #e60000;
+}
+.ql-editor .ql-color-orange {
+    color: #f90;
+}
+.ql-editor .ql-color-yellow {
+    color: #ff0;
+}
+.ql-editor .ql-color-green {
+    color: #008a00;
+}
+.ql-editor .ql-color-blue {
+    color: #06c;
+}
+.ql-editor .ql-color-purple {
+    color: #93f;
+}
+.ql-editor .ql-font-serif {
+    font-family: Georgia, Times New Roman, serif;
+}
+.ql-editor .ql-font-monospace {
+    font-family: Monaco, Courier New, monospace;
+}
+.ql-editor .ql-size-small {
+    font-size: 0.75rem;
+}
+.ql-editor .ql-size-large {
+    font-size: 1.5rem;
+}
+.ql-editor .ql-size-huge {
+    font-size: 2.5rem;
+}
+.ql-editor .ql-direction-rtl {
+    direction: rtl;
+    text-align: inherit;
+}
+.ql-editor .ql-align-center {
+    text-align: center;
+}
+.ql-editor .ql-align-justify {
+    text-align: justify;
+}
+.ql-editor .ql-align-right {
+    text-align: right;
+}
+.ql-editor.ql-blank::before {
+    color: rgba(0, 0, 0, 0.6);
+    content: attr(data-placeholder);
+    font-style: italic;
+    left: 15px;
+    pointer-events: none;
+    position: absolute;
+    right: 15px;
+}
+.ql-snow.ql-toolbar:after,
+.ql-snow .ql-toolbar:after {
+    clear: both;
+    content: '';
+    display: table;
+}
+.ql-snow.ql-toolbar button,
+.ql-snow .ql-toolbar button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: inline-block;
+    float: left;
+    height: 24px;
+    padding: 3px 5px;
+    width: 28px;
+}
+.ql-snow.ql-toolbar button svg,
+.ql-snow .ql-toolbar button svg {
+    float: left;
+    height: 100%;
+}
+.ql-snow.ql-toolbar button:active:hover,
+.ql-snow .ql-toolbar button:active:hover {
+    outline: none;
+}
+.ql-snow.ql-toolbar input.ql-image[type='file'],
+.ql-snow .ql-toolbar input.ql-image[type='file'] {
+    display: none;
+}
+.ql-snow.ql-toolbar button:hover,
+.ql-snow .ql-toolbar button:hover,
+.ql-snow.ql-toolbar button:focus,
+.ql-snow .ql-toolbar button:focus,
+.ql-snow.ql-toolbar button.ql-active,
+.ql-snow .ql-toolbar button.ql-active,
+.ql-snow.ql-toolbar .ql-picker-label:hover,
+.ql-snow .ql-toolbar .ql-picker-label:hover,
+.ql-snow.ql-toolbar .ql-picker-label.ql-active,
+.ql-snow .ql-toolbar .ql-picker-label.ql-active,
+.ql-snow.ql-toolbar .ql-picker-item:hover,
+.ql-snow .ql-toolbar .ql-picker-item:hover,
+.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
+.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
+    color: #06c;
+}
+.ql-snow.ql-toolbar button:hover .ql-fill,
+.ql-snow .ql-toolbar button:hover .ql-fill,
+.ql-snow.ql-toolbar button:focus .ql-fill,
+.ql-snow .ql-toolbar button:focus .ql-fill,
+.ql-snow.ql-toolbar button.ql-active .ql-fill,
+.ql-snow .ql-toolbar button.ql-active .ql-fill,
+.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
+.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
+.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
+.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
+.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
+.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
+.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
+.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
+.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
+    fill: #06c;
+}
+.ql-snow.ql-toolbar button:hover .ql-stroke,
+.ql-snow .ql-toolbar button:hover .ql-stroke,
+.ql-snow.ql-toolbar button:focus .ql-stroke,
+.ql-snow .ql-toolbar button:focus .ql-stroke,
+.ql-snow.ql-toolbar button.ql-active .ql-stroke,
+.ql-snow .ql-toolbar button.ql-active .ql-stroke,
+.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
+.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
+.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
+.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
+.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
+.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
+.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
+.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
+.ql-snow.ql-toolbar button:hover .ql-stroke-miter,
+.ql-snow .ql-toolbar button:hover .ql-stroke-miter,
+.ql-snow.ql-toolbar button:focus .ql-stroke-miter,
+.ql-snow .ql-toolbar button:focus .ql-stroke-miter,
+.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
+.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
+.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
+.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
+.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
+.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
+.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
+.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
+.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
+.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
+    stroke: #06c;
+}
+@media (pointer: coarse) {
+    .ql-snow.ql-toolbar button:hover:not(.ql-active),
+    .ql-snow .ql-toolbar button:hover:not(.ql-active) {
+        color: #444;
+    }
+    .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,
+    .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,
+    .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
+    .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
+        fill: #444;
+    }
+    .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
+    .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
+    .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
+    .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
+        stroke: #444;
+    }
+}
+.ql-snow {
+    box-sizing: border-box;
+}
+.ql-snow * {
+    box-sizing: border-box;
+}
+.ql-snow .ql-hidden {
+    display: none;
+}
+.ql-snow .ql-out-bottom,
+.ql-snow .ql-out-top {
+    visibility: hidden;
+}
+.ql-snow .ql-tooltip {
+    position: absolute;
+    transform: translateY(10px);
+}
+.ql-snow .ql-tooltip a {
+    cursor: pointer;
+    text-decoration: none;
+}
+.ql-snow .ql-tooltip.ql-flip {
+    transform: translateY(-10px);
+}
+.ql-snow .ql-formats {
+    display: inline-block;
+    vertical-align: middle;
+}
+.ql-snow .ql-formats:after {
+    clear: both;
+    content: '';
+    display: table;
+}
+.ql-snow .ql-stroke {
+    fill: none;
+    stroke: #444;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 2;
+}
+.ql-snow .ql-stroke-miter {
+    fill: none;
+    stroke: #444;
+    stroke-miterlimit: 10;
+    stroke-width: 2;
+}
+.ql-snow .ql-fill,
+.ql-snow .ql-stroke.ql-fill {
+    fill: #444;
+}
+.ql-snow .ql-empty {
+    fill: none;
+}
+.ql-snow .ql-even {
+    fill-rule: evenodd;
+}
+.ql-snow .ql-thin,
+.ql-snow .ql-stroke.ql-thin {
+    stroke-width: 1;
+}
+.ql-snow .ql-transparent {
+    opacity: 0.4;
+}
+.ql-snow .ql-direction svg:last-child {
+    display: none;
+}
+.ql-snow .ql-direction.ql-active svg:last-child {
+    display: inline;
+}
+.ql-snow .ql-direction.ql-active svg:first-child {
+    display: none;
+}
+.ql-snow .ql-editor h1 {
+    font-size: 2rem;
+}
+.ql-snow .ql-editor h2 {
+    font-size: 1.5rem;
+}
+.ql-snow .ql-editor h3 {
+    font-size: 1.17rem;
+}
+.ql-snow .ql-editor h4 {
+    font-size: 1rem;
+}
+.ql-snow .ql-editor h5 {
+    font-size: 0.83rem;
+}
+.ql-snow .ql-editor h6 {
+    font-size: 0.67rem;
+}
+.ql-snow .ql-editor a {
+    text-decoration: underline;
+}
+.ql-snow .ql-editor blockquote {
+    border-left: 4px solid #ccc;
+    margin-bottom: 5px;
+    margin-top: 5px;
+    padding-left: 16px;
+}
+.ql-snow .ql-editor code,
+.ql-snow .ql-editor pre {
+    background-color: #f0f0f0;
+    border-radius: 3px;
+}
+.ql-snow .ql-editor pre {
+    white-space: pre-wrap;
+    margin-bottom: 5px;
+    margin-top: 5px;
+    padding: 5px 10px;
+}
+.ql-snow .ql-editor code {
+    font-size: 85%;
+    padding: 2px 4px;
+}
+.ql-snow .ql-editor pre.ql-syntax {
+    background-color: #23241f;
+    color: #f8f8f2;
+    overflow: visible;
+}
+.ql-snow .ql-editor img {
+    max-width: 100%;
+}
+.ql-snow .ql-picker {
+    color: #444;
+    display: inline-block;
+    float: left;
+    font-size: 14px;
+    font-weight: 500;
+    height: 24px;
+    position: relative;
+    vertical-align: middle;
+}
+.ql-snow .ql-picker-label {
+    cursor: pointer;
+    display: inline-block;
+    height: 100%;
+    padding-left: 8px;
+    padding-right: 2px;
+    position: relative;
+    width: 100%;
+}
+.ql-snow .ql-picker-label::before {
+    display: inline-block;
+    line-height: 22px;
+}
+.ql-snow .ql-picker-options {
+    background-color: #fff;
+    display: none;
+    min-width: 100%;
+    padding: 4px 8px;
+    position: absolute;
+    white-space: nowrap;
+}
+.ql-snow .ql-picker-options .ql-picker-item {
+    cursor: pointer;
+    display: block;
+    padding-bottom: 5px;
+    padding-top: 5px;
+}
+.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+    color: #ccc;
+    z-index: 2;
+}
+.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+    fill: #ccc;
+}
+.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+    stroke: #ccc;
+}
+.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+    display: block;
+    margin-top: -1px;
+    top: 100%;
+    z-index: 1;
+}
+.ql-snow .ql-color-picker,
+.ql-snow .ql-icon-picker {
+    width: 28px;
+}
+.ql-snow .ql-color-picker .ql-picker-label,
+.ql-snow .ql-icon-picker .ql-picker-label {
+    padding: 2px 4px;
+}
+.ql-snow .ql-color-picker .ql-picker-label svg,
+.ql-snow .ql-icon-picker .ql-picker-label svg {
+    right: 4px;
+}
+.ql-snow .ql-icon-picker .ql-picker-options {
+    padding: 4px 0px;
+}
+.ql-snow .ql-icon-picker .ql-picker-item {
+    height: 24px;
+    width: 24px;
+    padding: 2px 4px;
+}
+.ql-snow .ql-color-picker .ql-picker-options {
+    padding: 3px 5px;
+    width: 152px;
+}
+.ql-snow .ql-color-picker .ql-picker-item {
+    border: 1px solid transparent;
+    float: left;
+    height: 16px;
+    margin: 2px;
+    padding: 0px;
+    width: 16px;
+}
+.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
+    position: absolute;
+    margin-top: -9px;
+    right: 0;
+    top: 50%;
+    width: 18px;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before {
+    content: attr(data-label);
+}
+.ql-snow .ql-picker.ql-header {
+    width: 98px;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item::before {
+    content: 'Normal';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before {
+    content: 'Heading 1';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before {
+    content: 'Heading 2';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before {
+    content: 'Heading 3';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before {
+    content: 'Heading 4';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before {
+    content: 'Heading 5';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before {
+    content: 'Heading 6';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before {
+    font-size: 2rem;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before {
+    font-size: 1.5rem;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before {
+    font-size: 1.17rem;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before {
+    font-size: 1rem;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before {
+    font-size: 0.83rem;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before {
+    font-size: 0.67rem;
+}
+.ql-snow .ql-picker.ql-font {
+    width: 108px;
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item::before {
+    content: 'Sans Serif';
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='serif']::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before {
+    content: 'Serif';
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='monospace']::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before {
+    content: 'Monospace';
+}
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before {
+    font-family: Georgia, Times New Roman, serif;
+}
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before {
+    font-family: Monaco, Courier New, monospace;
+}
+.ql-snow .ql-picker.ql-size {
+    width: 98px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item::before {
+    content: 'Normal';
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='small']::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before {
+    content: 'Small';
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='large']::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before {
+    content: 'Large';
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='huge']::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before {
+    content: 'Huge';
+}
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before {
+    font-size: 10px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before {
+    font-size: 18px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before {
+    font-size: 32px;
+}
+.ql-snow .ql-color-picker.ql-background .ql-picker-item {
+    background-color: #fff;
+}
+.ql-snow .ql-color-picker.ql-color .ql-picker-item {
+    background-color: #000;
+}
+.ql-toolbar.ql-snow {
+    border: 1px solid #ccc;
+    box-sizing: border-box;
+    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
+    padding: 8px;
+}
+.ql-toolbar.ql-snow .ql-formats {
+    margin-right: 15px;
+}
+.ql-toolbar.ql-snow .ql-picker-label {
+    border: 1px solid transparent;
+}
+.ql-toolbar.ql-snow .ql-picker-options {
+    border: 1px solid transparent;
+    box-shadow: rgba(0, 0, 0, 0.2) 0 2px 8px;
+}
+.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+    border-color: #ccc;
+}
+.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+    border-color: #ccc;
+}
+.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,
+.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover {
+    border-color: #000;
+}
+.ql-toolbar.ql-snow + .ql-container.ql-snow {
+    border-top: 0px;
+}
+.ql-snow .ql-tooltip {
+    background-color: #fff;
+    border: 1px solid #ccc;
+    box-shadow: 0px 0px 5px #ddd;
+    color: #444;
+    padding: 5px 12px;
+    white-space: nowrap;
+}
+.ql-snow .ql-tooltip::before {
+    content: 'Visit URL:';
+    line-height: 26px;
+    margin-right: 8px;
+}
+.ql-snow .ql-tooltip input[type='text'] {
+    display: none;
+    border: 1px solid #ccc;
+    font-size: 13px;
+    height: 26px;
+    margin: 0px;
+    padding: 3px 5px;
+    width: 170px;
+}
+.ql-snow .ql-tooltip a.ql-preview {
+    display: inline-block;
+    max-width: 200px;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+    vertical-align: top;
+}
+.ql-snow .ql-tooltip a.ql-action::after {
+    border-right: 1px solid #ccc;
+    content: 'Edit';
+    margin-left: 16px;
+    padding-right: 8px;
+}
+.ql-snow .ql-tooltip a.ql-remove::before {
+    content: 'Remove';
+    margin-left: 8px;
+}
+.ql-snow .ql-tooltip a {
+    line-height: 26px;
+}
+.ql-snow .ql-tooltip.ql-editing a.ql-preview,
+.ql-snow .ql-tooltip.ql-editing a.ql-remove {
+    display: none;
+}
+.ql-snow .ql-tooltip.ql-editing input[type='text'] {
+    display: inline-block;
+}
+.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
+    border-right: 0px;
+    content: 'Save';
+    padding-right: 0px;
+}
+.ql-snow .ql-tooltip[data-mode='link']::before {
+    content: 'Enter link:';
+}
+.ql-snow .ql-tooltip[data-mode='formula']::before {
+    content: 'Enter formula:';
+}
+.ql-snow .ql-tooltip[data-mode='video']::before {
+    content: 'Enter video:';
+}
+.ql-snow a {
+    color: #06c;
+}
+.ql-container.ql-snow {
+    border: 1px solid #ccc;
+}
+`;
+
+const classes = {
+    root: 'p-editor-container',
+    toolbar: 'p-editor-toolbar',
+    content: 'p-editor-content'
+};
+
+export default BaseStyle.extend({
+    name: 'editor',
+    css: quillCSS,
+    classes
+});
diff --git a/components/lib/editor/style/package.json b/components/lib/editor/style/package.json
new file mode 100644
index 000000000..c15319822
--- /dev/null
+++ b/components/lib/editor/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./editorstyle.cjs.js",
+    "module": "./editorstyle.esm.js",
+    "unpkg": "./editorstyle.min.js"
+}
diff --git a/components/lib/fieldset/BaseFieldset.vue b/components/lib/fieldset/BaseFieldset.vue
index d5203616c..cf5bb673c 100644
--- a/components/lib/fieldset/BaseFieldset.vue
+++ b/components/lib/fieldset/BaseFieldset.vue
@@ -1,46 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-fieldset-legend > a,
-    .p-fieldset-legend > span {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-    
-    .p-fieldset-toggleable .p-fieldset-legend a {
-        cursor: pointer;
-        user-select: none;
-        overflow: hidden;
-        position: relative;
-        text-decoration: none;
-    }
-    
-    .p-fieldset-legend-text {
-        line-height: 1;
-    }
-}
-`;
-
-const classes = {
-    root: ({ props }) => [
-        'p-fieldset p-component',
-        {
-            'p-fieldset-toggleable': props.toggleable
-        }
-    ],
-    legend: 'p-fieldset-legend',
-    legendtitle: 'p-fieldset-legend-text',
-    togglericon: 'p-fieldset-toggler',
-    legendtitle: 'p-fieldset-legend-text',
-    toggleablecontent: 'p-toggleable-content',
-    content: 'p-fieldset-content'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'fieldset', manual: true });
+import FieldsetStyle from 'primevue/fieldset/style';
 
 export default {
     name: 'BaseFieldset',
@@ -54,10 +14,7 @@ export default {
             default: null
         }
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: FieldsetStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/fieldset/package.json b/components/lib/fieldset/package.json
index 58216c297..50cd5f467 100644
--- a/components/lib/fieldset/package.json
+++ b/components/lib/fieldset/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./fieldset.cjs.js",
-  "module": "./fieldset.esm.js",
-  "unpkg": "./fieldset.min.js",
-  "types": "./Fieldset.d.ts",
-  "browser": {
-    "./sfc": "./Fieldset.vue"
-  }
-}
\ No newline at end of file
+    "main": "./fieldset.cjs.js",
+    "module": "./fieldset.esm.js",
+    "unpkg": "./fieldset.min.js",
+    "types": "./Fieldset.d.ts",
+    "browser": {
+        "./sfc": "./Fieldset.vue"
+    }
+}
diff --git a/components/lib/fieldset/style/FieldsetStyle.js b/components/lib/fieldset/style/FieldsetStyle.js
new file mode 100644
index 000000000..32d7522f8
--- /dev/null
+++ b/components/lib/fieldset/style/FieldsetStyle.js
@@ -0,0 +1,45 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-fieldset-legend > a,
+    .p-fieldset-legend > span {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .p-fieldset-toggleable .p-fieldset-legend a {
+        cursor: pointer;
+        user-select: none;
+        overflow: hidden;
+        position: relative;
+        text-decoration: none;
+    }
+
+    .p-fieldset-legend-text {
+        line-height: 1;
+    }
+}
+`;
+
+const classes = {
+    root: ({ props }) => [
+        'p-fieldset p-component',
+        {
+            'p-fieldset-toggleable': props.toggleable
+        }
+    ],
+    legend: 'p-fieldset-legend',
+    legendtitle: 'p-fieldset-legend-text',
+    togglericon: 'p-fieldset-toggler',
+    legendtitle: 'p-fieldset-legend-text',
+    toggleablecontent: 'p-toggleable-content',
+    content: 'p-fieldset-content'
+};
+
+export default BaseStyle.extend({
+    name: 'fieldset',
+    css,
+    classes
+});
diff --git a/components/lib/fieldset/style/package.json b/components/lib/fieldset/style/package.json
new file mode 100644
index 000000000..b943c7274
--- /dev/null
+++ b/components/lib/fieldset/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./fieldsetstyle.cjs.js",
+    "module": "./fieldsetstyle.esm.js",
+    "unpkg": "./fieldsetstyle.min.js"
+}
diff --git a/components/lib/fileupload/BaseFileUpload.vue b/components/lib/fileupload/BaseFileUpload.vue
index 015f7b579..46949e53f 100644
--- a/components/lib/fileupload/BaseFileUpload.vue
+++ b/components/lib/fileupload/BaseFileUpload.vue
@@ -1,83 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-fileupload-content {
-        position: relative;
-    }
-    
-    .p-fileupload-content .p-progressbar {
-        width: 100%;
-        position: absolute;
-        top: 0;
-        left: 0;
-    }
-    
-    .p-button.p-fileupload-choose {
-        position: relative;
-        overflow: hidden;
-    }
-    
-    .p-fileupload-buttonbar {
-        display: flex;
-        flex-wrap: wrap;
-    }
-    
-    .p-fileupload > input[type='file'],
-    .p-fileupload-basic input[type='file'] {
-        display: none;
-    }
-    
-    .p-fluid .p-fileupload .p-button {
-        width: auto;
-    }
-    
-    .p-fileupload-file {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-    }
-    
-    .p-fileupload-file-thumbnail {
-        flex-shrink: 0;
-    }
-    
-    .p-fileupload-file-actions {
-        margin-left: auto;
-    }
-}
-`;
-
-const classes = {
-    root: ({ props }) => [`p-fileupload p-fileupload-${props.mode} p-component`],
-    buttonbar: 'p-fileupload-buttonbar',
-    chooseButton: ({ instance, props }) => [
-        'p-button p-component p-fileupload-choose',
-        {
-            'p-fileupload-choose-selected': props.mode === 'basic' && instance.hasFiles,
-            'p-disabled': props.disabled,
-            'p-focus': instance.focused
-        }
-    ],
-    chooseIcon: 'p-button-icon p-button-icon-left',
-    chooseButtonLabel: 'p-button-label',
-    content: 'p-fileupload-content',
-    empty: 'p-fileupload-empty',
-    uploadIcon: 'p-button-icon p-button-icon-left',
-    label: 'p-button-label',
-    file: 'p-fileupload-file',
-    thumbnail: 'p-fileupload-file-thumbnail',
-    details: 'p-fileupload-file-details',
-    fileName: 'p-fileupload-file-name',
-    fileSize: 'p-fileupload-file-size',
-    badge: 'p-fileupload-file-badge',
-    actions: 'p-fileupload-file-actions',
-    removeButton: 'p-fileupload-file-remove'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'fileupload', manual: true });
+import FileUploadStyle from 'primevue/fileupload/style';
 
 export default {
     name: 'BaseFileUpload',
@@ -178,10 +101,7 @@ export default {
         style: null,
         class: null
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: FileUploadStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/fileupload/package.json b/components/lib/fileupload/package.json
index 6e5a80e23..b3c031fab 100644
--- a/components/lib/fileupload/package.json
+++ b/components/lib/fileupload/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./fileupload.cjs.js",
-  "module": "./fileupload.esm.js",
-  "unpkg": "./fileupload.min.js",
-  "types": "./FileUpload.d.ts",
-  "browser": {
-    "./sfc": "./FileUpload.vue"
-  }
-}
\ No newline at end of file
+    "main": "./fileupload.cjs.js",
+    "module": "./fileupload.esm.js",
+    "unpkg": "./fileupload.min.js",
+    "types": "./FileUpload.d.ts",
+    "browser": {
+        "./sfc": "./FileUpload.vue"
+    }
+}
diff --git a/components/lib/fileupload/style/FileUploadStyle.js b/components/lib/fileupload/style/FileUploadStyle.js
new file mode 100644
index 000000000..5cf54c7ab
--- /dev/null
+++ b/components/lib/fileupload/style/FileUploadStyle.js
@@ -0,0 +1,82 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-fileupload-content {
+        position: relative;
+    }
+
+    .p-fileupload-content .p-progressbar {
+        width: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+
+    .p-button.p-fileupload-choose {
+        position: relative;
+        overflow: hidden;
+    }
+
+    .p-fileupload-buttonbar {
+        display: flex;
+        flex-wrap: wrap;
+    }
+
+    .p-fileupload > input[type='file'],
+    .p-fileupload-basic input[type='file'] {
+        display: none;
+    }
+
+    .p-fluid .p-fileupload .p-button {
+        width: auto;
+    }
+
+    .p-fileupload-file {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+    }
+
+    .p-fileupload-file-thumbnail {
+        flex-shrink: 0;
+    }
+
+    .p-fileupload-file-actions {
+        margin-left: auto;
+    }
+}
+`;
+
+const classes = {
+    root: ({ props }) => [`p-fileupload p-fileupload-${props.mode} p-component`],
+    buttonbar: 'p-fileupload-buttonbar',
+    chooseButton: ({ instance, props }) => [
+        'p-button p-component p-fileupload-choose',
+        {
+            'p-fileupload-choose-selected': props.mode === 'basic' && instance.hasFiles,
+            'p-disabled': props.disabled,
+            'p-focus': instance.focused
+        }
+    ],
+    chooseIcon: 'p-button-icon p-button-icon-left',
+    chooseButtonLabel: 'p-button-label',
+    content: 'p-fileupload-content',
+    empty: 'p-fileupload-empty',
+    uploadIcon: 'p-button-icon p-button-icon-left',
+    label: 'p-button-label',
+    file: 'p-fileupload-file',
+    thumbnail: 'p-fileupload-file-thumbnail',
+    details: 'p-fileupload-file-details',
+    fileName: 'p-fileupload-file-name',
+    fileSize: 'p-fileupload-file-size',
+    badge: 'p-fileupload-file-badge',
+    actions: 'p-fileupload-file-actions',
+    removeButton: 'p-fileupload-file-remove'
+};
+
+export default BaseStyle.extend({
+    name: 'fileupload',
+    css,
+    classes
+});
diff --git a/components/lib/fileupload/style/package.json b/components/lib/fileupload/style/package.json
new file mode 100644
index 000000000..c8cd20a64
--- /dev/null
+++ b/components/lib/fileupload/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./fileuploadstyle.cjs.js",
+    "module": "./fileuploadstyle.esm.js",
+    "unpkg": "./fileuploadstyle.min.js"
+}
diff --git a/components/lib/focustrap/BaseFocusTrap.js b/components/lib/focustrap/BaseFocusTrap.js
index b0f27c50f..22431a156 100644
--- a/components/lib/focustrap/BaseFocusTrap.js
+++ b/components/lib/focustrap/BaseFocusTrap.js
@@ -1,5 +1,8 @@
 import BaseDirective from 'primevue/basedirective';
+import FocusTrapStyle from 'primevue/focustrap/style';
 
-const BaseFocusTrap = BaseDirective.extend({});
+const BaseFocusTrap = BaseDirective.extend({
+    style: FocusTrapStyle
+});
 
 export default BaseFocusTrap;
diff --git a/components/lib/focustrap/package.json b/components/lib/focustrap/package.json
index 8e94e70cc..a3f5d9bd4 100644
--- a/components/lib/focustrap/package.json
+++ b/components/lib/focustrap/package.json
@@ -3,4 +3,4 @@
     "module": "./focustrap.esm.js",
     "unpkg": "./focustrap.min.js",
     "types": "./FocusTrap.d.ts"
-}
\ No newline at end of file
+}
diff --git a/components/lib/focustrap/style/FocusTrapStyle.js b/components/lib/focustrap/style/FocusTrapStyle.js
new file mode 100644
index 000000000..ff8b4c563
--- /dev/null
+++ b/components/lib/focustrap/style/FocusTrapStyle.js
@@ -0,0 +1 @@
+export default {};
diff --git a/components/lib/focustrap/style/package.json b/components/lib/focustrap/style/package.json
new file mode 100644
index 000000000..91b307680
--- /dev/null
+++ b/components/lib/focustrap/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./focustrapstyle.cjs.js",
+    "module": "./focustrapstyle.esm.js",
+    "unpkg": "./focustrapstyle.min.js"
+}
diff --git a/components/lib/galleria/BaseGalleria.vue b/components/lib/galleria/BaseGalleria.vue
index 6f3ddebda..983445518 100644
--- a/components/lib/galleria/BaseGalleria.vue
+++ b/components/lib/galleria/BaseGalleria.vue
@@ -1,379 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-galleria-content {
-        display: flex;
-        flex-direction: column;
-    }
-    
-    .p-galleria-item-wrapper {
-        display: flex;
-        flex-direction: column;
-        position: relative;
-    }
-    
-    .p-galleria-item-container {
-        position: relative;
-        display: flex;
-        height: 100%;
-    }
-    
-    .p-galleria-item-nav {
-        position: absolute;
-        top: 50%;
-        margin-top: -0.5rem;
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-        overflow: hidden;
-    }
-    
-    .p-galleria-item-prev {
-        left: 0;
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-    }
-    
-    .p-galleria-item-next {
-        right: 0;
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-    }
-    
-    .p-galleria-item {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 100%;
-        width: 100%;
-    }
-    
-    .p-galleria-item-nav-onhover .p-galleria-item-nav {
-        pointer-events: none;
-        opacity: 0;
-        transition: opacity 0.2s ease-in-out;
-    }
-    
-    .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav {
-        pointer-events: all;
-        opacity: 1;
-    }
-    
-    .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled {
-        pointer-events: none;
-    }
-    
-    .p-galleria-caption {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        width: 100%;
-    }
-    
-    /* Thumbnails */
-    .p-galleria-thumbnail-wrapper {
-        display: flex;
-        flex-direction: column;
-        overflow: auto;
-        flex-shrink: 0;
-    }
-    
-    .p-galleria-thumbnail-prev,
-    .p-galleria-thumbnail-next {
-        align-self: center;
-        flex: 0 0 auto;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        overflow: hidden;
-        position: relative;
-    }
-    
-    .p-galleria-thumbnail-prev span,
-    .p-galleria-thumbnail-next span {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-    
-    .p-galleria-thumbnail-container {
-        display: flex;
-        flex-direction: row;
-    }
-    
-    .p-galleria-thumbnail-items-container {
-        overflow: hidden;
-        width: 100%;
-    }
-    
-    .p-galleria-thumbnail-items {
-        display: flex;
-    }
-    
-    .p-galleria-thumbnail-item {
-        overflow: auto;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        opacity: 0.5;
-    }
-    
-    .p-galleria-thumbnail-item:hover {
-        opacity: 1;
-        transition: opacity 0.3s;
-    }
-    
-    .p-galleria-thumbnail-item-current {
-        opacity: 1;
-    }
-    
-    /* Positions */
-    /* Thumbnails */
-    .p-galleria-thumbnails-left .p-galleria-content,
-    .p-galleria-thumbnails-right .p-galleria-content {
-        flex-direction: row;
-    }
-    
-    .p-galleria-thumbnails-left .p-galleria-item-wrapper,
-    .p-galleria-thumbnails-right .p-galleria-item-wrapper {
-        flex-direction: row;
-    }
-    
-    .p-galleria-thumbnails-left .p-galleria-item-wrapper,
-    .p-galleria-thumbnails-top .p-galleria-item-wrapper {
-        order: 2;
-    }
-    
-    .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper,
-    .p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper {
-        order: 1;
-    }
-    
-    .p-galleria-thumbnails-left .p-galleria-thumbnail-container,
-    .p-galleria-thumbnails-right .p-galleria-thumbnail-container {
-        flex-direction: column;
-        flex-grow: 1;
-    }
-    
-    .p-galleria-thumbnails-left .p-galleria-thumbnail-items,
-    .p-galleria-thumbnails-right .p-galleria-thumbnail-items {
-        flex-direction: column;
-        height: 100%;
-    }
-    
-    /* Indicators */
-    .p-galleria-indicators {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-    
-    .p-galleria-indicator > button {
-        display: inline-flex;
-        align-items: center;
-    }
-    
-    .p-galleria-indicators-left .p-galleria-item-wrapper,
-    .p-galleria-indicators-right .p-galleria-item-wrapper {
-        flex-direction: row;
-        align-items: center;
-    }
-    
-    .p-galleria-indicators-left .p-galleria-item-container,
-    .p-galleria-indicators-top .p-galleria-item-container {
-        order: 2;
-    }
-    
-    .p-galleria-indicators-left .p-galleria-indicators,
-    .p-galleria-indicators-top .p-galleria-indicators {
-        order: 1;
-    }
-    
-    .p-galleria-indicators-left .p-galleria-indicators,
-    .p-galleria-indicators-right .p-galleria-indicators {
-        flex-direction: column;
-    }
-    
-    .p-galleria-indicator-onitem .p-galleria-indicators {
-        position: absolute;
-        display: flex;
-    }
-    
-    .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators {
-        top: 0;
-        left: 0;
-        width: 100%;
-        align-items: flex-start;
-    }
-    
-    .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators {
-        right: 0;
-        top: 0;
-        height: 100%;
-        align-items: flex-end;
-    }
-    
-    .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators {
-        bottom: 0;
-        left: 0;
-        width: 100%;
-        align-items: flex-end;
-    }
-    
-    .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators {
-        left: 0;
-        top: 0;
-        height: 100%;
-        align-items: flex-start;
-    }
-    
-    /* FullScreen */
-    .p-galleria-mask {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-    
-    .p-galleria-close {
-        position: absolute;
-        top: 0;
-        right: 0;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        overflow: hidden;
-    }
-    
-    .p-galleria-mask .p-galleria-item-nav {
-        position: fixed;
-        top: 50%;
-        margin-top: -0.5rem;
-    }
-    
-    /* Animation */
-    .p-galleria-enter-active {
-        transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
-    }
-    
-    .p-galleria-leave-active {
-        transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
-    }
-    
-    .p-galleria-enter-from,
-    .p-galleria-leave-to {
-        opacity: 0;
-        transform: scale(0.7);
-    }
-    
-    .p-galleria-enter-active .p-galleria-item-nav {
-        opacity: 0;
-    }
-    
-    /* Keyboard Support */
-    .p-items-hidden .p-galleria-thumbnail-item {
-        visibility: hidden;
-    }
-    
-    .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active {
-        visibility: visible;
-    }
-}
-`;
-
-const classes = {
-    mask: ({ instance }) => [
-        'p-galleria-mask p-component-overlay p-component-overlay-enter',
-        {
-            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
-        }
-    ],
-    root: ({ instance }) => {
-        const thumbnailsPosClass = instance.$attrs.showThumbnails && instance.getPositionClass('p-galleria-thumbnails', instance.$attrs.thumbnailsPosition);
-        const indicatorPosClass = instance.$attrs.showIndicators && instance.getPositionClass('p-galleria-indicators', instance.$attrs.indicatorsPosition);
-
-        return [
-            'p-galleria p-component',
-            {
-                'p-galleria-fullscreen': instance.$attrs.fullScreen,
-                'p-galleria-indicator-onitem': instance.$attrs.showIndicatorsOnItem,
-                'p-galleria-item-nav-onhover': instance.$attrs.showItemNavigatorsOnHover && !instance.$attrs.fullScreen
-            },
-            thumbnailsPosClass,
-            indicatorPosClass
-        ];
-    },
-    closeButton: 'p-galleria-close p-link',
-    closeIcon: 'p-galleria-close-icon',
-    header: 'p-galleria-header',
-    content: 'p-galleria-content',
-    footer: 'p-galleria-footer',
-    itemWrapper: 'p-galleria-item-wrapper',
-    itemContainer: 'p-galleria-item-container',
-    previousItemButton: ({ instance }) => [
-        'p-galleria-item-prev p-galleria-item-nav p-link',
-        {
-            'p-disabled': instance.isNavBackwardDisabled()
-        }
-    ],
-    previousItemIcon: 'p-galleria-item-prev-icon',
-    item: 'p-galleria-item',
-    nextItemButton: ({ instance }) => [
-        'p-galleria-item-next p-galleria-item-nav p-link',
-        {
-            'p-disabled': instance.isNavForwardDisabled()
-        }
-    ],
-    nextItemIcon: 'p-galleria-item-next-icon',
-    caption: 'p-galleria-caption',
-    indicators: 'p-galleria-indicators p-reset',
-    indicator: ({ instance, index }) => [
-        'p-galleria-indicator',
-        {
-            'p-highlight': instance.isIndicatorItemActive(index)
-        }
-    ],
-    indicatorButton: 'p-link',
-    thumbnailWrapper: 'p-galleria-thumbnail-wrapper',
-    thumbnailContainer: 'p-galleria-thumbnail-container',
-    previousThumbnailButton: ({ instance }) => [
-        'p-galleria-thumbnail-prev p-link',
-        {
-            'p-disabled': instance.isNavBackwardDisabled()
-        }
-    ],
-    previousThumbnailIcon: 'p-galleria-thumbnail-prev-icon',
-    thumbnailItemsContainer: 'p-galleria-thumbnail-items-container',
-    thumbnailItems: 'p-galleria-thumbnail-items',
-    thumbnailItem: ({ instance, index, activeIndex }) => [
-        'p-galleria-thumbnail-item',
-        {
-            'p-galleria-thumbnail-item-current': activeIndex === index,
-            'p-galleria-thumbnail-item-active': instance.isItemActive(index),
-            'p-galleria-thumbnail-item-start': instance.firstItemAciveIndex() === index,
-            'p-galleria-thumbnail-item-end': instance.lastItemActiveIndex() === index
-        }
-    ],
-    thumbnailItemContent: 'p-galleria-thumbnail-item-content',
-    nextThumbnailButton: ({ instance }) => [
-        'p-galleria-thumbnail-next p-link',
-        {
-            'p-disabled': instance.isNavForwardDisabled()
-        }
-    ],
-    nextThumbnailIcon: 'p-galleria-thumbnail-next-icon'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'galleria', manual: true });
+import GalleriaStyle from 'primevue/galleria/style';
 
 export default {
     name: 'BaseGalleria',
@@ -488,10 +115,7 @@ export default {
             default: null
         }
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: GalleriaStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/galleria/package.json b/components/lib/galleria/package.json
index 5b93bf87a..f0d97f48a 100644
--- a/components/lib/galleria/package.json
+++ b/components/lib/galleria/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./galleria.cjs.js",
-  "module": "./galleria.esm.js",
-  "unpkg": "./galleria.min.js",
-  "types": "./Galleria.d.ts",
-  "browser": {
-    "./sfc": "./Galleria.vue"
-  }
-}
\ No newline at end of file
+    "main": "./galleria.cjs.js",
+    "module": "./galleria.esm.js",
+    "unpkg": "./galleria.min.js",
+    "types": "./Galleria.d.ts",
+    "browser": {
+        "./sfc": "./Galleria.vue"
+    }
+}
diff --git a/components/lib/galleria/style/GalleriaStyle.js b/components/lib/galleria/style/GalleriaStyle.js
new file mode 100644
index 000000000..d6eb42ab2
--- /dev/null
+++ b/components/lib/galleria/style/GalleriaStyle.js
@@ -0,0 +1,378 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-galleria-content {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .p-galleria-item-wrapper {
+        display: flex;
+        flex-direction: column;
+        position: relative;
+    }
+
+    .p-galleria-item-container {
+        position: relative;
+        display: flex;
+        height: 100%;
+    }
+
+    .p-galleria-item-nav {
+        position: absolute;
+        top: 50%;
+        margin-top: -0.5rem;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+    }
+
+    .p-galleria-item-prev {
+        left: 0;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+
+    .p-galleria-item-next {
+        right: 0;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    .p-galleria-item {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+        width: 100%;
+    }
+
+    .p-galleria-item-nav-onhover .p-galleria-item-nav {
+        pointer-events: none;
+        opacity: 0;
+        transition: opacity 0.2s ease-in-out;
+    }
+
+    .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav {
+        pointer-events: all;
+        opacity: 1;
+    }
+
+    .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled {
+        pointer-events: none;
+    }
+
+    .p-galleria-caption {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+    }
+
+    /* Thumbnails */
+    .p-galleria-thumbnail-wrapper {
+        display: flex;
+        flex-direction: column;
+        overflow: auto;
+        flex-shrink: 0;
+    }
+
+    .p-galleria-thumbnail-prev,
+    .p-galleria-thumbnail-next {
+        align-self: center;
+        flex: 0 0 auto;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .p-galleria-thumbnail-prev span,
+    .p-galleria-thumbnail-next span {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .p-galleria-thumbnail-container {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .p-galleria-thumbnail-items-container {
+        overflow: hidden;
+        width: 100%;
+    }
+
+    .p-galleria-thumbnail-items {
+        display: flex;
+    }
+
+    .p-galleria-thumbnail-item {
+        overflow: auto;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        opacity: 0.5;
+    }
+
+    .p-galleria-thumbnail-item:hover {
+        opacity: 1;
+        transition: opacity 0.3s;
+    }
+
+    .p-galleria-thumbnail-item-current {
+        opacity: 1;
+    }
+
+    /* Positions */
+    /* Thumbnails */
+    .p-galleria-thumbnails-left .p-galleria-content,
+    .p-galleria-thumbnails-right .p-galleria-content {
+        flex-direction: row;
+    }
+
+    .p-galleria-thumbnails-left .p-galleria-item-wrapper,
+    .p-galleria-thumbnails-right .p-galleria-item-wrapper {
+        flex-direction: row;
+    }
+
+    .p-galleria-thumbnails-left .p-galleria-item-wrapper,
+    .p-galleria-thumbnails-top .p-galleria-item-wrapper {
+        order: 2;
+    }
+
+    .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper,
+    .p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper {
+        order: 1;
+    }
+
+    .p-galleria-thumbnails-left .p-galleria-thumbnail-container,
+    .p-galleria-thumbnails-right .p-galleria-thumbnail-container {
+        flex-direction: column;
+        flex-grow: 1;
+    }
+
+    .p-galleria-thumbnails-left .p-galleria-thumbnail-items,
+    .p-galleria-thumbnails-right .p-galleria-thumbnail-items {
+        flex-direction: column;
+        height: 100%;
+    }
+
+    /* Indicators */
+    .p-galleria-indicators {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .p-galleria-indicator > button {
+        display: inline-flex;
+        align-items: center;
+    }
+
+    .p-galleria-indicators-left .p-galleria-item-wrapper,
+    .p-galleria-indicators-right .p-galleria-item-wrapper {
+        flex-direction: row;
+        align-items: center;
+    }
+
+    .p-galleria-indicators-left .p-galleria-item-container,
+    .p-galleria-indicators-top .p-galleria-item-container {
+        order: 2;
+    }
+
+    .p-galleria-indicators-left .p-galleria-indicators,
+    .p-galleria-indicators-top .p-galleria-indicators {
+        order: 1;
+    }
+
+    .p-galleria-indicators-left .p-galleria-indicators,
+    .p-galleria-indicators-right .p-galleria-indicators {
+        flex-direction: column;
+    }
+
+    .p-galleria-indicator-onitem .p-galleria-indicators {
+        position: absolute;
+        display: flex;
+    }
+
+    .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators {
+        top: 0;
+        left: 0;
+        width: 100%;
+        align-items: flex-start;
+    }
+
+    .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators {
+        right: 0;
+        top: 0;
+        height: 100%;
+        align-items: flex-end;
+    }
+
+    .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators {
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        align-items: flex-end;
+    }
+
+    .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators {
+        left: 0;
+        top: 0;
+        height: 100%;
+        align-items: flex-start;
+    }
+
+    /* FullScreen */
+    .p-galleria-mask {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .p-galleria-close {
+        position: absolute;
+        top: 0;
+        right: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+    }
+
+    .p-galleria-mask .p-galleria-item-nav {
+        position: fixed;
+        top: 50%;
+        margin-top: -0.5rem;
+    }
+
+    /* Animation */
+    .p-galleria-enter-active {
+        transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
+    }
+
+    .p-galleria-leave-active {
+        transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .p-galleria-enter-from,
+    .p-galleria-leave-to {
+        opacity: 0;
+        transform: scale(0.7);
+    }
+
+    .p-galleria-enter-active .p-galleria-item-nav {
+        opacity: 0;
+    }
+
+    /* Keyboard Support */
+    .p-items-hidden .p-galleria-thumbnail-item {
+        visibility: hidden;
+    }
+
+    .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active {
+        visibility: visible;
+    }
+}
+`;
+
+const classes = {
+    mask: ({ instance }) => [
+        'p-galleria-mask p-component-overlay p-component-overlay-enter',
+        {
+            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
+            'p-ripple-disabled': instance.$primevue.config.ripple === false
+        }
+    ],
+    root: ({ instance }) => {
+        const thumbnailsPosClass = instance.$attrs.showThumbnails && instance.getPositionClass('p-galleria-thumbnails', instance.$attrs.thumbnailsPosition);
+        const indicatorPosClass = instance.$attrs.showIndicators && instance.getPositionClass('p-galleria-indicators', instance.$attrs.indicatorsPosition);
+
+        return [
+            'p-galleria p-component',
+            {
+                'p-galleria-fullscreen': instance.$attrs.fullScreen,
+                'p-galleria-indicator-onitem': instance.$attrs.showIndicatorsOnItem,
+                'p-galleria-item-nav-onhover': instance.$attrs.showItemNavigatorsOnHover && !instance.$attrs.fullScreen
+            },
+            thumbnailsPosClass,
+            indicatorPosClass
+        ];
+    },
+    closeButton: 'p-galleria-close p-link',
+    closeIcon: 'p-galleria-close-icon',
+    header: 'p-galleria-header',
+    content: 'p-galleria-content',
+    footer: 'p-galleria-footer',
+    itemWrapper: 'p-galleria-item-wrapper',
+    itemContainer: 'p-galleria-item-container',
+    previousItemButton: ({ instance }) => [
+        'p-galleria-item-prev p-galleria-item-nav p-link',
+        {
+            'p-disabled': instance.isNavBackwardDisabled()
+        }
+    ],
+    previousItemIcon: 'p-galleria-item-prev-icon',
+    item: 'p-galleria-item',
+    nextItemButton: ({ instance }) => [
+        'p-galleria-item-next p-galleria-item-nav p-link',
+        {
+            'p-disabled': instance.isNavForwardDisabled()
+        }
+    ],
+    nextItemIcon: 'p-galleria-item-next-icon',
+    caption: 'p-galleria-caption',
+    indicators: 'p-galleria-indicators p-reset',
+    indicator: ({ instance, index }) => [
+        'p-galleria-indicator',
+        {
+            'p-highlight': instance.isIndicatorItemActive(index)
+        }
+    ],
+    indicatorButton: 'p-link',
+    thumbnailWrapper: 'p-galleria-thumbnail-wrapper',
+    thumbnailContainer: 'p-galleria-thumbnail-container',
+    previousThumbnailButton: ({ instance }) => [
+        'p-galleria-thumbnail-prev p-link',
+        {
+            'p-disabled': instance.isNavBackwardDisabled()
+        }
+    ],
+    previousThumbnailIcon: 'p-galleria-thumbnail-prev-icon',
+    thumbnailItemsContainer: 'p-galleria-thumbnail-items-container',
+    thumbnailItems: 'p-galleria-thumbnail-items',
+    thumbnailItem: ({ instance, index, activeIndex }) => [
+        'p-galleria-thumbnail-item',
+        {
+            'p-galleria-thumbnail-item-current': activeIndex === index,
+            'p-galleria-thumbnail-item-active': instance.isItemActive(index),
+            'p-galleria-thumbnail-item-start': instance.firstItemAciveIndex() === index,
+            'p-galleria-thumbnail-item-end': instance.lastItemActiveIndex() === index
+        }
+    ],
+    thumbnailItemContent: 'p-galleria-thumbnail-item-content',
+    nextThumbnailButton: ({ instance }) => [
+        'p-galleria-thumbnail-next p-link',
+        {
+            'p-disabled': instance.isNavForwardDisabled()
+        }
+    ],
+    nextThumbnailIcon: 'p-galleria-thumbnail-next-icon'
+};
+
+export default BaseStyle.extend({
+    name: 'galleria',
+    css,
+    classes
+});
diff --git a/components/lib/galleria/style/package.json b/components/lib/galleria/style/package.json
new file mode 100644
index 000000000..56bcc1f75
--- /dev/null
+++ b/components/lib/galleria/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./galleriastyle.cjs.js",
+    "module": "./galleriastyle.esm.js",
+    "unpkg": "./galleriastyle.min.js"
+}
diff --git a/components/lib/icons/angledoubledown/package.json b/components/lib/icons/angledoubledown/package.json
index db07e863d..2ec76c38f 100644
--- a/components/lib/icons/angledoubledown/package.json
+++ b/components/lib/icons/angledoubledown/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./index.min.js",
     "types": "./index.d.ts",
     "browser": {
-      "./sfc": "./index.vue"
+        "./sfc": "./index.vue"
     }
-}
\ No newline at end of file
+}
diff --git a/components/lib/icons/angledoubleleft/package.json b/components/lib/icons/angledoubleleft/package.json
index db07e863d..2ec76c38f 100644
--- a/components/lib/icons/angledoubleleft/package.json
+++ b/components/lib/icons/angledoubleleft/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./index.min.js",
     "types": "./index.d.ts",
     "browser": {
-      "./sfc": "./index.vue"
+        "./sfc": "./index.vue"
     }
-}
\ No newline at end of file
+}
diff --git a/components/lib/icons/angledoubleright/package.json b/components/lib/icons/angledoubleright/package.json
index db07e863d..2ec76c38f 100644
--- a/components/lib/icons/angledoubleright/package.json
+++ b/components/lib/icons/angledoubleright/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./index.min.js",
     "types": "./index.d.ts",
     "browser": {
-      "./sfc": "./index.vue"
+        "./sfc": "./index.vue"
     }
-}
\ No newline at end of file
+}
diff --git a/components/lib/icons/angledoubleup/package.json b/components/lib/icons/angledoubleup/package.json
index db07e863d..2ec76c38f 100644
--- a/components/lib/icons/angledoubleup/package.json
+++ b/components/lib/icons/angledoubleup/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./index.min.js",
     "types": "./index.d.ts",
     "browser": {
-      "./sfc": "./index.vue"
+        "./sfc": "./index.vue"
     }
-}
\ No newline at end of file
+}
diff --git a/components/lib/icons/angledown/package.json b/components/lib/icons/angledown/package.json
index db07e863d..2ec76c38f 100644
--- a/components/lib/icons/angledown/package.json
+++ b/components/lib/icons/angledown/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./index.min.js",
     "types": "./index.d.ts",
     "browser": {
-      "./sfc": "./index.vue"
+        "./sfc": "./index.vue"
     }
-}
\ No newline at end of file
+}
diff --git a/components/lib/icons/angleleft/package.json b/components/lib/icons/angleleft/package.json
index db07e863d..2ec76c38f 100644
--- a/components/lib/icons/angleleft/package.json
+++ b/components/lib/icons/angleleft/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./index.min.js",
     "types": "./index.d.ts",
     "browser": {
-      "./sfc": "./index.vue"
+        "./sfc": "./index.vue"
     }
-}
\ No newline at end of file
+}
diff --git a/components/lib/icons/angleright/package.json b/components/lib/icons/angleright/package.json
index db07e863d..2ec76c38f 100644
--- a/components/lib/icons/angleright/package.json
+++ b/components/lib/icons/angleright/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./index.min.js",
     "types": "./index.d.ts",
     "browser": {
-      "./sfc": "./index.vue"
+        "./sfc": "./index.vue"
     }
-}
\ No newline at end of file
+}
diff --git a/components/lib/icons/angleup/package.json b/components/lib/icons/angleup/package.json
index db07e863d..2ec76c38f 100644
--- a/components/lib/icons/angleup/package.json
+++ b/components/lib/icons/angleup/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./index.min.js",
     "types": "./index.d.ts",
     "browser": {
-      "./sfc": "./index.vue"
+        "./sfc": "./index.vue"
     }
-}
\ No newline at end of file
+}
diff --git a/components/lib/icons/arrowdown/package.json b/components/lib/icons/arrowdown/package.json
index db07e863d..2ec76c38f 100644
--- a/components/lib/icons/arrowdown/package.json
+++ b/components/lib/icons/arrowdown/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./index.min.js",
     "types": "./index.d.ts",
     "browser": {
-      "./sfc": "./index.vue"
+        "./sfc": "./index.vue"
     }
-}
\ No newline at end of file
+}
diff --git a/components/lib/icons/arrowup/package.json b/components/lib/icons/arrowup/package.json
index db07e863d..2ec76c38f 100644
--- a/components/lib/icons/arrowup/package.json
+++ b/components/lib/icons/arrowup/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./index.min.js",
     "types": "./index.d.ts",
     "browser": {
-      "./sfc": "./index.vue"
+        "./sfc": "./index.vue"
     }
-}
\ No newline at end of file
+}
diff --git a/components/lib/icons/ban/package.json b/components/lib/icons/ban/package.json
index db07e863d..2ec76c38f 100644
--- a/components/lib/icons/ban/package.json
+++ b/components/lib/icons/ban/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./index.min.js",
     "types": "./index.d.ts",
     "browser": {
-      "./sfc": "./index.vue"
+        "./sfc": "./index.vue"
     }
-}
\ No newline at end of file
+}
diff --git a/components/lib/icons/bars/package.json b/components/lib/icons/bars/package.json
index eb2cbd492..2ec76c38f 100644
--- a/components/lib/icons/bars/package.json
+++ b/components/lib/icons/bars/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./index.min.js",
     "types": "./index.d.ts",
     "browser": {
-      "./sfc": "./index.vue"
+        "./sfc": "./index.vue"
     }
-  }
\ No newline at end of file
+}
diff --git a/components/lib/icons/calendar/package.json b/components/lib/icons/calendar/package.json
index db07e863d..2ec76c38f 100644
--- a/components/lib/icons/calendar/package.json
+++ b/components/lib/icons/calendar/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./index.min.js",
     "types": "./index.d.ts",
     "browser": {
-      "./sfc": "./index.vue"
+        "./sfc": "./index.vue"
     }
-}
\ No newline at end of file
+}
diff --git a/components/lib/icons/check/package.json b/components/lib/icons/check/package.json
index eb2cbd492..2ec76c38f 100644
--- a/components/lib/icons/check/package.json
+++ b/components/lib/icons/check/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./index.min.js",
     "types": "./index.d.ts",
     "browser": {
-      "./sfc": "./index.vue"
+        "./sfc": "./index.vue"
     }
-  }
\ No newline at end of file
+}
diff --git a/components/lib/icons/chevrondown/package.json b/components/lib/icons/chevrondown/package.json
index eb2cbd492..2ec76c38f 100644
--- a/components/lib/icons/chevrondown/package.json
+++ b/components/lib/icons/chevrondown/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./index.min.js",
     "types": "./index.d.ts",
     "browser": {
-      "./sfc": "./index.vue"
+        "./sfc": "./index.vue"
     }
-  }
\ No newline at end of file
+}
diff --git a/components/lib/icons/chevronleft/package.json b/components/lib/icons/chevronleft/package.json
index eb2cbd492..2ec76c38f 100644
--- a/components/lib/icons/chevronleft/package.json
+++ b/components/lib/icons/chevronleft/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./index.min.js",
     "types": "./index.d.ts",
     "browser": {
-      "./sfc": "./index.vue"
+        "./sfc": "./index.vue"
     }
-  }
\ No newline at end of file
+}
diff --git a/components/lib/icons/chevronright/package.json b/components/lib/icons/chevronright/package.json
index eb2cbd492..2ec76c38f 100644
--- a/components/lib/icons/chevronright/package.json
+++ b/components/lib/icons/chevronright/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./index.min.js",
     "types": "./index.d.ts",
     "browser": {
-      "./sfc": "./index.vue"
+        "./sfc": "./index.vue"
     }
-  }
\ No newline at end of file
+}
diff --git a/components/lib/icons/chevronup/package.json b/components/lib/icons/chevronup/package.json
index eb2cbd492..2ec76c38f 100644
--- a/components/lib/icons/chevronup/package.json
+++ b/components/lib/icons/chevronup/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./index.min.js",
     "types": "./index.d.ts",
     "browser": {
-      "./sfc": "./index.vue"
+        "./sfc": "./index.vue"
     }
-  }
\ No newline at end of file
+}
diff --git a/components/lib/icons/exclamationtriangle/package.json b/components/lib/icons/exclamationtriangle/package.json
index eb2cbd492..2ec76c38f 100644
--- a/components/lib/icons/exclamationtriangle/package.json
+++ b/components/lib/icons/exclamationtriangle/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./index.min.js",
     "types": "./index.d.ts",
     "browser": {
-      "./sfc": "./index.vue"
+        "./sfc": "./index.vue"
     }
-  }
\ No newline at end of file
+}
diff --git a/components/lib/icons/eye/package.json b/components/lib/icons/eye/package.json
index eb2cbd492..2ec76c38f 100644
--- a/components/lib/icons/eye/package.json
+++ b/components/lib/icons/eye/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./index.min.js",
     "types": "./index.d.ts",
     "browser": {
-      "./sfc": "./index.vue"
+        "./sfc": "./index.vue"
     }
-  }
\ No newline at end of file
+}
diff --git a/components/lib/icons/eyeslash/package.json b/components/lib/icons/eyeslash/package.json
index eb2cbd492..2ec76c38f 100644
--- a/components/lib/icons/eyeslash/package.json
+++ b/components/lib/icons/eyeslash/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./index.min.js",
     "types": "./index.d.ts",
     "browser": {
-      "./sfc": "./index.vue"
+        "./sfc": "./index.vue"
     }
-  }
\ No newline at end of file
+}
diff --git a/components/lib/icons/filter/package.json b/components/lib/icons/filter/package.json
index eb2cbd492..2ec76c38f 100644
--- a/components/lib/icons/filter/package.json
+++ b/components/lib/icons/filter/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./index.min.js",
     "types": "./index.d.ts",
     "browser": {
-      "./sfc": "./index.vue"
+        "./sfc": "./index.vue"
     }
-  }
\ No newline at end of file
+}
diff --git a/components/lib/icons/filterslash/package.json b/components/lib/icons/filterslash/package.json
index eb2cbd492..2ec76c38f 100644
--- a/components/lib/icons/filterslash/package.json
+++ b/components/lib/icons/filterslash/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./index.min.js",
     "types": "./index.d.ts",
     "browser": {
-      "./sfc": "./index.vue"
+        "./sfc": "./index.vue"
     }
-  }
\ No newline at end of file
+}
diff --git a/components/lib/icons/infocircle/package.json b/components/lib/icons/infocircle/package.json
index eb2cbd492..2ec76c38f 100644
--- a/components/lib/icons/infocircle/package.json
+++ b/components/lib/icons/infocircle/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./index.min.js",
     "types": "./index.d.ts",
     "browser": {
-      "./sfc": "./index.vue"
+        "./sfc": "./index.vue"
     }
-  }
\ No newline at end of file
+}
diff --git a/components/lib/icons/minus/package.json b/components/lib/icons/minus/package.json
index eb2cbd492..2ec76c38f 100644
--- a/components/lib/icons/minus/package.json
+++ b/components/lib/icons/minus/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./index.min.js",
     "types": "./index.d.ts",
     "browser": {
-      "./sfc": "./index.vue"
+        "./sfc": "./index.vue"
     }
-  }
\ No newline at end of file
+}
diff --git a/components/lib/icons/pencil/package.json b/components/lib/icons/pencil/package.json
index eb2cbd492..2ec76c38f 100644
--- a/components/lib/icons/pencil/package.json
+++ b/components/lib/icons/pencil/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./index.min.js",
     "types": "./index.d.ts",
     "browser": {
-      "./sfc": "./index.vue"
+        "./sfc": "./index.vue"
     }
-  }
\ No newline at end of file
+}
diff --git a/components/lib/icons/plus/package.json b/components/lib/icons/plus/package.json
index db07e863d..2ec76c38f 100644
--- a/components/lib/icons/plus/package.json
+++ b/components/lib/icons/plus/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./index.min.js",
     "types": "./index.d.ts",
     "browser": {
-      "./sfc": "./index.vue"
+        "./sfc": "./index.vue"
     }
-}
\ No newline at end of file
+}
diff --git a/components/lib/icons/refresh/package.json b/components/lib/icons/refresh/package.json
index eb2cbd492..2ec76c38f 100644
--- a/components/lib/icons/refresh/package.json
+++ b/components/lib/icons/refresh/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./index.min.js",
     "types": "./index.d.ts",
     "browser": {
-      "./sfc": "./index.vue"
+        "./sfc": "./index.vue"
     }
-  }
\ No newline at end of file
+}
diff --git a/components/lib/icons/search/package.json b/components/lib/icons/search/package.json
index eb2cbd492..2ec76c38f 100644
--- a/components/lib/icons/search/package.json
+++ b/components/lib/icons/search/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./index.min.js",
     "types": "./index.d.ts",
     "browser": {
-      "./sfc": "./index.vue"
+        "./sfc": "./index.vue"
     }
-  }
\ No newline at end of file
+}
diff --git a/components/lib/icons/searchminus/package.json b/components/lib/icons/searchminus/package.json
index eb2cbd492..2ec76c38f 100644
--- a/components/lib/icons/searchminus/package.json
+++ b/components/lib/icons/searchminus/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./index.min.js",
     "types": "./index.d.ts",
     "browser": {
-      "./sfc": "./index.vue"
+        "./sfc": "./index.vue"
     }
-  }
\ No newline at end of file
+}
diff --git a/components/lib/icons/searchplus/package.json b/components/lib/icons/searchplus/package.json
index eb2cbd492..2ec76c38f 100644
--- a/components/lib/icons/searchplus/package.json
+++ b/components/lib/icons/searchplus/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./index.min.js",
     "types": "./index.d.ts",
     "browser": {
-      "./sfc": "./index.vue"
+        "./sfc": "./index.vue"
     }
-  }
\ No newline at end of file
+}
diff --git a/components/lib/icons/sortalt/package.json b/components/lib/icons/sortalt/package.json
index eb2cbd492..2ec76c38f 100644
--- a/components/lib/icons/sortalt/package.json
+++ b/components/lib/icons/sortalt/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./index.min.js",
     "types": "./index.d.ts",
     "browser": {
-      "./sfc": "./index.vue"
+        "./sfc": "./index.vue"
     }
-  }
\ No newline at end of file
+}
diff --git a/components/lib/icons/sortamountdown/package.json b/components/lib/icons/sortamountdown/package.json
index eb2cbd492..2ec76c38f 100644
--- a/components/lib/icons/sortamountdown/package.json
+++ b/components/lib/icons/sortamountdown/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./index.min.js",
     "types": "./index.d.ts",
     "browser": {
-      "./sfc": "./index.vue"
+        "./sfc": "./index.vue"
     }
-  }
\ No newline at end of file
+}
diff --git a/components/lib/icons/sortamountupalt/package.json b/components/lib/icons/sortamountupalt/package.json
index eb2cbd492..2ec76c38f 100644
--- a/components/lib/icons/sortamountupalt/package.json
+++ b/components/lib/icons/sortamountupalt/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./index.min.js",
     "types": "./index.d.ts",
     "browser": {
-      "./sfc": "./index.vue"
+        "./sfc": "./index.vue"
     }
-  }
\ No newline at end of file
+}
diff --git a/components/lib/icons/spinner/package.json b/components/lib/icons/spinner/package.json
index eb2cbd492..2ec76c38f 100644
--- a/components/lib/icons/spinner/package.json
+++ b/components/lib/icons/spinner/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./index.min.js",
     "types": "./index.d.ts",
     "browser": {
-      "./sfc": "./index.vue"
+        "./sfc": "./index.vue"
     }
-  }
\ No newline at end of file
+}
diff --git a/components/lib/icons/star/package.json b/components/lib/icons/star/package.json
index eb2cbd492..2ec76c38f 100644
--- a/components/lib/icons/star/package.json
+++ b/components/lib/icons/star/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./index.min.js",
     "types": "./index.d.ts",
     "browser": {
-      "./sfc": "./index.vue"
+        "./sfc": "./index.vue"
     }
-  }
\ No newline at end of file
+}
diff --git a/components/lib/icons/starfill/package.json b/components/lib/icons/starfill/package.json
index eb2cbd492..2ec76c38f 100644
--- a/components/lib/icons/starfill/package.json
+++ b/components/lib/icons/starfill/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./index.min.js",
     "types": "./index.d.ts",
     "browser": {
-      "./sfc": "./index.vue"
+        "./sfc": "./index.vue"
     }
-  }
\ No newline at end of file
+}
diff --git a/components/lib/icons/thlarge/package.json b/components/lib/icons/thlarge/package.json
index eb2cbd492..2ec76c38f 100644
--- a/components/lib/icons/thlarge/package.json
+++ b/components/lib/icons/thlarge/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./index.min.js",
     "types": "./index.d.ts",
     "browser": {
-      "./sfc": "./index.vue"
+        "./sfc": "./index.vue"
     }
-  }
\ No newline at end of file
+}
diff --git a/components/lib/icons/times/package.json b/components/lib/icons/times/package.json
index eb2cbd492..2ec76c38f 100644
--- a/components/lib/icons/times/package.json
+++ b/components/lib/icons/times/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./index.min.js",
     "types": "./index.d.ts",
     "browser": {
-      "./sfc": "./index.vue"
+        "./sfc": "./index.vue"
     }
-  }
\ No newline at end of file
+}
diff --git a/components/lib/icons/timescircle/package.json b/components/lib/icons/timescircle/package.json
index eb2cbd492..2ec76c38f 100644
--- a/components/lib/icons/timescircle/package.json
+++ b/components/lib/icons/timescircle/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./index.min.js",
     "types": "./index.d.ts",
     "browser": {
-      "./sfc": "./index.vue"
+        "./sfc": "./index.vue"
     }
-  }
\ No newline at end of file
+}
diff --git a/components/lib/icons/trash/package.json b/components/lib/icons/trash/package.json
index eb2cbd492..2ec76c38f 100644
--- a/components/lib/icons/trash/package.json
+++ b/components/lib/icons/trash/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./index.min.js",
     "types": "./index.d.ts",
     "browser": {
-      "./sfc": "./index.vue"
+        "./sfc": "./index.vue"
     }
-  }
\ No newline at end of file
+}
diff --git a/components/lib/icons/undo/package.json b/components/lib/icons/undo/package.json
index eb2cbd492..2ec76c38f 100644
--- a/components/lib/icons/undo/package.json
+++ b/components/lib/icons/undo/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./index.min.js",
     "types": "./index.d.ts",
     "browser": {
-      "./sfc": "./index.vue"
+        "./sfc": "./index.vue"
     }
-  }
\ No newline at end of file
+}
diff --git a/components/lib/icons/upload/package.json b/components/lib/icons/upload/package.json
index eb2cbd492..2ec76c38f 100644
--- a/components/lib/icons/upload/package.json
+++ b/components/lib/icons/upload/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./index.min.js",
     "types": "./index.d.ts",
     "browser": {
-      "./sfc": "./index.vue"
+        "./sfc": "./index.vue"
     }
-  }
\ No newline at end of file
+}
diff --git a/components/lib/icons/windowmaximize/package.json b/components/lib/icons/windowmaximize/package.json
index 9436542f9..2ec76c38f 100644
--- a/components/lib/icons/windowmaximize/package.json
+++ b/components/lib/icons/windowmaximize/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./index.cjs.js",
-  "module": "./index.esm.js",
-  "unpkg": "./index.min.js",
-  "types": "./index.d.ts",
-  "browser": {
-    "./sfc": "./index.vue"
-  }
-}
\ No newline at end of file
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts",
+    "browser": {
+        "./sfc": "./index.vue"
+    }
+}
diff --git a/components/lib/icons/windowminimize/package.json b/components/lib/icons/windowminimize/package.json
index db07e863d..2ec76c38f 100644
--- a/components/lib/icons/windowminimize/package.json
+++ b/components/lib/icons/windowminimize/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./index.min.js",
     "types": "./index.d.ts",
     "browser": {
-      "./sfc": "./index.vue"
+        "./sfc": "./index.vue"
     }
-}
\ No newline at end of file
+}
diff --git a/components/lib/image/BaseImage.vue b/components/lib/image/BaseImage.vue
index 713795095..86c9a862b 100644
--- a/components/lib/image/BaseImage.vue
+++ b/components/lib/image/BaseImage.vue
@@ -1,105 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-image-mask {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-    
-    .p-image-preview-container {
-        position: relative;
-        display: inline-block;
-    }
-    
-    .p-image-preview-indicator {
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        opacity: 0;
-        transition: opacity 0.3s;
-    }
-    
-    .p-image-preview-container:hover > .p-image-preview-indicator {
-        opacity: 1;
-        cursor: pointer;
-    }
-    
-    .p-image-preview-container > img {
-        cursor: pointer;
-    }
-    
-    .p-image-toolbar {
-        position: absolute;
-        top: 0;
-        right: 0;
-        display: flex;
-    }
-    
-    .p-image-action.p-link {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-    
-    .p-image-preview {
-        transition: transform 0.15s;
-        max-width: 100vw;
-        max-height: 100vh;
-    }
-    
-    .p-image-preview-enter-active {
-        transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
-    }
-    .p-image-preview-leave-active {
-        transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
-    }
-    .p-image-preview-enter-from,
-    .p-image-preview-leave-to {
-        opacity: 0;
-        transform: scale(0.7);
-    }
-}
-`;
-
-const classes = {
-    root: ({ props }) => [
-        'p-image p-component',
-        {
-            'p-image-preview-container': props.preview
-        }
-    ],
-    image: ({ props }) => props.image,
-    button: 'p-image-preview-indicator',
-    icon: 'p-image-preview-icon',
-    mask: 'p-image-mask p-component-overlay p-component-overlay-enter',
-    rotateRightButton: 'p-image-action p-link',
-    rotateLeftButton: 'p-image-action p-link',
-    zoomOutButton: ({ instance }) => [
-        'p-image-action p-link',
-        {
-            'p-disabled': instance.isZoomOutDisabled
-        }
-    ],
-    zoomInButton: ({ instance }) => [
-        'p-image-action p-link',
-        {
-            'p-disabled': instance.isZoomInDisabled
-        }
-    ],
-    closeButton: 'p-image-action p-link',
-    preview: 'p-image-preview'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'image', manual: true });
+import ImageStyle from 'primevue/image/style';
 
 export default {
     name: 'BaseImage',
@@ -142,10 +43,7 @@ export default {
             default: false
         }
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: ImageStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/image/package.json b/components/lib/image/package.json
index 81643ec36..a9722cdbb 100644
--- a/components/lib/image/package.json
+++ b/components/lib/image/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./image.min.js",
     "types": "./Image.d.ts",
     "browser": {
-      "./sfc": "./Image.vue"
+        "./sfc": "./Image.vue"
     }
-  }
\ No newline at end of file
+}
diff --git a/components/lib/image/style/ImageStyle.js b/components/lib/image/style/ImageStyle.js
new file mode 100644
index 000000000..ae11ce0d4
--- /dev/null
+++ b/components/lib/image/style/ImageStyle.js
@@ -0,0 +1,104 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-image-mask {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .p-image-preview-container {
+        position: relative;
+        display: inline-block;
+    }
+
+    .p-image-preview-indicator {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+        transition: opacity 0.3s;
+    }
+
+    .p-image-preview-container:hover > .p-image-preview-indicator {
+        opacity: 1;
+        cursor: pointer;
+    }
+
+    .p-image-preview-container > img {
+        cursor: pointer;
+    }
+
+    .p-image-toolbar {
+        position: absolute;
+        top: 0;
+        right: 0;
+        display: flex;
+    }
+
+    .p-image-action.p-link {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .p-image-preview {
+        transition: transform 0.15s;
+        max-width: 100vw;
+        max-height: 100vh;
+    }
+
+    .p-image-preview-enter-active {
+        transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
+    }
+    .p-image-preview-leave-active {
+        transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .p-image-preview-enter-from,
+    .p-image-preview-leave-to {
+        opacity: 0;
+        transform: scale(0.7);
+    }
+}
+`;
+
+const classes = {
+    root: ({ props }) => [
+        'p-image p-component',
+        {
+            'p-image-preview-container': props.preview
+        }
+    ],
+    image: ({ props }) => props.image,
+    button: 'p-image-preview-indicator',
+    icon: 'p-image-preview-icon',
+    mask: 'p-image-mask p-component-overlay p-component-overlay-enter',
+    rotateRightButton: 'p-image-action p-link',
+    rotateLeftButton: 'p-image-action p-link',
+    zoomOutButton: ({ instance }) => [
+        'p-image-action p-link',
+        {
+            'p-disabled': instance.isZoomOutDisabled
+        }
+    ],
+    zoomInButton: ({ instance }) => [
+        'p-image-action p-link',
+        {
+            'p-disabled': instance.isZoomInDisabled
+        }
+    ],
+    closeButton: 'p-image-action p-link',
+    preview: 'p-image-preview'
+};
+
+export default BaseStyle.extend({
+    name: 'image',
+    css,
+    classes
+});
diff --git a/components/lib/image/style/package.json b/components/lib/image/style/package.json
new file mode 100644
index 000000000..b6684e875
--- /dev/null
+++ b/components/lib/image/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./imagestyle.cjs.js",
+    "module": "./imagestyle.esm.js",
+    "unpkg": "./imagestyle.min.js"
+}
diff --git a/components/lib/inlinemessage/BaseInlineMessage.vue b/components/lib/inlinemessage/BaseInlineMessage.vue
index bd70d6436..e7905bc0f 100644
--- a/components/lib/inlinemessage/BaseInlineMessage.vue
+++ b/components/lib/inlinemessage/BaseInlineMessage.vue
@@ -1,34 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-inline-message {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        vertical-align: top;
-    }
-    
-    .p-inline-message-icon-only .p-inline-message-text {
-        visibility: hidden;
-        width: 0;
-    }
-    
-    .p-fluid .p-inline-message {
-        display: flex;
-    }
-}
-`;
-
-const classes = {
-    root: ({ props, instance }) => ['p-inline-message p-component p-inline-message-' + props.severity, { 'p-inline-message-icon-only': !instance.$slots.default }],
-    icon: ({ props }) => ['p-inline-message-icon', props.icon],
-    text: 'p-inline-message-text'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'inlinemessage', manual: true });
+import InlineMessageStyle from 'primevue/inlinemessage/style';
 
 export default {
     name: 'BaseInlineMessage',
@@ -43,10 +15,7 @@ export default {
             default: undefined
         }
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: InlineMessageStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/inlinemessage/package.json b/components/lib/inlinemessage/package.json
index fb4463886..eb55e363d 100644
--- a/components/lib/inlinemessage/package.json
+++ b/components/lib/inlinemessage/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./inlinemessage.cjs.js",
-  "module": "./inlinemessage.esm.js",
-  "unpkg": "./inlinemessage.min.js",
-  "types": "./InlineMessage.d.ts",
-  "browser": {
-    "./sfc": "./InlineMessage.vue"
-  }
-}
\ No newline at end of file
+    "main": "./inlinemessage.cjs.js",
+    "module": "./inlinemessage.esm.js",
+    "unpkg": "./inlinemessage.min.js",
+    "types": "./InlineMessage.d.ts",
+    "browser": {
+        "./sfc": "./InlineMessage.vue"
+    }
+}
diff --git a/components/lib/inlinemessage/style/InlineMessageStyle.js b/components/lib/inlinemessage/style/InlineMessageStyle.js
new file mode 100644
index 000000000..560e120e3
--- /dev/null
+++ b/components/lib/inlinemessage/style/InlineMessageStyle.js
@@ -0,0 +1,33 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-inline-message {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        vertical-align: top;
+    }
+
+    .p-inline-message-icon-only .p-inline-message-text {
+        visibility: hidden;
+        width: 0;
+    }
+
+    .p-fluid .p-inline-message {
+        display: flex;
+    }
+}
+`;
+
+const classes = {
+    root: ({ props, instance }) => ['p-inline-message p-component p-inline-message-' + props.severity, { 'p-inline-message-icon-only': !instance.$slots.default }],
+    icon: ({ props }) => ['p-inline-message-icon', props.icon],
+    text: 'p-inline-message-text'
+};
+
+export default BaseStyle.extend({
+    name: 'inlinemessage',
+    css,
+    classes
+});
diff --git a/components/lib/inlinemessage/style/package.json b/components/lib/inlinemessage/style/package.json
new file mode 100644
index 000000000..bd529329f
--- /dev/null
+++ b/components/lib/inlinemessage/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./inlinemessagestyle.cjs.js",
+    "module": "./inlinemessagestyle.esm.js",
+    "unpkg": "./inlinemessagestyle.min.js"
+}
diff --git a/components/lib/inplace/BaseInplace.vue b/components/lib/inplace/BaseInplace.vue
index 36e3503b9..f27a3080a 100644
--- a/components/lib/inplace/BaseInplace.vue
+++ b/components/lib/inplace/BaseInplace.vue
@@ -1,36 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-inplace .p-inplace-display {
-        display: inline;
-        cursor: pointer;
-    }
-    
-    .p-inplace .p-inplace-content {
-        display: inline;
-    }
-    
-    .p-fluid .p-inplace.p-inplace-closable .p-inplace-content {
-        display: flex;
-    }
-    
-    .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext {
-        flex: 1 1 auto;
-        width: 1%;
-    }
-}
-`;
-
-const classes = {
-    root: ({ props }) => ['p-inplace p-component', { 'p-inplace-closable': props.closable }],
-    display: ({ props }) => ['p-inplace-display', { 'p-disabled': props.disabled }],
-    content: 'p-inplace-content'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'inplace', manual: true });
+import InplaceStyle from 'primevue/inplace/style';
 
 export default {
     name: 'BaseInplace',
@@ -61,10 +31,7 @@ export default {
             default: null
         }
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: InplaceStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/inplace/package.json b/components/lib/inplace/package.json
index e64e208c1..469e9540f 100644
--- a/components/lib/inplace/package.json
+++ b/components/lib/inplace/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./inplace.cjs.js",
-  "module": "./inplace.esm.js",
-  "unpkg": "./inplace.min.js",
-  "types": "./Inplace.d.ts",
-  "browser": {
-    "./sfc": "./Inplace.vue"
-  }
-}
\ No newline at end of file
+    "main": "./inplace.cjs.js",
+    "module": "./inplace.esm.js",
+    "unpkg": "./inplace.min.js",
+    "types": "./Inplace.d.ts",
+    "browser": {
+        "./sfc": "./Inplace.vue"
+    }
+}
diff --git a/components/lib/inplace/style/InplaceStyle.js b/components/lib/inplace/style/InplaceStyle.js
new file mode 100644
index 000000000..f50576880
--- /dev/null
+++ b/components/lib/inplace/style/InplaceStyle.js
@@ -0,0 +1,35 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-inplace .p-inplace-display {
+        display: inline;
+        cursor: pointer;
+    }
+
+    .p-inplace .p-inplace-content {
+        display: inline;
+    }
+
+    .p-fluid .p-inplace.p-inplace-closable .p-inplace-content {
+        display: flex;
+    }
+
+    .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext {
+        flex: 1 1 auto;
+        width: 1%;
+    }
+}
+`;
+
+const classes = {
+    root: ({ props }) => ['p-inplace p-component', { 'p-inplace-closable': props.closable }],
+    display: ({ props }) => ['p-inplace-display', { 'p-disabled': props.disabled }],
+    content: 'p-inplace-content'
+};
+
+export default BaseStyle.extend({
+    name: 'inplace',
+    css,
+    classes
+});
diff --git a/components/lib/inplace/style/package.json b/components/lib/inplace/style/package.json
new file mode 100644
index 000000000..cf16a6ed0
--- /dev/null
+++ b/components/lib/inplace/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./inplacestyle.cjs.js",
+    "module": "./inplacestyle.esm.js",
+    "unpkg": "./inplacestyle.min.js"
+}
diff --git a/components/lib/inputmask/BaseInputMask.vue b/components/lib/inputmask/BaseInputMask.vue
index c5b698f18..44befb029 100644
--- a/components/lib/inputmask/BaseInputMask.vue
+++ b/components/lib/inputmask/BaseInputMask.vue
@@ -1,14 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-
-const classes = {
-    root: ({ instance }) => [
-        'p-inputmask p-inputtext p-component',
-        {
-            'p-filled': instance.filled
-        }
-    ]
-};
+import InputMaskStyle from 'primevue/inputmask/style';
 
 export default {
     name: 'BaseInputMask',
@@ -36,8 +28,6 @@ export default {
             default: false
         }
     },
-    css: {
-        classes
-    }
+    style: InputMaskStyle
 };
 </script>
diff --git a/components/lib/inputmask/package.json b/components/lib/inputmask/package.json
index 024546eb7..9aff9e7e5 100644
--- a/components/lib/inputmask/package.json
+++ b/components/lib/inputmask/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./inputmask.cjs.js",
-  "module": "./inputmask.esm.js",
-  "unpkg": "./inputmask.min.js",
-  "types": "./InputMask.d.ts",
-  "browser": {
-    "./sfc": "./InputMask.vue"
-  }
-}
\ No newline at end of file
+    "main": "./inputmask.cjs.js",
+    "module": "./inputmask.esm.js",
+    "unpkg": "./inputmask.min.js",
+    "types": "./InputMask.d.ts",
+    "browser": {
+        "./sfc": "./InputMask.vue"
+    }
+}
diff --git a/components/lib/inputmask/style/InputMaskStyle.js b/components/lib/inputmask/style/InputMaskStyle.js
new file mode 100644
index 000000000..6ee2dd37c
--- /dev/null
+++ b/components/lib/inputmask/style/InputMaskStyle.js
@@ -0,0 +1,16 @@
+import BaseStyle from 'primevue/base/style';
+
+const classes = {
+    root: ({ instance }) => [
+        'p-inputmask p-inputtext p-component',
+        {
+            'p-filled': instance.filled
+        }
+    ]
+};
+
+export default BaseStyle.extend({
+    name: 'inputmask',
+    classes,
+    loadStyle: () => {}
+});
diff --git a/components/lib/inputmask/style/package.json b/components/lib/inputmask/style/package.json
new file mode 100644
index 000000000..cfc753099
--- /dev/null
+++ b/components/lib/inputmask/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./inputmaskstyle.cjs.js",
+    "module": "./inputmaskstyle.esm.js",
+    "unpkg": "./inputmaskstyle.min.js"
+}
diff --git a/components/lib/inputnumber/BaseInputNumber.vue b/components/lib/inputnumber/BaseInputNumber.vue
index 866d66cf5..9f8e5a2eb 100644
--- a/components/lib/inputnumber/BaseInputNumber.vue
+++ b/components/lib/inputnumber/BaseInputNumber.vue
@@ -1,140 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-inputnumber {
-        display: inline-flex;
-    }
-    
-    .p-inputnumber-button {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex: 0 0 auto;
-    }
-    
-    .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label,
-    .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label {
-        display: none;
-    }
-    
-    .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-        padding: 0;
-    }
-    
-    .p-inputnumber-buttons-stacked .p-inputnumber-input {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-    }
-    
-    .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down {
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-        border-bottom-left-radius: 0;
-        padding: 0;
-    }
-    
-    .p-inputnumber-buttons-stacked .p-inputnumber-button-group {
-        display: flex;
-        flex-direction: column;
-    }
-    
-    .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button {
-        flex: 1 1 auto;
-    }
-    
-    .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up {
-        order: 3;
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-    }
-    
-    .p-inputnumber-buttons-horizontal .p-inputnumber-input {
-        order: 2;
-        border-radius: 0;
-    }
-    
-    .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down {
-        order: 1;
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-    }
-    
-    .p-inputnumber-buttons-vertical {
-        flex-direction: column;
-    }
-    
-    .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up {
-        order: 1;
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-        width: 100%;
-    }
-    
-    .p-inputnumber-buttons-vertical .p-inputnumber-input {
-        order: 2;
-        border-radius: 0;
-        text-align: center;
-    }
-    
-    .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down {
-        order: 3;
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-        width: 100%;
-    }
-    
-    .p-inputnumber-input {
-        flex: 1 1 auto;
-    }
-    
-    .p-fluid .p-inputnumber {
-        width: 100%;
-    }
-    
-    .p-fluid .p-inputnumber .p-inputnumber-input {
-        width: 1%;
-    }
-    
-    .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input {
-        width: 100%;
-    }
-}
-`;
-
-const classes = {
-    root: ({ instance, props }) => [
-        'p-inputnumber p-component p-inputwrapper',
-        {
-            'p-inputwrapper-filled': instance.filled,
-            'p-inputwrapper-focus': instance.focused,
-            'p-inputnumber-buttons-stacked': props.showButtons && props.buttonLayout === 'stacked',
-            'p-inputnumber-buttons-horizontal': props.showButtons && props.buttonLayout === 'horizontal',
-            'p-inputnumber-buttons-vertical': props.showButtons && props.buttonLayout === 'vertical'
-        }
-    ],
-    input: 'p-inputnumber-input',
-    buttonGroup: 'p-inputnumber-button-group',
-    incrementButton: ({ instance, props }) => [
-        'p-inputnumber-button p-inputnumber-button-up',
-        {
-            'p-disabled': props.showButtons && props.max !== null && instance.maxBoundry()
-        }
-    ],
-    decrementButton: ({ instance, props }) => [
-        'p-inputnumber-button p-inputnumber-button-down',
-        {
-            'p-disabled': props.showButtons && props.min !== null && instance.minBoundry()
-        }
-    ]
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'inputnumber', manual: true });
+import InputNumberStyle from 'primevue/inputnumber/style';
 
 export default {
     name: 'BaseInputNumber',
@@ -277,10 +143,7 @@ export default {
             default: null
         }
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: InputNumberStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/inputnumber/package.json b/components/lib/inputnumber/package.json
index fa7652483..7644a2e74 100644
--- a/components/lib/inputnumber/package.json
+++ b/components/lib/inputnumber/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./inputnumber.cjs.js",
-  "module": "./inputnumber.esm.js",
-  "unpkg": "./inputnumber.min.js",
-  "types": "./InputNumber.d.ts",
-  "browser": {
-    "./sfc": "./InputNumber.vue"
-  }
-}
\ No newline at end of file
+    "main": "./inputnumber.cjs.js",
+    "module": "./inputnumber.esm.js",
+    "unpkg": "./inputnumber.min.js",
+    "types": "./InputNumber.d.ts",
+    "browser": {
+        "./sfc": "./InputNumber.vue"
+    }
+}
diff --git a/components/lib/inputnumber/style/InputNumberStyle.js b/components/lib/inputnumber/style/InputNumberStyle.js
new file mode 100644
index 000000000..f67e31e84
--- /dev/null
+++ b/components/lib/inputnumber/style/InputNumberStyle.js
@@ -0,0 +1,139 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-inputnumber {
+        display: inline-flex;
+    }
+
+    .p-inputnumber-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex: 0 0 auto;
+    }
+
+    .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label,
+    .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label {
+        display: none;
+    }
+
+    .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        padding: 0;
+    }
+
+    .p-inputnumber-buttons-stacked .p-inputnumber-input {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+        border-bottom-left-radius: 0;
+        padding: 0;
+    }
+
+    .p-inputnumber-buttons-stacked .p-inputnumber-button-group {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button {
+        flex: 1 1 auto;
+    }
+
+    .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up {
+        order: 3;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+
+    .p-inputnumber-buttons-horizontal .p-inputnumber-input {
+        order: 2;
+        border-radius: 0;
+    }
+
+    .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down {
+        order: 1;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    .p-inputnumber-buttons-vertical {
+        flex-direction: column;
+    }
+
+    .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up {
+        order: 1;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        width: 100%;
+    }
+
+    .p-inputnumber-buttons-vertical .p-inputnumber-input {
+        order: 2;
+        border-radius: 0;
+        text-align: center;
+    }
+
+    .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down {
+        order: 3;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+        width: 100%;
+    }
+
+    .p-inputnumber-input {
+        flex: 1 1 auto;
+    }
+
+    .p-fluid .p-inputnumber {
+        width: 100%;
+    }
+
+    .p-fluid .p-inputnumber .p-inputnumber-input {
+        width: 1%;
+    }
+
+    .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input {
+        width: 100%;
+    }
+}
+`;
+
+const classes = {
+    root: ({ instance, props }) => [
+        'p-inputnumber p-component p-inputwrapper',
+        {
+            'p-inputwrapper-filled': instance.filled,
+            'p-inputwrapper-focus': instance.focused,
+            'p-inputnumber-buttons-stacked': props.showButtons && props.buttonLayout === 'stacked',
+            'p-inputnumber-buttons-horizontal': props.showButtons && props.buttonLayout === 'horizontal',
+            'p-inputnumber-buttons-vertical': props.showButtons && props.buttonLayout === 'vertical'
+        }
+    ],
+    input: 'p-inputnumber-input',
+    buttonGroup: 'p-inputnumber-button-group',
+    incrementButton: ({ instance, props }) => [
+        'p-inputnumber-button p-inputnumber-button-up',
+        {
+            'p-disabled': props.showButtons && props.max !== null && instance.maxBoundry()
+        }
+    ],
+    decrementButton: ({ instance, props }) => [
+        'p-inputnumber-button p-inputnumber-button-down',
+        {
+            'p-disabled': props.showButtons && props.min !== null && instance.minBoundry()
+        }
+    ]
+};
+
+export default BaseStyle.extend({
+    name: 'inputnumber',
+    css,
+    classes
+});
diff --git a/components/lib/inputnumber/style/package.json b/components/lib/inputnumber/style/package.json
new file mode 100644
index 000000000..90ad478ce
--- /dev/null
+++ b/components/lib/inputnumber/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./inputnumberstyle.cjs.js",
+    "module": "./inputnumberstyle.esm.js",
+    "unpkg": "./inputnumberstyle.min.js"
+}
diff --git a/components/lib/inputswitch/BaseInputSwitch.vue b/components/lib/inputswitch/BaseInputSwitch.vue
index f55a49ac4..917de3468 100644
--- a/components/lib/inputswitch/BaseInputSwitch.vue
+++ b/components/lib/inputswitch/BaseInputSwitch.vue
@@ -1,48 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-inputswitch {
-        display: inline-block;
-    }
-    
-    .p-inputswitch-slider {
-        position: absolute;
-        cursor: pointer;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        border: 1px solid transparent;
-    }
-    
-    .p-inputswitch-slider:before {
-        position: absolute;
-        content: '';
-        top: 50%;
-    }
-}
-`;
-
-const inlineStyles = {
-    root: { position: 'relative' }
-};
-
-const classes = {
-    root: ({ instance, props }) => [
-        'p-inputswitch p-component',
-        {
-            'p-inputswitch-checked': instance.checked,
-            'p-disabled': props.disabled,
-            'p-focus': instance.focused
-        }
-    ],
-    slider: 'p-inputswitch-slider'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'inputswitch', manual: true });
+import InputSwitchStyle from 'primevue/inputswitch/style';
 
 export default {
     name: 'BaseInputSwitch',
@@ -89,11 +47,7 @@ export default {
             default: null
         }
     },
-    css: {
-        classes,
-        inlineStyles,
-        loadStyle
-    },
+    style: InputSwitchStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/inputswitch/package.json b/components/lib/inputswitch/package.json
index 09fcb7004..9f0892f08 100644
--- a/components/lib/inputswitch/package.json
+++ b/components/lib/inputswitch/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./inputswitch.cjs.js",
-  "module": "./inputswitch.esm.js",
-  "unpkg": "./inputswitch.min.js",
-  "types": "./InputSwitch.d.ts",
-  "browser": {
-    "./sfc": "./InputSwitch.vue"
-  }
-}
\ No newline at end of file
+    "main": "./inputswitch.cjs.js",
+    "module": "./inputswitch.esm.js",
+    "unpkg": "./inputswitch.min.js",
+    "types": "./InputSwitch.d.ts",
+    "browser": {
+        "./sfc": "./InputSwitch.vue"
+    }
+}
diff --git a/components/lib/inputswitch/style/InputSwitchStyle.js b/components/lib/inputswitch/style/InputSwitchStyle.js
new file mode 100644
index 000000000..49b3049d2
--- /dev/null
+++ b/components/lib/inputswitch/style/InputSwitchStyle.js
@@ -0,0 +1,48 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-inputswitch {
+        display: inline-block;
+    }
+
+    .p-inputswitch-slider {
+        position: absolute;
+        cursor: pointer;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        border: 1px solid transparent;
+    }
+
+    .p-inputswitch-slider:before {
+        position: absolute;
+        content: '';
+        top: 50%;
+    }
+}
+`;
+
+const inlineStyles = {
+    root: { position: 'relative' }
+};
+
+const classes = {
+    root: ({ instance, props }) => [
+        'p-inputswitch p-component',
+        {
+            'p-inputswitch-checked': instance.checked,
+            'p-disabled': props.disabled,
+            'p-focus': instance.focused
+        }
+    ],
+    slider: 'p-inputswitch-slider'
+};
+
+export default BaseStyle.extend({
+    name: 'inputswitch',
+    css,
+    classes,
+    inlineStyles
+});
diff --git a/components/lib/inputswitch/style/package.json b/components/lib/inputswitch/style/package.json
new file mode 100644
index 000000000..df71ab922
--- /dev/null
+++ b/components/lib/inputswitch/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./inputswitchstyle.cjs.js",
+    "module": "./inputswitchstyle.esm.js",
+    "unpkg": "./inputswitchstyle.min.js"
+}
diff --git a/components/lib/inputtext/BaseInputText.vue b/components/lib/inputtext/BaseInputText.vue
index 816e8fcfd..d3cf25e52 100644
--- a/components/lib/inputtext/BaseInputText.vue
+++ b/components/lib/inputtext/BaseInputText.vue
@@ -1,16 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-
-const classes = {
-    root: ({ instance, props }) => [
-        'p-inputtext p-component',
-        {
-            'p-filled': instance.filled,
-            'p-inputtext-sm': props.size === 'small',
-            'p-inputtext-lg': props.size === 'large'
-        }
-    ]
-};
+import InputTextStyle from 'primevue/inputtext/style';
 
 export default {
     name: 'BaseInputText',
@@ -22,9 +12,7 @@ export default {
             default: null
         }
     },
-    css: {
-        classes
-    },
+    style: InputTextStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/inputtext/package.json b/components/lib/inputtext/package.json
index 43d4e2f56..29376525b 100644
--- a/components/lib/inputtext/package.json
+++ b/components/lib/inputtext/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./inputtext.cjs.js",
-  "module": "./inputtext.esm.js",
-  "unpkg": "./inputtext.min.js",
-  "types": "./InputText.d.ts",
-  "browser": {
-    "./sfc": "./InputText.vue"
-  }
-}
\ No newline at end of file
+    "main": "./inputtext.cjs.js",
+    "module": "./inputtext.esm.js",
+    "unpkg": "./inputtext.min.js",
+    "types": "./InputText.d.ts",
+    "browser": {
+        "./sfc": "./InputText.vue"
+    }
+}
diff --git a/components/lib/inputtext/style/InputTextStyle.js b/components/lib/inputtext/style/InputTextStyle.js
new file mode 100644
index 000000000..c55acf520
--- /dev/null
+++ b/components/lib/inputtext/style/InputTextStyle.js
@@ -0,0 +1,18 @@
+import BaseStyle from 'primevue/base/style';
+
+const classes = {
+    root: ({ instance, props }) => [
+        'p-inputtext p-component',
+        {
+            'p-filled': instance.filled,
+            'p-inputtext-sm': props.size === 'small',
+            'p-inputtext-lg': props.size === 'large'
+        }
+    ]
+};
+
+export default BaseStyle.extend({
+    name: 'inputtext',
+    classes,
+    loadStyle: () => {}
+});
diff --git a/components/lib/inputtext/style/package.json b/components/lib/inputtext/style/package.json
new file mode 100644
index 000000000..ad4b7258e
--- /dev/null
+++ b/components/lib/inputtext/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./inputtextstyle.cjs.js",
+    "module": "./inputtextstyle.esm.js",
+    "unpkg": "./inputtextstyle.min.js"
+}
diff --git a/components/lib/knob/BaseKnob.vue b/components/lib/knob/BaseKnob.vue
index 9cab31dd9..a01e22de1 100644
--- a/components/lib/knob/BaseKnob.vue
+++ b/components/lib/knob/BaseKnob.vue
@@ -1,38 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@keyframes dash-frame {
-    100% {
-        stroke-dashoffset: 0;
-    }
-}
-@layer primevue {
-    .p-knob-range {
-        fill: none;
-        transition: stroke 0.1s ease-in;
-    }
-    .p-knob-value {
-        animation-name: dash-frame;
-        animation-fill-mode: forwards;
-        fill: none;
-    }
-    .p-knob-text {
-        font-size: 1.3rem;
-        text-align: center;
-    }
-}
-`;
-
-const classes = {
-    root: ({ props }) => ['p-knob p-component', { 'p-disabled': props.disabled }],
-    range: 'p-knob-range',
-    value: 'p-knob-value',
-    label: 'p-knob-text'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'knob', manual: true });
+import KnobStyle from 'primevue/knob/style';
 
 export default {
     name: 'BaseKnob',
@@ -103,10 +71,7 @@ export default {
             default: null
         }
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: KnobStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/knob/package.json b/components/lib/knob/package.json
index 1f1bab14b..83f8d4708 100644
--- a/components/lib/knob/package.json
+++ b/components/lib/knob/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./knob.cjs.js",
-  "module": "./knob.esm.js",
-  "unpkg": "./knob.min.js",
-  "types": "./Knob.d.ts",
-  "browser": {
-    "./sfc": "./Knob.vue"
-  }
-}
\ No newline at end of file
+    "main": "./knob.cjs.js",
+    "module": "./knob.esm.js",
+    "unpkg": "./knob.min.js",
+    "types": "./Knob.d.ts",
+    "browser": {
+        "./sfc": "./Knob.vue"
+    }
+}
diff --git a/components/lib/knob/style/KnobStyle.js b/components/lib/knob/style/KnobStyle.js
new file mode 100644
index 000000000..53b8845f8
--- /dev/null
+++ b/components/lib/knob/style/KnobStyle.js
@@ -0,0 +1,37 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@keyframes dash-frame {
+    100% {
+        stroke-dashoffset: 0;
+    }
+}
+@layer primevue {
+    .p-knob-range {
+        fill: none;
+        transition: stroke 0.1s ease-in;
+    }
+    .p-knob-value {
+        animation-name: dash-frame;
+        animation-fill-mode: forwards;
+        fill: none;
+    }
+    .p-knob-text {
+        font-size: 1.3rem;
+        text-align: center;
+    }
+}
+`;
+
+const classes = {
+    root: ({ props }) => ['p-knob p-component', { 'p-disabled': props.disabled }],
+    range: 'p-knob-range',
+    value: 'p-knob-value',
+    label: 'p-knob-text'
+};
+
+export default BaseStyle.extend({
+    name: 'knob',
+    css,
+    classes
+});
diff --git a/components/lib/knob/style/package.json b/components/lib/knob/style/package.json
new file mode 100644
index 000000000..209595d82
--- /dev/null
+++ b/components/lib/knob/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./knobstyle.cjs.js",
+    "module": "./knobstyle.esm.js",
+    "unpkg": "./knobstyle.min.js"
+}
diff --git a/components/lib/listbox/BaseListbox.vue b/components/lib/listbox/BaseListbox.vue
index 8badb6748..4cf0f4ffd 100644
--- a/components/lib/listbox/BaseListbox.vue
+++ b/components/lib/listbox/BaseListbox.vue
@@ -1,72 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-listbox-list-wrapper {
-        overflow: auto;
-    }
-    
-    .p-listbox-list {
-        list-style-type: none;
-        margin: 0;
-        padding: 0;
-    }
-    
-    .p-listbox-item {
-        cursor: pointer;
-        position: relative;
-        overflow: hidden;
-    }
-    
-    .p-listbox-item-group {
-        cursor: auto;
-    }
-    
-    .p-listbox-filter-container {
-        position: relative;
-    }
-    
-    .p-listbox-filter-icon {
-        position: absolute;
-        top: 50%;
-        margin-top: -0.5rem;
-    }
-    
-    .p-listbox-filter {
-        width: 100%;
-    }
-}
-`;
-
-const classes = {
-    root: ({ instance, props }) => [
-        'p-listbox p-component',
-        {
-            'p-focus': instance.focused,
-            'p-disabled': props.disabled
-        }
-    ],
-    header: 'p-listbox-header',
-    filterContainer: 'p-listbox-filter-container',
-    filterInput: 'p-listbox-filter p-inputtext p-component',
-    filterIcon: 'p-listbox-filter-icon',
-    wrapper: 'p-listbox-list-wrapper',
-    list: 'p-listbox-list',
-    itemGroup: 'p-listbox-item-group',
-    item: ({ instance, option, index, getItemOptions }) => [
-        'p-listbox-item',
-        {
-            'p-highlight': instance.isSelected(option),
-            'p-focus': instance.focusedOptionIndex === instance.getOptionIndex(index, getItemOptions),
-            'p-disabled': instance.isOptionDisabled(option)
-        }
-    ],
-    emptyMessage: 'p-listbox-empty-message'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'listbox', manual: true });
+import ListboxStyle from 'primevue/listbox/style';
 
 export default {
     name: 'BaseListbox',
@@ -145,10 +79,7 @@ export default {
             default: null
         }
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: ListboxStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/listbox/package.json b/components/lib/listbox/package.json
index de768db0e..c74ffb85c 100644
--- a/components/lib/listbox/package.json
+++ b/components/lib/listbox/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./listbox.cjs.js",
-  "module": "./listbox.esm.js",
-  "unpkg": "./listbox.min.js",
-  "types": "./Listbox.d.ts",
-  "browser": {
-    "./sfc": "./Listbox.vue"
-  }
-}
\ No newline at end of file
+    "main": "./listbox.cjs.js",
+    "module": "./listbox.esm.js",
+    "unpkg": "./listbox.min.js",
+    "types": "./Listbox.d.ts",
+    "browser": {
+        "./sfc": "./Listbox.vue"
+    }
+}
diff --git a/components/lib/listbox/style/ListboxStyle.js b/components/lib/listbox/style/ListboxStyle.js
new file mode 100644
index 000000000..ee8b73115
--- /dev/null
+++ b/components/lib/listbox/style/ListboxStyle.js
@@ -0,0 +1,71 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-listbox-list-wrapper {
+        overflow: auto;
+    }
+
+    .p-listbox-list {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    .p-listbox-item {
+        cursor: pointer;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .p-listbox-item-group {
+        cursor: auto;
+    }
+
+    .p-listbox-filter-container {
+        position: relative;
+    }
+
+    .p-listbox-filter-icon {
+        position: absolute;
+        top: 50%;
+        margin-top: -0.5rem;
+    }
+
+    .p-listbox-filter {
+        width: 100%;
+    }
+}
+`;
+
+const classes = {
+    root: ({ instance, props }) => [
+        'p-listbox p-component',
+        {
+            'p-focus': instance.focused,
+            'p-disabled': props.disabled
+        }
+    ],
+    header: 'p-listbox-header',
+    filterContainer: 'p-listbox-filter-container',
+    filterInput: 'p-listbox-filter p-inputtext p-component',
+    filterIcon: 'p-listbox-filter-icon',
+    wrapper: 'p-listbox-list-wrapper',
+    list: 'p-listbox-list',
+    itemGroup: 'p-listbox-item-group',
+    item: ({ instance, option, index, getItemOptions }) => [
+        'p-listbox-item',
+        {
+            'p-highlight': instance.isSelected(option),
+            'p-focus': instance.focusedOptionIndex === instance.getOptionIndex(index, getItemOptions),
+            'p-disabled': instance.isOptionDisabled(option)
+        }
+    ],
+    emptyMessage: 'p-listbox-empty-message'
+};
+
+export default BaseStyle.extend({
+    name: 'listbox',
+    css,
+    classes
+});
diff --git a/components/lib/listbox/style/package.json b/components/lib/listbox/style/package.json
new file mode 100644
index 000000000..09273d27b
--- /dev/null
+++ b/components/lib/listbox/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./listboxstyle.cjs.js",
+    "module": "./listboxstyle.esm.js",
+    "unpkg": "./listboxstyle.min.js"
+}
diff --git a/components/lib/megamenu/BaseMegaMenu.vue b/components/lib/megamenu/BaseMegaMenu.vue
index 22d9eb7dd..ee9220551 100644
--- a/components/lib/megamenu/BaseMegaMenu.vue
+++ b/components/lib/megamenu/BaseMegaMenu.vue
@@ -1,197 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-megamenu {
-        display: flex;
-    }
-    
-    .p-megamenu-root-list {
-        margin: 0;
-        padding: 0;
-        list-style: none;
-    }
-    
-    .p-megamenu-root-list > .p-menuitem {
-        position: relative;
-    }
-    
-    .p-megamenu .p-menuitem-link {
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        text-decoration: none;
-        overflow: hidden;
-        position: relative;
-    }
-    
-    .p-megamenu .p-menuitem-text {
-        line-height: 1;
-    }
-    
-    .p-megamenu-panel {
-        display: none;
-        position: absolute;
-        width: auto;
-        z-index: 1;
-    }
-    
-    .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel {
-        display: block;
-    }
-    
-    .p-megamenu-submenu {
-        margin: 0;
-        padding: 0;
-        list-style: none;
-    }
-    
-    /* Horizontal */
-    .p-megamenu-horizontal {
-        align-items: center;
-    }
-    
-    .p-megamenu-horizontal .p-megamenu-root-list {
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-    }
-    
-    .p-megamenu-horizontal .p-megamenu-end {
-        margin-left: auto;
-        align-self: center;
-    }
-    
-    /* Vertical */
-    .p-megamenu-vertical {
-        flex-direction: column;
-    }
-    
-    .p-megamenu-vertical .p-megamenu-root-list {
-        flex-direction: column;
-    }
-    
-    .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel {
-        left: 100%;
-        top: 0;
-    }
-    
-    .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
-        margin-left: auto;
-    }
-    
-    .p-megamenu-grid {
-        display: flex;
-    }
-    
-    .p-megamenu-col-2,
-    .p-megamenu-col-3,
-    .p-megamenu-col-4,
-    .p-megamenu-col-6,
-    .p-megamenu-col-12 {
-        flex: 0 0 auto;
-        padding: 0.5rem;
-    }
-    
-    .p-megamenu-col-2 {
-        width: 16.6667%;
-    }
-    
-    .p-megamenu-col-3 {
-        width: 25%;
-    }
-    
-    .p-megamenu-col-4 {
-        width: 33.3333%;
-    }
-    
-    .p-megamenu-col-6 {
-        width: 50%;
-    }
-    
-    .p-megamenu-col-12 {
-        width: 100%;
-    }
-}
-`;
-
-const inlineStyles = {
-    submenu: ({ instance, processedItem }) => ({ display: instance.isItemActive(processedItem) ? 'block' : 'none' })
-};
-
-const classes = {
-    root: ({ instance }) => [
-        'p-megamenu p-component',
-        {
-            'p-megamenu-horizontal': instance.horizontal,
-            'p-megamenu-vertical': instance.vertical
-        }
-    ],
-    start: 'p-megamenu-start',
-    menu: 'p-megamenu-root-list',
-    submenuHeader: ({ instance, processedItem }) => [
-        'p-megamenu-submenu-header p-submenu-header',
-        {
-            'p-disabled': instance.isItemDisabled(processedItem)
-        }
-    ],
-    menuitem: ({ instance, processedItem }) => [
-        'p-menuitem',
-        {
-            'p-menuitem-active p-highlight': instance.isItemActive(processedItem),
-            'p-focus': instance.isItemFocused(processedItem),
-            'p-disabled': instance.isItemDisabled(processedItem)
-        }
-    ],
-    content: 'p-menuitem-content',
-    action: ({ props, isActive, isExactActive }) => [
-        'p-menuitem-link',
-        {
-            'router-link-active': isActive,
-            'router-link-active-exact': props.exact && isExactActive
-        }
-    ],
-    icon: 'p-menuitem-icon',
-    label: 'p-menuitem-text',
-    submenuIcon: 'p-submenu-icon',
-    panel: 'p-megamenu-panel',
-    grid: 'p-megamenu-grid',
-    column: ({ instance, processedItem }) => {
-        let length = instance.isItemGroup(processedItem) ? processedItem.items.length : 0;
-        let columnClass;
-
-        switch (length) {
-            case 2:
-                columnClass = 'p-megamenu-col-6';
-                break;
-
-            case 3:
-                columnClass = 'p-megamenu-col-4';
-                break;
-
-            case 4:
-                columnClass = 'p-megamenu-col-3';
-                break;
-
-            case 6:
-                columnClass = 'p-megamenu-col-2';
-                break;
-
-            default:
-                columnClass = 'p-megamenu-col-12';
-                break;
-        }
-
-        return columnClass;
-    },
-    submenu: 'p-submenu-list p-megamenu-submenu',
-    separator: 'p-menuitem-separator',
-    end: 'p-megamenu-end'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'megamenu', manual: true });
+import MegaMenuStyle from 'primevue/megamenu/style';
 
 export default {
     name: 'BaseMegaMenu',
@@ -226,11 +35,7 @@ export default {
             default: null
         }
     },
-    css: {
-        classes,
-        inlineStyles,
-        loadStyle
-    },
+    style: MegaMenuStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/megamenu/package.json b/components/lib/megamenu/package.json
index 393c90462..2b06885ee 100644
--- a/components/lib/megamenu/package.json
+++ b/components/lib/megamenu/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./megamenu.cjs.js",
-  "module": "./megamenu.esm.js",
-  "unpkg": "./megamenu.min.js",
-  "types": "./MegaMenu.d.ts",
-  "browser": {
-    "./sfc": "./MegaMenu.vue"
-  }
-}
\ No newline at end of file
+    "main": "./megamenu.cjs.js",
+    "module": "./megamenu.esm.js",
+    "unpkg": "./megamenu.min.js",
+    "types": "./MegaMenu.d.ts",
+    "browser": {
+        "./sfc": "./MegaMenu.vue"
+    }
+}
diff --git a/components/lib/megamenu/style/MegaMenuStyle.js b/components/lib/megamenu/style/MegaMenuStyle.js
new file mode 100644
index 000000000..6d1a6eb07
--- /dev/null
+++ b/components/lib/megamenu/style/MegaMenuStyle.js
@@ -0,0 +1,197 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-megamenu {
+        display: flex;
+    }
+
+    .p-megamenu-root-list {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    .p-megamenu-root-list > .p-menuitem {
+        position: relative;
+    }
+
+    .p-megamenu .p-menuitem-link {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        text-decoration: none;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .p-megamenu .p-menuitem-text {
+        line-height: 1;
+    }
+
+    .p-megamenu-panel {
+        display: none;
+        position: absolute;
+        width: auto;
+        z-index: 1;
+    }
+
+    .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel {
+        display: block;
+    }
+
+    .p-megamenu-submenu {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    /* Horizontal */
+    .p-megamenu-horizontal {
+        align-items: center;
+    }
+
+    .p-megamenu-horizontal .p-megamenu-root-list {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+    }
+
+    .p-megamenu-horizontal .p-megamenu-end {
+        margin-left: auto;
+        align-self: center;
+    }
+
+    /* Vertical */
+    .p-megamenu-vertical {
+        flex-direction: column;
+    }
+
+    .p-megamenu-vertical .p-megamenu-root-list {
+        flex-direction: column;
+    }
+
+    .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel {
+        left: 100%;
+        top: 0;
+    }
+
+    .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+        margin-left: auto;
+    }
+
+    .p-megamenu-grid {
+        display: flex;
+    }
+
+    .p-megamenu-col-2,
+    .p-megamenu-col-3,
+    .p-megamenu-col-4,
+    .p-megamenu-col-6,
+    .p-megamenu-col-12 {
+        flex: 0 0 auto;
+        padding: 0.5rem;
+    }
+
+    .p-megamenu-col-2 {
+        width: 16.6667%;
+    }
+
+    .p-megamenu-col-3 {
+        width: 25%;
+    }
+
+    .p-megamenu-col-4 {
+        width: 33.3333%;
+    }
+
+    .p-megamenu-col-6 {
+        width: 50%;
+    }
+
+    .p-megamenu-col-12 {
+        width: 100%;
+    }
+}
+`;
+
+const inlineStyles = {
+    submenu: ({ instance, processedItem }) => ({ display: instance.isItemActive(processedItem) ? 'block' : 'none' })
+};
+
+const classes = {
+    root: ({ instance }) => [
+        'p-megamenu p-component',
+        {
+            'p-megamenu-horizontal': instance.horizontal,
+            'p-megamenu-vertical': instance.vertical
+        }
+    ],
+    start: 'p-megamenu-start',
+    menu: 'p-megamenu-root-list',
+    submenuHeader: ({ instance, processedItem }) => [
+        'p-megamenu-submenu-header p-submenu-header',
+        {
+            'p-disabled': instance.isItemDisabled(processedItem)
+        }
+    ],
+    menuitem: ({ instance, processedItem }) => [
+        'p-menuitem',
+        {
+            'p-menuitem-active p-highlight': instance.isItemActive(processedItem),
+            'p-focus': instance.isItemFocused(processedItem),
+            'p-disabled': instance.isItemDisabled(processedItem)
+        }
+    ],
+    content: 'p-menuitem-content',
+    action: ({ props, isActive, isExactActive }) => [
+        'p-menuitem-link',
+        {
+            'router-link-active': isActive,
+            'router-link-active-exact': props.exact && isExactActive
+        }
+    ],
+    icon: 'p-menuitem-icon',
+    label: 'p-menuitem-text',
+    submenuIcon: 'p-submenu-icon',
+    panel: 'p-megamenu-panel',
+    grid: 'p-megamenu-grid',
+    column: ({ instance, processedItem }) => {
+        let length = instance.isItemGroup(processedItem) ? processedItem.items.length : 0;
+        let columnClass;
+
+        switch (length) {
+            case 2:
+                columnClass = 'p-megamenu-col-6';
+                break;
+
+            case 3:
+                columnClass = 'p-megamenu-col-4';
+                break;
+
+            case 4:
+                columnClass = 'p-megamenu-col-3';
+                break;
+
+            case 6:
+                columnClass = 'p-megamenu-col-2';
+                break;
+
+            default:
+                columnClass = 'p-megamenu-col-12';
+                break;
+        }
+
+        return columnClass;
+    },
+    submenu: 'p-submenu-list p-megamenu-submenu',
+    separator: 'p-menuitem-separator',
+    end: 'p-megamenu-end'
+};
+
+export default BaseStyle.extend({
+    name: 'megamenu',
+    css,
+    classes,
+    inlineStyles
+});
diff --git a/components/lib/megamenu/style/package.json b/components/lib/megamenu/style/package.json
new file mode 100644
index 000000000..dd352a13b
--- /dev/null
+++ b/components/lib/megamenu/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./megamenustyle.cjs.js",
+    "module": "./megamenustyle.esm.js",
+    "unpkg": "./megamenustyle.min.js"
+}
diff --git a/components/lib/menu/BaseMenu.vue b/components/lib/menu/BaseMenu.vue
index 8f556ab52..62767bb8f 100644
--- a/components/lib/menu/BaseMenu.vue
+++ b/components/lib/menu/BaseMenu.vue
@@ -1,64 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-menu ul {
-        margin: 0;
-        padding: 0;
-        list-style: none;
-    }
-    
-    .p-menu .p-menuitem-link {
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        text-decoration: none;
-        overflow: hidden;
-        position: relative;
-    }
-    
-    .p-menu .p-menuitem-text {
-        line-height: 1;
-    }
-}
-`;
-
-const classes = {
-    root: ({ instance, props }) => [
-        'p-menu p-component',
-        {
-            'p-menu-overlay': props.popup,
-            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
-        }
-    ],
-    start: 'p-menu-start',
-    menu: 'p-menu-list p-reset',
-    submenuHeader: 'p-submenu-header',
-    separator: 'p-menuitem-separator',
-    end: 'p-menu-end',
-    menuitem: ({ instance }) => [
-        'p-menuitem',
-        {
-            'p-focus': instance.id === instance.focusedOptionId,
-            'p-disabled': instance.disabled()
-        }
-    ],
-    content: 'p-menuitem-content',
-    action: ({ props, isActive, isExactActive }) => [
-        'p-menuitem-link',
-        {
-            'router-link-active': isActive,
-            'router-link-active-exact': props.exact && isExactActive
-        }
-    ],
-    icon: 'p-menuitem-icon',
-    label: 'p-menuitem-text'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'menu', manual: true });
+import MenuStyle from 'primevue/menu/style';
 
 export default {
     name: 'BaseMenu',
@@ -101,10 +43,7 @@ export default {
             default: null
         }
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: MenuStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/menu/package.json b/components/lib/menu/package.json
index c06306291..36e811829 100644
--- a/components/lib/menu/package.json
+++ b/components/lib/menu/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./menu.cjs.js",
-  "module": "./menu.esm.js",
-  "unpkg": "./menu.min.js",
-  "types": "./Menu.d.ts",
-  "browser": {
-    "./sfc": "./Menu.vue"
-  }
-}
\ No newline at end of file
+    "main": "./menu.cjs.js",
+    "module": "./menu.esm.js",
+    "unpkg": "./menu.min.js",
+    "types": "./Menu.d.ts",
+    "browser": {
+        "./sfc": "./Menu.vue"
+    }
+}
diff --git a/components/lib/menu/style/MenuStyle.js b/components/lib/menu/style/MenuStyle.js
new file mode 100644
index 000000000..7b483cd22
--- /dev/null
+++ b/components/lib/menu/style/MenuStyle.js
@@ -0,0 +1,63 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-menu ul {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    .p-menu .p-menuitem-link {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        text-decoration: none;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .p-menu .p-menuitem-text {
+        line-height: 1;
+    }
+}
+`;
+
+const classes = {
+    root: ({ instance, props }) => [
+        'p-menu p-component',
+        {
+            'p-menu-overlay': props.popup,
+            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
+            'p-ripple-disabled': instance.$primevue.config.ripple === false
+        }
+    ],
+    start: 'p-menu-start',
+    menu: 'p-menu-list p-reset',
+    submenuHeader: 'p-submenu-header',
+    separator: 'p-menuitem-separator',
+    end: 'p-menu-end',
+    menuitem: ({ instance }) => [
+        'p-menuitem',
+        {
+            'p-focus': instance.id === instance.focusedOptionId,
+            'p-disabled': instance.disabled()
+        }
+    ],
+    content: 'p-menuitem-content',
+    action: ({ props, isActive, isExactActive }) => [
+        'p-menuitem-link',
+        {
+            'router-link-active': isActive,
+            'router-link-active-exact': props.exact && isExactActive
+        }
+    ],
+    icon: 'p-menuitem-icon',
+    label: 'p-menuitem-text'
+};
+
+export default BaseStyle.extend({
+    name: 'menu',
+    css,
+    classes
+});
diff --git a/components/lib/menu/style/package.json b/components/lib/menu/style/package.json
new file mode 100644
index 000000000..29718ea15
--- /dev/null
+++ b/components/lib/menu/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./menustyle.cjs.js",
+    "module": "./menustyle.esm.js",
+    "unpkg": "./menustyle.min.js"
+}
diff --git a/components/lib/menubar/BaseMenubar.vue b/components/lib/menubar/BaseMenubar.vue
index ae164a153..e346ed928 100644
--- a/components/lib/menubar/BaseMenubar.vue
+++ b/components/lib/menubar/BaseMenubar.vue
@@ -1,122 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-menubar {
-        display: flex;
-        align-items: center;
-    }
-    
-    .p-menubar ul {
-        margin: 0;
-        padding: 0;
-        list-style: none;
-    }
-    
-    .p-menubar .p-menuitem-link {
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        text-decoration: none;
-        overflow: hidden;
-        position: relative;
-    }
-    
-    .p-menubar .p-menuitem-text {
-        line-height: 1;
-    }
-    
-    .p-menubar .p-menuitem {
-        position: relative;
-    }
-    
-    .p-menubar-root-list {
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-    }
-    
-    .p-menubar-root-list > li ul {
-        display: none;
-        z-index: 1;
-    }
-    
-    .p-menubar-root-list > .p-menuitem-active > .p-submenu-list {
-        display: block;
-    }
-    
-    .p-menubar .p-submenu-list {
-        display: none;
-        position: absolute;
-        z-index: 1;
-    }
-    
-    .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list {
-        display: block;
-        left: 100%;
-        top: 0;
-    }
-    
-    .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-        margin-left: auto;
-    }
-    
-    .p-menubar .p-menubar-end {
-        margin-left: auto;
-        align-self: center;
-    }
-    
-    .p-menubar-button {
-        display: none;
-        cursor: pointer;
-        align-items: center;
-        justify-content: center;
-        text-decoration: none;
-    }
-}
-`;
-
-const inlineStyles = {
-    submenu: ({ instance, processedItem }) => ({ display: instance.isItemActive(processedItem) ? 'block' : 'none' })
-};
-
-const classes = {
-    root: ({ instance }) => [
-        'p-menubar p-component',
-        {
-            'p-menubar-mobile-active': instance.mobileActive
-        }
-    ],
-    start: 'p-menubar-start',
-    button: 'p-menubar-button',
-    menu: 'p-menubar-root-list',
-    menuitem: ({ instance, processedItem }) => [
-        'p-menuitem',
-        {
-            'p-menuitem-active p-highlight': instance.isItemActive(processedItem),
-            'p-focus': instance.isItemFocused(processedItem),
-            'p-disabled': instance.isItemDisabled(processedItem)
-        }
-    ],
-    content: 'p-menuitem-content',
-    action: ({ props, isActive, isExactActive }) => [
-        'p-menuitem-link',
-        {
-            'router-link-active': isActive,
-            'router-link-active-exact': props.exact && isExactActive
-        }
-    ],
-    icon: 'p-menuitem-icon',
-    label: 'p-menuitem-text',
-    submenuIcon: 'p-submenu-icon',
-    submenu: 'p-submenu-list',
-    separator: 'p-menuitem-separator',
-    end: 'p-menubar-end'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'menubar', manual: true });
+import MenubarStyle from 'primevue/menubar/style';
 
 export default {
     name: 'BaseMenubar',
@@ -143,11 +27,7 @@ export default {
             default: null
         }
     },
-    css: {
-        classes,
-        inlineStyles,
-        loadStyle
-    },
+    style: MenubarStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/menubar/package.json b/components/lib/menubar/package.json
index 594b6a12f..91c006121 100644
--- a/components/lib/menubar/package.json
+++ b/components/lib/menubar/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./menubar.cjs.js",
-  "module": "./menubar.esm.js",
-  "unpkg": "./menubar.min.js",
-  "types": "./Menubar.d.ts",
-  "browser": {
-    "./sfc": "./Menubar.vue"
-  }
-}
\ No newline at end of file
+    "main": "./menubar.cjs.js",
+    "module": "./menubar.esm.js",
+    "unpkg": "./menubar.min.js",
+    "types": "./Menubar.d.ts",
+    "browser": {
+        "./sfc": "./Menubar.vue"
+    }
+}
diff --git a/components/lib/menubar/style/MenubarStyle.js b/components/lib/menubar/style/MenubarStyle.js
new file mode 100644
index 000000000..65df3e96c
--- /dev/null
+++ b/components/lib/menubar/style/MenubarStyle.js
@@ -0,0 +1,122 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-menubar {
+        display: flex;
+        align-items: center;
+    }
+
+    .p-menubar ul {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    .p-menubar .p-menuitem-link {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        text-decoration: none;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .p-menubar .p-menuitem-text {
+        line-height: 1;
+    }
+
+    .p-menubar .p-menuitem {
+        position: relative;
+    }
+
+    .p-menubar-root-list {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+    }
+
+    .p-menubar-root-list > li ul {
+        display: none;
+        z-index: 1;
+    }
+
+    .p-menubar-root-list > .p-menuitem-active > .p-submenu-list {
+        display: block;
+    }
+
+    .p-menubar .p-submenu-list {
+        display: none;
+        position: absolute;
+        z-index: 1;
+    }
+
+    .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list {
+        display: block;
+        left: 100%;
+        top: 0;
+    }
+
+    .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+        margin-left: auto;
+    }
+
+    .p-menubar .p-menubar-end {
+        margin-left: auto;
+        align-self: center;
+    }
+
+    .p-menubar-button {
+        display: none;
+        cursor: pointer;
+        align-items: center;
+        justify-content: center;
+        text-decoration: none;
+    }
+}
+`;
+
+const inlineStyles = {
+    submenu: ({ instance, processedItem }) => ({ display: instance.isItemActive(processedItem) ? 'block' : 'none' })
+};
+
+const classes = {
+    root: ({ instance }) => [
+        'p-menubar p-component',
+        {
+            'p-menubar-mobile-active': instance.mobileActive
+        }
+    ],
+    start: 'p-menubar-start',
+    button: 'p-menubar-button',
+    menu: 'p-menubar-root-list',
+    menuitem: ({ instance, processedItem }) => [
+        'p-menuitem',
+        {
+            'p-menuitem-active p-highlight': instance.isItemActive(processedItem),
+            'p-focus': instance.isItemFocused(processedItem),
+            'p-disabled': instance.isItemDisabled(processedItem)
+        }
+    ],
+    content: 'p-menuitem-content',
+    action: ({ props, isActive, isExactActive }) => [
+        'p-menuitem-link',
+        {
+            'router-link-active': isActive,
+            'router-link-active-exact': props.exact && isExactActive
+        }
+    ],
+    icon: 'p-menuitem-icon',
+    label: 'p-menuitem-text',
+    submenuIcon: 'p-submenu-icon',
+    submenu: 'p-submenu-list',
+    separator: 'p-menuitem-separator',
+    end: 'p-menubar-end'
+};
+
+export default BaseStyle.extend({
+    name: 'menubar',
+    css,
+    classes,
+    inlineStyles
+});
diff --git a/components/lib/menubar/style/package.json b/components/lib/menubar/style/package.json
new file mode 100644
index 000000000..e372e6f76
--- /dev/null
+++ b/components/lib/menubar/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./menubarstyle.cjs.js",
+    "module": "./menubarstyle.esm.js",
+    "unpkg": "./menubarstyle.min.js"
+}
diff --git a/components/lib/message/BaseMessage.vue b/components/lib/message/BaseMessage.vue
index f11279a2a..cb8fe4cc6 100644
--- a/components/lib/message/BaseMessage.vue
+++ b/components/lib/message/BaseMessage.vue
@@ -1,70 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-message-wrapper {
-        display: flex;
-        align-items: center;
-    }
-    
-    .p-message-icon {
-        flex-shrink: 0;
-    }
-    
-    .p-message-close {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0; 
-    }
-    
-    .p-message-close.p-link {
-        margin-left: auto;
-        overflow: hidden;
-        position: relative;
-    }
-    
-    .p-message-enter-from {
-        opacity: 0;
-    }
-    
-    .p-message-enter-active {
-        transition: opacity 0.3s;
-    }
-    
-    .p-message.p-message-leave-from {
-        max-height: 1000px;
-    }
-    
-    .p-message.p-message-leave-to {
-        max-height: 0;
-        opacity: 0;
-        margin: 0 !important;
-    }
-    
-    .p-message-leave-active {
-        overflow: hidden;
-        transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s;
-    }
-    
-    .p-message-leave-active .p-message-close {
-        display: none;
-    }
-}
-`;
-
-const classes = {
-    root: ({ props }) => 'p-message p-component p-message-' + props.severity,
-    wrapper: 'p-message-wrapper',
-    icon: 'p-message-icon',
-    text: 'p-message-text',
-    closeButton: 'p-message-close p-link',
-    closeIcon: 'p-message-close-icon'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'message', manual: true });
+import MessageStyle from 'primevue/message/style';
 
 export default {
     name: 'BaseMessage',
@@ -99,10 +35,7 @@ export default {
             default: null
         }
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: MessageStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/message/package.json b/components/lib/message/package.json
index c67a499e9..eddb99576 100644
--- a/components/lib/message/package.json
+++ b/components/lib/message/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./message.cjs.js",
-  "module": "./message.esm.js",
-  "unpkg": "./message.min.js",
-  "types": "./Message.d.ts",
-  "browser": {
-    "./sfc": "./Message.vue"
-  }
-}
\ No newline at end of file
+    "main": "./message.cjs.js",
+    "module": "./message.esm.js",
+    "unpkg": "./message.min.js",
+    "types": "./Message.d.ts",
+    "browser": {
+        "./sfc": "./Message.vue"
+    }
+}
diff --git a/components/lib/message/style/MessageStyle.js b/components/lib/message/style/MessageStyle.js
new file mode 100644
index 000000000..fe12e3efc
--- /dev/null
+++ b/components/lib/message/style/MessageStyle.js
@@ -0,0 +1,69 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-message-wrapper {
+        display: flex;
+        align-items: center;
+    }
+
+    .p-message-icon {
+        flex-shrink: 0;
+    }
+
+    .p-message-close {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+    }
+
+    .p-message-close.p-link {
+        margin-left: auto;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .p-message-enter-from {
+        opacity: 0;
+    }
+
+    .p-message-enter-active {
+        transition: opacity 0.3s;
+    }
+
+    .p-message.p-message-leave-from {
+        max-height: 1000px;
+    }
+
+    .p-message.p-message-leave-to {
+        max-height: 0;
+        opacity: 0;
+        margin: 0 !important;
+    }
+
+    .p-message-leave-active {
+        overflow: hidden;
+        transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s;
+    }
+
+    .p-message-leave-active .p-message-close {
+        display: none;
+    }
+}
+`;
+
+const classes = {
+    root: ({ props }) => 'p-message p-component p-message-' + props.severity,
+    wrapper: 'p-message-wrapper',
+    icon: 'p-message-icon',
+    text: 'p-message-text',
+    closeButton: 'p-message-close p-link',
+    closeIcon: 'p-message-close-icon'
+};
+
+export default BaseStyle.extend({
+    name: 'message',
+    css,
+    classes
+});
diff --git a/components/lib/message/style/package.json b/components/lib/message/style/package.json
new file mode 100644
index 000000000..925ec61fb
--- /dev/null
+++ b/components/lib/message/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./messagestyle.cjs.js",
+    "module": "./messagestyle.esm.js",
+    "unpkg": "./messagestyle.min.js"
+}
diff --git a/components/lib/multiselect/BaseMultiSelect.vue b/components/lib/multiselect/BaseMultiSelect.vue
index 5f88eb37d..92c33c55a 100644
--- a/components/lib/multiselect/BaseMultiSelect.vue
+++ b/components/lib/multiselect/BaseMultiSelect.vue
@@ -1,193 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-multiselect {
-        display: inline-flex;
-        cursor: pointer;
-        user-select: none;
-    }
-    
-    .p-multiselect-trigger {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
-    }
-    
-    .p-multiselect-label-container {
-        overflow: hidden;
-        flex: 1 1 auto;
-        cursor: pointer;
-    }
-    
-    .p-multiselect-label {
-        display: block;
-        white-space: nowrap;
-        cursor: pointer;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-    
-    .p-multiselect-label-empty {
-        overflow: hidden;
-        visibility: hidden;
-    }
-    
-    .p-multiselect-token {
-        cursor: default;
-        display: inline-flex;
-        align-items: center;
-        flex: 0 0 auto;
-    }
-    
-    .p-multiselect-token-icon {
-        cursor: pointer;
-    }
-    
-    .p-multiselect .p-multiselect-panel {
-        min-width: 100%;
-    }
-    
-    .p-multiselect-items-wrapper {
-        overflow: auto;
-    }
-    
-    .p-multiselect-items {
-        margin: 0;
-        padding: 0;
-        list-style-type: none;
-    }
-    
-    .p-multiselect-item {
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        font-weight: normal;
-        white-space: nowrap;
-        position: relative;
-        overflow: hidden;
-    }
-    
-    .p-multiselect-item-group {
-        cursor: auto;
-    }
-    
-    .p-multiselect-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-    }
-    
-    .p-multiselect-filter-container {
-        position: relative;
-        flex: 1 1 auto;
-    }
-    
-    .p-multiselect-filter-icon {
-        position: absolute;
-        top: 50%;
-        margin-top: -0.5rem;
-    }
-    
-    .p-multiselect-filter-container .p-inputtext {
-        width: 100%;
-    }
-    
-    .p-multiselect-close {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
-        overflow: hidden;
-        position: relative;
-        margin-left: auto;
-    }
-    
-    .p-fluid .p-multiselect {
-        display: flex;
-    }
-}
-`;
-
-const inlineStyles = {
-    root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
-};
-
-const classes = {
-    root: ({ instance, props }) => [
-        'p-multiselect p-component p-inputwrapper',
-        {
-            'p-multiselect-chip': props.display === 'chip',
-            'p-disabled': props.disabled,
-            'p-focus': instance.focused,
-            'p-inputwrapper-filled': props.modelValue && props.modelValue.length,
-            'p-inputwrapper-focus': instance.focused || instance.overlayVisible,
-            'p-overlay-open': instance.overlayVisible
-        }
-    ],
-    labelContainer: 'p-multiselect-label-container',
-    label: ({ instance, props }) => [
-        'p-multiselect-label',
-        {
-            'p-placeholder': instance.label === props.placeholder,
-            'p-multiselect-label-empty': !props.placeholder && (!props.modelValue || props.modelValue.length === 0)
-        }
-    ],
-    token: 'p-multiselect-token',
-    tokenLabel: 'p-multiselect-token-label',
-    removeTokenIcon: 'p-multiselect-token-icon',
-    trigger: 'p-multiselect-trigger',
-    loadingIcon: 'p-multiselect-trigger-icon',
-    dropdownIcon: 'p-multiselect-trigger-icon',
-    panel: ({ instance }) => [
-        'p-multiselect-panel p-component',
-        {
-            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
-        }
-    ],
-    header: 'p-multiselect-header',
-    headerCheckboxContainer: ({ instance }) => [
-        'p-checkbox p-component',
-        {
-            'p-checkbox-checked': instance.allSelected,
-            'p-checkbox-focused': instance.headerCheckboxFocused
-        }
-    ],
-    headerCheckbox: ({ instance }) => [
-        'p-checkbox-box',
-        {
-            'p-highlight': instance.allSelected,
-            'p-focus': instance.headerCheckboxFocused
-        }
-    ],
-    headerCheckboxIcon: 'p-checkbox-icon',
-    filterContainer: 'p-multiselect-filter-container',
-    filterInput: 'p-multiselect-filter p-inputtext p-component',
-    filterIcon: 'p-multiselect-filter-icon',
-    closeButton: 'p-multiselect-close p-link',
-    closeIcon: 'p-multiselect-close-icon',
-    wrapper: 'p-multiselect-items-wrapper',
-    list: 'p-multiselect-items p-component',
-    itemGroup: 'p-multiselect-item-group',
-    item: ({ instance, option, index, getItemOptions }) => [
-        'p-multiselect-item',
-        {
-            'p-highlight': instance.isSelected(option),
-            'p-focus': instance.focusedOptionIndex === instance.getOptionIndex(index, getItemOptions),
-            'p-disabled': instance.isOptionDisabled(option)
-        }
-    ],
-    checkboxContainer: 'p-checkbox p-component',
-    checkbox: ({ instance, option }) => ['p-checkbox-box', { 'p-highlight': instance.isSelected(option) }],
-    checkboxIcon: 'p-checkbox-icon',
-    emptyMessage: 'p-multiselect-empty-message'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'multiselect', manual: true });
+import MultiSelectStyle from 'primevue/multiselect/style';
 
 export default {
     name: 'BaseMultiSelect',
@@ -351,11 +164,7 @@ export default {
             default: null
         }
     },
-    css: {
-        classes,
-        inlineStyles,
-        loadStyle
-    },
+    style: MultiSelectStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/multiselect/package.json b/components/lib/multiselect/package.json
index c2709d035..1a6c1c11f 100644
--- a/components/lib/multiselect/package.json
+++ b/components/lib/multiselect/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./multiselect.cjs.js",
-  "module": "./multiselect.esm.js",
-  "unpkg": "./multiselect.min.js",
-  "types": "./MultiSelect.d.ts",
-  "browser": {
-    "./sfc": "./MultiSelect.vue"
-  }
-}
\ No newline at end of file
+    "main": "./multiselect.cjs.js",
+    "module": "./multiselect.esm.js",
+    "unpkg": "./multiselect.min.js",
+    "types": "./MultiSelect.d.ts",
+    "browser": {
+        "./sfc": "./MultiSelect.vue"
+    }
+}
diff --git a/components/lib/multiselect/style/MultiSelectStyle.js b/components/lib/multiselect/style/MultiSelectStyle.js
new file mode 100644
index 000000000..ee1ca89d0
--- /dev/null
+++ b/components/lib/multiselect/style/MultiSelectStyle.js
@@ -0,0 +1,193 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-multiselect {
+        display: inline-flex;
+        cursor: pointer;
+        user-select: none;
+    }
+
+    .p-multiselect-trigger {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+    }
+
+    .p-multiselect-label-container {
+        overflow: hidden;
+        flex: 1 1 auto;
+        cursor: pointer;
+    }
+
+    .p-multiselect-label {
+        display: block;
+        white-space: nowrap;
+        cursor: pointer;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .p-multiselect-label-empty {
+        overflow: hidden;
+        visibility: hidden;
+    }
+
+    .p-multiselect-token {
+        cursor: default;
+        display: inline-flex;
+        align-items: center;
+        flex: 0 0 auto;
+    }
+
+    .p-multiselect-token-icon {
+        cursor: pointer;
+    }
+
+    .p-multiselect .p-multiselect-panel {
+        min-width: 100%;
+    }
+
+    .p-multiselect-items-wrapper {
+        overflow: auto;
+    }
+
+    .p-multiselect-items {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+    }
+
+    .p-multiselect-item {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        font-weight: normal;
+        white-space: nowrap;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .p-multiselect-item-group {
+        cursor: auto;
+    }
+
+    .p-multiselect-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .p-multiselect-filter-container {
+        position: relative;
+        flex: 1 1 auto;
+    }
+
+    .p-multiselect-filter-icon {
+        position: absolute;
+        top: 50%;
+        margin-top: -0.5rem;
+    }
+
+    .p-multiselect-filter-container .p-inputtext {
+        width: 100%;
+    }
+
+    .p-multiselect-close {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        overflow: hidden;
+        position: relative;
+        margin-left: auto;
+    }
+
+    .p-fluid .p-multiselect {
+        display: flex;
+    }
+}
+`;
+
+const inlineStyles = {
+    root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
+};
+
+const classes = {
+    root: ({ instance, props }) => [
+        'p-multiselect p-component p-inputwrapper',
+        {
+            'p-multiselect-chip': props.display === 'chip',
+            'p-disabled': props.disabled,
+            'p-focus': instance.focused,
+            'p-inputwrapper-filled': props.modelValue && props.modelValue.length,
+            'p-inputwrapper-focus': instance.focused || instance.overlayVisible,
+            'p-overlay-open': instance.overlayVisible
+        }
+    ],
+    labelContainer: 'p-multiselect-label-container',
+    label: ({ instance, props }) => [
+        'p-multiselect-label',
+        {
+            'p-placeholder': instance.label === props.placeholder,
+            'p-multiselect-label-empty': !props.placeholder && (!props.modelValue || props.modelValue.length === 0)
+        }
+    ],
+    token: 'p-multiselect-token',
+    tokenLabel: 'p-multiselect-token-label',
+    removeTokenIcon: 'p-multiselect-token-icon',
+    trigger: 'p-multiselect-trigger',
+    loadingIcon: 'p-multiselect-trigger-icon',
+    dropdownIcon: 'p-multiselect-trigger-icon',
+    panel: ({ instance }) => [
+        'p-multiselect-panel p-component',
+        {
+            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
+            'p-ripple-disabled': instance.$primevue.config.ripple === false
+        }
+    ],
+    header: 'p-multiselect-header',
+    headerCheckboxContainer: ({ instance }) => [
+        'p-checkbox p-component',
+        {
+            'p-checkbox-checked': instance.allSelected,
+            'p-checkbox-focused': instance.headerCheckboxFocused
+        }
+    ],
+    headerCheckbox: ({ instance }) => [
+        'p-checkbox-box',
+        {
+            'p-highlight': instance.allSelected,
+            'p-focus': instance.headerCheckboxFocused
+        }
+    ],
+    headerCheckboxIcon: 'p-checkbox-icon',
+    filterContainer: 'p-multiselect-filter-container',
+    filterInput: 'p-multiselect-filter p-inputtext p-component',
+    filterIcon: 'p-multiselect-filter-icon',
+    closeButton: 'p-multiselect-close p-link',
+    closeIcon: 'p-multiselect-close-icon',
+    wrapper: 'p-multiselect-items-wrapper',
+    list: 'p-multiselect-items p-component',
+    itemGroup: 'p-multiselect-item-group',
+    item: ({ instance, option, index, getItemOptions }) => [
+        'p-multiselect-item',
+        {
+            'p-highlight': instance.isSelected(option),
+            'p-focus': instance.focusedOptionIndex === instance.getOptionIndex(index, getItemOptions),
+            'p-disabled': instance.isOptionDisabled(option)
+        }
+    ],
+    checkboxContainer: 'p-checkbox p-component',
+    checkbox: ({ instance, option }) => ['p-checkbox-box', { 'p-highlight': instance.isSelected(option) }],
+    checkboxIcon: 'p-checkbox-icon',
+    emptyMessage: 'p-multiselect-empty-message'
+};
+
+export default BaseStyle.extend({
+    name: 'multiselect',
+    css,
+    classes,
+    inlineStyles
+});
diff --git a/components/lib/multiselect/style/package.json b/components/lib/multiselect/style/package.json
new file mode 100644
index 000000000..73f36a672
--- /dev/null
+++ b/components/lib/multiselect/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./multiselectstyle.cjs.js",
+    "module": "./multiselectstyle.esm.js",
+    "unpkg": "./multiselectstyle.min.js"
+}
diff --git a/components/lib/orderlist/BaseOrderList.vue b/components/lib/orderlist/BaseOrderList.vue
index 36950f340..02c46558f 100644
--- a/components/lib/orderlist/BaseOrderList.vue
+++ b/components/lib/orderlist/BaseOrderList.vue
@@ -1,70 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-orderlist {
-        display: flex;
-    }
-    
-    .p-orderlist-controls {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-    }
-    
-    .p-orderlist-list-container {
-        flex: 1 1 auto;
-    }
-    
-    .p-orderlist-list {
-        list-style-type: none;
-        margin: 0;
-        padding: 0;
-        overflow: auto;
-        min-height: 12rem;
-        max-height: 24rem;
-    }
-    
-    .p-orderlist-item {
-        cursor: pointer;
-        overflow: hidden;
-        position: relative;
-    }
-    
-    .p-orderlist.p-state-disabled .p-orderlist-item,
-    .p-orderlist.p-state-disabled .p-button {
-        cursor: default;
-    }
-    
-    .p-orderlist.p-state-disabled .p-orderlist-list {
-        overflow: hidden;
-    }
-}
-`;
-
-const classes = {
-    root: ({ props }) => [
-        'p-orderlist p-component',
-        {
-            'p-orderlist-striped': props.stripedRows
-        }
-    ],
-    controls: 'p-orderlist-controls',
-    header: 'p-orderlist-header',
-    container: 'p-orderlist-list-container',
-    list: 'p-orderlist-list',
-    item: ({ instance, item, id }) => [
-        'p-orderlist-item',
-        {
-            'p-highlight': instance.isSelected(item),
-            'p-focus': id === instance.focusedOptionId
-        }
-    ]
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'orderlist', manual: true });
+import OrderListStyle from 'primevue/orderlist/style';
 
 export default {
     name: 'BaseOrderList',
@@ -135,10 +71,7 @@ export default {
             default: null
         }
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: OrderListStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/orderlist/package.json b/components/lib/orderlist/package.json
index d54c58a7e..cad1a9b1d 100644
--- a/components/lib/orderlist/package.json
+++ b/components/lib/orderlist/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./orderlist.cjs.js",
-  "module": "./orderlist.esm.js",
-  "unpkg": "./orderlist.min.js",
-  "types": "./OrderList.d.ts",
-  "browser": {
-    "./sfc": "./OrderList.vue"
-  }
-}
\ No newline at end of file
+    "main": "./orderlist.cjs.js",
+    "module": "./orderlist.esm.js",
+    "unpkg": "./orderlist.min.js",
+    "types": "./OrderList.d.ts",
+    "browser": {
+        "./sfc": "./OrderList.vue"
+    }
+}
diff --git a/components/lib/orderlist/style/OrderListStyle.js b/components/lib/orderlist/style/OrderListStyle.js
new file mode 100644
index 000000000..8b8daf0a7
--- /dev/null
+++ b/components/lib/orderlist/style/OrderListStyle.js
@@ -0,0 +1,69 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-orderlist {
+        display: flex;
+    }
+
+    .p-orderlist-controls {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    .p-orderlist-list-container {
+        flex: 1 1 auto;
+    }
+
+    .p-orderlist-list {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+        overflow: auto;
+        min-height: 12rem;
+        max-height: 24rem;
+    }
+
+    .p-orderlist-item {
+        cursor: pointer;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .p-orderlist.p-state-disabled .p-orderlist-item,
+    .p-orderlist.p-state-disabled .p-button {
+        cursor: default;
+    }
+
+    .p-orderlist.p-state-disabled .p-orderlist-list {
+        overflow: hidden;
+    }
+}
+`;
+
+const classes = {
+    root: ({ props }) => [
+        'p-orderlist p-component',
+        {
+            'p-orderlist-striped': props.stripedRows
+        }
+    ],
+    controls: 'p-orderlist-controls',
+    header: 'p-orderlist-header',
+    container: 'p-orderlist-list-container',
+    list: 'p-orderlist-list',
+    item: ({ instance, item, id }) => [
+        'p-orderlist-item',
+        {
+            'p-highlight': instance.isSelected(item),
+            'p-focus': id === instance.focusedOptionId
+        }
+    ]
+};
+
+export default BaseStyle.extend({
+    name: 'orderlist',
+    css,
+    classes
+});
diff --git a/components/lib/orderlist/style/package.json b/components/lib/orderlist/style/package.json
new file mode 100644
index 000000000..8f903e8c9
--- /dev/null
+++ b/components/lib/orderlist/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./orderliststyle.cjs.js",
+    "module": "./orderliststyle.esm.js",
+    "unpkg": "./orderliststyle.min.js"
+}
diff --git a/components/lib/organizationchart/BaseOrganizationChart.vue b/components/lib/organizationchart/BaseOrganizationChart.vue
index 9cad4b9c8..c939b4a0f 100644
--- a/components/lib/organizationchart/BaseOrganizationChart.vue
+++ b/components/lib/organizationchart/BaseOrganizationChart.vue
@@ -1,79 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-organizationchart-table {
-        border-spacing: 0;
-        border-collapse: separate;
-        margin: 0 auto;
-    }
-    
-    .p-organizationchart-table > tbody > tr > td {
-        text-align: center;
-        vertical-align: top;
-        padding: 0 0.75rem;
-    }
-    
-    .p-organizationchart-node-content {
-        display: inline-block;
-        position: relative;
-    }
-    
-    .p-organizationchart-node-content .p-node-toggler {
-        position: absolute;
-        bottom: -0.75rem;
-        margin-left: -0.75rem;
-        z-index: 2;
-        left: 50%;
-        user-select: none;
-        cursor: pointer;
-        width: 1.5rem;
-        height: 1.5rem;
-        text-decoration: none;
-    }
-    
-    .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon {
-        position: relative;
-        top: 0.25rem;
-    }
-    
-    .p-organizationchart-line-down {
-        margin: 0 auto;
-        height: 20px;
-        width: 1px;
-    }
-    
-    .p-organizationchart-line-right {
-        border-radius: 0px;
-    }
-    
-    .p-organizationchart-line-left {
-        border-radius: 0;
-    }
-    
-    .p-organizationchart-selectable-node {
-        cursor: pointer;
-    }
-}
-`;
-
-const classes = {
-    root: 'p-organizationchart p-component',
-    table: 'p-organizationchart-table',
-    node: ({ instance }) => ['p-organizationchart-node-content', { 'p-organizationchart-selectable-node': instance.selectable, 'p-highlight': instance.selected }],
-    nodeToggler: 'p-node-toggler',
-    nodeTogglerIcon: 'p-node-toggler-icon',
-    lines: 'p-organizationchart-lines',
-    lineDown: 'p-organizationchart-line-down',
-    lines: 'p-organizationchart-lines',
-    lineLeft: ({ index }) => ['p-organizationchart-line-left', { 'p-organizationchart-line-top': !(index === 0) }],
-    lineRight: ({ props, index }) => ['p-organizationchart-line-right', { 'p-organizationchart-line-top': !(index === props.node.children.length - 1) }],
-    nodes: 'p-organizationchart-nodes'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'organizationchart', manual: true });
+import OrganizationChartStyle from 'primevue/organizationchart/style';
 
 export default {
     name: 'BaseOrganizationChart',
@@ -100,10 +27,7 @@ export default {
             default: null
         }
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: OrganizationChartStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/organizationchart/package.json b/components/lib/organizationchart/package.json
index 4d6fa8059..21b89ac5d 100644
--- a/components/lib/organizationchart/package.json
+++ b/components/lib/organizationchart/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./organizationchart.cjs.js",
-  "module": "./organizationchart.esm.js",
-  "unpkg": "./organizationchart.min.js",
-  "types": "./OrganizationChart.d.ts",
-  "browser": {
-    "./sfc": "./OrganizationChart.vue"
-  }
-}
\ No newline at end of file
+    "main": "./organizationchart.cjs.js",
+    "module": "./organizationchart.esm.js",
+    "unpkg": "./organizationchart.min.js",
+    "types": "./OrganizationChart.d.ts",
+    "browser": {
+        "./sfc": "./OrganizationChart.vue"
+    }
+}
diff --git a/components/lib/organizationchart/style/OrganizationChartStyle.js b/components/lib/organizationchart/style/OrganizationChartStyle.js
new file mode 100644
index 000000000..873407c22
--- /dev/null
+++ b/components/lib/organizationchart/style/OrganizationChartStyle.js
@@ -0,0 +1,78 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-organizationchart-table {
+        border-spacing: 0;
+        border-collapse: separate;
+        margin: 0 auto;
+    }
+
+    .p-organizationchart-table > tbody > tr > td {
+        text-align: center;
+        vertical-align: top;
+        padding: 0 0.75rem;
+    }
+
+    .p-organizationchart-node-content {
+        display: inline-block;
+        position: relative;
+    }
+
+    .p-organizationchart-node-content .p-node-toggler {
+        position: absolute;
+        bottom: -0.75rem;
+        margin-left: -0.75rem;
+        z-index: 2;
+        left: 50%;
+        user-select: none;
+        cursor: pointer;
+        width: 1.5rem;
+        height: 1.5rem;
+        text-decoration: none;
+    }
+
+    .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon {
+        position: relative;
+        top: 0.25rem;
+    }
+
+    .p-organizationchart-line-down {
+        margin: 0 auto;
+        height: 20px;
+        width: 1px;
+    }
+
+    .p-organizationchart-line-right {
+        border-radius: 0px;
+    }
+
+    .p-organizationchart-line-left {
+        border-radius: 0;
+    }
+
+    .p-organizationchart-selectable-node {
+        cursor: pointer;
+    }
+}
+`;
+
+const classes = {
+    root: 'p-organizationchart p-component',
+    table: 'p-organizationchart-table',
+    node: ({ instance }) => ['p-organizationchart-node-content', { 'p-organizationchart-selectable-node': instance.selectable, 'p-highlight': instance.selected }],
+    nodeToggler: 'p-node-toggler',
+    nodeTogglerIcon: 'p-node-toggler-icon',
+    lines: 'p-organizationchart-lines',
+    lineDown: 'p-organizationchart-line-down',
+    lines: 'p-organizationchart-lines',
+    lineLeft: ({ index }) => ['p-organizationchart-line-left', { 'p-organizationchart-line-top': !(index === 0) }],
+    lineRight: ({ props, index }) => ['p-organizationchart-line-right', { 'p-organizationchart-line-top': !(index === props.node.children.length - 1) }],
+    nodes: 'p-organizationchart-nodes'
+};
+
+export default BaseStyle.extend({
+    name: 'organizationchart',
+    css,
+    classes
+});
diff --git a/components/lib/organizationchart/style/package.json b/components/lib/organizationchart/style/package.json
new file mode 100644
index 000000000..d11a67913
--- /dev/null
+++ b/components/lib/organizationchart/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./organizationchartstyle.cjs.js",
+    "module": "./organizationchartstyle.esm.js",
+    "unpkg": "./organizationchartstyle.min.js"
+}
diff --git a/components/lib/overlayeventbus/package.json b/components/lib/overlayeventbus/package.json
index 03bc81a3d..a18c9808e 100644
--- a/components/lib/overlayeventbus/package.json
+++ b/components/lib/overlayeventbus/package.json
@@ -2,4 +2,4 @@
     "main": "./overlayeventbus.cjs.js",
     "module": "./overlayeventbus.esm.js",
     "unpkg": "./overlayeventbus.min.js"
-  }
\ No newline at end of file
+}
diff --git a/components/lib/overlaypanel/BaseOverlayPanel.vue b/components/lib/overlaypanel/BaseOverlayPanel.vue
index d50c7a2b2..7ffec1700 100644
--- a/components/lib/overlaypanel/BaseOverlayPanel.vue
+++ b/components/lib/overlaypanel/BaseOverlayPanel.vue
@@ -1,95 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-overlaypanel {
-        margin-top: 10px;
-    }
-    
-    .p-overlaypanel-flipped {
-        margin-top: 0;
-        margin-bottom: 10px;
-    }
-    
-    .p-overlaypanel-close {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        overflow: hidden;
-        position: relative;
-    }
-    
-    /* Animation */
-    .p-overlaypanel-enter-from {
-        opacity: 0;
-        transform: scaleY(0.8);
-    }
-    
-    .p-overlaypanel-leave-to {
-        opacity: 0;
-    }
-    
-    .p-overlaypanel-enter-active {
-        transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
-    }
-    
-    .p-overlaypanel-leave-active {
-        transition: opacity 0.1s linear;
-    }
-    
-    .p-overlaypanel:after,
-    .p-overlaypanel:before {
-        bottom: 100%;
-        left: calc(var(--overlayArrowLeft, 0) + 1.25rem);
-        content: ' ';
-        height: 0;
-        width: 0;
-        position: absolute;
-        pointer-events: none;
-    }
-    
-    .p-overlaypanel:after {
-        border-width: 8px;
-        margin-left: -8px;
-    }
-    
-    .p-overlaypanel:before {
-        border-width: 10px;
-        margin-left: -10px;
-    }
-    
-    .p-overlaypanel-flipped:after,
-    .p-overlaypanel-flipped:before {
-        bottom: auto;
-        top: 100%;
-    }
-    
-    .p-overlaypanel.p-overlaypanel-flipped:after {
-        border-bottom-color: transparent;
-    }
-    
-    .p-overlaypanel.p-overlaypanel-flipped:before {
-        border-bottom-color: transparent;
-    }
-}
-`;
-
-const classes = {
-    root: ({ instance }) => [
-        'p-overlaypanel p-component',
-        {
-            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
-        }
-    ],
-    content: 'p-overlaypanel-content',
-    closeButton: 'p-overlaypanel-close p-link',
-    closeIcon: 'p-overlaypanel-close-icon'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'overlaypanel', manual: true });
+import OverlayPanelStyle from 'primevue/overlaypanel/style';
 
 export default {
     name: 'BaseOverlayPanel',
@@ -124,10 +35,7 @@ export default {
             default: undefined
         }
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: OverlayPanelStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/overlaypanel/package.json b/components/lib/overlaypanel/package.json
index 840c1a3fd..c4a694c68 100644
--- a/components/lib/overlaypanel/package.json
+++ b/components/lib/overlaypanel/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./overlaypanel.cjs.js",
-  "module": "./overlaypanel.esm.js",
-  "unpkg": "./overlaypanel.min.js",
-  "types": "./OverlayPanel.d.ts",
-  "browser": {
-    "./sfc": "./OverlayPanel.vue"
-  }
-}
\ No newline at end of file
+    "main": "./overlaypanel.cjs.js",
+    "module": "./overlaypanel.esm.js",
+    "unpkg": "./overlaypanel.min.js",
+    "types": "./OverlayPanel.d.ts",
+    "browser": {
+        "./sfc": "./OverlayPanel.vue"
+    }
+}
diff --git a/components/lib/overlaypanel/style/OverlayPanelStyle.js b/components/lib/overlaypanel/style/OverlayPanelStyle.js
new file mode 100644
index 000000000..d603d9ea5
--- /dev/null
+++ b/components/lib/overlaypanel/style/OverlayPanelStyle.js
@@ -0,0 +1,94 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-overlaypanel {
+        margin-top: 10px;
+    }
+
+    .p-overlaypanel-flipped {
+        margin-top: 0;
+        margin-bottom: 10px;
+    }
+
+    .p-overlaypanel-close {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+        position: relative;
+    }
+
+    /* Animation */
+    .p-overlaypanel-enter-from {
+        opacity: 0;
+        transform: scaleY(0.8);
+    }
+
+    .p-overlaypanel-leave-to {
+        opacity: 0;
+    }
+
+    .p-overlaypanel-enter-active {
+        transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
+    }
+
+    .p-overlaypanel-leave-active {
+        transition: opacity 0.1s linear;
+    }
+
+    .p-overlaypanel:after,
+    .p-overlaypanel:before {
+        bottom: 100%;
+        left: calc(var(--overlayArrowLeft, 0) + 1.25rem);
+        content: ' ';
+        height: 0;
+        width: 0;
+        position: absolute;
+        pointer-events: none;
+    }
+
+    .p-overlaypanel:after {
+        border-width: 8px;
+        margin-left: -8px;
+    }
+
+    .p-overlaypanel:before {
+        border-width: 10px;
+        margin-left: -10px;
+    }
+
+    .p-overlaypanel-flipped:after,
+    .p-overlaypanel-flipped:before {
+        bottom: auto;
+        top: 100%;
+    }
+
+    .p-overlaypanel.p-overlaypanel-flipped:after {
+        border-bottom-color: transparent;
+    }
+
+    .p-overlaypanel.p-overlaypanel-flipped:before {
+        border-bottom-color: transparent;
+    }
+}
+`;
+
+const classes = {
+    root: ({ instance }) => [
+        'p-overlaypanel p-component',
+        {
+            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
+            'p-ripple-disabled': instance.$primevue.config.ripple === false
+        }
+    ],
+    content: 'p-overlaypanel-content',
+    closeButton: 'p-overlaypanel-close p-link',
+    closeIcon: 'p-overlaypanel-close-icon'
+};
+
+export default BaseStyle.extend({
+    name: 'overlaypanel',
+    css,
+    classes
+});
diff --git a/components/lib/overlaypanel/style/package.json b/components/lib/overlaypanel/style/package.json
new file mode 100644
index 000000000..031c42eb2
--- /dev/null
+++ b/components/lib/overlaypanel/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./overlaypanelstyle.cjs.js",
+    "module": "./overlaypanelstyle.esm.js",
+    "unpkg": "./overlaypanelstyle.min.js"
+}
diff --git a/components/lib/paginator/BasePaginator.vue b/components/lib/paginator/BasePaginator.vue
index 8a8b00f81..af80066b9 100644
--- a/components/lib/paginator/BasePaginator.vue
+++ b/components/lib/paginator/BasePaginator.vue
@@ -1,103 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-paginator-default {
-        display: flex;
-    }
-    
-    .p-paginator {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-wrap: wrap;
-    }
-    
-    .p-paginator-left-content {
-        margin-right: auto;
-    }
-    
-    .p-paginator-right-content {
-        margin-left: auto;
-    }
-    
-    .p-paginator-page,
-    .p-paginator-next,
-    .p-paginator-last,
-    .p-paginator-first,
-    .p-paginator-prev,
-    .p-paginator-current {
-        cursor: pointer;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        line-height: 1;
-        user-select: none;
-        overflow: hidden;
-        position: relative;
-    }
-    
-    .p-paginator-element:focus {
-        z-index: 1;
-        position: relative;
-    }
-}
-`;
-
-const classes = {
-    paginator: ({ instance, key }) => [
-        'p-paginator p-component',
-        {
-            'p-paginator-default': !instance.hasBreakpoints(),
-            [`p-paginator-${key}`]: instance.hasBreakpoints()
-        }
-    ],
-    start: 'p-paginator-left-content',
-    end: 'p-paginator-right-content',
-    firstPageButton: ({ instance }) => [
-        'p-paginator-first p-paginator-element p-link',
-        {
-            'p-disabled': instance.$attrs.disabled
-        }
-    ],
-    firstPageIcon: 'p-paginator-icon',
-    previousPageButton: ({ instance }) => [
-        'p-paginator-prev p-paginator-element p-link',
-        {
-            'p-disabled': instance.$attrs.disabled
-        }
-    ],
-    previousPageIcon: 'p-paginator-icon',
-    nextPageButton: ({ instance }) => [
-        'p-paginator-next p-paginator-element p-link',
-        {
-            'p-disabled': instance.$attrs.disabled
-        }
-    ],
-    nextPageIcon: 'p-paginator-icon',
-    lastPageButton: ({ instance }) => [
-        'p-paginator-last p-paginator-element p-link',
-        {
-            'p-disabled': instance.$attrs.disabled
-        }
-    ],
-    lastPageIcon: 'p-paginator-icon',
-    pages: 'p-paginator-pages',
-    pageButton: ({ props, pageLink }) => [
-        'p-paginator-page p-paginator-element p-link',
-        {
-            'p-highlight': pageLink - 1 === props.page
-        }
-    ],
-    current: 'p-paginator-current',
-    rowPerPageDropdown: 'p-paginator-rpp-options',
-    jumpToPageDropdown: 'p-paginator-page-options',
-    jumpToPageInput: 'p-paginator-page-input'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'paginator', manual: true });
+import PaginatorStyle from 'primevue/paginator/style';
 
 export default {
     name: 'BasePaginator',
@@ -136,10 +39,7 @@ export default {
             default: true
         }
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: PaginatorStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/paginator/package.json b/components/lib/paginator/package.json
index bbecbde3d..9ccb30d8c 100644
--- a/components/lib/paginator/package.json
+++ b/components/lib/paginator/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./paginator.cjs.js",
-  "module": "./paginator.esm.js",
-  "unpkg": "./paginator.min.js",
-  "types": "./Paginator.d.ts",
-  "browser": {
-    "./sfc": "./Paginator.vue"
-  }
-}
\ No newline at end of file
+    "main": "./paginator.cjs.js",
+    "module": "./paginator.esm.js",
+    "unpkg": "./paginator.min.js",
+    "types": "./Paginator.d.ts",
+    "browser": {
+        "./sfc": "./Paginator.vue"
+    }
+}
diff --git a/components/lib/paginator/style/PaginatorStyle.js b/components/lib/paginator/style/PaginatorStyle.js
new file mode 100644
index 000000000..8906e01b7
--- /dev/null
+++ b/components/lib/paginator/style/PaginatorStyle.js
@@ -0,0 +1,102 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-paginator-default {
+        display: flex;
+    }
+
+    .p-paginator {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-wrap: wrap;
+    }
+
+    .p-paginator-left-content {
+        margin-right: auto;
+    }
+
+    .p-paginator-right-content {
+        margin-left: auto;
+    }
+
+    .p-paginator-page,
+    .p-paginator-next,
+    .p-paginator-last,
+    .p-paginator-first,
+    .p-paginator-prev,
+    .p-paginator-current {
+        cursor: pointer;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        line-height: 1;
+        user-select: none;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .p-paginator-element:focus {
+        z-index: 1;
+        position: relative;
+    }
+}
+`;
+
+const classes = {
+    paginator: ({ instance, key }) => [
+        'p-paginator p-component',
+        {
+            'p-paginator-default': !instance.hasBreakpoints(),
+            [`p-paginator-${key}`]: instance.hasBreakpoints()
+        }
+    ],
+    start: 'p-paginator-left-content',
+    end: 'p-paginator-right-content',
+    firstPageButton: ({ instance }) => [
+        'p-paginator-first p-paginator-element p-link',
+        {
+            'p-disabled': instance.$attrs.disabled
+        }
+    ],
+    firstPageIcon: 'p-paginator-icon',
+    previousPageButton: ({ instance }) => [
+        'p-paginator-prev p-paginator-element p-link',
+        {
+            'p-disabled': instance.$attrs.disabled
+        }
+    ],
+    previousPageIcon: 'p-paginator-icon',
+    nextPageButton: ({ instance }) => [
+        'p-paginator-next p-paginator-element p-link',
+        {
+            'p-disabled': instance.$attrs.disabled
+        }
+    ],
+    nextPageIcon: 'p-paginator-icon',
+    lastPageButton: ({ instance }) => [
+        'p-paginator-last p-paginator-element p-link',
+        {
+            'p-disabled': instance.$attrs.disabled
+        }
+    ],
+    lastPageIcon: 'p-paginator-icon',
+    pages: 'p-paginator-pages',
+    pageButton: ({ props, pageLink }) => [
+        'p-paginator-page p-paginator-element p-link',
+        {
+            'p-highlight': pageLink - 1 === props.page
+        }
+    ],
+    current: 'p-paginator-current',
+    rowPerPageDropdown: 'p-paginator-rpp-options',
+    jumpToPageDropdown: 'p-paginator-page-options',
+    jumpToPageInput: 'p-paginator-page-input'
+};
+
+export default BaseStyle.extend({
+    name: 'paginator',
+    css,
+    classes
+});
diff --git a/components/lib/paginator/style/package.json b/components/lib/paginator/style/package.json
new file mode 100644
index 000000000..2b8c3a64c
--- /dev/null
+++ b/components/lib/paginator/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./paginatorstyle.cjs.js",
+    "module": "./paginatorstyle.esm.js",
+    "unpkg": "./paginatorstyle.min.js"
+}
diff --git a/components/lib/panel/BasePanel.vue b/components/lib/panel/BasePanel.vue
index 37ffee917..556186d4d 100644
--- a/components/lib/panel/BasePanel.vue
+++ b/components/lib/panel/BasePanel.vue
@@ -1,48 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-panel-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-    }
-    
-    .p-panel-title {
-        line-height: 1;
-    }
-    
-    .p-panel-header-icon {
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-        cursor: pointer;
-        text-decoration: none;
-        overflow: hidden;
-        position: relative;
-    }
-}
-`;
-
-const classes = {
-    root: ({ props }) => [
-        'p-panel p-component',
-        {
-            'p-panel-toggleable': props.toggleable
-        }
-    ],
-    header: 'p-panel-header',
-    title: 'p-panel-title',
-    icons: 'p-panel-icons',
-    toggler: 'p-panel-header-icon p-panel-toggler p-link',
-    toggleablecontent: 'p-toggleable-content',
-    content: 'p-panel-content',
-    footer: 'p-panel-footer'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'panel', manual: true });
+import PanelStyle from 'primevue/panel/style';
 
 export default {
     name: 'BasePanel',
@@ -56,10 +14,7 @@ export default {
             default: null
         }
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: PanelStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/panel/package.json b/components/lib/panel/package.json
index 31adeb406..8f3d66f0b 100644
--- a/components/lib/panel/package.json
+++ b/components/lib/panel/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./panel.cjs.js",
-  "module": "./panel.esm.js",
-  "unpkg": "./panel.min.js",
-  "types": "./Panel.d.ts",
-  "browser": {
-    "./sfc": "./Panel.vue"
-  }
-}
\ No newline at end of file
+    "main": "./panel.cjs.js",
+    "module": "./panel.esm.js",
+    "unpkg": "./panel.min.js",
+    "types": "./Panel.d.ts",
+    "browser": {
+        "./sfc": "./Panel.vue"
+    }
+}
diff --git a/components/lib/panel/style/PanelStyle.js b/components/lib/panel/style/PanelStyle.js
new file mode 100644
index 000000000..61c6f75fb
--- /dev/null
+++ b/components/lib/panel/style/PanelStyle.js
@@ -0,0 +1,47 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-panel-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .p-panel-title {
+        line-height: 1;
+    }
+
+    .p-panel-header-icon {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        text-decoration: none;
+        overflow: hidden;
+        position: relative;
+    }
+}
+`;
+
+const classes = {
+    root: ({ props }) => [
+        'p-panel p-component',
+        {
+            'p-panel-toggleable': props.toggleable
+        }
+    ],
+    header: 'p-panel-header',
+    title: 'p-panel-title',
+    icons: 'p-panel-icons',
+    toggler: 'p-panel-header-icon p-panel-toggler p-link',
+    toggleablecontent: 'p-toggleable-content',
+    content: 'p-panel-content',
+    footer: 'p-panel-footer'
+};
+
+export default BaseStyle.extend({
+    name: 'panel',
+    css,
+    classes
+});
diff --git a/components/lib/panel/style/package.json b/components/lib/panel/style/package.json
new file mode 100644
index 000000000..128734094
--- /dev/null
+++ b/components/lib/panel/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./panelstyle.cjs.js",
+    "module": "./panelstyle.esm.js",
+    "unpkg": "./panelstyle.min.js"
+}
diff --git a/components/lib/panelmenu/BasePanelMenu.vue b/components/lib/panelmenu/BasePanelMenu.vue
index d0db19ec0..2c82976f7 100644
--- a/components/lib/panelmenu/BasePanelMenu.vue
+++ b/components/lib/panelmenu/BasePanelMenu.vue
@@ -1,90 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-panelmenu .p-panelmenu-header-action {
-        display: flex;
-        align-items: center;
-        user-select: none;
-        cursor: pointer;
-        position: relative;
-        text-decoration: none;
-    }
-    
-    .p-panelmenu .p-panelmenu-header-action:focus {
-        z-index: 1;
-    }
-    
-    .p-panelmenu .p-submenu-list {
-        margin: 0;
-        padding: 0;
-        list-style: none;
-    }
-    
-    .p-panelmenu .p-menuitem-link {
-        display: flex;
-        align-items: center;
-        user-select: none;
-        cursor: pointer;
-        text-decoration: none;
-        position: relative;
-        overflow: hidden;
-    }
-    
-    .p-panelmenu .p-menuitem-text {
-        line-height: 1;
-    }
-}
-`;
-
-const classes = {
-    root: 'p-panelmenu p-component',
-    panel: 'p-panelmenu-panel',
-    header: ({ instance, item }) => [
-        'p-panelmenu-header',
-        {
-            'p-highlight': instance.isItemActive(item),
-            'p-disabled': instance.isItemDisabled(item)
-        }
-    ],
-    headerContent: 'p-panelmenu-header-content',
-    headerAction: ({ instance, isActive, isExactActive }) => [
-        'p-panelmenu-header-action',
-        {
-            'router-link-active': isActive,
-            'router-link-active-exact': instance.exact && isExactActive
-        }
-    ],
-    headerIcon: 'p-menuitem-icon',
-    headerLabel: 'p-menuitem-text',
-    toggleableContent: 'p-toggleable-content',
-    menuContent: 'p-panelmenu-content',
-    menu: 'p-panelmenu-root-list',
-    menuitem: ({ instance, processedItem }) => [
-        'p-menuitem',
-        {
-            'p-focus': instance.isItemFocused(processedItem),
-            'p-disabled': instance.isItemDisabled(processedItem)
-        }
-    ],
-    content: 'p-menuitem-content',
-    action: ({ props, isActive, isExactActive }) => [
-        'p-menuitem-link',
-        {
-            'router-link-active': isActive,
-            'router-link-active-exact': props.exact && isExactActive
-        }
-    ],
-    icon: 'p-menuitem-icon',
-    label: 'p-menuitem-text',
-    submenuIcon: 'p-submenu-icon',
-    submenu: 'p-submenu-list',
-    separator: 'p-menuitem-separator'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'panelmenu', manual: true });
+import PanelMenuStyle from 'primevue/panelmenu/style';
 
 export default {
     name: 'BasePanelMenu',
@@ -107,10 +23,7 @@ export default {
             default: 0
         }
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: PanelMenuStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/panelmenu/package.json b/components/lib/panelmenu/package.json
index 71dbaddf7..1305a382f 100644
--- a/components/lib/panelmenu/package.json
+++ b/components/lib/panelmenu/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./panelmenu.cjs.js",
-  "module": "./panelmenu.esm.js",
-  "unpkg": "./panelmenu.min.js",
-  "types": "./PanelMenu.d.ts",
-  "browser": {
-    "./sfc": "./PanelMenu.vue"
-  }
-}
\ No newline at end of file
+    "main": "./panelmenu.cjs.js",
+    "module": "./panelmenu.esm.js",
+    "unpkg": "./panelmenu.min.js",
+    "types": "./PanelMenu.d.ts",
+    "browser": {
+        "./sfc": "./PanelMenu.vue"
+    }
+}
diff --git a/components/lib/panelmenu/style/PanelMenuStyle.js b/components/lib/panelmenu/style/PanelMenuStyle.js
new file mode 100644
index 000000000..f50272be4
--- /dev/null
+++ b/components/lib/panelmenu/style/PanelMenuStyle.js
@@ -0,0 +1,89 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-panelmenu .p-panelmenu-header-action {
+        display: flex;
+        align-items: center;
+        user-select: none;
+        cursor: pointer;
+        position: relative;
+        text-decoration: none;
+    }
+
+    .p-panelmenu .p-panelmenu-header-action:focus {
+        z-index: 1;
+    }
+
+    .p-panelmenu .p-submenu-list {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    .p-panelmenu .p-menuitem-link {
+        display: flex;
+        align-items: center;
+        user-select: none;
+        cursor: pointer;
+        text-decoration: none;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .p-panelmenu .p-menuitem-text {
+        line-height: 1;
+    }
+}
+`;
+
+const classes = {
+    root: 'p-panelmenu p-component',
+    panel: 'p-panelmenu-panel',
+    header: ({ instance, item }) => [
+        'p-panelmenu-header',
+        {
+            'p-highlight': instance.isItemActive(item),
+            'p-disabled': instance.isItemDisabled(item)
+        }
+    ],
+    headerContent: 'p-panelmenu-header-content',
+    headerAction: ({ instance, isActive, isExactActive }) => [
+        'p-panelmenu-header-action',
+        {
+            'router-link-active': isActive,
+            'router-link-active-exact': instance.exact && isExactActive
+        }
+    ],
+    headerIcon: 'p-menuitem-icon',
+    headerLabel: 'p-menuitem-text',
+    toggleableContent: 'p-toggleable-content',
+    menuContent: 'p-panelmenu-content',
+    menu: 'p-panelmenu-root-list',
+    menuitem: ({ instance, processedItem }) => [
+        'p-menuitem',
+        {
+            'p-focus': instance.isItemFocused(processedItem),
+            'p-disabled': instance.isItemDisabled(processedItem)
+        }
+    ],
+    content: 'p-menuitem-content',
+    action: ({ props, isActive, isExactActive }) => [
+        'p-menuitem-link',
+        {
+            'router-link-active': isActive,
+            'router-link-active-exact': props.exact && isExactActive
+        }
+    ],
+    icon: 'p-menuitem-icon',
+    label: 'p-menuitem-text',
+    submenuIcon: 'p-submenu-icon',
+    submenu: 'p-submenu-list',
+    separator: 'p-menuitem-separator'
+};
+
+export default BaseStyle.extend({
+    name: 'panelmenu',
+    css,
+    classes
+});
diff --git a/components/lib/panelmenu/style/package.json b/components/lib/panelmenu/style/package.json
new file mode 100644
index 000000000..638672ddd
--- /dev/null
+++ b/components/lib/panelmenu/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./panelmenustyle.cjs.js",
+    "module": "./panelmenustyle.esm.js",
+    "unpkg": "./panelmenustyle.min.js"
+}
diff --git a/components/lib/passthrough/package.json b/components/lib/passthrough/package.json
index 6f42b3185..f8e9d7ae0 100644
--- a/components/lib/passthrough/package.json
+++ b/components/lib/passthrough/package.json
@@ -3,4 +3,4 @@
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
     "types": "./index.d.ts"
-}
\ No newline at end of file
+}
diff --git a/components/lib/passthrough/tailwind/package.json b/components/lib/passthrough/tailwind/package.json
index 6f42b3185..f8e9d7ae0 100644
--- a/components/lib/passthrough/tailwind/package.json
+++ b/components/lib/passthrough/tailwind/package.json
@@ -3,4 +3,4 @@
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
     "types": "./index.d.ts"
-}
\ No newline at end of file
+}
diff --git a/components/lib/password/BasePassword.vue b/components/lib/password/BasePassword.vue
index 6da5987f6..8cd0a1a40 100644
--- a/components/lib/password/BasePassword.vue
+++ b/components/lib/password/BasePassword.vue
@@ -1,70 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-password {
-        display: inline-flex;
-    }
-    
-    .p-password .p-password-panel {
-        min-width: 100%;
-    }
-    
-    .p-password-meter {
-        height: 10px;
-    }
-    
-    .p-password-strength {
-        height: 100%;
-        width: 0;
-        transition: width 1s ease-in-out;
-    }
-    
-    .p-fluid .p-password {
-        display: flex;
-    }
-    
-    .p-password-input::-ms-reveal,
-    .p-password-input::-ms-clear {
-        display: none;
-    }
-}
-`;
-
-const inlineStyles = {
-    root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
-};
-
-const classes = {
-    root: ({ instance, props }) => [
-        'p-password p-component p-inputwrapper',
-        {
-            'p-inputwrapper-filled': instance.filled,
-            'p-inputwrapper-focus': instance.focused,
-            'p-input-icon-right': props.toggleMask
-        }
-    ],
-    input: ({ props }) => [
-        'p-password-input',
-        {
-            'p-disabled': props.disabled
-        }
-    ],
-    panel: ({ instance }) => [
-        'p-password-panel p-component',
-        {
-            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
-        }
-    ],
-    meter: 'p-password-meter',
-    meterLabel: ({ instance }) => `p-password-strength ${instance.meter ? instance.meter.strength : ''}`,
-    info: 'p-password-info'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'password', manual: true });
+import PasswordStyle from 'primevue/password/style';
 
 export default {
     name: 'BasePassword',
@@ -168,11 +104,7 @@ export default {
             default: null
         }
     },
-    css: {
-        classes,
-        inlineStyles,
-        loadStyle
-    },
+    style: PasswordStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/password/package.json b/components/lib/password/package.json
index e73129ef8..2ed8412c5 100644
--- a/components/lib/password/package.json
+++ b/components/lib/password/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./password.cjs.js",
-  "module": "./password.esm.js",
-  "unpkg": "./password.min.js",
-  "types": "./Password.d.ts",
-  "browser": {
-    "./sfc": "./Password.vue"
-  }
-}
\ No newline at end of file
+    "main": "./password.cjs.js",
+    "module": "./password.esm.js",
+    "unpkg": "./password.min.js",
+    "types": "./Password.d.ts",
+    "browser": {
+        "./sfc": "./Password.vue"
+    }
+}
diff --git a/components/lib/password/style/PasswordStyle.js b/components/lib/password/style/PasswordStyle.js
new file mode 100644
index 000000000..b1df8398b
--- /dev/null
+++ b/components/lib/password/style/PasswordStyle.js
@@ -0,0 +1,70 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-password {
+        display: inline-flex;
+    }
+
+    .p-password .p-password-panel {
+        min-width: 100%;
+    }
+
+    .p-password-meter {
+        height: 10px;
+    }
+
+    .p-password-strength {
+        height: 100%;
+        width: 0;
+        transition: width 1s ease-in-out;
+    }
+
+    .p-fluid .p-password {
+        display: flex;
+    }
+
+    .p-password-input::-ms-reveal,
+    .p-password-input::-ms-clear {
+        display: none;
+    }
+}
+`;
+
+const inlineStyles = {
+    root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
+};
+
+const classes = {
+    root: ({ instance, props }) => [
+        'p-password p-component p-inputwrapper',
+        {
+            'p-inputwrapper-filled': instance.filled,
+            'p-inputwrapper-focus': instance.focused,
+            'p-input-icon-right': props.toggleMask
+        }
+    ],
+    input: ({ props }) => [
+        'p-password-input',
+        {
+            'p-disabled': props.disabled
+        }
+    ],
+    panel: ({ instance }) => [
+        'p-password-panel p-component',
+        {
+            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
+            'p-ripple-disabled': instance.$primevue.config.ripple === false
+        }
+    ],
+    meter: 'p-password-meter',
+    meterLabel: ({ instance }) => `p-password-strength ${instance.meter ? instance.meter.strength : ''}`,
+    info: 'p-password-info'
+};
+
+export default BaseStyle.extend({
+    name: 'password',
+    css,
+    classes,
+    inlineStyles
+});
diff --git a/components/lib/password/style/package.json b/components/lib/password/style/package.json
new file mode 100644
index 000000000..b1ae76d95
--- /dev/null
+++ b/components/lib/password/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./passwordstyle.cjs.js",
+    "module": "./passwordstyle.esm.js",
+    "unpkg": "./passwordstyle.min.js"
+}
diff --git a/components/lib/picklist/BasePickList.vue b/components/lib/picklist/BasePickList.vue
index 8b017f1ac..529b22ec8 100644
--- a/components/lib/picklist/BasePickList.vue
+++ b/components/lib/picklist/BasePickList.vue
@@ -1,71 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-picklist {
-        display: flex;
-    }
-    
-    .p-picklist-buttons {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-    }
-    
-    .p-picklist-list-wrapper {
-        flex: 1 1 50%;
-    }
-    
-    .p-picklist-list {
-        list-style-type: none;
-        margin: 0;
-        padding: 0;
-        overflow: auto;
-        min-height: 12rem;
-        max-height: 24rem;
-    }
-    
-    .p-picklist-item {
-        cursor: pointer;
-        overflow: hidden;
-        position: relative;
-    }
-    
-    .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to,
-    .p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to {
-        transition: none !important;
-    }
-}
-`;
-
-const classes = {
-    root: ({ props }) => [
-        'p-picklist p-component',
-        {
-            'p-picklist-striped': props.stripedRows
-        }
-    ],
-    sourceControls: 'p-picklist-buttons p-picklist-source-controls',
-    sourceWrapper: 'p-picklist-list-wrapper p-picklist-source-wrapper',
-    sourceHeader: 'p-picklist-header',
-    sourceList: 'p-picklist-list p-picklist-source-list',
-    buttons: 'p-picklist-buttons p-picklist-transfer-buttons',
-    targetWrapper: 'p-picklist-list-wrapper p-picklist-target-wrapper',
-    targetHeader: 'p-picklist-header',
-    targetList: 'p-picklist-list p-picklist-target',
-    item: ({ instance, item, id, listIndex }) => [
-        'p-picklist-item',
-        {
-            'p-highlight': instance.isSelected(item, listIndex),
-            'p-focus': id === instance.focusedOptionId
-        }
-    ],
-    targetControls: 'p-picklist-buttons p-picklist-target-controls'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'picklist', manual: true });
+import PickListStyle from 'primevue/picklist/style';
 
 export default {
     name: 'BasePickList',
@@ -156,10 +91,7 @@ export default {
             default: 0
         }
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: PickListStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/picklist/package.json b/components/lib/picklist/package.json
index f0be18df0..22b5d410d 100644
--- a/components/lib/picklist/package.json
+++ b/components/lib/picklist/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./picklist.cjs.js",
-  "module": "./picklist.esm.js",
-  "unpkg": "./picklist.min.js",
-  "types": "./PickList.d.ts",
-  "browser": {
-    "./sfc": "./PickList.vue"
-  }
-}
\ No newline at end of file
+    "main": "./picklist.cjs.js",
+    "module": "./picklist.esm.js",
+    "unpkg": "./picklist.min.js",
+    "types": "./PickList.d.ts",
+    "browser": {
+        "./sfc": "./PickList.vue"
+    }
+}
diff --git a/components/lib/picklist/style/PickListStyle.js b/components/lib/picklist/style/PickListStyle.js
new file mode 100644
index 000000000..b98def2a1
--- /dev/null
+++ b/components/lib/picklist/style/PickListStyle.js
@@ -0,0 +1,70 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-picklist {
+        display: flex;
+    }
+
+    .p-picklist-buttons {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    .p-picklist-list-wrapper {
+        flex: 1 1 50%;
+    }
+
+    .p-picklist-list {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+        overflow: auto;
+        min-height: 12rem;
+        max-height: 24rem;
+    }
+
+    .p-picklist-item {
+        cursor: pointer;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to,
+    .p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to {
+        transition: none !important;
+    }
+}
+`;
+
+const classes = {
+    root: ({ props }) => [
+        'p-picklist p-component',
+        {
+            'p-picklist-striped': props.stripedRows
+        }
+    ],
+    sourceControls: 'p-picklist-buttons p-picklist-source-controls',
+    sourceWrapper: 'p-picklist-list-wrapper p-picklist-source-wrapper',
+    sourceHeader: 'p-picklist-header',
+    sourceList: 'p-picklist-list p-picklist-source-list',
+    buttons: 'p-picklist-buttons p-picklist-transfer-buttons',
+    targetWrapper: 'p-picklist-list-wrapper p-picklist-target-wrapper',
+    targetHeader: 'p-picklist-header',
+    targetList: 'p-picklist-list p-picklist-target',
+    item: ({ instance, item, id, listIndex }) => [
+        'p-picklist-item',
+        {
+            'p-highlight': instance.isSelected(item, listIndex),
+            'p-focus': id === instance.focusedOptionId
+        }
+    ],
+    targetControls: 'p-picklist-buttons p-picklist-target-controls'
+};
+
+export default BaseStyle.extend({
+    name: 'picklist',
+    css,
+    classes
+});
diff --git a/components/lib/picklist/style/package.json b/components/lib/picklist/style/package.json
new file mode 100644
index 000000000..2a7818f01
--- /dev/null
+++ b/components/lib/picklist/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./pickliststyle.cjs.js",
+    "module": "./pickliststyle.esm.js",
+    "unpkg": "./pickliststyle.min.js"
+}
diff --git a/components/lib/portal/package.json b/components/lib/portal/package.json
index 4153445b6..ee0a63300 100644
--- a/components/lib/portal/package.json
+++ b/components/lib/portal/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./portal.cjs.js",
-  "module": "./portal.esm.js",
-  "unpkg": "./portal.min.js",
-  "types": "./Portal.d.ts",
-  "browser": {
-    "./sfc": "./Portal.vue"
-  }
+    "main": "./portal.cjs.js",
+    "module": "./portal.esm.js",
+    "unpkg": "./portal.min.js",
+    "types": "./Portal.d.ts",
+    "browser": {
+        "./sfc": "./Portal.vue"
+    }
 }
diff --git a/components/lib/portal/style/PortalStyle.js b/components/lib/portal/style/PortalStyle.js
new file mode 100644
index 000000000..ff8b4c563
--- /dev/null
+++ b/components/lib/portal/style/PortalStyle.js
@@ -0,0 +1 @@
+export default {};
diff --git a/components/lib/portal/style/package.json b/components/lib/portal/style/package.json
new file mode 100644
index 000000000..a3ad5cae1
--- /dev/null
+++ b/components/lib/portal/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./portalstyle.cjs.js",
+    "module": "./portalstyle.esm.js",
+    "unpkg": "./portalstyle.min.js"
+}
diff --git a/components/lib/progressbar/BaseProgressBar.vue b/components/lib/progressbar/BaseProgressBar.vue
index f731193d3..8f3274d33 100644
--- a/components/lib/progressbar/BaseProgressBar.vue
+++ b/components/lib/progressbar/BaseProgressBar.vue
@@ -1,134 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-progressbar {
-        position: relative;
-        overflow: hidden;
-    }
-    
-    .p-progressbar-determinate .p-progressbar-value {
-        height: 100%;
-        width: 0%;
-        position: absolute;
-        display: none;
-        border: 0 none;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        overflow: hidden;
-    }
-    
-    .p-progressbar-determinate .p-progressbar-label {
-        display: inline-flex;
-    }
-    
-    .p-progressbar-determinate .p-progressbar-value-animate {
-        transition: width 1s ease-in-out;
-    }
-    
-    .p-progressbar-indeterminate .p-progressbar-value::before {
-        content: '';
-        position: absolute;
-        background-color: inherit;
-        top: 0;
-        left: 0;
-        bottom: 0;
-        will-change: left, right;
-        -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
-        animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
-    }
-    
-    .p-progressbar-indeterminate .p-progressbar-value::after {
-        content: '';
-        position: absolute;
-        background-color: inherit;
-        top: 0;
-        left: 0;
-        bottom: 0;
-        will-change: left, right;
-        -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
-        animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
-        -webkit-animation-delay: 1.15s;
-        animation-delay: 1.15s;
-    }
-    
-    @-webkit-keyframes p-progressbar-indeterminate-anim {
-        0% {
-            left: -35%;
-            right: 100%;
-        }
-        60% {
-            left: 100%;
-            right: -90%;
-        }
-        100% {
-            left: 100%;
-            right: -90%;
-        }
-    }
-    @keyframes p-progressbar-indeterminate-anim {
-        0% {
-            left: -35%;
-            right: 100%;
-        }
-        60% {
-            left: 100%;
-            right: -90%;
-        }
-        100% {
-            left: 100%;
-            right: -90%;
-        }
-    }
-    
-    @-webkit-keyframes p-progressbar-indeterminate-anim-short {
-        0% {
-            left: -200%;
-            right: 100%;
-        }
-        60% {
-            left: 107%;
-            right: -8%;
-        }
-        100% {
-            left: 107%;
-            right: -8%;
-        }
-    }
-    @keyframes p-progressbar-indeterminate-anim-short {
-        0% {
-            left: -200%;
-            right: 100%;
-        }
-        60% {
-            left: 107%;
-            right: -8%;
-        }
-        100% {
-            left: 107%;
-            right: -8%;
-        }
-    }
-}
-`;
-
-const classes = {
-    root: ({ instance }) => [
-        'p-progressbar p-component',
-        {
-            'p-progressbar-determinate': instance.determinate,
-            'p-progressbar-indeterminate': instance.indeterminate
-        }
-    ],
-    container: 'p-progressbar-indeterminate-container',
-    value: 'p-progressbar-value p-progressbar-value-animate',
-    label: 'p-progressbar-label'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'progressbar', manual: true });
+import ProgressBarStyle from 'primevue/progressbar/style';
 
 export default {
     name: 'BaseProgressBar',
@@ -147,10 +19,7 @@ export default {
             default: true
         }
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: ProgressBarStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/progressbar/package.json b/components/lib/progressbar/package.json
index dc14acf10..08401be92 100644
--- a/components/lib/progressbar/package.json
+++ b/components/lib/progressbar/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./progressbar.cjs.js",
-  "module": "./progressbar.esm.js",
-  "unpkg": "./progressbar.min.js",
-  "types": "./ProgressBar.d.ts",
-  "browser": {
-    "./sfc": "./ProgressBar.vue"
-  }
-}
\ No newline at end of file
+    "main": "./progressbar.cjs.js",
+    "module": "./progressbar.esm.js",
+    "unpkg": "./progressbar.min.js",
+    "types": "./ProgressBar.d.ts",
+    "browser": {
+        "./sfc": "./ProgressBar.vue"
+    }
+}
diff --git a/components/lib/progressbar/style/ProgressBarStyle.js b/components/lib/progressbar/style/ProgressBarStyle.js
new file mode 100644
index 000000000..b425d72f5
--- /dev/null
+++ b/components/lib/progressbar/style/ProgressBarStyle.js
@@ -0,0 +1,133 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-progressbar {
+        position: relative;
+        overflow: hidden;
+    }
+
+    .p-progressbar-determinate .p-progressbar-value {
+        height: 100%;
+        width: 0%;
+        position: absolute;
+        display: none;
+        border: 0 none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+    }
+
+    .p-progressbar-determinate .p-progressbar-label {
+        display: inline-flex;
+    }
+
+    .p-progressbar-determinate .p-progressbar-value-animate {
+        transition: width 1s ease-in-out;
+    }
+
+    .p-progressbar-indeterminate .p-progressbar-value::before {
+        content: '';
+        position: absolute;
+        background-color: inherit;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        will-change: left, right;
+        -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+        animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+    }
+
+    .p-progressbar-indeterminate .p-progressbar-value::after {
+        content: '';
+        position: absolute;
+        background-color: inherit;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        will-change: left, right;
+        -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+        animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+        -webkit-animation-delay: 1.15s;
+        animation-delay: 1.15s;
+    }
+
+    @-webkit-keyframes p-progressbar-indeterminate-anim {
+        0% {
+            left: -35%;
+            right: 100%;
+        }
+        60% {
+            left: 100%;
+            right: -90%;
+        }
+        100% {
+            left: 100%;
+            right: -90%;
+        }
+    }
+    @keyframes p-progressbar-indeterminate-anim {
+        0% {
+            left: -35%;
+            right: 100%;
+        }
+        60% {
+            left: 100%;
+            right: -90%;
+        }
+        100% {
+            left: 100%;
+            right: -90%;
+        }
+    }
+
+    @-webkit-keyframes p-progressbar-indeterminate-anim-short {
+        0% {
+            left: -200%;
+            right: 100%;
+        }
+        60% {
+            left: 107%;
+            right: -8%;
+        }
+        100% {
+            left: 107%;
+            right: -8%;
+        }
+    }
+    @keyframes p-progressbar-indeterminate-anim-short {
+        0% {
+            left: -200%;
+            right: 100%;
+        }
+        60% {
+            left: 107%;
+            right: -8%;
+        }
+        100% {
+            left: 107%;
+            right: -8%;
+        }
+    }
+}
+`;
+
+const classes = {
+    root: ({ instance }) => [
+        'p-progressbar p-component',
+        {
+            'p-progressbar-determinate': instance.determinate,
+            'p-progressbar-indeterminate': instance.indeterminate
+        }
+    ],
+    container: 'p-progressbar-indeterminate-container',
+    value: 'p-progressbar-value p-progressbar-value-animate',
+    label: 'p-progressbar-label'
+};
+
+export default BaseStyle.extend({
+    name: 'progressbar',
+    css,
+    classes
+});
diff --git a/components/lib/progressbar/style/package.json b/components/lib/progressbar/style/package.json
new file mode 100644
index 000000000..f0ca1a5c7
--- /dev/null
+++ b/components/lib/progressbar/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./progressbarstyle.cjs.js",
+    "module": "./progressbarstyle.esm.js",
+    "unpkg": "./progressbarstyle.min.js"
+}
diff --git a/components/lib/progressspinner/BaseProgressSpinner.vue b/components/lib/progressspinner/BaseProgressSpinner.vue
index f5227670a..e35ce1842 100644
--- a/components/lib/progressspinner/BaseProgressSpinner.vue
+++ b/components/lib/progressspinner/BaseProgressSpinner.vue
@@ -1,44 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-progress-spinner {
-        position: relative;
-        margin: 0 auto;
-        width: 100px;
-        height: 100px;
-        display: inline-block;
-    }
-    
-    .p-progress-spinner::before {
-        content: '';
-        display: block;
-        padding-top: 100%;
-    }
-    
-    .p-progress-spinner-svg {
-        height: 100%;
-        transform-origin: center center;
-        width: 100%;
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        margin: auto;
-    }
-}
-`;
-
-const classes = {
-    root: 'p-progress-spinner',
-    spinner: 'p-progress-spinner-svg',
-    circle: 'p-progress-spinner-circle'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'progressspinner', manual: true });
+import ProgressSpinnerStyle from 'primevue/progressspinner/style';
 
 export default {
     name: 'BaseProgressSpinner',
@@ -57,10 +19,7 @@ export default {
             default: '2s'
         }
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: ProgressSpinnerStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/progressspinner/package.json b/components/lib/progressspinner/package.json
index ffbe12c8d..28d3d3039 100644
--- a/components/lib/progressspinner/package.json
+++ b/components/lib/progressspinner/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./progressspinner.cjs.js",
-  "module": "./progressspinner.esm.js",
-  "unpkg": "./progressspinner.min.js",
-  "types": "./ProgressSpinner.d.ts",
-  "browser": {
-    "./sfc": "./ProgressSpinner.vue"
-  }
-}
\ No newline at end of file
+    "main": "./progressspinner.cjs.js",
+    "module": "./progressspinner.esm.js",
+    "unpkg": "./progressspinner.min.js",
+    "types": "./ProgressSpinner.d.ts",
+    "browser": {
+        "./sfc": "./ProgressSpinner.vue"
+    }
+}
diff --git a/components/lib/progressspinner/style/ProgressSpinnerStyle.js b/components/lib/progressspinner/style/ProgressSpinnerStyle.js
new file mode 100644
index 000000000..10614e24d
--- /dev/null
+++ b/components/lib/progressspinner/style/ProgressSpinnerStyle.js
@@ -0,0 +1,43 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-progress-spinner {
+        position: relative;
+        margin: 0 auto;
+        width: 100px;
+        height: 100px;
+        display: inline-block;
+    }
+
+    .p-progress-spinner::before {
+        content: '';
+        display: block;
+        padding-top: 100%;
+    }
+
+    .p-progress-spinner-svg {
+        height: 100%;
+        transform-origin: center center;
+        width: 100%;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        margin: auto;
+    }
+}
+`;
+
+const classes = {
+    root: 'p-progress-spinner',
+    spinner: 'p-progress-spinner-svg',
+    circle: 'p-progress-spinner-circle'
+};
+
+export default BaseStyle.extend({
+    name: 'progressspinner',
+    css,
+    classes
+});
diff --git a/components/lib/progressspinner/style/package.json b/components/lib/progressspinner/style/package.json
new file mode 100644
index 000000000..e53ad28cd
--- /dev/null
+++ b/components/lib/progressspinner/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./progressspinnerstyle.cjs.js",
+    "module": "./progressspinnerstyle.esm.js",
+    "unpkg": "./progressspinnerstyle.min.js"
+}
diff --git a/components/lib/radiobutton/BaseRadioButton.vue b/components/lib/radiobutton/BaseRadioButton.vue
index 6c12dc502..edfcbc134 100644
--- a/components/lib/radiobutton/BaseRadioButton.vue
+++ b/components/lib/radiobutton/BaseRadioButton.vue
@@ -1,25 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-
-const classes = {
-    root: ({ instance, props }) => [
-        'p-radiobutton p-component',
-        {
-            'p-radiobutton-checked': instance.checked,
-            'p-radiobutton-disabled': props.disabled,
-            'p-radiobutton-focused': instance.focused
-        }
-    ],
-    input: ({ instance, props }) => [
-        'p-radiobutton-box',
-        {
-            'p-highlight': instance.checked,
-            'p-disabled': props.disabled,
-            'p-focus': instance.focused
-        }
-    ],
-    icon: 'p-radiobutton-icon'
-};
+import RadioButtonStyle from 'primevue/radiobutton/style';
 
 export default {
     name: 'BaseRadioButton',
@@ -60,9 +41,7 @@ export default {
             default: null
         }
     },
-    css: {
-        classes
-    },
+    style: RadioButtonStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/radiobutton/package.json b/components/lib/radiobutton/package.json
index 764fb372d..a2ca1dbf6 100644
--- a/components/lib/radiobutton/package.json
+++ b/components/lib/radiobutton/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./radiobutton.cjs.js",
-  "module": "./radiobutton.esm.js",
-  "unpkg": "./radiobutton.min.js",
-  "types": "./RadioButton.d.ts",
-  "browser": {
-    "./sfc": "./RadioButton.vue"
-  }
-}
\ No newline at end of file
+    "main": "./radiobutton.cjs.js",
+    "module": "./radiobutton.esm.js",
+    "unpkg": "./radiobutton.min.js",
+    "types": "./RadioButton.d.ts",
+    "browser": {
+        "./sfc": "./RadioButton.vue"
+    }
+}
diff --git a/components/lib/radiobutton/style/RadioButtonStyle.js b/components/lib/radiobutton/style/RadioButtonStyle.js
new file mode 100644
index 000000000..ee0ae090f
--- /dev/null
+++ b/components/lib/radiobutton/style/RadioButtonStyle.js
@@ -0,0 +1,27 @@
+import BaseStyle from 'primevue/base/style';
+
+const classes = {
+    root: ({ instance, props }) => [
+        'p-radiobutton p-component',
+        {
+            'p-radiobutton-checked': instance.checked,
+            'p-radiobutton-disabled': props.disabled,
+            'p-radiobutton-focused': instance.focused
+        }
+    ],
+    input: ({ instance, props }) => [
+        'p-radiobutton-box',
+        {
+            'p-highlight': instance.checked,
+            'p-disabled': props.disabled,
+            'p-focus': instance.focused
+        }
+    ],
+    icon: 'p-radiobutton-icon'
+};
+
+export default BaseStyle.extend({
+    name: 'radiobutton',
+    classes,
+    loadStyle: () => {}
+});
diff --git a/components/lib/radiobutton/style/package.json b/components/lib/radiobutton/style/package.json
new file mode 100644
index 000000000..c9445b5de
--- /dev/null
+++ b/components/lib/radiobutton/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./radiobuttonstyle.cjs.js",
+    "module": "./radiobuttonstyle.esm.js",
+    "unpkg": "./radiobuttonstyle.min.js"
+}
diff --git a/components/lib/rating/BaseRating.vue b/components/lib/rating/BaseRating.vue
index 3bd3582c0..f868c3080 100644
--- a/components/lib/rating/BaseRating.vue
+++ b/components/lib/rating/BaseRating.vue
@@ -1,54 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-rating {
-        position: relative;
-        display: flex;
-        align-items: center;
-    }
-    
-    .p-rating-item {
-        display: inline-flex;
-        align-items: center;
-        cursor: pointer;
-    }
-    
-    .p-rating.p-readonly .p-rating-item {
-        cursor: default;
-    }
-}
-`;
-
-const classes = {
-    root: ({ props }) => [
-        'p-rating',
-        {
-            'p-readonly': props.readonly,
-            'p-disabled': props.disabled
-        }
-    ],
-    cancelItem: ({ instance }) => [
-        'p-rating-item p-rating-cancel-item',
-        {
-            'p-focus': instance.focusedOptionIndex === 0 && instance.isFocusVisibleItem
-        }
-    ],
-    cancelIcon: 'p-rating-icon p-rating-cancel',
-    item: ({ instance, props, value }) => [
-        'p-rating-item',
-        {
-            'p-rating-item-active': value <= props.modelValue,
-            'p-focus': value === instance.focusedOptionIndex && instance.isFocusVisibleItem
-        }
-    ],
-    onIcon: 'p-rating-icon',
-    offIcon: 'p-rating-icon'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'rating', manual: true });
+import RatingStyle from 'primevue/rating/style';
 
 export default {
     name: 'BaseRating',
@@ -87,10 +39,7 @@ export default {
             default: undefined
         }
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: RatingStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/rating/package.json b/components/lib/rating/package.json
index f766bcb7f..229de49e3 100644
--- a/components/lib/rating/package.json
+++ b/components/lib/rating/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./rating.cjs.js",
-  "module": "./rating.esm.js",
-  "unpkg": "./rating.min.js",
-  "types": "./Rating.d.ts",
-  "browser": {
-    "./sfc": "./Rating.vue"
-  }
-}
\ No newline at end of file
+    "main": "./rating.cjs.js",
+    "module": "./rating.esm.js",
+    "unpkg": "./rating.min.js",
+    "types": "./Rating.d.ts",
+    "browser": {
+        "./sfc": "./Rating.vue"
+    }
+}
diff --git a/components/lib/rating/style/RatingStyle.js b/components/lib/rating/style/RatingStyle.js
new file mode 100644
index 000000000..b003382b5
--- /dev/null
+++ b/components/lib/rating/style/RatingStyle.js
@@ -0,0 +1,53 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-rating {
+        position: relative;
+        display: flex;
+        align-items: center;
+    }
+
+    .p-rating-item {
+        display: inline-flex;
+        align-items: center;
+        cursor: pointer;
+    }
+
+    .p-rating.p-readonly .p-rating-item {
+        cursor: default;
+    }
+}
+`;
+
+const classes = {
+    root: ({ props }) => [
+        'p-rating',
+        {
+            'p-readonly': props.readonly,
+            'p-disabled': props.disabled
+        }
+    ],
+    cancelItem: ({ instance }) => [
+        'p-rating-item p-rating-cancel-item',
+        {
+            'p-focus': instance.focusedOptionIndex === 0 && instance.isFocusVisibleItem
+        }
+    ],
+    cancelIcon: 'p-rating-icon p-rating-cancel',
+    item: ({ instance, props, value }) => [
+        'p-rating-item',
+        {
+            'p-rating-item-active': value <= props.modelValue,
+            'p-focus': value === instance.focusedOptionIndex && instance.isFocusVisibleItem
+        }
+    ],
+    onIcon: 'p-rating-icon',
+    offIcon: 'p-rating-icon'
+};
+
+export default BaseStyle.extend({
+    name: 'rating',
+    css,
+    classes
+});
diff --git a/components/lib/rating/style/package.json b/components/lib/rating/style/package.json
new file mode 100644
index 000000000..7bd08c0bf
--- /dev/null
+++ b/components/lib/rating/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./ratingstyle.cjs.js",
+    "module": "./ratingstyle.esm.js",
+    "unpkg": "./ratingstyle.min.js"
+}
diff --git a/components/lib/ripple/BaseRipple.js b/components/lib/ripple/BaseRipple.js
index e305e72ef..1120fffec 100644
--- a/components/lib/ripple/BaseRipple.js
+++ b/components/lib/ripple/BaseRipple.js
@@ -1,50 +1,8 @@
 import BaseDirective from 'primevue/basedirective';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@keyframes ripple {
-    100% {
-        opacity: 0;
-        transform: scale(2.5);
-    }
-}
-
-@layer primevue {
-    .p-ripple {
-        overflow: hidden;
-        position: relative;
-    }
-    
-    .p-ink {
-        display: block;
-        position: absolute;
-        background: rgba(255, 255, 255, 0.5);
-        border-radius: 100%;
-        transform: scale(0);
-        pointer-events: none;
-    }
-    
-    .p-ink-active {
-        animation: ripple 0.4s linear;
-    }
-    
-    .p-ripple-disabled .p-ink {
-        display: none !important;
-    }
-}
-`;
-
-const classes = {
-    root: 'p-ink'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'ripple', manual: true });
+import RippleStyle from 'primevue/ripple/style';
 
 const BaseRipple = BaseDirective.extend({
-    css: {
-        classes,
-        loadStyle
-    }
+    style: RippleStyle
 });
 
 export default BaseRipple;
diff --git a/components/lib/ripple/package.json b/components/lib/ripple/package.json
index ee0f58f70..dffb24006 100644
--- a/components/lib/ripple/package.json
+++ b/components/lib/ripple/package.json
@@ -1,6 +1,6 @@
 {
-  "main": "./ripple.cjs.js",
-  "module": "./ripple.esm.js",
-  "unpkg": "./ripple.min.js",
-  "types": "./Ripple.d.ts"
-}
\ No newline at end of file
+    "main": "./ripple.cjs.js",
+    "module": "./ripple.esm.js",
+    "unpkg": "./ripple.min.js",
+    "types": "./Ripple.d.ts"
+}
diff --git a/components/lib/ripple/style/RippleStyle.js b/components/lib/ripple/style/RippleStyle.js
new file mode 100644
index 000000000..a419a3ba4
--- /dev/null
+++ b/components/lib/ripple/style/RippleStyle.js
@@ -0,0 +1,44 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@keyframes ripple {
+    100% {
+        opacity: 0;
+        transform: scale(2.5);
+    }
+}
+
+@layer primevue {
+    .p-ripple {
+        overflow: hidden;
+        position: relative;
+    }
+
+    .p-ink {
+        display: block;
+        position: absolute;
+        background: rgba(255, 255, 255, 0.5);
+        border-radius: 100%;
+        transform: scale(0);
+        pointer-events: none;
+    }
+
+    .p-ink-active {
+        animation: ripple 0.4s linear;
+    }
+
+    .p-ripple-disabled .p-ink {
+        display: none !important;
+    }
+}
+`;
+
+const classes = {
+    root: 'p-ink'
+};
+
+export default BaseStyle.extend({
+    name: 'ripple',
+    css,
+    classes
+});
diff --git a/components/lib/ripple/style/package.json b/components/lib/ripple/style/package.json
new file mode 100644
index 000000000..3c07a7d5d
--- /dev/null
+++ b/components/lib/ripple/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./ripplestyle.cjs.js",
+    "module": "./ripplestyle.esm.js",
+    "unpkg": "./ripplestyle.min.js"
+}
diff --git a/components/lib/row/package.json b/components/lib/row/package.json
index 9361fc690..7cb37b7cd 100644
--- a/components/lib/row/package.json
+++ b/components/lib/row/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./row.cjs.js",
-  "module": "./row.esm.js",
-  "unpkg": "./row.min.js",
-  "types": "./Row.d.ts",
-  "browser": {
-    "./sfc": "./Row.vue"
-  }
-}
\ No newline at end of file
+    "main": "./row.cjs.js",
+    "module": "./row.esm.js",
+    "unpkg": "./row.min.js",
+    "types": "./Row.d.ts",
+    "browser": {
+        "./sfc": "./Row.vue"
+    }
+}
diff --git a/components/lib/row/style/RowStyle.js b/components/lib/row/style/RowStyle.js
new file mode 100644
index 000000000..ff8b4c563
--- /dev/null
+++ b/components/lib/row/style/RowStyle.js
@@ -0,0 +1 @@
+export default {};
diff --git a/components/lib/row/style/package.json b/components/lib/row/style/package.json
new file mode 100644
index 000000000..622de5e08
--- /dev/null
+++ b/components/lib/row/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./rowstyle.cjs.js",
+    "module": "./rowstyle.esm.js",
+    "unpkg": "./rowstyle.min.js"
+}
diff --git a/components/lib/scrollpanel/BaseScrollPanel.vue b/components/lib/scrollpanel/BaseScrollPanel.vue
index 699aae84c..59f7dcd3e 100644
--- a/components/lib/scrollpanel/BaseScrollPanel.vue
+++ b/components/lib/scrollpanel/BaseScrollPanel.vue
@@ -1,76 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-scrollpanel-wrapper {
-        overflow: hidden;
-        width: 100%;
-        height: 100%;
-        position: relative;
-        z-index: 1;
-        float: left;
-    }
-    
-    .p-scrollpanel-content {
-        height: calc(100% + 18px);
-        width: calc(100% + 18px);
-        padding: 0 18px 18px 0;
-        position: relative;
-        overflow: scroll;
-        box-sizing: border-box;
-        scrollbar-width: none;
-    }
-    
-    .p-scrollpanel-content::-webkit-scrollbar {
-        display: none;
-    }
-    
-    .p-scrollpanel-bar {
-        position: relative;
-        background: #c1c1c1;
-        border-radius: 3px;
-        z-index: 2;
-        cursor: pointer;
-        opacity: 0;
-        transition: opacity 0.25s linear;
-    }
-    
-    .p-scrollpanel-bar-y {
-        width: 9px;
-        top: 0;
-    }
-    
-    .p-scrollpanel-bar-x {
-        height: 9px;
-        bottom: 0;
-    }
-    
-    .p-scrollpanel-hidden {
-        visibility: hidden;
-    }
-    
-    .p-scrollpanel:hover .p-scrollpanel-bar,
-    .p-scrollpanel:active .p-scrollpanel-bar {
-        opacity: 1;
-    }
-    
-    .p-scrollpanel-grabbed {
-        user-select: none;
-    }
-}
-`;
-
-const classes = {
-    root: 'p-scrollpanel p-component',
-    wrapper: 'p-scrollpanel-wrapper',
-    content: 'p-scrollpanel-content',
-    barx: 'p-scrollpanel-bar p-scrollpanel-bar-x',
-    bary: 'p-scrollpanel-bar p-scrollpanel-bar-y'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'scrollpanel', manual: true });
+import ScrollPanelStyle from 'primevue/scrollpanel/style';
 
 export default {
     name: 'BaseScrollPanel',
@@ -81,10 +11,7 @@ export default {
             default: 5
         }
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: ScrollPanelStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/scrollpanel/package.json b/components/lib/scrollpanel/package.json
index 61ee21a9d..eea8895cb 100644
--- a/components/lib/scrollpanel/package.json
+++ b/components/lib/scrollpanel/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./scrollpanel.cjs.js",
-  "module": "./scrollpanel.esm.js",
-  "unpkg": "./scrollpanel.min.js",
-  "types": "./ScrollPanel.d.ts",
-  "browser": {
-    "./sfc": "./ScrollPanel.vue"
-  }
-}
\ No newline at end of file
+    "main": "./scrollpanel.cjs.js",
+    "module": "./scrollpanel.esm.js",
+    "unpkg": "./scrollpanel.min.js",
+    "types": "./ScrollPanel.d.ts",
+    "browser": {
+        "./sfc": "./ScrollPanel.vue"
+    }
+}
diff --git a/components/lib/scrollpanel/style/ScrollPanelStyle.js b/components/lib/scrollpanel/style/ScrollPanelStyle.js
new file mode 100644
index 000000000..8cb578fd6
--- /dev/null
+++ b/components/lib/scrollpanel/style/ScrollPanelStyle.js
@@ -0,0 +1,75 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-scrollpanel-wrapper {
+        overflow: hidden;
+        width: 100%;
+        height: 100%;
+        position: relative;
+        z-index: 1;
+        float: left;
+    }
+
+    .p-scrollpanel-content {
+        height: calc(100% + 18px);
+        width: calc(100% + 18px);
+        padding: 0 18px 18px 0;
+        position: relative;
+        overflow: scroll;
+        box-sizing: border-box;
+        scrollbar-width: none;
+    }
+
+    .p-scrollpanel-content::-webkit-scrollbar {
+        display: none;
+    }
+
+    .p-scrollpanel-bar {
+        position: relative;
+        background: #c1c1c1;
+        border-radius: 3px;
+        z-index: 2;
+        cursor: pointer;
+        opacity: 0;
+        transition: opacity 0.25s linear;
+    }
+
+    .p-scrollpanel-bar-y {
+        width: 9px;
+        top: 0;
+    }
+
+    .p-scrollpanel-bar-x {
+        height: 9px;
+        bottom: 0;
+    }
+
+    .p-scrollpanel-hidden {
+        visibility: hidden;
+    }
+
+    .p-scrollpanel:hover .p-scrollpanel-bar,
+    .p-scrollpanel:active .p-scrollpanel-bar {
+        opacity: 1;
+    }
+
+    .p-scrollpanel-grabbed {
+        user-select: none;
+    }
+}
+`;
+
+const classes = {
+    root: 'p-scrollpanel p-component',
+    wrapper: 'p-scrollpanel-wrapper',
+    content: 'p-scrollpanel-content',
+    barx: 'p-scrollpanel-bar p-scrollpanel-bar-x',
+    bary: 'p-scrollpanel-bar p-scrollpanel-bar-y'
+};
+
+export default BaseStyle.extend({
+    name: 'scrollpanel',
+    css,
+    classes
+});
diff --git a/components/lib/scrollpanel/style/package.json b/components/lib/scrollpanel/style/package.json
new file mode 100644
index 000000000..3832b63ae
--- /dev/null
+++ b/components/lib/scrollpanel/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./scrollpanelstyle.cjs.js",
+    "module": "./scrollpanelstyle.esm.js",
+    "unpkg": "./scrollpanelstyle.min.js"
+}
diff --git a/components/lib/scrolltop/BaseScrollTop.vue b/components/lib/scrolltop/BaseScrollTop.vue
index ee52caea4..56c686e4f 100644
--- a/components/lib/scrolltop/BaseScrollTop.vue
+++ b/components/lib/scrolltop/BaseScrollTop.vue
@@ -1,50 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-scrolltop {
-        position: fixed;
-        bottom: 20px;
-        right: 20px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-    
-    .p-scrolltop-sticky {
-        position: sticky;
-    }
-    
-    .p-scrolltop-sticky.p-link {
-        margin-left: auto;
-    }
-    
-    .p-scrolltop-enter-from {
-        opacity: 0;
-    }
-    
-    .p-scrolltop-enter-active {
-        transition: opacity 0.15s;
-    }
-    
-    .p-scrolltop.p-scrolltop-leave-to {
-        opacity: 0;
-    }
-    
-    .p-scrolltop-leave-active {
-        transition: opacity 0.15s;
-    }
-}
-`;
-
-const classes = {
-    root: ({ props }) => ['p-scrolltop p-link p-component', { 'p-scrolltop-sticky': props.target !== 'window' }],
-    icon: 'p-scrolltop-icon'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'scrolltop', manual: true });
+import ScrollTopStyle from 'primevue/scrolltop/style';
 
 export default {
     name: 'BaseScrollTop',
@@ -67,10 +23,7 @@ export default {
             default: 'smooth'
         }
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: ScrollTopStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/scrolltop/package.json b/components/lib/scrolltop/package.json
index 69d990a17..bbcc717aa 100644
--- a/components/lib/scrolltop/package.json
+++ b/components/lib/scrolltop/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./scrolltop.cjs.js",
-  "module": "./scrolltop.esm.js",
-  "unpkg": "./scrolltop.min.js",
-  "types": "./ScrollTop.d.ts",
-  "browser": {
-    "./sfc": "./ScrollTop.vue"
-  }
-}
\ No newline at end of file
+    "main": "./scrolltop.cjs.js",
+    "module": "./scrolltop.esm.js",
+    "unpkg": "./scrolltop.min.js",
+    "types": "./ScrollTop.d.ts",
+    "browser": {
+        "./sfc": "./ScrollTop.vue"
+    }
+}
diff --git a/components/lib/scrolltop/style/ScrollTopStyle.js b/components/lib/scrolltop/style/ScrollTopStyle.js
new file mode 100644
index 000000000..fafadfcf8
--- /dev/null
+++ b/components/lib/scrolltop/style/ScrollTopStyle.js
@@ -0,0 +1,49 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-scrolltop {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .p-scrolltop-sticky {
+        position: sticky;
+    }
+
+    .p-scrolltop-sticky.p-link {
+        margin-left: auto;
+    }
+
+    .p-scrolltop-enter-from {
+        opacity: 0;
+    }
+
+    .p-scrolltop-enter-active {
+        transition: opacity 0.15s;
+    }
+
+    .p-scrolltop.p-scrolltop-leave-to {
+        opacity: 0;
+    }
+
+    .p-scrolltop-leave-active {
+        transition: opacity 0.15s;
+    }
+}
+`;
+
+const classes = {
+    root: ({ props }) => ['p-scrolltop p-link p-component', { 'p-scrolltop-sticky': props.target !== 'window' }],
+    icon: 'p-scrolltop-icon'
+};
+
+export default BaseStyle.extend({
+    name: 'scrolltop',
+    css,
+    classes
+});
diff --git a/components/lib/scrolltop/style/package.json b/components/lib/scrolltop/style/package.json
new file mode 100644
index 000000000..5a1fb8ef8
--- /dev/null
+++ b/components/lib/scrolltop/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./scrolltopstyle.cjs.js",
+    "module": "./scrolltopstyle.esm.js",
+    "unpkg": "./scrolltopstyle.min.js"
+}
diff --git a/components/lib/selectbutton/BaseSelectButton.vue b/components/lib/selectbutton/BaseSelectButton.vue
index 996203542..7ea87474c 100644
--- a/components/lib/selectbutton/BaseSelectButton.vue
+++ b/components/lib/selectbutton/BaseSelectButton.vue
@@ -1,17 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-
-const classes = {
-    root: ({ props }) => ['p-selectbutton p-buttonset p-component', { 'p-disabled': props.disabled }],
-    button: ({ instance, option }) => [
-        'p-button p-component',
-        {
-            'p-highlight': instance.isSelected(option),
-            'p-disabled': instance.isOptionDisabled(option)
-        }
-    ],
-    label: 'p-button-label'
-};
+import SelectButtonStyle from 'primevue/selectbutton/style';
 
 export default {
     name: 'BaseSelectButton',
@@ -34,9 +23,7 @@ export default {
             default: null
         }
     },
-    css: {
-        classes
-    },
+    style: SelectButtonStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/selectbutton/package.json b/components/lib/selectbutton/package.json
index 9183b67ea..276506844 100644
--- a/components/lib/selectbutton/package.json
+++ b/components/lib/selectbutton/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./selectbutton.cjs.js",
-  "module": "./selectbutton.esm.js",
-  "unpkg": "./selectbutton.min.js",
-  "types": "./SelectButton.d.ts",
-  "browser": {
-    "./sfc": "./SelectButton.vue"
-  }
-}
\ No newline at end of file
+    "main": "./selectbutton.cjs.js",
+    "module": "./selectbutton.esm.js",
+    "unpkg": "./selectbutton.min.js",
+    "types": "./SelectButton.d.ts",
+    "browser": {
+        "./sfc": "./SelectButton.vue"
+    }
+}
diff --git a/components/lib/selectbutton/style/SelectButtonStyle.js b/components/lib/selectbutton/style/SelectButtonStyle.js
new file mode 100644
index 000000000..7de7e2172
--- /dev/null
+++ b/components/lib/selectbutton/style/SelectButtonStyle.js
@@ -0,0 +1,19 @@
+import BaseStyle from 'primevue/base/style';
+
+const classes = {
+    root: ({ props }) => ['p-selectbutton p-buttonset p-component', { 'p-disabled': props.disabled }],
+    button: ({ instance, option }) => [
+        'p-button p-component',
+        {
+            'p-highlight': instance.isSelected(option),
+            'p-disabled': instance.isOptionDisabled(option)
+        }
+    ],
+    label: 'p-button-label'
+};
+
+export default BaseStyle.extend({
+    name: 'selectbutton',
+    classes,
+    loadStyle: () => {}
+});
diff --git a/components/lib/selectbutton/style/package.json b/components/lib/selectbutton/style/package.json
new file mode 100644
index 000000000..93a68e1b5
--- /dev/null
+++ b/components/lib/selectbutton/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./selectbuttonstyle.cjs.js",
+    "module": "./selectbuttonstyle.esm.js",
+    "unpkg": "./selectbuttonstyle.min.js"
+}
diff --git a/components/lib/sidebar/BaseSidebar.vue b/components/lib/sidebar/BaseSidebar.vue
index a197811e7..46dcd8805 100644
--- a/components/lib/sidebar/BaseSidebar.vue
+++ b/components/lib/sidebar/BaseSidebar.vue
@@ -1,206 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-sidebar-mask {
-        display: none;
-        pointer-events: none;
-        background-color: transparent;
-        transition-property: background-color;
-    }
-    
-    .p-sidebar-mask.p-component-overlay {
-        pointer-events: auto;
-    }
-    
-    .p-sidebar-visible {
-        display: flex;
-    }
-    
-    .p-sidebar {
-        display: flex;
-        flex-direction: column;
-        pointer-events: auto;
-        transform: translate3d(0px, 0px, 0px);
-        position: relative;
-        transition: transform 0.3s;
-    }
-    
-    .p-sidebar-content {
-        overflow-y: auto;
-        flex-grow: 1;
-    }
-    
-    .p-sidebar-header {
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-        flex-shrink: 0;
-    }
-    
-    .p-sidebar-icon {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        overflow: hidden;
-        position: relative;
-    }
-    
-    .p-sidebar-full .p-sidebar {
-        transition: none;
-        transform: none;
-        width: 100vw !important;
-        height: 100vh !important;
-        max-height: 100%;
-        top: 0px !important;
-        left: 0px !important;
-    }
-    
-    /* Animation */
-    /* Center */
-    .p-sidebar-left .p-sidebar-enter-from,
-    .p-sidebar-left .p-sidebar-leave-to {
-        transform: translateX(-100%);
-    }
-    .p-sidebar-right .p-sidebar-enter-from,
-    .p-sidebar-right .p-sidebar-leave-to {
-        transform: translateX(100%);
-    }
-    .p-sidebar-top .p-sidebar-enter-from,
-    .p-sidebar-top .p-sidebar-leave-to {
-        transform: translateY(-100%);
-    }
-    .p-sidebar-bottom .p-sidebar-enter-from,
-    .p-sidebar-bottom .p-sidebar-leave-to {
-        transform: translateY(100%);
-    }
-    .p-sidebar-full .p-sidebar-enter-from,
-    .p-sidebar-full .p-sidebar-leave-to {
-        opacity: 0;
-    }
-    .p-sidebar-full .p-sidebar-enter-active,
-    .p-sidebar-full .p-sidebar-leave-active {
-        transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
-    }
-    
-    /* Size */
-    .p-sidebar-left .p-sidebar {
-        width: 20rem;
-        height: 100%;
-    }
-    
-    .p-sidebar-right .p-sidebar {
-        width: 20rem;
-        height: 100%;
-    }
-    
-    .p-sidebar-top .p-sidebar {
-        height: 10rem;
-        width: 100%;
-    }
-    
-    .p-sidebar-bottom .p-sidebar {
-        height: 10rem;
-        width: 100%;
-    }
-    
-    .p-sidebar-left .p-sidebar-sm,
-    .p-sidebar-right .p-sidebar-sm {
-        width: 20rem;
-    }
-    
-    .p-sidebar-left .p-sidebar-md,
-    .p-sidebar-right .p-sidebar-md {
-        width: 40rem;
-    }
-    
-    .p-sidebar-left .p-sidebar-lg,
-    .p-sidebar-right .p-sidebar-lg {
-        width: 60rem;
-    }
-    
-    .p-sidebar-top .p-sidebar-sm,
-    .p-sidebar-bottom .p-sidebar-sm {
-        height: 10rem;
-    }
-    
-    .p-sidebar-top .p-sidebar-md,
-    .p-sidebar-bottom .p-sidebar-md {
-        height: 20rem;
-    }
-    
-    .p-sidebar-top .p-sidebar-lg,
-    .p-sidebar-bottom .p-sidebar-lg {
-        height: 30rem;
-    }
-    
-    .p-sidebar-left .p-sidebar-content,
-    .p-sidebar-right .p-sidebar-content,
-    .p-sidebar-top .p-sidebar-content,
-    .p-sidebar-bottom .p-sidebar-content {
-        width: 100%;
-        height: 100%;
-    }
-    
-    @media screen and (max-width: 64em) {
-        .p-sidebar-left .p-sidebar-lg,
-        .p-sidebar-left .p-sidebar-md,
-        .p-sidebar-right .p-sidebar-lg,
-        .p-sidebar-right .p-sidebar-md {
-            width: 20rem;
-        }
-    }
-}
-`;
-
-/* Position */
-const inlineStyles = {
-    mask: ({ position }) => ({
-        position: 'fixed',
-        height: '100%',
-        width: '100%',
-        left: 0,
-        top: 0,
-        display: 'flex',
-        justifyContent: position === 'left' ? 'flex-start' : position === 'right' ? 'flex-end' : 'center',
-        alignItems: position === 'top' ? 'flex-start' : position === 'bottom' ? 'flex-end' : 'center'
-    })
-};
-
-const classes = {
-    mask: ({ instance, props }) => {
-        const positions = ['left', 'right', 'top', 'bottom'];
-        const pos = positions.find((item) => item === props.position);
-
-        return [
-            'p-sidebar-mask',
-            {
-                'p-component-overlay p-component-overlay-enter': props.modal,
-                'p-sidebar-mask-scrollblocker': props.blockScroll,
-                'p-sidebar-visible': instance.containerVisible,
-                'p-sidebar-full': instance.fullScreen
-            },
-            pos ? `p-sidebar-${pos}` : ''
-        ];
-    },
-    root: ({ instance }) => [
-        'p-sidebar p-component',
-        {
-            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
-            'p-ripple-disabled': instance.$primevue.config.ripple === false,
-            'p-sidebar-full': instance.fullScreen
-        }
-    ],
-    header: 'p-sidebar-header',
-    headerContent: 'p-sidebar-header-content',
-    closeButton: 'p-sidebar-close p-sidebar-icon p-link',
-    closeIcon: 'p-sidebar-close-icon',
-    content: 'p-sidebar-content'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'sidebar', manual: true });
+import SidebarStyle from 'primevue/sidebar/style';
 
 export default {
     name: 'BaseSidebar',
@@ -243,11 +43,7 @@ export default {
             default: false
         }
     },
-    css: {
-        classes,
-        inlineStyles,
-        loadStyle
-    },
+    style: SidebarStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/sidebar/package.json b/components/lib/sidebar/package.json
index 3890cce8a..2c2f8fc74 100644
--- a/components/lib/sidebar/package.json
+++ b/components/lib/sidebar/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./sidebar.cjs.js",
-  "module": "./sidebar.esm.js",
-  "unpkg": "./sidebar.min.js",
-  "types": "./Sidebar.d.ts",
-  "browser": {
-    "./sfc": "./Sidebar.vue"
-  }
-}
\ No newline at end of file
+    "main": "./sidebar.cjs.js",
+    "module": "./sidebar.esm.js",
+    "unpkg": "./sidebar.min.js",
+    "types": "./Sidebar.d.ts",
+    "browser": {
+        "./sfc": "./Sidebar.vue"
+    }
+}
diff --git a/components/lib/sidebar/style/SidebarStyle.js b/components/lib/sidebar/style/SidebarStyle.js
new file mode 100644
index 000000000..79a6e3d3b
--- /dev/null
+++ b/components/lib/sidebar/style/SidebarStyle.js
@@ -0,0 +1,205 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-sidebar-mask {
+        display: none;
+        pointer-events: none;
+        background-color: transparent;
+        transition-property: background-color;
+    }
+
+    .p-sidebar-mask.p-component-overlay {
+        pointer-events: auto;
+    }
+
+    .p-sidebar-visible {
+        display: flex;
+    }
+
+    .p-sidebar {
+        display: flex;
+        flex-direction: column;
+        pointer-events: auto;
+        transform: translate3d(0px, 0px, 0px);
+        position: relative;
+        transition: transform 0.3s;
+    }
+
+    .p-sidebar-content {
+        overflow-y: auto;
+        flex-grow: 1;
+    }
+
+    .p-sidebar-header {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        flex-shrink: 0;
+    }
+
+    .p-sidebar-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .p-sidebar-full .p-sidebar {
+        transition: none;
+        transform: none;
+        width: 100vw !important;
+        height: 100vh !important;
+        max-height: 100%;
+        top: 0px !important;
+        left: 0px !important;
+    }
+
+    /* Animation */
+    /* Center */
+    .p-sidebar-left .p-sidebar-enter-from,
+    .p-sidebar-left .p-sidebar-leave-to {
+        transform: translateX(-100%);
+    }
+    .p-sidebar-right .p-sidebar-enter-from,
+    .p-sidebar-right .p-sidebar-leave-to {
+        transform: translateX(100%);
+    }
+    .p-sidebar-top .p-sidebar-enter-from,
+    .p-sidebar-top .p-sidebar-leave-to {
+        transform: translateY(-100%);
+    }
+    .p-sidebar-bottom .p-sidebar-enter-from,
+    .p-sidebar-bottom .p-sidebar-leave-to {
+        transform: translateY(100%);
+    }
+    .p-sidebar-full .p-sidebar-enter-from,
+    .p-sidebar-full .p-sidebar-leave-to {
+        opacity: 0;
+    }
+    .p-sidebar-full .p-sidebar-enter-active,
+    .p-sidebar-full .p-sidebar-leave-active {
+        transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
+    }
+
+    /* Size */
+    .p-sidebar-left .p-sidebar {
+        width: 20rem;
+        height: 100%;
+    }
+
+    .p-sidebar-right .p-sidebar {
+        width: 20rem;
+        height: 100%;
+    }
+
+    .p-sidebar-top .p-sidebar {
+        height: 10rem;
+        width: 100%;
+    }
+
+    .p-sidebar-bottom .p-sidebar {
+        height: 10rem;
+        width: 100%;
+    }
+
+    .p-sidebar-left .p-sidebar-sm,
+    .p-sidebar-right .p-sidebar-sm {
+        width: 20rem;
+    }
+
+    .p-sidebar-left .p-sidebar-md,
+    .p-sidebar-right .p-sidebar-md {
+        width: 40rem;
+    }
+
+    .p-sidebar-left .p-sidebar-lg,
+    .p-sidebar-right .p-sidebar-lg {
+        width: 60rem;
+    }
+
+    .p-sidebar-top .p-sidebar-sm,
+    .p-sidebar-bottom .p-sidebar-sm {
+        height: 10rem;
+    }
+
+    .p-sidebar-top .p-sidebar-md,
+    .p-sidebar-bottom .p-sidebar-md {
+        height: 20rem;
+    }
+
+    .p-sidebar-top .p-sidebar-lg,
+    .p-sidebar-bottom .p-sidebar-lg {
+        height: 30rem;
+    }
+
+    .p-sidebar-left .p-sidebar-content,
+    .p-sidebar-right .p-sidebar-content,
+    .p-sidebar-top .p-sidebar-content,
+    .p-sidebar-bottom .p-sidebar-content {
+        width: 100%;
+        height: 100%;
+    }
+
+    @media screen and (max-width: 64em) {
+        .p-sidebar-left .p-sidebar-lg,
+        .p-sidebar-left .p-sidebar-md,
+        .p-sidebar-right .p-sidebar-lg,
+        .p-sidebar-right .p-sidebar-md {
+            width: 20rem;
+        }
+    }
+}
+`;
+
+const inlineStyles = {
+    mask: ({ position }) => ({
+        position: 'fixed',
+        height: '100%',
+        width: '100%',
+        left: 0,
+        top: 0,
+        display: 'flex',
+        justifyContent: position === 'left' ? 'flex-start' : position === 'right' ? 'flex-end' : 'center',
+        alignItems: position === 'top' ? 'flex-start' : position === 'bottom' ? 'flex-end' : 'center'
+    })
+};
+
+const classes = {
+    mask: ({ instance, props }) => {
+        const positions = ['left', 'right', 'top', 'bottom'];
+        const pos = positions.find((item) => item === props.position);
+
+        return [
+            'p-sidebar-mask',
+            {
+                'p-component-overlay p-component-overlay-enter': props.modal,
+                'p-sidebar-mask-scrollblocker': props.blockScroll,
+                'p-sidebar-visible': instance.containerVisible,
+                'p-sidebar-full': instance.fullScreen
+            },
+            pos ? `p-sidebar-${pos}` : ''
+        ];
+    },
+    root: ({ instance }) => [
+        'p-sidebar p-component',
+        {
+            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
+            'p-ripple-disabled': instance.$primevue.config.ripple === false,
+            'p-sidebar-full': instance.fullScreen
+        }
+    ],
+    header: 'p-sidebar-header',
+    headerContent: 'p-sidebar-header-content',
+    closeButton: 'p-sidebar-close p-sidebar-icon p-link',
+    closeIcon: 'p-sidebar-close-icon',
+    content: 'p-sidebar-content'
+};
+
+export default BaseStyle.extend({
+    name: 'sidebar',
+    css,
+    classes,
+    inlineStyles
+});
diff --git a/components/lib/sidebar/style/package.json b/components/lib/sidebar/style/package.json
new file mode 100644
index 000000000..4d8d46f74
--- /dev/null
+++ b/components/lib/sidebar/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./sidebarstyle.cjs.js",
+    "module": "./sidebarstyle.esm.js",
+    "unpkg": "./sidebarstyle.min.js"
+}
diff --git a/components/lib/skeleton/BaseSkeleton.vue b/components/lib/skeleton/BaseSkeleton.vue
index c371de668..187222c1d 100644
--- a/components/lib/skeleton/BaseSkeleton.vue
+++ b/components/lib/skeleton/BaseSkeleton.vue
@@ -1,59 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-skeleton {
-        overflow: hidden;
-    }
-    
-    .p-skeleton::after {
-        content: '';
-        animation: p-skeleton-animation 1.2s infinite;
-        height: 100%;
-        left: 0;
-        position: absolute;
-        right: 0;
-        top: 0;
-        transform: translateX(-100%);
-        z-index: 1;
-    }
-    
-    .p-skeleton.p-skeleton-circle {
-        border-radius: 50%;
-    }
-    
-    .p-skeleton-none::after {
-        animation: none;
-    }
-    
-    @keyframes p-skeleton-animation {
-        from {
-            transform: translateX(-100%);
-        }
-        to {
-            transform: translateX(100%);
-        }
-    }
-}
-`;
-
-const inlineStyles = {
-    root: { position: 'relative' }
-};
-
-const classes = {
-    root: ({ props }) => [
-        'p-skeleton p-component',
-        {
-            'p-skeleton-circle': props.shape === 'circle',
-            'p-skeleton-none': props.animation === 'none'
-        }
-    ]
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'skeleton', manual: true });
+import SkeletonStyle from 'primevue/skeleton/style';
 
 export default {
     name: 'BaseSkeleton',
@@ -84,11 +31,7 @@ export default {
             default: 'wave'
         }
     },
-    css: {
-        classes,
-        inlineStyles,
-        loadStyle
-    },
+    style: SkeletonStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/skeleton/package.json b/components/lib/skeleton/package.json
index a81355416..83cec73b6 100644
--- a/components/lib/skeleton/package.json
+++ b/components/lib/skeleton/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./skeleton.cjs.js",
-  "module": "./skeleton.esm.js",
-  "unpkg": "./skeleton.min.js",
-  "types": "./Skeleton.d.ts",
-  "browser": {
-    "./sfc": "./Skeleton.vue"
-  }
-}
\ No newline at end of file
+    "main": "./skeleton.cjs.js",
+    "module": "./skeleton.esm.js",
+    "unpkg": "./skeleton.min.js",
+    "types": "./Skeleton.d.ts",
+    "browser": {
+        "./sfc": "./Skeleton.vue"
+    }
+}
diff --git a/components/lib/skeleton/style/SkeletonStyle.js b/components/lib/skeleton/style/SkeletonStyle.js
new file mode 100644
index 000000000..07eb4894d
--- /dev/null
+++ b/components/lib/skeleton/style/SkeletonStyle.js
@@ -0,0 +1,59 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-skeleton {
+        overflow: hidden;
+    }
+
+    .p-skeleton::after {
+        content: '';
+        animation: p-skeleton-animation 1.2s infinite;
+        height: 100%;
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+        transform: translateX(-100%);
+        z-index: 1;
+    }
+
+    .p-skeleton.p-skeleton-circle {
+        border-radius: 50%;
+    }
+
+    .p-skeleton-none::after {
+        animation: none;
+    }
+
+    @keyframes p-skeleton-animation {
+        from {
+            transform: translateX(-100%);
+        }
+        to {
+            transform: translateX(100%);
+        }
+    }
+}
+`;
+
+const inlineStyles = {
+    root: { position: 'relative' }
+};
+
+const classes = {
+    root: ({ props }) => [
+        'p-skeleton p-component',
+        {
+            'p-skeleton-circle': props.shape === 'circle',
+            'p-skeleton-none': props.animation === 'none'
+        }
+    ]
+};
+
+export default BaseStyle.extend({
+    name: 'skeleton',
+    css,
+    classes,
+    inlineStyles
+});
diff --git a/components/lib/skeleton/style/package.json b/components/lib/skeleton/style/package.json
new file mode 100644
index 000000000..f4cb1b218
--- /dev/null
+++ b/components/lib/skeleton/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./skeletonstyle.cjs.js",
+    "module": "./skeletonstyle.esm.js",
+    "unpkg": "./skeletonstyle.min.js"
+}
diff --git a/components/lib/slider/BaseSlider.vue b/components/lib/slider/BaseSlider.vue
index 6c0a188da..6b6e9fac4 100644
--- a/components/lib/slider/BaseSlider.vue
+++ b/components/lib/slider/BaseSlider.vue
@@ -1,68 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-slider {
-        position: relative;
-    }
-    
-    .p-slider .p-slider-handle {
-        cursor: grab;
-        touch-action: none;
-        display: block;
-    }
-    
-    .p-slider-range {
-        display: block;
-    }
-    
-    .p-slider-horizontal .p-slider-range {
-        top: 0;
-        left: 0;
-        height: 100%;
-    }
-    
-    .p-slider-horizontal .p-slider-handle {
-        top: 50%;
-    }
-    
-    .p-slider-vertical {
-        height: 100px;
-    }
-    
-    .p-slider-vertical .p-slider-handle {
-        left: 50%;
-    }
-    
-    .p-slider-vertical .p-slider-range {
-        bottom: 0;
-        left: 0;
-        width: 100%;
-    }
-}
-`;
-
-const inlineStyles = {
-    handle: { position: 'absolute' },
-    range: { position: 'absolute' }
-};
-
-const classes = {
-    root: ({ props }) => [
-        'p-slider p-component',
-        {
-            'p-disabled': props.disabled,
-            'p-slider-horizontal': props.orientation === 'horizontal',
-            'p-slider-vertical': props.orientation === 'vertical'
-        }
-    ],
-    range: 'p-slider-range',
-    handle: 'p-slider-handle'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'slider', manual: true });
+import SliderStyle from 'primevue/slider/style';
 
 export default {
     name: 'BaseSlider',
@@ -106,11 +44,7 @@ export default {
             default: null
         }
     },
-    css: {
-        classes,
-        inlineStyles,
-        loadStyle
-    },
+    style: SliderStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/slider/package.json b/components/lib/slider/package.json
index ebbb97ca7..f5151193e 100644
--- a/components/lib/slider/package.json
+++ b/components/lib/slider/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./slider.cjs.js",
-  "module": "./slider.esm.js",
-  "unpkg": "./slider.min.js",
-  "types": "./Slider.d.ts",
-  "browser": {
-    "./sfc": "./Slider.vue"
-  }
-}
\ No newline at end of file
+    "main": "./slider.cjs.js",
+    "module": "./slider.esm.js",
+    "unpkg": "./slider.min.js",
+    "types": "./Slider.d.ts",
+    "browser": {
+        "./sfc": "./Slider.vue"
+    }
+}
diff --git a/components/lib/slider/style/SliderStyle.js b/components/lib/slider/style/SliderStyle.js
new file mode 100644
index 000000000..a1b5ba30e
--- /dev/null
+++ b/components/lib/slider/style/SliderStyle.js
@@ -0,0 +1,68 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-slider {
+        position: relative;
+    }
+
+    .p-slider .p-slider-handle {
+        cursor: grab;
+        touch-action: none;
+        display: block;
+    }
+
+    .p-slider-range {
+        display: block;
+    }
+
+    .p-slider-horizontal .p-slider-range {
+        top: 0;
+        left: 0;
+        height: 100%;
+    }
+
+    .p-slider-horizontal .p-slider-handle {
+        top: 50%;
+    }
+
+    .p-slider-vertical {
+        height: 100px;
+    }
+
+    .p-slider-vertical .p-slider-handle {
+        left: 50%;
+    }
+
+    .p-slider-vertical .p-slider-range {
+        bottom: 0;
+        left: 0;
+        width: 100%;
+    }
+}
+`;
+
+const inlineStyles = {
+    handle: { position: 'absolute' },
+    range: { position: 'absolute' }
+};
+
+const classes = {
+    root: ({ props }) => [
+        'p-slider p-component',
+        {
+            'p-disabled': props.disabled,
+            'p-slider-horizontal': props.orientation === 'horizontal',
+            'p-slider-vertical': props.orientation === 'vertical'
+        }
+    ],
+    range: 'p-slider-range',
+    handle: 'p-slider-handle'
+};
+
+export default BaseStyle.extend({
+    name: 'slider',
+    css,
+    classes,
+    inlineStyles
+});
diff --git a/components/lib/slider/style/package.json b/components/lib/slider/style/package.json
new file mode 100644
index 000000000..15890d7a2
--- /dev/null
+++ b/components/lib/slider/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./sliderstyle.cjs.js",
+    "module": "./sliderstyle.esm.js",
+    "unpkg": "./sliderstyle.min.js"
+}
diff --git a/components/lib/speeddial/BaseSpeedDial.vue b/components/lib/speeddial/BaseSpeedDial.vue
index 40e073895..f66798da8 100644
--- a/components/lib/speeddial/BaseSpeedDial.vue
+++ b/components/lib/speeddial/BaseSpeedDial.vue
@@ -1,138 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-speeddial {
-        position: absolute;
-        display: flex;
-    }
-    
-    .p-speeddial-button {
-        z-index: 1;
-    }
-    
-    .p-speeddial-list {
-        margin: 0;
-        padding: 0;
-        list-style: none;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        transition: top 0s linear 0.2s;
-        pointer-events: none;
-        z-index: 2;
-    }
-    
-    .p-speeddial-item {
-        transform: scale(0);
-        opacity: 0;
-        transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s;
-        will-change: transform;
-    }
-    
-    .p-speeddial-action {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: 50%;
-        position: relative;
-        overflow: hidden;
-    }
-    
-    .p-speeddial-circle .p-speeddial-item,
-    .p-speeddial-semi-circle .p-speeddial-item,
-    .p-speeddial-quarter-circle .p-speeddial-item {
-        position: absolute;
-    }
-    
-    .p-speeddial-rotate {
-        transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-        will-change: transform;
-    }
-    
-    .p-speeddial-mask {
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: 100%;
-        opacity: 0;
-        transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1);
-    }
-    
-    .p-speeddial-mask-visible {
-        pointer-events: none;
-        opacity: 1;
-        transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
-    }
-    
-    .p-speeddial-opened .p-speeddial-list {
-        pointer-events: auto;
-    }
-    
-    .p-speeddial-opened .p-speeddial-item {
-        transform: scale(1);
-        opacity: 1;
-    }
-    
-    .p-speeddial-opened .p-speeddial-rotate {
-        transform: rotate(45deg);
-    }
-}
-`;
-
-/* Direction */
-const inlineStyles = {
-    root: ({ props }) => ({
-        alignItems: props.direction === 'up' || props.direction === 'down' ? 'center' : '',
-        justifyContent: props.direction === 'left' || props.direction === 'right' ? 'center' : '',
-        flexDirection: props.direction === 'up' ? 'column-reverse' : props.direction === 'down' ? 'column' : props.direction === 'left' ? 'row-reverse' : props.direction === 'right' ? 'row' : null
-    }),
-    menu: ({ props }) => ({
-        flexDirection: props.direction === 'up' ? 'column-reverse' : props.direction === 'down' ? 'column' : props.direction === 'left' ? 'row-reverse' : props.direction === 'right' ? 'row' : null
-    })
-};
-
-const classes = {
-    root: ({ instance, props }) => [
-        `p-speeddial p-component p-speeddial-${props.type}`,
-        {
-            [`p-speeddial-direction-${props.direction}`]: props.type !== 'circle',
-            'p-speeddial-opened': instance.d_visible,
-            'p-disabled': props.disabled
-        }
-    ],
-    button: ({ props }) => [
-        'p-speeddial-button p-button-rounded',
-        {
-            'p-speeddial-rotate': props.rotateAnimation && !props.hideIcon
-        }
-    ],
-    menu: 'p-speeddial-list',
-    menuitem: ({ instance, id }) => [
-        'p-speeddial-item',
-        {
-            'p-focus': instance.isItemActive(id)
-        }
-    ],
-    action: ({ item }) => [
-        'p-speeddial-action',
-        {
-            'p-disabled': item.disabled
-        }
-    ],
-    actionIcon: 'p-speeddial-action-icon',
-    mask: ({ instance }) => [
-        'p-speeddial-mask',
-        {
-            'p-speeddial-mask-visible': instance.d_visible
-        }
-    ]
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'speeddial', manual: true });
+import SpeedDialStyle from 'primevue/speeddial/style';
 
 export default {
     name: 'BaseSpeedDial',
@@ -198,11 +66,7 @@ export default {
             default: null
         }
     },
-    css: {
-        classes,
-        inlineStyles,
-        loadStyle
-    },
+    style: SpeedDialStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/speeddial/package.json b/components/lib/speeddial/package.json
index 22fac6211..105ad754b 100644
--- a/components/lib/speeddial/package.json
+++ b/components/lib/speeddial/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./speeddial.min.js",
     "types": "./SpeedDial.d.ts",
     "browser": {
-      "./sfc": "./SpeedDial.vue"
+        "./sfc": "./SpeedDial.vue"
     }
-  }
\ No newline at end of file
+}
diff --git a/components/lib/speeddial/style/SpeedDialStyle.js b/components/lib/speeddial/style/SpeedDialStyle.js
new file mode 100644
index 000000000..3327cfc07
--- /dev/null
+++ b/components/lib/speeddial/style/SpeedDialStyle.js
@@ -0,0 +1,138 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-speeddial {
+        position: absolute;
+        display: flex;
+    }
+
+    .p-speeddial-button {
+        z-index: 1;
+    }
+
+    .p-speeddial-list {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: top 0s linear 0.2s;
+        pointer-events: none;
+        z-index: 2;
+    }
+
+    .p-speeddial-item {
+        transform: scale(0);
+        opacity: 0;
+        transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s;
+        will-change: transform;
+    }
+
+    .p-speeddial-action {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .p-speeddial-circle .p-speeddial-item,
+    .p-speeddial-semi-circle .p-speeddial-item,
+    .p-speeddial-quarter-circle .p-speeddial-item {
+        position: absolute;
+    }
+
+    .p-speeddial-rotate {
+        transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+        will-change: transform;
+    }
+
+    .p-speeddial-mask {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        opacity: 0;
+        transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1);
+    }
+
+    .p-speeddial-mask-visible {
+        pointer-events: none;
+        opacity: 1;
+        transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
+    }
+
+    .p-speeddial-opened .p-speeddial-list {
+        pointer-events: auto;
+    }
+
+    .p-speeddial-opened .p-speeddial-item {
+        transform: scale(1);
+        opacity: 1;
+    }
+
+    .p-speeddial-opened .p-speeddial-rotate {
+        transform: rotate(45deg);
+    }
+}
+`;
+
+/* Direction */
+const inlineStyles = {
+    root: ({ props }) => ({
+        alignItems: props.direction === 'up' || props.direction === 'down' ? 'center' : '',
+        justifyContent: props.direction === 'left' || props.direction === 'right' ? 'center' : '',
+        flexDirection: props.direction === 'up' ? 'column-reverse' : props.direction === 'down' ? 'column' : props.direction === 'left' ? 'row-reverse' : props.direction === 'right' ? 'row' : null
+    }),
+    menu: ({ props }) => ({
+        flexDirection: props.direction === 'up' ? 'column-reverse' : props.direction === 'down' ? 'column' : props.direction === 'left' ? 'row-reverse' : props.direction === 'right' ? 'row' : null
+    })
+};
+
+const classes = {
+    root: ({ instance, props }) => [
+        `p-speeddial p-component p-speeddial-${props.type}`,
+        {
+            [`p-speeddial-direction-${props.direction}`]: props.type !== 'circle',
+            'p-speeddial-opened': instance.d_visible,
+            'p-disabled': props.disabled
+        }
+    ],
+    button: ({ props }) => [
+        'p-speeddial-button p-button-rounded',
+        {
+            'p-speeddial-rotate': props.rotateAnimation && !props.hideIcon
+        }
+    ],
+    menu: 'p-speeddial-list',
+    menuitem: ({ instance, id }) => [
+        'p-speeddial-item',
+        {
+            'p-focus': instance.isItemActive(id)
+        }
+    ],
+    action: ({ item }) => [
+        'p-speeddial-action',
+        {
+            'p-disabled': item.disabled
+        }
+    ],
+    actionIcon: 'p-speeddial-action-icon',
+    mask: ({ instance }) => [
+        'p-speeddial-mask',
+        {
+            'p-speeddial-mask-visible': instance.d_visible
+        }
+    ]
+};
+
+export default BaseStyle.extend({
+    name: 'speeddial',
+    css,
+    classes,
+    inlineStyles
+});
diff --git a/components/lib/speeddial/style/package.json b/components/lib/speeddial/style/package.json
new file mode 100644
index 000000000..0eace22de
--- /dev/null
+++ b/components/lib/speeddial/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./speeddialstyle.cjs.js",
+    "module": "./speeddialstyle.esm.js",
+    "unpkg": "./speeddialstyle.min.js"
+}
diff --git a/components/lib/splitbutton/BaseSplitButton.vue b/components/lib/splitbutton/BaseSplitButton.vue
index eb78bc338..8118c64c7 100644
--- a/components/lib/splitbutton/BaseSplitButton.vue
+++ b/components/lib/splitbutton/BaseSplitButton.vue
@@ -1,61 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-splitbutton {
-        display: inline-flex;
-        position: relative;
-    }
-    
-    .p-splitbutton .p-splitbutton-defaultbutton,
-    .p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button,
-    .p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button {
-        flex: 1 1 auto;
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-        border-right: 0 none;
-    }
-    
-    .p-splitbutton-menubutton,
-    .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
-    .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-    }
-    
-    .p-splitbutton .p-menu {
-        min-width: 100%;
-    }
-    
-    .p-fluid .p-splitbutton {
-        display: flex;
-    }
-}
-`;
-
-const classes = {
-    root: ({ props }) => [
-        'p-splitbutton p-component',
-        {
-            [`p-button-${props.severity}`]: props.severity,
-            'p-button-raised': props.raised,
-            'p-button-rounded': props.rounded,
-            'p-button-text': props.text,
-            'p-button-outlined': props.outlined,
-            'p-button-sm': props.size === 'small',
-            'p-button-lg': props.size === 'large'
-        }
-    ],
-    button: 'p-splitbutton-defaultbutton',
-    menuButton: 'p-splitbutton-menubutton'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'splitbutton', manual: true });
+import SplitButtonStyle from 'primevue/splitbutton/style';
 
 export default {
     name: 'BaseSplitButton',
@@ -138,10 +83,7 @@ export default {
             default: false
         }
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: SplitButtonStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/splitbutton/package.json b/components/lib/splitbutton/package.json
index 54193e4aa..97dbec023 100644
--- a/components/lib/splitbutton/package.json
+++ b/components/lib/splitbutton/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./splitbutton.cjs.js",
-  "module": "./splitbutton.esm.js",
-  "unpkg": "./splitbutton.min.js",
-  "types": "./SplitButton.d.ts",
-  "browser": {
-    "./sfc": "./SplitButton.vue"
-  }
-}
\ No newline at end of file
+    "main": "./splitbutton.cjs.js",
+    "module": "./splitbutton.esm.js",
+    "unpkg": "./splitbutton.min.js",
+    "types": "./SplitButton.d.ts",
+    "browser": {
+        "./sfc": "./SplitButton.vue"
+    }
+}
diff --git a/components/lib/splitbutton/style/SplitButtonStyle.js b/components/lib/splitbutton/style/SplitButtonStyle.js
new file mode 100644
index 000000000..920a91ee5
--- /dev/null
+++ b/components/lib/splitbutton/style/SplitButtonStyle.js
@@ -0,0 +1,60 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-splitbutton {
+        display: inline-flex;
+        position: relative;
+    }
+
+    .p-splitbutton .p-splitbutton-defaultbutton,
+    .p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button,
+    .p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button {
+        flex: 1 1 auto;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        border-right: 0 none;
+    }
+
+    .p-splitbutton-menubutton,
+    .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+    .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+
+    .p-splitbutton .p-menu {
+        min-width: 100%;
+    }
+
+    .p-fluid .p-splitbutton {
+        display: flex;
+    }
+}
+`;
+
+const classes = {
+    root: ({ props }) => [
+        'p-splitbutton p-component',
+        {
+            [`p-button-${props.severity}`]: props.severity,
+            'p-button-raised': props.raised,
+            'p-button-rounded': props.rounded,
+            'p-button-text': props.text,
+            'p-button-outlined': props.outlined,
+            'p-button-sm': props.size === 'small',
+            'p-button-lg': props.size === 'large'
+        }
+    ],
+    button: 'p-splitbutton-defaultbutton',
+    menuButton: 'p-splitbutton-menubutton'
+};
+
+export default BaseStyle.extend({
+    name: 'splitbutton',
+    css,
+    classes
+});
diff --git a/components/lib/splitbutton/style/package.json b/components/lib/splitbutton/style/package.json
new file mode 100644
index 000000000..b9a0894ab
--- /dev/null
+++ b/components/lib/splitbutton/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./splitbuttonstyle.cjs.js",
+    "module": "./splitbuttonstyle.esm.js",
+    "unpkg": "./splitbuttonstyle.min.js"
+}
diff --git a/components/lib/splitter/BaseSplitter.vue b/components/lib/splitter/BaseSplitter.vue
index a74426526..e3fca8914 100644
--- a/components/lib/splitter/BaseSplitter.vue
+++ b/components/lib/splitter/BaseSplitter.vue
@@ -1,68 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-splitter {
-        display: flex;
-        flex-wrap: nowrap;
-    }
-    
-    .p-splitter-vertical {
-        flex-direction: column;
-    }
-    
-    .p-splitter-gutter {
-        flex-grow: 0;
-        flex-shrink: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: col-resize;
-    }
-    
-    .p-splitter-horizontal.p-splitter-resizing {
-        cursor: col-resize;
-        user-select: none;
-    }
-    
-    .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle {
-        height: 24px;
-        width: 100%;
-    }
-    
-    .p-splitter-horizontal > .p-splitter-gutter {
-        cursor: col-resize;
-    }
-    
-    .p-splitter-vertical.p-splitter-resizing {
-        cursor: row-resize;
-        user-select: none;
-    }
-    
-    .p-splitter-vertical > .p-splitter-gutter {
-        cursor: row-resize;
-    }
-    
-    .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle {
-        width: 24px;
-        height: 100%;
-    }
-}
-`;
-
-const classes = {
-    root: ({ props }) => ['p-splitter p-component', 'p-splitter-' + props.layout],
-    gutter: 'p-splitter-gutter',
-    gutterHandler: 'p-splitter-gutter-handle'
-};
-
-const inlineStyles = {
-    root: ({ props }) => [{ display: 'flex', 'flex-wrap': 'nowrap' }, props.layout === 'vertical' ? { 'flex-direction': 'column' } : '']
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'splitter', manual: true });
+import SplitterStyle from 'primevue/splitter/style';
 
 export default {
     name: 'BaseSplitter',
@@ -89,11 +27,7 @@ export default {
             default: 5
         }
     },
-    css: {
-        classes,
-        inlineStyles,
-        loadStyle
-    },
+    style: SplitterStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/splitter/package.json b/components/lib/splitter/package.json
index 88560cbf2..bb32bbd41 100644
--- a/components/lib/splitter/package.json
+++ b/components/lib/splitter/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./splitter.cjs.js",
-  "module": "./splitter.esm.js",
-  "unpkg": "./splitter.min.js",
-  "types": "./Splitter.d.ts",
-  "browser": {
-    "./sfc": "./Splitter.vue"
-  }
-}
\ No newline at end of file
+    "main": "./splitter.cjs.js",
+    "module": "./splitter.esm.js",
+    "unpkg": "./splitter.min.js",
+    "types": "./Splitter.d.ts",
+    "browser": {
+        "./sfc": "./Splitter.vue"
+    }
+}
diff --git a/components/lib/splitter/style/SplitterStyle.js b/components/lib/splitter/style/SplitterStyle.js
new file mode 100644
index 000000000..d541f0fd8
--- /dev/null
+++ b/components/lib/splitter/style/SplitterStyle.js
@@ -0,0 +1,68 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-splitter {
+        display: flex;
+        flex-wrap: nowrap;
+    }
+
+    .p-splitter-vertical {
+        flex-direction: column;
+    }
+
+    .p-splitter-gutter {
+        flex-grow: 0;
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: col-resize;
+    }
+
+    .p-splitter-horizontal.p-splitter-resizing {
+        cursor: col-resize;
+        user-select: none;
+    }
+
+    .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle {
+        height: 24px;
+        width: 100%;
+    }
+
+    .p-splitter-horizontal > .p-splitter-gutter {
+        cursor: col-resize;
+    }
+
+    .p-splitter-vertical.p-splitter-resizing {
+        cursor: row-resize;
+        user-select: none;
+    }
+
+    .p-splitter-vertical > .p-splitter-gutter {
+        cursor: row-resize;
+    }
+
+    .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle {
+        width: 24px;
+        height: 100%;
+    }
+}
+`;
+
+const classes = {
+    root: ({ props }) => ['p-splitter p-component', 'p-splitter-' + props.layout],
+    gutter: 'p-splitter-gutter',
+    gutterHandler: 'p-splitter-gutter-handle'
+};
+
+const inlineStyles = {
+    root: ({ props }) => [{ display: 'flex', 'flex-wrap': 'nowrap' }, props.layout === 'vertical' ? { 'flex-direction': 'column' } : '']
+};
+
+export default BaseStyle.extend({
+    name: 'splitter',
+    css,
+    classes,
+    inlineStyles
+});
diff --git a/components/lib/splitter/style/package.json b/components/lib/splitter/style/package.json
new file mode 100644
index 000000000..bb035f894
--- /dev/null
+++ b/components/lib/splitter/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./splitterstyle.cjs.js",
+    "module": "./splitterstyle.esm.js",
+    "unpkg": "./splitterstyle.min.js"
+}
diff --git a/components/lib/splitterpanel/BaseSplitterPanel.vue b/components/lib/splitterpanel/BaseSplitterPanel.vue
index 3def7935d..9d3d6472f 100644
--- a/components/lib/splitterpanel/BaseSplitterPanel.vue
+++ b/components/lib/splitterpanel/BaseSplitterPanel.vue
@@ -1,29 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-splitter-panel {
-        flex-grow: 1;
-    }
-    
-    .p-splitter-panel-nested {
-        display: flex;
-    }
-    
-    .p-splitter-panel .p-splitter {
-        flex-grow: 1;
-        border: 0 none;
-    }
-}
-`;
-
-const classes = {
-    root: ({ instance }) => ['p-splitter-panel', { 'p-splitter-panel-nested': instance.isNested }]
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'splitterpanel', manual: true });
+import SplitterPanelStyle from 'primevue/splitterpanel/style';
 
 export default {
     name: 'BaseSplitterPanel',
@@ -38,10 +15,7 @@ export default {
             default: null
         }
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: SplitterPanelStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/splitterpanel/package.json b/components/lib/splitterpanel/package.json
index 25db20614..4817b3143 100644
--- a/components/lib/splitterpanel/package.json
+++ b/components/lib/splitterpanel/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./splitterpanel.cjs.js",
-  "module": "./splitterpanel.esm.js",
-  "unpkg": "./splitterpanel.min.js",
-  "types": "./SplitterPanel.d.ts",
-  "browser": {
-    "./sfc": "./SplitterPanel.vue"
-  }
-}
\ No newline at end of file
+    "main": "./splitterpanel.cjs.js",
+    "module": "./splitterpanel.esm.js",
+    "unpkg": "./splitterpanel.min.js",
+    "types": "./SplitterPanel.d.ts",
+    "browser": {
+        "./sfc": "./SplitterPanel.vue"
+    }
+}
diff --git a/components/lib/splitterpanel/style/SplitterPanelStyle.js b/components/lib/splitterpanel/style/SplitterPanelStyle.js
new file mode 100644
index 000000000..626bcc5fd
--- /dev/null
+++ b/components/lib/splitterpanel/style/SplitterPanelStyle.js
@@ -0,0 +1,28 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-splitter-panel {
+        flex-grow: 1;
+    }
+
+    .p-splitter-panel-nested {
+        display: flex;
+    }
+
+    .p-splitter-panel .p-splitter {
+        flex-grow: 1;
+        border: 0 none;
+    }
+}
+`;
+
+const classes = {
+    root: ({ instance }) => ['p-splitter-panel', { 'p-splitter-panel-nested': instance.isNested }]
+};
+
+export default BaseStyle.extend({
+    name: 'splitterpanel',
+    css,
+    classes
+});
diff --git a/components/lib/splitterpanel/style/package.json b/components/lib/splitterpanel/style/package.json
new file mode 100644
index 000000000..2ba25bcfb
--- /dev/null
+++ b/components/lib/splitterpanel/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./splitterpanelstyle.cjs.js",
+    "module": "./splitterpanelstyle.esm.js",
+    "unpkg": "./splitterpanelstyle.min.js"
+}
diff --git a/components/lib/steps/BaseSteps.vue b/components/lib/steps/BaseSteps.vue
index de70e8506..bc59c0463 100644
--- a/components/lib/steps/BaseSteps.vue
+++ b/components/lib/steps/BaseSteps.vue
@@ -1,85 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-steps {
-        position: relative;
-    }
-    
-    .p-steps .p-steps-list {
-        padding: 0;
-        margin: 0;
-        list-style-type: none;
-        display: flex;
-    }
-    
-    .p-steps-item {
-        position: relative;
-        display: flex;
-        justify-content: center;
-        flex: 1 1 auto;
-        overflow: hidden;
-    }
-    
-    .p-steps-item .p-menuitem-link {
-        display: inline-flex;
-        flex-direction: column;
-        align-items: center;
-        overflow: hidden;
-        text-decoration: none;
-    }
-    
-    .p-steps.p-steps-readonly .p-steps-item {
-        cursor: auto;
-    }
-    
-    .p-steps-item.p-steps-current .p-menuitem-link {
-        cursor: default;
-    }
-    
-    .p-steps-title {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        max-width: 100%;
-    }
-    
-    .p-steps-number {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-    
-    .p-steps-title {
-        display: block;
-    }
-}
-`;
-
-const classes = {
-    root: ({ props }) => ['p-steps p-component', { 'p-readonly': props.readonly }],
-    menu: 'p-steps-list',
-    menuitem: ({ instance, item }) => [
-        'p-steps-item',
-        {
-            'p-highlight p-steps-current': instance.isActive(item),
-            'p-disabled': instance.isItemDisabled(item)
-        }
-    ],
-    action: ({ props, isActive, isExactActive }) => [
-        'p-menuitem-link',
-        {
-            'router-link-active': isActive,
-            'router-link-active-exact': props.exact && isExactActive
-        }
-    ],
-    step: 'p-steps-number',
-    label: 'p-steps-title'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'steps', manual: true });
+import StepsStyle from 'primevue/steps/style';
 
 export default {
     name: 'BaseSteps',
@@ -101,10 +22,7 @@ export default {
             default: true
         }
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: StepsStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/steps/package.json b/components/lib/steps/package.json
index 908d919bd..c709c3f83 100644
--- a/components/lib/steps/package.json
+++ b/components/lib/steps/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./steps.cjs.js",
-  "module": "./steps.esm.js",
-  "unpkg": "./steps.min.js",
-  "types": "./Steps.d.ts",
-  "browser": {
-    "./sfc": "./Steps.vue"
-  }
-}
\ No newline at end of file
+    "main": "./steps.cjs.js",
+    "module": "./steps.esm.js",
+    "unpkg": "./steps.min.js",
+    "types": "./Steps.d.ts",
+    "browser": {
+        "./sfc": "./Steps.vue"
+    }
+}
diff --git a/components/lib/steps/style/StepsStyle.js b/components/lib/steps/style/StepsStyle.js
new file mode 100644
index 000000000..232a9b972
--- /dev/null
+++ b/components/lib/steps/style/StepsStyle.js
@@ -0,0 +1,84 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-steps {
+        position: relative;
+    }
+
+    .p-steps .p-steps-list {
+        padding: 0;
+        margin: 0;
+        list-style-type: none;
+        display: flex;
+    }
+
+    .p-steps-item {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        flex: 1 1 auto;
+        overflow: hidden;
+    }
+
+    .p-steps-item .p-menuitem-link {
+        display: inline-flex;
+        flex-direction: column;
+        align-items: center;
+        overflow: hidden;
+        text-decoration: none;
+    }
+
+    .p-steps.p-steps-readonly .p-steps-item {
+        cursor: auto;
+    }
+
+    .p-steps-item.p-steps-current .p-menuitem-link {
+        cursor: default;
+    }
+
+    .p-steps-title {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 100%;
+    }
+
+    .p-steps-number {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .p-steps-title {
+        display: block;
+    }
+}
+`;
+
+const classes = {
+    root: ({ props }) => ['p-steps p-component', { 'p-readonly': props.readonly }],
+    menu: 'p-steps-list',
+    menuitem: ({ instance, item }) => [
+        'p-steps-item',
+        {
+            'p-highlight p-steps-current': instance.isActive(item),
+            'p-disabled': instance.isItemDisabled(item)
+        }
+    ],
+    action: ({ props, isActive, isExactActive }) => [
+        'p-menuitem-link',
+        {
+            'router-link-active': isActive,
+            'router-link-active-exact': props.exact && isExactActive
+        }
+    ],
+    step: 'p-steps-number',
+    label: 'p-steps-title'
+};
+
+export default BaseStyle.extend({
+    name: 'steps',
+    css,
+    classes
+});
diff --git a/components/lib/steps/style/package.json b/components/lib/steps/style/package.json
new file mode 100644
index 000000000..60aa4abb3
--- /dev/null
+++ b/components/lib/steps/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./stepsstyle.cjs.js",
+    "module": "./stepsstyle.esm.js",
+    "unpkg": "./stepsstyle.min.js"
+}
diff --git a/components/lib/styleclass/package.json b/components/lib/styleclass/package.json
index 55956be71..afed491b6 100644
--- a/components/lib/styleclass/package.json
+++ b/components/lib/styleclass/package.json
@@ -3,4 +3,4 @@
     "module": "./styleclass.esm.js",
     "unpkg": "./styleclass.min.js",
     "types": "./StyleClass.d.ts"
-  }
\ No newline at end of file
+}
diff --git a/components/lib/styleclass/style/StyleClassStyle.js b/components/lib/styleclass/style/StyleClassStyle.js
new file mode 100644
index 000000000..ff8b4c563
--- /dev/null
+++ b/components/lib/styleclass/style/StyleClassStyle.js
@@ -0,0 +1 @@
+export default {};
diff --git a/components/lib/styleclass/style/package.json b/components/lib/styleclass/style/package.json
new file mode 100644
index 000000000..a0ded0e7b
--- /dev/null
+++ b/components/lib/styleclass/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./styleclassstyle.cjs.js",
+    "module": "./styleclassstyle.esm.js",
+    "unpkg": "./styleclassstyle.min.js"
+}
diff --git a/components/lib/tabmenu/BaseTabMenu.vue b/components/lib/tabmenu/BaseTabMenu.vue
index 946f46129..59d06d1cf 100644
--- a/components/lib/tabmenu/BaseTabMenu.vue
+++ b/components/lib/tabmenu/BaseTabMenu.vue
@@ -1,68 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-tabmenu {
-        overflow-x: auto;
-    }
-    
-    .p-tabmenu-nav {
-        display: flex;
-        margin: 0;
-        padding: 0;
-        list-style-type: none;
-        flex-wrap: nowrap;
-    }
-    
-    .p-tabmenu-nav a {
-        cursor: pointer;
-        user-select: none;
-        display: flex;
-        align-items: center;
-        position: relative;
-        text-decoration: none;
-        text-decoration: none;
-        overflow: hidden;
-    }
-    
-    .p-tabmenu-nav a:focus {
-        z-index: 1;
-    }
-    
-    .p-tabmenu-nav .p-menuitem-text {
-        line-height: 1;
-    }
-    
-    .p-tabmenu-ink-bar {
-        display: none;
-        z-index: 1;
-    }
-    
-    .p-tabmenu::-webkit-scrollbar {
-        display: none;
-    }
-}
-`;
-
-const classes = {
-    root: 'p-tabmenu p-component',
-    menu: 'p-tabmenu-nav p-reset',
-    menuitem: ({ instance, props, index, item, isActive, isExactActive }) => [
-        'p-tabmenuitem',
-        {
-            'p-highlight': (props.exact ? isExactActive : isActive) || instance.d_activeIndex === index,
-            'p-disabled': instance.disabled(item)
-        }
-    ],
-    action: 'p-menuitem-link',
-    icon: 'p-menuitem-icon',
-    label: 'p-menuitem-text',
-    inkbar: 'p-tabmenu-ink-bar'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'tabmenu', manual: true });
+import TabMenuStyle from 'primevue/tabmenu/style';
 
 export default {
     name: 'BaseTabMenu',
@@ -89,10 +27,7 @@ export default {
             default: null
         }
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: TabMenuStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/tabmenu/package.json b/components/lib/tabmenu/package.json
index 860c9923c..7f612189e 100644
--- a/components/lib/tabmenu/package.json
+++ b/components/lib/tabmenu/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./tabmenu.cjs.js",
-  "module": "./tabmenu.esm.js",
-  "unpkg": "./tabmenu.min.js",
-  "types": "./TabMenu.d.ts",
-  "browser": {
-    "./sfc": "./TabMenu.vue"
-  }
-}
\ No newline at end of file
+    "main": "./tabmenu.cjs.js",
+    "module": "./tabmenu.esm.js",
+    "unpkg": "./tabmenu.min.js",
+    "types": "./TabMenu.d.ts",
+    "browser": {
+        "./sfc": "./TabMenu.vue"
+    }
+}
diff --git a/components/lib/tabmenu/style/TabMenuStyle.js b/components/lib/tabmenu/style/TabMenuStyle.js
new file mode 100644
index 000000000..337dc5ae5
--- /dev/null
+++ b/components/lib/tabmenu/style/TabMenuStyle.js
@@ -0,0 +1,67 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-tabmenu {
+        overflow-x: auto;
+    }
+
+    .p-tabmenu-nav {
+        display: flex;
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+        flex-wrap: nowrap;
+    }
+
+    .p-tabmenu-nav a {
+        cursor: pointer;
+        user-select: none;
+        display: flex;
+        align-items: center;
+        position: relative;
+        text-decoration: none;
+        text-decoration: none;
+        overflow: hidden;
+    }
+
+    .p-tabmenu-nav a:focus {
+        z-index: 1;
+    }
+
+    .p-tabmenu-nav .p-menuitem-text {
+        line-height: 1;
+    }
+
+    .p-tabmenu-ink-bar {
+        display: none;
+        z-index: 1;
+    }
+
+    .p-tabmenu::-webkit-scrollbar {
+        display: none;
+    }
+}
+`;
+
+const classes = {
+    root: 'p-tabmenu p-component',
+    menu: 'p-tabmenu-nav p-reset',
+    menuitem: ({ instance, props, index, item, isActive, isExactActive }) => [
+        'p-tabmenuitem',
+        {
+            'p-highlight': (props.exact ? isExactActive : isActive) || instance.d_activeIndex === index,
+            'p-disabled': instance.disabled(item)
+        }
+    ],
+    action: 'p-menuitem-link',
+    icon: 'p-menuitem-icon',
+    label: 'p-menuitem-text',
+    inkbar: 'p-tabmenu-ink-bar'
+};
+
+export default BaseStyle.extend({
+    name: 'tabmenu',
+    css,
+    classes
+});
diff --git a/components/lib/tabmenu/style/package.json b/components/lib/tabmenu/style/package.json
new file mode 100644
index 000000000..967e5bf0c
--- /dev/null
+++ b/components/lib/tabmenu/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./tabmenustyle.cjs.js",
+    "module": "./tabmenustyle.esm.js",
+    "unpkg": "./tabmenustyle.min.js"
+}
diff --git a/components/lib/tabpanel/BaseTabPanel.vue b/components/lib/tabpanel/BaseTabPanel.vue
index a2ded3d64..8c428a3ce 100644
--- a/components/lib/tabpanel/BaseTabPanel.vue
+++ b/components/lib/tabpanel/BaseTabPanel.vue
@@ -1,5 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
+import TabPanelStyle from 'primevue/tabpanel/style';
 
 export default {
     name: 'BaseTabPanel',
@@ -14,6 +15,7 @@ export default {
         contentClass: null,
         contentProps: null,
         disabled: Boolean
-    }
+    },
+    style: TabPanelStyle
 };
 </script>
diff --git a/components/lib/tabpanel/package.json b/components/lib/tabpanel/package.json
index fa8d635c3..fac1fed66 100644
--- a/components/lib/tabpanel/package.json
+++ b/components/lib/tabpanel/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./tabpanel.cjs.js",
-  "module": "./tabpanel.esm.js",
-  "unpkg": "./tabpanel.min.js",
-  "types": "./TabPanel.d.ts",
-  "browser": {
-    "./sfc": "./TabPanel.vue"
-  }
-}
\ No newline at end of file
+    "main": "./tabpanel.cjs.js",
+    "module": "./tabpanel.esm.js",
+    "unpkg": "./tabpanel.min.js",
+    "types": "./TabPanel.d.ts",
+    "browser": {
+        "./sfc": "./TabPanel.vue"
+    }
+}
diff --git a/components/lib/tabpanel/style/TabPanelStyle.js b/components/lib/tabpanel/style/TabPanelStyle.js
new file mode 100644
index 000000000..ff8b4c563
--- /dev/null
+++ b/components/lib/tabpanel/style/TabPanelStyle.js
@@ -0,0 +1 @@
+export default {};
diff --git a/components/lib/tabpanel/style/package.json b/components/lib/tabpanel/style/package.json
new file mode 100644
index 000000000..d06bc5edd
--- /dev/null
+++ b/components/lib/tabpanel/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./tabpanelstyle.cjs.js",
+    "module": "./tabpanelstyle.esm.js",
+    "unpkg": "./tabpanelstyle.min.js"
+}
diff --git a/components/lib/tabview/BaseTabView.vue b/components/lib/tabview/BaseTabView.vue
index 0c53a228f..6a13a00ff 100644
--- a/components/lib/tabview/BaseTabView.vue
+++ b/components/lib/tabview/BaseTabView.vue
@@ -1,111 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-tabview-nav-container {
-        position: relative;
-    }
-    
-    .p-tabview-scrollable .p-tabview-nav-container {
-        overflow: hidden;
-    }
-    
-    .p-tabview-nav-content {
-        overflow-x: auto;
-        overflow-y: hidden;
-        scroll-behavior: smooth;
-        scrollbar-width: none;
-        overscroll-behavior: contain auto;
-    }
-    
-    .p-tabview-nav {
-        display: flex;
-        margin: 0;
-        padding: 0;
-        list-style-type: none;
-        flex: 1 1 auto;
-    }
-    
-    .p-tabview-header-action {
-        cursor: pointer;
-        user-select: none;
-        display: flex;
-        align-items: center;
-        position: relative;
-        text-decoration: none;
-        overflow: hidden;
-    }
-    
-    .p-tabview-ink-bar {
-        display: none;
-        z-index: 1;
-    }
-    
-    .p-tabview-header-action:focus {
-        z-index: 1;
-    }
-    
-    .p-tabview-title {
-        line-height: 1;
-        white-space: nowrap;
-    }
-    
-    .p-tabview-nav-btn {
-        position: absolute;
-        top: 0;
-        z-index: 2;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-    
-    .p-tabview-nav-prev {
-        left: 0;
-    }
-    
-    .p-tabview-nav-next {
-        right: 0;
-    }
-    
-    .p-tabview-nav-content::-webkit-scrollbar {
-        display: none;
-    }
-}
-`;
-
-const classes = {
-    root: ({ props }) => [
-        'p-tabview p-component',
-        {
-            'p-tabview-scrollable': props.scrollable
-        }
-    ],
-    navContainer: 'p-tabview-nav-container',
-    previousButton: 'p-tabview-nav-prev p-tabview-nav-btn p-link',
-    navContent: 'p-tabview-nav-content',
-    nav: 'p-tabview-nav',
-    tab: {
-        header: ({ instance, tab, index }) => [
-            'p-tabview-header',
-            instance.getTabProp(tab, 'headerClass'),
-            {
-                'p-highlight': instance.d_activeIndex === index,
-                'p-disabled': instance.getTabProp(tab, 'disabled')
-            }
-        ],
-        headerAction: 'p-tabview-nav-link p-tabview-header-action',
-        headerTitle: 'p-tabview-title',
-        content: ({ instance, tab }) => ['p-tabview-panel', instance.getTabProp(tab, 'contentClass')]
-    },
-    inkbar: 'p-tabview-ink-bar',
-    nextButton: 'p-tabview-nav-next p-tabview-nav-btn p-link',
-    panelContainer: 'p-tabview-panels'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'tabview', manual: true });
+import TabViewStyle from 'primevue/tabview/style';
 
 export default {
     name: 'BaseTabView',
@@ -148,10 +43,7 @@ export default {
             default: undefined
         }
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: TabViewStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/tabview/package.json b/components/lib/tabview/package.json
index 2343bfaa6..92d7e00b0 100644
--- a/components/lib/tabview/package.json
+++ b/components/lib/tabview/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./tabview.cjs.js",
-  "module": "./tabview.esm.js",
-  "unpkg": "./tabview.min.js",
-  "types": "./TabView.d.ts",
-  "browser": {
-    "./sfc": "./TabView.vue"
-  }
-}
\ No newline at end of file
+    "main": "./tabview.cjs.js",
+    "module": "./tabview.esm.js",
+    "unpkg": "./tabview.min.js",
+    "types": "./TabView.d.ts",
+    "browser": {
+        "./sfc": "./TabView.vue"
+    }
+}
diff --git a/components/lib/tabview/style/TabViewStyle.js b/components/lib/tabview/style/TabViewStyle.js
new file mode 100644
index 000000000..f0cada1a3
--- /dev/null
+++ b/components/lib/tabview/style/TabViewStyle.js
@@ -0,0 +1,110 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-tabview-nav-container {
+        position: relative;
+    }
+
+    .p-tabview-scrollable .p-tabview-nav-container {
+        overflow: hidden;
+    }
+
+    .p-tabview-nav-content {
+        overflow-x: auto;
+        overflow-y: hidden;
+        scroll-behavior: smooth;
+        scrollbar-width: none;
+        overscroll-behavior: contain auto;
+    }
+
+    .p-tabview-nav {
+        display: flex;
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+        flex: 1 1 auto;
+    }
+
+    .p-tabview-header-action {
+        cursor: pointer;
+        user-select: none;
+        display: flex;
+        align-items: center;
+        position: relative;
+        text-decoration: none;
+        overflow: hidden;
+    }
+
+    .p-tabview-ink-bar {
+        display: none;
+        z-index: 1;
+    }
+
+    .p-tabview-header-action:focus {
+        z-index: 1;
+    }
+
+    .p-tabview-title {
+        line-height: 1;
+        white-space: nowrap;
+    }
+
+    .p-tabview-nav-btn {
+        position: absolute;
+        top: 0;
+        z-index: 2;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .p-tabview-nav-prev {
+        left: 0;
+    }
+
+    .p-tabview-nav-next {
+        right: 0;
+    }
+
+    .p-tabview-nav-content::-webkit-scrollbar {
+        display: none;
+    }
+}
+`;
+
+const classes = {
+    root: ({ props }) => [
+        'p-tabview p-component',
+        {
+            'p-tabview-scrollable': props.scrollable
+        }
+    ],
+    navContainer: 'p-tabview-nav-container',
+    previousButton: 'p-tabview-nav-prev p-tabview-nav-btn p-link',
+    navContent: 'p-tabview-nav-content',
+    nav: 'p-tabview-nav',
+    tab: {
+        header: ({ instance, tab, index }) => [
+            'p-tabview-header',
+            instance.getTabProp(tab, 'headerClass'),
+            {
+                'p-highlight': instance.d_activeIndex === index,
+                'p-disabled': instance.getTabProp(tab, 'disabled')
+            }
+        ],
+        headerAction: 'p-tabview-nav-link p-tabview-header-action',
+        headerTitle: 'p-tabview-title',
+        content: ({ instance, tab }) => ['p-tabview-panel', instance.getTabProp(tab, 'contentClass')]
+    },
+    inkbar: 'p-tabview-ink-bar',
+    nextButton: 'p-tabview-nav-next p-tabview-nav-btn p-link',
+    panelContainer: 'p-tabview-panels'
+};
+
+export default BaseStyle.extend({
+    name: 'tabview',
+    css,
+    classes
+});
diff --git a/components/lib/tabview/style/package.json b/components/lib/tabview/style/package.json
new file mode 100644
index 000000000..19a2ae14f
--- /dev/null
+++ b/components/lib/tabview/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./tabviewstyle.cjs.js",
+    "module": "./tabviewstyle.esm.js",
+    "unpkg": "./tabviewstyle.min.js"
+}
diff --git a/components/lib/tag/BaseTag.vue b/components/lib/tag/BaseTag.vue
index 5e794f945..6a145b2ff 100644
--- a/components/lib/tag/BaseTag.vue
+++ b/components/lib/tag/BaseTag.vue
@@ -1,43 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-tag {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-    }
-    
-    .p-tag-icon,
-    .p-tag-value,
-    .p-tag-icon.pi {
-        line-height: 1.5;
-    }
-    
-    .p-tag.p-tag-rounded {
-        border-radius: 10rem;
-    }
-}
-`;
-
-const classes = {
-    root: ({ props }) => [
-        'p-tag p-component',
-        {
-            'p-tag-info': props.severity === 'info',
-            'p-tag-success': props.severity === 'success',
-            'p-tag-warning': props.severity === 'warning',
-            'p-tag-danger': props.severity === 'danger',
-            'p-tag-rounded': props.rounded
-        }
-    ],
-    icon: 'p-tag-icon',
-    value: 'p-tag-value'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'tag', manual: true });
+import TagStyle from 'primevue/tag/style';
 
 export default {
     name: 'BaseTag',
@@ -48,10 +11,7 @@ export default {
         rounded: Boolean,
         icon: String
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: TagStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/tag/package.json b/components/lib/tag/package.json
index 9acc7fedc..99e7e8930 100644
--- a/components/lib/tag/package.json
+++ b/components/lib/tag/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./tag.cjs.js",
-  "module": "./tag.esm.js",
-  "unpkg": "./tag.min.js",
-  "types": "./Tag.d.ts",
-  "browser": {
-    "./sfc": "./Tag.vue"
-  }
-}
\ No newline at end of file
+    "main": "./tag.cjs.js",
+    "module": "./tag.esm.js",
+    "unpkg": "./tag.min.js",
+    "types": "./Tag.d.ts",
+    "browser": {
+        "./sfc": "./Tag.vue"
+    }
+}
diff --git a/components/lib/tag/style/TagStyle.js b/components/lib/tag/style/TagStyle.js
new file mode 100644
index 000000000..011563b16
--- /dev/null
+++ b/components/lib/tag/style/TagStyle.js
@@ -0,0 +1,42 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-tag {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .p-tag-icon,
+    .p-tag-value,
+    .p-tag-icon.pi {
+        line-height: 1.5;
+    }
+
+    .p-tag.p-tag-rounded {
+        border-radius: 10rem;
+    }
+}
+`;
+
+const classes = {
+    root: ({ props }) => [
+        'p-tag p-component',
+        {
+            'p-tag-info': props.severity === 'info',
+            'p-tag-success': props.severity === 'success',
+            'p-tag-warning': props.severity === 'warning',
+            'p-tag-danger': props.severity === 'danger',
+            'p-tag-rounded': props.rounded
+        }
+    ],
+    icon: 'p-tag-icon',
+    value: 'p-tag-value'
+};
+
+export default BaseStyle.extend({
+    name: 'tag',
+    css,
+    classes
+});
diff --git a/components/lib/tag/style/package.json b/components/lib/tag/style/package.json
new file mode 100644
index 000000000..93e8a3d1b
--- /dev/null
+++ b/components/lib/tag/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./tagstyle.cjs.js",
+    "module": "./tagstyle.esm.js",
+    "unpkg": "./tagstyle.min.js"
+}
diff --git a/components/lib/terminal/BaseTerminal.vue b/components/lib/terminal/BaseTerminal.vue
index 2ab598401..bf4b2b9f4 100644
--- a/components/lib/terminal/BaseTerminal.vue
+++ b/components/lib/terminal/BaseTerminal.vue
@@ -1,45 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-terminal {
-        height: 18rem;
-        overflow: auto;
-    }
-    
-    .p-terminal-prompt-container {
-        display: flex;
-        align-items: center;
-    }
-    
-    .p-terminal-input {
-        flex: 1 1 auto;
-        border: 0 none;
-        background-color: transparent;
-        color: inherit;
-        padding: 0;
-        outline: 0 none;
-    }
-    
-    .p-terminal-input::-ms-clear {
-        display: none;
-    }
-}
-`;
-
-const classes = {
-    root: 'p-terminal p-component',
-    content: 'p-terminal-content',
-    prompt: 'p-terminal-prompt',
-    command: 'p-terminal-command',
-    response: 'p-terminal-response',
-    container: 'p-terminal-prompt-container',
-    commandText: 'p-terminal-input'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'terminal', manual: true });
+import TerminalStyle from 'primevue/terminal/style';
 
 export default {
     name: 'BaseTerminal',
@@ -54,10 +15,7 @@ export default {
             default: null
         }
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: TerminalStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/terminal/package.json b/components/lib/terminal/package.json
index c7cfaca84..b5a60c138 100644
--- a/components/lib/terminal/package.json
+++ b/components/lib/terminal/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./terminal.cjs.js",
-  "module": "./terminal.esm.js",
-  "unpkg": "./terminal.min.js",
-  "types": "./Terminal.d.ts",
-  "browser": {
-    "./sfc": "./Terminal.vue"
-  }
-}
\ No newline at end of file
+    "main": "./terminal.cjs.js",
+    "module": "./terminal.esm.js",
+    "unpkg": "./terminal.min.js",
+    "types": "./Terminal.d.ts",
+    "browser": {
+        "./sfc": "./Terminal.vue"
+    }
+}
diff --git a/components/lib/terminal/style/TerminalStyle.js b/components/lib/terminal/style/TerminalStyle.js
new file mode 100644
index 000000000..5743848a1
--- /dev/null
+++ b/components/lib/terminal/style/TerminalStyle.js
@@ -0,0 +1,44 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-terminal {
+        height: 18rem;
+        overflow: auto;
+    }
+
+    .p-terminal-prompt-container {
+        display: flex;
+        align-items: center;
+    }
+
+    .p-terminal-input {
+        flex: 1 1 auto;
+        border: 0 none;
+        background-color: transparent;
+        color: inherit;
+        padding: 0;
+        outline: 0 none;
+    }
+
+    .p-terminal-input::-ms-clear {
+        display: none;
+    }
+}
+`;
+
+const classes = {
+    root: 'p-terminal p-component',
+    content: 'p-terminal-content',
+    prompt: 'p-terminal-prompt',
+    command: 'p-terminal-command',
+    response: 'p-terminal-response',
+    container: 'p-terminal-prompt-container',
+    commandText: 'p-terminal-input'
+};
+
+export default BaseStyle.extend({
+    name: 'terminal',
+    css,
+    classes
+});
diff --git a/components/lib/terminal/style/package.json b/components/lib/terminal/style/package.json
new file mode 100644
index 000000000..af6bfeb98
--- /dev/null
+++ b/components/lib/terminal/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./terminalstyle.cjs.js",
+    "module": "./terminalstyle.esm.js",
+    "unpkg": "./terminalstyle.min.js"
+}
diff --git a/components/lib/terminalservice/package.json b/components/lib/terminalservice/package.json
index e077bdb74..b01c807ef 100644
--- a/components/lib/terminalservice/package.json
+++ b/components/lib/terminalservice/package.json
@@ -1,6 +1,6 @@
 {
-  "main": "./terminalservice.cjs.js",
-  "module": "./terminalservice.esm.js",
-  "unpkg": "./terminalservice.min.js",
-  "types": "./TerminalService.d.ts"
-}
\ No newline at end of file
+    "main": "./terminalservice.cjs.js",
+    "module": "./terminalservice.esm.js",
+    "unpkg": "./terminalservice.min.js",
+    "types": "./TerminalService.d.ts"
+}
diff --git a/components/lib/textarea/BaseTextarea.vue b/components/lib/textarea/BaseTextarea.vue
index 7866307f8..79fb83d06 100644
--- a/components/lib/textarea/BaseTextarea.vue
+++ b/components/lib/textarea/BaseTextarea.vue
@@ -1,31 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-inputtextarea-resizable {
-        overflow: hidden;
-        resize: none;
-    }
-    
-    .p-fluid .p-inputtextarea {
-        width: 100%;
-    }
-}
-`;
-
-const classes = {
-    root: ({ instance, props }) => [
-        'p-inputtextarea p-inputtext p-component',
-        {
-            'p-filled': instance.filled,
-            'p-inputtextarea-resizable ': props.autoResize
-        }
-    ]
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'textarea', manual: true });
+import TextareaStyle from 'primevue/textarea/style';
 
 export default {
     name: 'BaseTextarea',
@@ -34,10 +9,7 @@ export default {
         modelValue: null,
         autoResize: Boolean
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: TextareaStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/textarea/package.json b/components/lib/textarea/package.json
index 20930904a..96b1692f2 100644
--- a/components/lib/textarea/package.json
+++ b/components/lib/textarea/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./textarea.cjs.js",
-  "module": "./textarea.esm.js",
-  "unpkg": "./textarea.min.js",
-  "types": "./Textarea.d.ts",
-  "browser": {
-    "./sfc": "./Textarea.vue"
-  }
-}
\ No newline at end of file
+    "main": "./textarea.cjs.js",
+    "module": "./textarea.esm.js",
+    "unpkg": "./textarea.min.js",
+    "types": "./Textarea.d.ts",
+    "browser": {
+        "./sfc": "./Textarea.vue"
+    }
+}
diff --git a/components/lib/textarea/style/TextareaStyle.js b/components/lib/textarea/style/TextareaStyle.js
new file mode 100644
index 000000000..046b672e2
--- /dev/null
+++ b/components/lib/textarea/style/TextareaStyle.js
@@ -0,0 +1,30 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-inputtextarea-resizable {
+        overflow: hidden;
+        resize: none;
+    }
+
+    .p-fluid .p-inputtextarea {
+        width: 100%;
+    }
+}
+`;
+
+const classes = {
+    root: ({ instance, props }) => [
+        'p-inputtextarea p-inputtext p-component',
+        {
+            'p-filled': instance.filled,
+            'p-inputtextarea-resizable ': props.autoResize
+        }
+    ]
+};
+
+export default BaseStyle.extend({
+    name: 'textarea',
+    css,
+    classes
+});
diff --git a/components/lib/textarea/style/package.json b/components/lib/textarea/style/package.json
new file mode 100644
index 000000000..feb752f1e
--- /dev/null
+++ b/components/lib/textarea/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./textareastyle.cjs.js",
+    "module": "./textareastyle.esm.js",
+    "unpkg": "./textareastyle.min.js"
+}
diff --git a/components/lib/tieredmenu/BaseTieredMenu.vue b/components/lib/tieredmenu/BaseTieredMenu.vue
index da2f00c79..e91997353 100644
--- a/components/lib/tieredmenu/BaseTieredMenu.vue
+++ b/components/lib/tieredmenu/BaseTieredMenu.vue
@@ -1,89 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-tieredmenu ul {
-        margin: 0;
-        padding: 0;
-        list-style: none;
-    }
-    
-    .p-tieredmenu .p-submenu-list {
-        position: absolute;
-        min-width: 100%;
-        z-index: 1;
-        display: none;
-    }
-    
-    .p-tieredmenu .p-menuitem-link {
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        text-decoration: none;
-        overflow: hidden;
-        position: relative;
-    }
-    
-    .p-tieredmenu .p-menuitem-text {
-        line-height: 1;
-    }
-    
-    .p-tieredmenu .p-menuitem {
-        position: relative;
-    }
-    
-    .p-tieredmenu .p-menuitem-link .p-submenu-icon {
-        margin-left: auto;
-    }
-    
-    .p-tieredmenu .p-menuitem-active > .p-submenu-list {
-        display: block;
-        left: 100%;
-        top: 0;
-    }
-}
-`;
-
-const inlineStyles = {
-    submenu: ({ instance, processedItem }) => ({ display: instance.isItemActive(processedItem) ? 'block' : 'none' })
-};
-
-const classes = {
-    root: ({ instance, props }) => [
-        'p-tieredmenu p-component',
-        {
-            'p-tieredmenu-overlay': props.popup,
-            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
-        }
-    ],
-    menu: 'p-tieredmenu-root-list',
-    menuitem: ({ instance, processedItem }) => [
-        'p-menuitem',
-        {
-            'p-menuitem-active p-highlight': instance.isItemActive(processedItem),
-            'p-focus': instance.isItemFocused(processedItem),
-            'p-disabled': instance.isItemDisabled(processedItem)
-        }
-    ],
-    content: 'p-menuitem-content',
-    action: ({ props, isActive, isExactActive }) => [
-        'p-menuitem-link',
-        {
-            'router-link-active': isActive,
-            'router-link-active-exact': props.exact && isExactActive
-        }
-    ],
-    icon: 'p-menuitem-icon',
-    text: 'p-menuitem-text',
-    submenuIcon: 'p-submenu-icon',
-    submenu: 'p-submenu-list',
-    separator: 'p-menuitem-separator'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'tieredmenu', manual: true });
+import TieredMenuStyle from 'primevue/tieredmenu/style';
 
 export default {
     name: 'BaseTieredMenu',
@@ -130,11 +47,7 @@ export default {
             default: null
         }
     },
-    css: {
-        classes,
-        inlineStyles,
-        loadStyle
-    },
+    style: TieredMenuStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/tieredmenu/package.json b/components/lib/tieredmenu/package.json
index 210e1c39b..ff2b2f6f1 100644
--- a/components/lib/tieredmenu/package.json
+++ b/components/lib/tieredmenu/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./tieredmenu.cjs.js",
-  "module": "./tieredmenu.esm.js",
-  "unpkg": "./tieredmenu.min.js",
-  "types": "./TieredMenu.d.ts",
-  "browser": {
-    "./sfc": "./TieredMenu.vue"
-  }
-}
\ No newline at end of file
+    "main": "./tieredmenu.cjs.js",
+    "module": "./tieredmenu.esm.js",
+    "unpkg": "./tieredmenu.min.js",
+    "types": "./TieredMenu.d.ts",
+    "browser": {
+        "./sfc": "./TieredMenu.vue"
+    }
+}
diff --git a/components/lib/tieredmenu/style/TieredMenuStyle.js b/components/lib/tieredmenu/style/TieredMenuStyle.js
new file mode 100644
index 000000000..89ee3fce4
--- /dev/null
+++ b/components/lib/tieredmenu/style/TieredMenuStyle.js
@@ -0,0 +1,89 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-tieredmenu ul {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    .p-tieredmenu .p-submenu-list {
+        position: absolute;
+        min-width: 100%;
+        z-index: 1;
+        display: none;
+    }
+
+    .p-tieredmenu .p-menuitem-link {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        text-decoration: none;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .p-tieredmenu .p-menuitem-text {
+        line-height: 1;
+    }
+
+    .p-tieredmenu .p-menuitem {
+        position: relative;
+    }
+
+    .p-tieredmenu .p-menuitem-link .p-submenu-icon {
+        margin-left: auto;
+    }
+
+    .p-tieredmenu .p-menuitem-active > .p-submenu-list {
+        display: block;
+        left: 100%;
+        top: 0;
+    }
+}
+`;
+
+const inlineStyles = {
+    submenu: ({ instance, processedItem }) => ({ display: instance.isItemActive(processedItem) ? 'block' : 'none' })
+};
+
+const classes = {
+    root: ({ instance, props }) => [
+        'p-tieredmenu p-component',
+        {
+            'p-tieredmenu-overlay': props.popup,
+            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
+            'p-ripple-disabled': instance.$primevue.config.ripple === false
+        }
+    ],
+    menu: 'p-tieredmenu-root-list',
+    menuitem: ({ instance, processedItem }) => [
+        'p-menuitem',
+        {
+            'p-menuitem-active p-highlight': instance.isItemActive(processedItem),
+            'p-focus': instance.isItemFocused(processedItem),
+            'p-disabled': instance.isItemDisabled(processedItem)
+        }
+    ],
+    content: 'p-menuitem-content',
+    action: ({ props, isActive, isExactActive }) => [
+        'p-menuitem-link',
+        {
+            'router-link-active': isActive,
+            'router-link-active-exact': props.exact && isExactActive
+        }
+    ],
+    icon: 'p-menuitem-icon',
+    text: 'p-menuitem-text',
+    submenuIcon: 'p-submenu-icon',
+    submenu: 'p-submenu-list',
+    separator: 'p-menuitem-separator'
+};
+
+export default BaseStyle.extend({
+    name: 'tieredmenu',
+    css,
+    classes,
+    inlineStyles
+});
diff --git a/components/lib/tieredmenu/style/package.json b/components/lib/tieredmenu/style/package.json
new file mode 100644
index 000000000..af42713bd
--- /dev/null
+++ b/components/lib/tieredmenu/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./tieredmenustyle.cjs.js",
+    "module": "./tieredmenustyle.esm.js",
+    "unpkg": "./tieredmenustyle.min.js"
+}
diff --git a/components/lib/timeline/BaseTimeline.vue b/components/lib/timeline/BaseTimeline.vue
index 78a512a49..455750232 100644
--- a/components/lib/timeline/BaseTimeline.vue
+++ b/components/lib/timeline/BaseTimeline.vue
@@ -1,133 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-timeline {
-        display: flex;
-        flex-grow: 1;
-        flex-direction: column;
-    }
-    
-    .p-timeline-left .p-timeline-event-opposite {
-        text-align: right;
-    }
-    
-    .p-timeline-left .p-timeline-event-content {
-        text-align: left;
-    }
-    
-    .p-timeline-right .p-timeline-event {
-        flex-direction: row-reverse;
-    }
-    
-    .p-timeline-right .p-timeline-event-opposite {
-        text-align: left;
-    }
-    
-    .p-timeline-right .p-timeline-event-content {
-        text-align: right;
-    }
-    
-    .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) {
-        flex-direction: row-reverse;
-    }
-    
-    .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite {
-        text-align: right;
-    }
-    
-    .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content {
-        text-align: left;
-    }
-    
-    .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite {
-        text-align: left;
-    }
-    
-    .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content {
-        text-align: right;
-    }
-    
-    .p-timeline-event {
-        display: flex;
-        position: relative;
-        min-height: 70px;
-    }
-    
-    .p-timeline-event:last-child {
-        min-height: 0;
-    }
-    
-    .p-timeline-event-opposite {
-        flex: 1;
-        padding: 0 1rem;
-    }
-    
-    .p-timeline-event-content {
-        flex: 1;
-        padding: 0 1rem;
-    }
-    
-    .p-timeline-event-separator {
-        flex: 0;
-        display: flex;
-        align-items: center;
-        flex-direction: column;
-    }
-    
-    .p-timeline-event-marker {
-        display: flex;
-        align-self: baseline;
-    }
-    
-    .p-timeline-event-connector {
-        flex-grow: 1;
-    }
-    
-    .p-timeline-horizontal {
-        flex-direction: row;
-    }
-    
-    .p-timeline-horizontal .p-timeline-event {
-        flex-direction: column;
-        flex: 1;
-    }
-    
-    .p-timeline-horizontal .p-timeline-event:last-child {
-        flex: 0;
-    }
-    
-    .p-timeline-horizontal .p-timeline-event-separator {
-        flex-direction: row;
-    }
-    
-    .p-timeline-horizontal .p-timeline-event-connector {
-        width: 100%;
-    }
-    
-    .p-timeline-bottom .p-timeline-event {
-        flex-direction: column-reverse;
-    }
-    
-    .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) {
-        flex-direction: column-reverse;
-    }
-}
-`;
-
-const classes = {
-    root: ({ props }) => ['p-timeline p-component', 'p-timeline-' + props.align, 'p-timeline-' + props.layout],
-    event: 'p-timeline-event',
-    opposite: 'p-timeline-event-opposite',
-    separator: 'p-timeline-event-separator',
-    marker: 'p-timeline-event-marker',
-    connector: 'p-timeline-event-connector',
-    content: 'p-timeline-event-content'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'timeline', manual: true });
+import TimelineStyle from 'primevue/timeline/style';
 
 export default {
     name: 'BaseTimeline',
@@ -144,10 +17,7 @@ export default {
         },
         dataKey: null
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: TimelineStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/timeline/package.json b/components/lib/timeline/package.json
index 66bdcf48c..37acbe456 100644
--- a/components/lib/timeline/package.json
+++ b/components/lib/timeline/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./timeline.cjs.js",
-  "module": "./timeline.esm.js",
-  "unpkg": "./timeline.min.js",
-  "types": "./Timeline.d.ts",
-  "browser": {
-    "./sfc": "./Timeline.vue"
-  }
-}
\ No newline at end of file
+    "main": "./timeline.cjs.js",
+    "module": "./timeline.esm.js",
+    "unpkg": "./timeline.min.js",
+    "types": "./Timeline.d.ts",
+    "browser": {
+        "./sfc": "./Timeline.vue"
+    }
+}
diff --git a/components/lib/timeline/style/TimelineStyle.js b/components/lib/timeline/style/TimelineStyle.js
new file mode 100644
index 000000000..d5a6ad1a3
--- /dev/null
+++ b/components/lib/timeline/style/TimelineStyle.js
@@ -0,0 +1,132 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-timeline {
+        display: flex;
+        flex-grow: 1;
+        flex-direction: column;
+    }
+
+    .p-timeline-left .p-timeline-event-opposite {
+        text-align: right;
+    }
+
+    .p-timeline-left .p-timeline-event-content {
+        text-align: left;
+    }
+
+    .p-timeline-right .p-timeline-event {
+        flex-direction: row-reverse;
+    }
+
+    .p-timeline-right .p-timeline-event-opposite {
+        text-align: left;
+    }
+
+    .p-timeline-right .p-timeline-event-content {
+        text-align: right;
+    }
+
+    .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) {
+        flex-direction: row-reverse;
+    }
+
+    .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite {
+        text-align: right;
+    }
+
+    .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content {
+        text-align: left;
+    }
+
+    .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite {
+        text-align: left;
+    }
+
+    .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content {
+        text-align: right;
+    }
+
+    .p-timeline-event {
+        display: flex;
+        position: relative;
+        min-height: 70px;
+    }
+
+    .p-timeline-event:last-child {
+        min-height: 0;
+    }
+
+    .p-timeline-event-opposite {
+        flex: 1;
+        padding: 0 1rem;
+    }
+
+    .p-timeline-event-content {
+        flex: 1;
+        padding: 0 1rem;
+    }
+
+    .p-timeline-event-separator {
+        flex: 0;
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+    }
+
+    .p-timeline-event-marker {
+        display: flex;
+        align-self: baseline;
+    }
+
+    .p-timeline-event-connector {
+        flex-grow: 1;
+    }
+
+    .p-timeline-horizontal {
+        flex-direction: row;
+    }
+
+    .p-timeline-horizontal .p-timeline-event {
+        flex-direction: column;
+        flex: 1;
+    }
+
+    .p-timeline-horizontal .p-timeline-event:last-child {
+        flex: 0;
+    }
+
+    .p-timeline-horizontal .p-timeline-event-separator {
+        flex-direction: row;
+    }
+
+    .p-timeline-horizontal .p-timeline-event-connector {
+        width: 100%;
+    }
+
+    .p-timeline-bottom .p-timeline-event {
+        flex-direction: column-reverse;
+    }
+
+    .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) {
+        flex-direction: column-reverse;
+    }
+}
+`;
+
+const classes = {
+    root: ({ props }) => ['p-timeline p-component', 'p-timeline-' + props.align, 'p-timeline-' + props.layout],
+    event: 'p-timeline-event',
+    opposite: 'p-timeline-event-opposite',
+    separator: 'p-timeline-event-separator',
+    marker: 'p-timeline-event-marker',
+    connector: 'p-timeline-event-connector',
+    content: 'p-timeline-event-content'
+};
+
+export default BaseStyle.extend({
+    name: 'timeline',
+    css,
+    classes
+});
diff --git a/components/lib/timeline/style/package.json b/components/lib/timeline/style/package.json
new file mode 100644
index 000000000..2883df3b4
--- /dev/null
+++ b/components/lib/timeline/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./timelinestyle.cjs.js",
+    "module": "./timelinestyle.esm.js",
+    "unpkg": "./timelinestyle.min.js"
+}
diff --git a/components/lib/toast/BaseToast.vue b/components/lib/toast/BaseToast.vue
index 87150bcca..037c92c5b 100644
--- a/components/lib/toast/BaseToast.vue
+++ b/components/lib/toast/BaseToast.vue
@@ -1,130 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-toast {
-        width: 25rem;
-        white-space: pre-line;
-        word-break: break-word;
-    }
-    
-    .p-toast-message-icon {
-        flex-shrink: 0;
-    }
-    
-    .p-toast-message-content {
-        display: flex;
-        align-items: flex-start;
-    }
-    
-    .p-toast-message-text {
-        flex: 1 1 auto;
-    }
-    
-    .p-toast-top-center {
-        transform: translateX(-50%);
-    }
-    
-    .p-toast-bottom-center {
-        transform: translateX(-50%);
-    }
-    
-    .p-toast-center {
-        min-width: 20vw;
-        transform: translate(-50%, -50%);
-    }
-    
-    .p-toast-icon-close {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        overflow: hidden;
-        position: relative;
-    }
-    
-    .p-toast-icon-close.p-link {
-        cursor: pointer;
-    }
-    
-    /* Animations */
-    .p-toast-message-enter-from {
-        opacity: 0;
-        -webkit-transform: translateY(50%);
-        -ms-transform: translateY(50%);
-        transform: translateY(50%);
-    }
-    
-    .p-toast-message-leave-from {
-        max-height: 1000px;
-    }
-    
-    .p-toast .p-toast-message.p-toast-message-leave-to {
-        max-height: 0;
-        opacity: 0;
-        margin-bottom: 0;
-        overflow: hidden;
-    }
-    
-    .p-toast-message-enter-active {
-        -webkit-transition: transform 0.3s, opacity 0.3s;
-        transition: transform 0.3s, opacity 0.3s;
-    }
-    
-    .p-toast-message-leave-active {
-        -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;
-        transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;
-    }
-}
-`;
-
-// Position
-const inlineStyles = {
-    root: ({ position }) => ({
-        position: 'fixed',
-        top: position === 'top-right' || position === 'top-left' || position === 'top-center' ? '20px' : position === 'center' ? '50%' : null,
-        right: (position === 'top-right' || position === 'bottom-right') && '20px',
-        bottom: (position === 'bottom-left' || position === 'bottom-right' || position === 'bottom-center') && '20px',
-        left: position === 'top-left' || position === 'bottom-left' ? '20px' : position === 'center' || position === 'top-center' || position === 'bottom-center' ? '50%' : null
-    })
-};
-
-const classes = {
-    root: ({ props, instance }) => [
-        'p-toast p-component p-toast-' + props.position,
-        {
-            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
-        }
-    ],
-    container: ({ props }) => [
-        'p-toast-message',
-        {
-            'p-toast-message-info': props.message.severity === 'info' || props.message.severity === undefined,
-            'p-toast-message-warn': props.message.severity === 'warn',
-            'p-toast-message-error': props.message.severity === 'error',
-            'p-toast-message-success': props.message.severity === 'success'
-        }
-    ],
-    content: 'p-toast-message-content',
-    icon: ({ props }) => [
-        'p-toast-message-icon',
-        {
-            [props.infoIcon]: props.message.severity === 'info',
-            [props.warnIcon]: props.message.severity === 'warn',
-            [props.errorIcon]: props.message.severity === 'error',
-            [props.successIcon]: props.message.severity === 'success'
-        }
-    ],
-    text: 'p-toast-message-text',
-    summary: 'p-toast-summary',
-    detail: 'p-toast-detail',
-    closeButton: 'p-toast-icon-close p-link',
-    closeIcon: 'p-toast-icon-close-icon'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'toast', manual: true });
+import ToastStyle from 'primevue/toast/style';
 
 export default {
     name: 'BaseToast',
@@ -175,11 +51,7 @@ export default {
             default: null
         }
     },
-    css: {
-        classes,
-        inlineStyles,
-        loadStyle
-    },
+    style: ToastStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/toast/package.json b/components/lib/toast/package.json
index 86b78443b..7acb6750f 100644
--- a/components/lib/toast/package.json
+++ b/components/lib/toast/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./toast.cjs.js",
-  "module": "./toast.esm.js",
-  "unpkg": "./toast.min.js",
-  "types": "./Toast.d.ts",
-  "browser": {
-    "./sfc": "./Toast.vue"
-  }
-}
\ No newline at end of file
+    "main": "./toast.cjs.js",
+    "module": "./toast.esm.js",
+    "unpkg": "./toast.min.js",
+    "types": "./Toast.d.ts",
+    "browser": {
+        "./sfc": "./Toast.vue"
+    }
+}
diff --git a/components/lib/toast/style/ToastStyle.js b/components/lib/toast/style/ToastStyle.js
new file mode 100644
index 000000000..bb090391c
--- /dev/null
+++ b/components/lib/toast/style/ToastStyle.js
@@ -0,0 +1,130 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-toast {
+        width: 25rem;
+        white-space: pre-line;
+        word-break: break-word;
+    }
+
+    .p-toast-message-icon {
+        flex-shrink: 0;
+    }
+
+    .p-toast-message-content {
+        display: flex;
+        align-items: flex-start;
+    }
+
+    .p-toast-message-text {
+        flex: 1 1 auto;
+    }
+
+    .p-toast-top-center {
+        transform: translateX(-50%);
+    }
+
+    .p-toast-bottom-center {
+        transform: translateX(-50%);
+    }
+
+    .p-toast-center {
+        min-width: 20vw;
+        transform: translate(-50%, -50%);
+    }
+
+    .p-toast-icon-close {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .p-toast-icon-close.p-link {
+        cursor: pointer;
+    }
+
+    /* Animations */
+    .p-toast-message-enter-from {
+        opacity: 0;
+        -webkit-transform: translateY(50%);
+        -ms-transform: translateY(50%);
+        transform: translateY(50%);
+    }
+
+    .p-toast-message-leave-from {
+        max-height: 1000px;
+    }
+
+    .p-toast .p-toast-message.p-toast-message-leave-to {
+        max-height: 0;
+        opacity: 0;
+        margin-bottom: 0;
+        overflow: hidden;
+    }
+
+    .p-toast-message-enter-active {
+        -webkit-transition: transform 0.3s, opacity 0.3s;
+        transition: transform 0.3s, opacity 0.3s;
+    }
+
+    .p-toast-message-leave-active {
+        -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;
+        transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;
+    }
+}
+`;
+
+// Position
+const inlineStyles = {
+    root: ({ position }) => ({
+        position: 'fixed',
+        top: position === 'top-right' || position === 'top-left' || position === 'top-center' ? '20px' : position === 'center' ? '50%' : null,
+        right: (position === 'top-right' || position === 'bottom-right') && '20px',
+        bottom: (position === 'bottom-left' || position === 'bottom-right' || position === 'bottom-center') && '20px',
+        left: position === 'top-left' || position === 'bottom-left' ? '20px' : position === 'center' || position === 'top-center' || position === 'bottom-center' ? '50%' : null
+    })
+};
+
+const classes = {
+    root: ({ props, instance }) => [
+        'p-toast p-component p-toast-' + props.position,
+        {
+            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
+            'p-ripple-disabled': instance.$primevue.config.ripple === false
+        }
+    ],
+    container: ({ props }) => [
+        'p-toast-message',
+        {
+            'p-toast-message-info': props.message.severity === 'info' || props.message.severity === undefined,
+            'p-toast-message-warn': props.message.severity === 'warn',
+            'p-toast-message-error': props.message.severity === 'error',
+            'p-toast-message-success': props.message.severity === 'success'
+        }
+    ],
+    content: 'p-toast-message-content',
+    icon: ({ props }) => [
+        'p-toast-message-icon',
+        {
+            [props.infoIcon]: props.message.severity === 'info',
+            [props.warnIcon]: props.message.severity === 'warn',
+            [props.errorIcon]: props.message.severity === 'error',
+            [props.successIcon]: props.message.severity === 'success'
+        }
+    ],
+    text: 'p-toast-message-text',
+    summary: 'p-toast-summary',
+    detail: 'p-toast-detail',
+    closeButton: 'p-toast-icon-close p-link',
+    closeIcon: 'p-toast-icon-close-icon'
+};
+
+export default BaseStyle.extend({
+    name: 'toast',
+    css,
+    classes,
+    inlineStyles
+});
diff --git a/components/lib/toast/style/package.json b/components/lib/toast/style/package.json
new file mode 100644
index 000000000..491a04e2e
--- /dev/null
+++ b/components/lib/toast/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./toaststyle.cjs.js",
+    "module": "./toaststyle.esm.js",
+    "unpkg": "./toaststyle.min.js"
+}
diff --git a/components/lib/toasteventbus/package.json b/components/lib/toasteventbus/package.json
index dcb778c00..c30054f5e 100644
--- a/components/lib/toasteventbus/package.json
+++ b/components/lib/toasteventbus/package.json
@@ -2,4 +2,4 @@
     "main": "./toasteventbus.cjs.js",
     "module": "./toasteventbus.esm.js",
     "unpkg": "./toasteventbus.min.js"
-  }
\ No newline at end of file
+}
diff --git a/components/lib/toastservice/package.json b/components/lib/toastservice/package.json
index e4416d435..77b01c514 100644
--- a/components/lib/toastservice/package.json
+++ b/components/lib/toastservice/package.json
@@ -1,6 +1,6 @@
 {
-  "main": "./toastservice.cjs.js",
-  "module": "./toastservice.esm.js",
-  "unpkg": "./toastservice.min.js",
-  "types": "./ToastService.d.ts"
-}
\ No newline at end of file
+    "main": "./toastservice.cjs.js",
+    "module": "./toastservice.esm.js",
+    "unpkg": "./toastservice.min.js",
+    "types": "./ToastService.d.ts"
+}
diff --git a/components/lib/togglebutton/BaseToggleButton.vue b/components/lib/togglebutton/BaseToggleButton.vue
index c306d41c5..024ec40a1 100644
--- a/components/lib/togglebutton/BaseToggleButton.vue
+++ b/components/lib/togglebutton/BaseToggleButton.vue
@@ -1,25 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-
-const classes = {
-    root: ({ instance, props }) => [
-        'p-button p-togglebutton p-component',
-        {
-            'p-focus': instance.focused,
-            'p-button-icon-only': instance.hasIcon && !instance.hasLabel,
-            'p-disabled': props.disabled,
-            'p-highlight': props.modelValue === true
-        }
-    ],
-    icon: ({ instance, props }) => [
-        'p-button-icon',
-        {
-            'p-button-icon-left': props.iconPos === 'left' && instance.label,
-            'p-button-icon-right': props.iconPos === 'right' && instance.label
-        }
-    ],
-    label: 'p-button-label'
-};
+import ToggleButtonStyle from 'primevue/togglebutton/style';
 
 export default {
     name: 'BaseToggleButton',
@@ -73,9 +54,7 @@ export default {
             default: null
         }
     },
-    css: {
-        classes
-    },
+    style: ToggleButtonStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/togglebutton/package.json b/components/lib/togglebutton/package.json
index 935e20469..9db89d7f4 100644
--- a/components/lib/togglebutton/package.json
+++ b/components/lib/togglebutton/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./togglebutton.cjs.js",
-  "module": "./togglebutton.esm.js",
-  "unpkg": "./togglebutton.min.js",
-  "types": "./ToggleButton.d.ts",
-  "browser": {
-    "./sfc": "./ToggleButton.vue"
-  }
-}
\ No newline at end of file
+    "main": "./togglebutton.cjs.js",
+    "module": "./togglebutton.esm.js",
+    "unpkg": "./togglebutton.min.js",
+    "types": "./ToggleButton.d.ts",
+    "browser": {
+        "./sfc": "./ToggleButton.vue"
+    }
+}
diff --git a/components/lib/togglebutton/style/ToggleButtonStyle.js b/components/lib/togglebutton/style/ToggleButtonStyle.js
new file mode 100644
index 000000000..89df66a50
--- /dev/null
+++ b/components/lib/togglebutton/style/ToggleButtonStyle.js
@@ -0,0 +1,27 @@
+import BaseStyle from 'primevue/base/style';
+
+const classes = {
+    root: ({ instance, props }) => [
+        'p-button p-togglebutton p-component',
+        {
+            'p-focus': instance.focused,
+            'p-button-icon-only': instance.hasIcon && !instance.hasLabel,
+            'p-disabled': props.disabled,
+            'p-highlight': props.modelValue === true
+        }
+    ],
+    icon: ({ instance, props }) => [
+        'p-button-icon',
+        {
+            'p-button-icon-left': props.iconPos === 'left' && instance.label,
+            'p-button-icon-right': props.iconPos === 'right' && instance.label
+        }
+    ],
+    label: 'p-button-label'
+};
+
+export default BaseStyle.extend({
+    name: 'accordion',
+    classes,
+    loadStyle: () => {}
+});
diff --git a/components/lib/togglebutton/style/package.json b/components/lib/togglebutton/style/package.json
new file mode 100644
index 000000000..d996772a2
--- /dev/null
+++ b/components/lib/togglebutton/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./togglebuttonstyle.cjs.js",
+    "module": "./togglebuttonstyle.esm.js",
+    "unpkg": "./togglebuttonstyle.min.js"
+}
diff --git a/components/lib/toolbar/BaseToolbar.vue b/components/lib/toolbar/BaseToolbar.vue
index 60c6d5fd6..3bcc632f1 100644
--- a/components/lib/toolbar/BaseToolbar.vue
+++ b/components/lib/toolbar/BaseToolbar.vue
@@ -1,39 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-toolbar {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        flex-wrap: wrap;
-    }
-    
-    .p-toolbar-group-start,
-    .p-toolbar-group-center,
-    .p-toolbar-group-end {
-        display: flex;
-        align-items: center;
-    }
-    
-    .p-toolbar-group-left,
-    .p-toolbar-group-right {
-        display: flex;
-        align-items: center;
-    }
-}
-`;
-
-const classes = {
-    root: 'p-toolbar p-component',
-    start: 'p-toolbar-group-start p-toolbar-group-left',
-    center: 'p-toolbar-group-center',
-    end: 'p-toolbar-group-end p-toolbar-group-right'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'toolbar', manual: true });
+import ToolbarStyle from 'primevue/toolbar/style';
 
 export default {
     name: 'BaseToolbar',
@@ -44,10 +11,7 @@ export default {
             default: null
         }
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: ToolbarStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/toolbar/package.json b/components/lib/toolbar/package.json
index 2510f96a6..980c9ff26 100644
--- a/components/lib/toolbar/package.json
+++ b/components/lib/toolbar/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./toolbar.cjs.js",
-  "module": "./toolbar.esm.js",
-  "unpkg": "./toolbar.min.js",
-  "types": "./Toolbar.d.ts",
-  "browser": {
-    "./sfc": "./Toolbar.vue"
-  }
-}
\ No newline at end of file
+    "main": "./toolbar.cjs.js",
+    "module": "./toolbar.esm.js",
+    "unpkg": "./toolbar.min.js",
+    "types": "./Toolbar.d.ts",
+    "browser": {
+        "./sfc": "./Toolbar.vue"
+    }
+}
diff --git a/components/lib/toolbar/style/ToolbarStyle.js b/components/lib/toolbar/style/ToolbarStyle.js
new file mode 100644
index 000000000..edfea7384
--- /dev/null
+++ b/components/lib/toolbar/style/ToolbarStyle.js
@@ -0,0 +1,38 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-toolbar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-wrap: wrap;
+    }
+
+    .p-toolbar-group-start,
+    .p-toolbar-group-center,
+    .p-toolbar-group-end {
+        display: flex;
+        align-items: center;
+    }
+
+    .p-toolbar-group-left,
+    .p-toolbar-group-right {
+        display: flex;
+        align-items: center;
+    }
+}
+`;
+
+const classes = {
+    root: 'p-toolbar p-component',
+    start: 'p-toolbar-group-start p-toolbar-group-left',
+    center: 'p-toolbar-group-center',
+    end: 'p-toolbar-group-end p-toolbar-group-right'
+};
+
+export default BaseStyle.extend({
+    name: 'toolbar',
+    css,
+    classes
+});
diff --git a/components/lib/toolbar/style/package.json b/components/lib/toolbar/style/package.json
new file mode 100644
index 000000000..fee161aa2
--- /dev/null
+++ b/components/lib/toolbar/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./toolbarstyle.cjs.js",
+    "module": "./toolbarstyle.esm.js",
+    "unpkg": "./toolbarstyle.min.js"
+}
diff --git a/components/lib/tooltip/BaseTooltip.js b/components/lib/tooltip/BaseTooltip.js
index b1366568f..3dce5ee18 100644
--- a/components/lib/tooltip/BaseTooltip.js
+++ b/components/lib/tooltip/BaseTooltip.js
@@ -1,78 +1,8 @@
 import BaseDirective from 'primevue/basedirective';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-tooltip {
-        position:absolute;
-        display:none;
-        pointer-events:none;
-        padding: .25em .5rem;
-        max-width: 12.5rem;
-    }
-    
-    .p-tooltip.p-tooltip-right,
-    .p-tooltip.p-tooltip-left {
-        padding: 0 .25rem;
-    }
-    
-    .p-tooltip.p-tooltip-top,
-    .p-tooltip.p-tooltip-bottom {
-        padding:.25em 0;
-    }
-    
-    .p-tooltip .p-tooltip-text {
-        white-space: pre-line;
-        word-break: break-word;
-    }
-    
-    .p-tooltip-arrow {
-        position: absolute;
-        width: 0;
-        height: 0;
-        border-color: transparent;
-        border-style: solid;
-    }
-    
-    .p-tooltip-right .p-tooltip-arrow {
-        margin-top: -.25rem;
-        border-width: .25em .25em .25em 0;
-    }
-    
-    .p-tooltip-left .p-tooltip-arrow {
-        margin-top: -.25rem;
-        border-width: .25em 0 .25em .25rem;
-    }
-    
-    .p-tooltip.p-tooltip-top {
-        padding: .25em 0;
-    }
-    
-    .p-tooltip-top .p-tooltip-arrow {
-        margin-left: -.25rem;
-        border-width: .25em .25em 0;
-    }
-    
-    .p-tooltip-bottom .p-tooltip-arrow {
-        margin-left: -.25rem;
-        border-width: 0 .25em .25rem;
-    }
-}
-`;
-
-const classes = {
-    root: 'p-tooltip p-component',
-    arrow: 'p-tooltip-arrow',
-    text: 'p-tooltip-text'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'tooltip', manual: true });
+import TooltipStyle from 'primevue/tooltip/style';
 
 const BaseTooltip = BaseDirective.extend({
-    css: {
-        classes,
-        loadStyle
-    }
+    style: TooltipStyle
 });
 
 export default BaseTooltip;
diff --git a/components/lib/tooltip/package.json b/components/lib/tooltip/package.json
index 64bcc7e2b..d2a9cba18 100644
--- a/components/lib/tooltip/package.json
+++ b/components/lib/tooltip/package.json
@@ -1,6 +1,6 @@
 {
-  "main": "./tooltip.cjs.js",
-  "module": "./tooltip.esm.js",
-  "unpkg": "./tooltip.min.js",
-  "types": "./Tooltip.d.ts"
-}
\ No newline at end of file
+    "main": "./tooltip.cjs.js",
+    "module": "./tooltip.esm.js",
+    "unpkg": "./tooltip.min.js",
+    "types": "./Tooltip.d.ts"
+}
diff --git a/components/lib/tooltip/style/TooltipStyle.js b/components/lib/tooltip/style/TooltipStyle.js
new file mode 100644
index 000000000..93cfaba70
--- /dev/null
+++ b/components/lib/tooltip/style/TooltipStyle.js
@@ -0,0 +1,72 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-tooltip {
+        position:absolute;
+        display:none;
+        pointer-events:none;
+        padding: .25em .5rem;
+        max-width: 12.5rem;
+    }
+
+    .p-tooltip.p-tooltip-right,
+    .p-tooltip.p-tooltip-left {
+        padding: 0 .25rem;
+    }
+
+    .p-tooltip.p-tooltip-top,
+    .p-tooltip.p-tooltip-bottom {
+        padding:.25em 0;
+    }
+
+    .p-tooltip .p-tooltip-text {
+        white-space: pre-line;
+        word-break: break-word;
+    }
+
+    .p-tooltip-arrow {
+        position: absolute;
+        width: 0;
+        height: 0;
+        border-color: transparent;
+        border-style: solid;
+    }
+
+    .p-tooltip-right .p-tooltip-arrow {
+        margin-top: -.25rem;
+        border-width: .25em .25em .25em 0;
+    }
+
+    .p-tooltip-left .p-tooltip-arrow {
+        margin-top: -.25rem;
+        border-width: .25em 0 .25em .25rem;
+    }
+
+    .p-tooltip.p-tooltip-top {
+        padding: .25em 0;
+    }
+
+    .p-tooltip-top .p-tooltip-arrow {
+        margin-left: -.25rem;
+        border-width: .25em .25em 0;
+    }
+
+    .p-tooltip-bottom .p-tooltip-arrow {
+        margin-left: -.25rem;
+        border-width: 0 .25em .25rem;
+    }
+}
+`;
+
+const classes = {
+    root: 'p-tooltip p-component',
+    arrow: 'p-tooltip-arrow',
+    text: 'p-tooltip-text'
+};
+
+export default BaseStyle.extend({
+    name: 'tooltip',
+    css,
+    classes
+});
diff --git a/components/lib/tooltip/style/package.json b/components/lib/tooltip/style/package.json
new file mode 100644
index 000000000..851d890ba
--- /dev/null
+++ b/components/lib/tooltip/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./tooltipstyle.cjs.js",
+    "module": "./tooltipstyle.esm.js",
+    "unpkg": "./tooltipstyle.min.js"
+}
diff --git a/components/lib/tree/BaseTree.vue b/components/lib/tree/BaseTree.vue
index 85d1d75c2..412f5e8ac 100644
--- a/components/lib/tree/BaseTree.vue
+++ b/components/lib/tree/BaseTree.vue
@@ -1,135 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-tree-container {
-        margin: 0;
-        padding: 0;
-        list-style-type: none;
-        overflow: auto;
-    }
-    
-    .p-treenode-children {
-        margin: 0;
-        padding: 0;
-        list-style-type: none;
-    }
-    
-    .p-tree-wrapper {
-        overflow: auto;
-    }
-    
-    .p-treenode-selectable {
-        cursor: pointer;
-        user-select: none;
-    }
-    
-    .p-tree-toggler {
-        cursor: pointer;
-        user-select: none;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        overflow: hidden;
-        position: relative;
-        flex-shrink: 0;
-    }
-    
-    .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
-        visibility: hidden;
-    }
-    
-    .p-treenode-content {
-        display: flex;
-        align-items: center;
-    }
-    
-    .p-tree-filter {
-        width: 100%;
-    }
-    
-    .p-tree-filter-container {
-        position: relative;
-        display: block;
-        width: 100%;
-    }
-    
-    .p-tree-filter-icon {
-        position: absolute;
-        top: 50%;
-        margin-top: -0.5rem;
-    }
-    
-    .p-tree-loading {
-        position: relative;
-        min-height: 4rem;
-    }
-    
-    .p-tree .p-tree-loading-overlay {
-        position: absolute;
-        z-index: 1;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-    
-    .p-tree-flex-scrollable {
-        display: flex;
-        flex: 1;
-        height: 100%;
-        flex-direction: column;
-    }
-    
-    .p-tree-flex-scrollable .p-tree-wrapper {
-        flex: 1;
-    }
-}
-`;
-
-const classes = {
-    root: ({ props }) => [
-        'p-tree p-component',
-        {
-            'p-tree-selectable': props.selectionMode != null,
-            'p-tree-loading': props.loading,
-            'p-tree-flex-scrollable': props.scrollHeight === 'flex'
-        }
-    ],
-    loadingOverlay: 'p-tree-loading-overlay p-component-overlay',
-    loadingIcon: 'p-tree-loading-icon',
-    filterContainer: 'p-tree-filter-container',
-    input: 'p-tree-filter p-inputtext p-component',
-    searchIcon: 'p-tree-filter-icon',
-    wrapper: 'p-tree-wrapper',
-    container: 'p-tree-container',
-    node: ({ instance }) => ['p-treenode', { 'p-treenode-leaf': instance.leaf }],
-    content: ({ instance }) => [
-        'p-treenode-content',
-        instance.node.styleClass,
-        {
-            'p-treenode-selectable': instance.selectable,
-            'p-highlight': instance.checkboxMode ? instance.checked : instance.selected
-        }
-    ],
-    toggler: 'p-tree-toggler p-link',
-    togglerIcon: 'p-tree-toggler-icon',
-    checkboxContainer: 'p-checkbox p-component',
-    checkbox: ({ instance }) => [
-        'p-checkbox-box',
-        {
-            'p-highlight': instance.checked,
-            'p-indeterminate': instance.partialChecked
-        }
-    ],
-    checkboxIcon: 'p-checkbox-icon',
-    nodeIcon: ({ instance }) => ['p-treenode-icon', instance.node.icon],
-    label: 'p-treenode-label',
-    subgroup: 'p-treenode-children'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'tree', manual: true });
+import TreeStyle from 'primevue/tree/style';
 
 export default {
     name: 'BaseTree',
@@ -200,10 +71,7 @@ export default {
             default: null
         }
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: TreeStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/tree/package.json b/components/lib/tree/package.json
index 2ae9ae622..098540091 100644
--- a/components/lib/tree/package.json
+++ b/components/lib/tree/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./tree.cjs.js",
-  "module": "./tree.esm.js",
-  "unpkg": "./tree.min.js",
-  "types": "./Tree.d.ts",
-  "browser": {
-    "./sfc": "./Tree.vue"
-  }
-}
\ No newline at end of file
+    "main": "./tree.cjs.js",
+    "module": "./tree.esm.js",
+    "unpkg": "./tree.min.js",
+    "types": "./Tree.d.ts",
+    "browser": {
+        "./sfc": "./Tree.vue"
+    }
+}
diff --git a/components/lib/tree/style/TreeStyle.js b/components/lib/tree/style/TreeStyle.js
new file mode 100644
index 000000000..afb95f224
--- /dev/null
+++ b/components/lib/tree/style/TreeStyle.js
@@ -0,0 +1,134 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-tree-container {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+        overflow: auto;
+    }
+
+    .p-treenode-children {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+    }
+
+    .p-tree-wrapper {
+        overflow: auto;
+    }
+
+    .p-treenode-selectable {
+        cursor: pointer;
+        user-select: none;
+    }
+
+    .p-tree-toggler {
+        cursor: pointer;
+        user-select: none;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        position: relative;
+        flex-shrink: 0;
+    }
+
+    .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+        visibility: hidden;
+    }
+
+    .p-treenode-content {
+        display: flex;
+        align-items: center;
+    }
+
+    .p-tree-filter {
+        width: 100%;
+    }
+
+    .p-tree-filter-container {
+        position: relative;
+        display: block;
+        width: 100%;
+    }
+
+    .p-tree-filter-icon {
+        position: absolute;
+        top: 50%;
+        margin-top: -0.5rem;
+    }
+
+    .p-tree-loading {
+        position: relative;
+        min-height: 4rem;
+    }
+
+    .p-tree .p-tree-loading-overlay {
+        position: absolute;
+        z-index: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .p-tree-flex-scrollable {
+        display: flex;
+        flex: 1;
+        height: 100%;
+        flex-direction: column;
+    }
+
+    .p-tree-flex-scrollable .p-tree-wrapper {
+        flex: 1;
+    }
+}
+`;
+
+const classes = {
+    root: ({ props }) => [
+        'p-tree p-component',
+        {
+            'p-tree-selectable': props.selectionMode != null,
+            'p-tree-loading': props.loading,
+            'p-tree-flex-scrollable': props.scrollHeight === 'flex'
+        }
+    ],
+    loadingOverlay: 'p-tree-loading-overlay p-component-overlay',
+    loadingIcon: 'p-tree-loading-icon',
+    filterContainer: 'p-tree-filter-container',
+    input: 'p-tree-filter p-inputtext p-component',
+    searchIcon: 'p-tree-filter-icon',
+    wrapper: 'p-tree-wrapper',
+    container: 'p-tree-container',
+    node: ({ instance }) => ['p-treenode', { 'p-treenode-leaf': instance.leaf }],
+    content: ({ instance }) => [
+        'p-treenode-content',
+        instance.node.styleClass,
+        {
+            'p-treenode-selectable': instance.selectable,
+            'p-highlight': instance.checkboxMode ? instance.checked : instance.selected
+        }
+    ],
+    toggler: 'p-tree-toggler p-link',
+    togglerIcon: 'p-tree-toggler-icon',
+    checkboxContainer: 'p-checkbox p-component',
+    checkbox: ({ instance }) => [
+        'p-checkbox-box',
+        {
+            'p-highlight': instance.checked,
+            'p-indeterminate': instance.partialChecked
+        }
+    ],
+    checkboxIcon: 'p-checkbox-icon',
+    nodeIcon: ({ instance }) => ['p-treenode-icon', instance.node.icon],
+    label: 'p-treenode-label',
+    subgroup: 'p-treenode-children'
+};
+
+export default BaseStyle.extend({
+    name: 'tree',
+    css,
+    classes
+});
diff --git a/components/lib/tree/style/package.json b/components/lib/tree/style/package.json
new file mode 100644
index 000000000..61888fd04
--- /dev/null
+++ b/components/lib/tree/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./treestyle.cjs.js",
+    "module": "./treestyle.esm.js",
+    "unpkg": "./treestyle.min.js"
+}
diff --git a/components/lib/treeselect/BaseTreeSelect.vue b/components/lib/treeselect/BaseTreeSelect.vue
index 49fc00227..6398c42e8 100644
--- a/components/lib/treeselect/BaseTreeSelect.vue
+++ b/components/lib/treeselect/BaseTreeSelect.vue
@@ -1,101 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-treeselect {
-        display: inline-flex;
-        cursor: pointer;
-        user-select: none;
-    }
-    
-    .p-treeselect-trigger {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
-    }
-    
-    .p-treeselect-label-container {
-        overflow: hidden;
-        flex: 1 1 auto;
-        cursor: pointer;
-    }
-    
-    .p-treeselect-label {
-        display: block;
-        white-space: nowrap;
-        cursor: pointer;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-    
-    .p-treeselect-label-empty {
-        overflow: hidden;
-        visibility: hidden;
-    }
-    
-    .p-treeselect-token {
-        cursor: default;
-        display: inline-flex;
-        align-items: center;
-        flex: 0 0 auto;
-    }
-    
-    .p-treeselect .p-treeselect-panel {
-        min-width: 100%;
-    }
-    
-    .p-treeselect-items-wrapper {
-        overflow: auto;
-    }
-    
-    .p-fluid .p-treeselect {
-        display: flex;
-    }
-}
-`;
-
-const inlineStyles = {
-    root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
-};
-
-const classes = {
-    root: ({ instance, props }) => [
-        'p-treeselect p-component p-inputwrapper',
-        {
-            'p-treeselect-chip': props.display === 'chip',
-            'p-disabled': props.disabled,
-            'p-focus': instance.focused,
-            'p-inputwrapper-filled': !instance.emptyValue,
-            'p-inputwrapper-focus': instance.focused || instance.overlayVisible
-        }
-    ],
-    labelContainer: 'p-treeselect-label-container',
-    label: ({ instance, props }) => [
-        'p-treeselect-label',
-        {
-            'p-placeholder': instance.label === props.placeholder,
-            'p-treeselect-label-empty': !props.placeholder && instance.emptyValue
-        }
-    ],
-    token: 'p-treeselect-token',
-    tokenLabel: 'p-treeselect-token-label',
-    trigger: 'p-treeselect-trigger',
-    triggerIcon: 'p-treeselect-trigger-icon',
-    panel: ({ instance }) => [
-        'p-treeselect-panel p-component',
-        {
-            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
-        }
-    ],
-    wrapper: 'p-treeselect-items-wrapper',
-    emptyMessage: 'p-treeselect-empty-message'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'treeselect', manual: true });
+import TreeSelectStyle from 'primevue/treeselect/style';
 
 export default {
     name: 'BaseTreeSelect',
@@ -172,11 +77,7 @@ export default {
             default: null
         }
     },
-    css: {
-        classes,
-        inlineStyles,
-        loadStyle
-    },
+    style: TreeSelectStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/treeselect/package.json b/components/lib/treeselect/package.json
index f0620d4d8..1170929ca 100644
--- a/components/lib/treeselect/package.json
+++ b/components/lib/treeselect/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./treeselect.min.js",
     "types": "./TreeSelect.d.ts",
     "browser": {
-      "./sfc": "./TreeSelect.vue"
+        "./sfc": "./TreeSelect.vue"
     }
-  }
\ No newline at end of file
+}
diff --git a/components/lib/treeselect/style/TreeSelectStyle.js b/components/lib/treeselect/style/TreeSelectStyle.js
new file mode 100644
index 000000000..b568c98a6
--- /dev/null
+++ b/components/lib/treeselect/style/TreeSelectStyle.js
@@ -0,0 +1,101 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-treeselect {
+        display: inline-flex;
+        cursor: pointer;
+        user-select: none;
+    }
+
+    .p-treeselect-trigger {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+    }
+
+    .p-treeselect-label-container {
+        overflow: hidden;
+        flex: 1 1 auto;
+        cursor: pointer;
+    }
+
+    .p-treeselect-label {
+        display: block;
+        white-space: nowrap;
+        cursor: pointer;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .p-treeselect-label-empty {
+        overflow: hidden;
+        visibility: hidden;
+    }
+
+    .p-treeselect-token {
+        cursor: default;
+        display: inline-flex;
+        align-items: center;
+        flex: 0 0 auto;
+    }
+
+    .p-treeselect .p-treeselect-panel {
+        min-width: 100%;
+    }
+
+    .p-treeselect-items-wrapper {
+        overflow: auto;
+    }
+
+    .p-fluid .p-treeselect {
+        display: flex;
+    }
+}
+`;
+
+const inlineStyles = {
+    root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
+};
+
+const classes = {
+    root: ({ instance, props }) => [
+        'p-treeselect p-component p-inputwrapper',
+        {
+            'p-treeselect-chip': props.display === 'chip',
+            'p-disabled': props.disabled,
+            'p-focus': instance.focused,
+            'p-inputwrapper-filled': !instance.emptyValue,
+            'p-inputwrapper-focus': instance.focused || instance.overlayVisible
+        }
+    ],
+    labelContainer: 'p-treeselect-label-container',
+    label: ({ instance, props }) => [
+        'p-treeselect-label',
+        {
+            'p-placeholder': instance.label === props.placeholder,
+            'p-treeselect-label-empty': !props.placeholder && instance.emptyValue
+        }
+    ],
+    token: 'p-treeselect-token',
+    tokenLabel: 'p-treeselect-token-label',
+    trigger: 'p-treeselect-trigger',
+    triggerIcon: 'p-treeselect-trigger-icon',
+    panel: ({ instance }) => [
+        'p-treeselect-panel p-component',
+        {
+            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
+            'p-ripple-disabled': instance.$primevue.config.ripple === false
+        }
+    ],
+    wrapper: 'p-treeselect-items-wrapper',
+    emptyMessage: 'p-treeselect-empty-message'
+};
+
+export default BaseStyle.extend({
+    name: 'treeselect',
+    css,
+    classes,
+    inlineStyles
+});
diff --git a/components/lib/treeselect/style/package.json b/components/lib/treeselect/style/package.json
new file mode 100644
index 000000000..ce812231f
--- /dev/null
+++ b/components/lib/treeselect/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./treeselectstyle.cjs.js",
+    "module": "./treeselectstyle.esm.js",
+    "unpkg": "./treeselectstyle.min.js"
+}
diff --git a/components/lib/treetable/BaseTreeTable.vue b/components/lib/treetable/BaseTreeTable.vue
index 7c81453b8..eb48f424a 100644
--- a/components/lib/treetable/BaseTreeTable.vue
+++ b/components/lib/treetable/BaseTreeTable.vue
@@ -1,272 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-@layer primevue {
-    .p-treetable {
-        position: relative;
-    }
-    
-    .p-treetable table {
-        border-collapse: collapse;
-        width: 100%;
-        table-layout: fixed;
-    }
-    
-    .p-treetable .p-sortable-column {
-        cursor: pointer;
-        user-select: none;
-    }
-    
-    .p-treetable-responsive-scroll > .p-treetable-wrapper {
-        overflow-x: auto;
-    }
-    
-    .p-treetable-responsive-scroll > .p-treetable-wrapper > table,
-    .p-treetable-auto-layout > .p-treetable-wrapper > table {
-        table-layout: auto;
-    }
-    
-    .p-treetable-hoverable-rows .p-treetable-tbody > tr {
-        cursor: pointer;
-    }
-    
-    .p-treetable-toggler {
-        cursor: pointer;
-        user-select: none;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        vertical-align: middle;
-        overflow: hidden;
-        position: relative;
-    }
-    
-    .p-treetable-toggler + .p-checkbox {
-        vertical-align: middle;
-    }
-    
-    .p-treetable-toggler + .p-checkbox + span {
-        vertical-align: middle;
-    }
-    
-    /* Resizable */
-    .p-treetable-resizable > .p-treetable-wrapper {
-        overflow-x: auto;
-    }
-    
-    .p-treetable-resizable .p-treetable-thead > tr > th,
-    .p-treetable-resizable .p-treetable-tfoot > tr > td,
-    .p-treetable-resizable .p-treetable-tbody > tr > td {
-        overflow: hidden;
-    }
-    
-    .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) {
-        background-clip: padding-box;
-        position: relative;
-    }
-    
-    .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
-        display: none;
-    }
-    
-    .p-treetable .p-column-resizer {
-        display: block;
-        position: absolute !important;
-        top: 0;
-        right: 0;
-        margin: 0;
-        width: 0.5rem;
-        height: 100%;
-        padding: 0px;
-        cursor: col-resize;
-        border: 1px solid transparent;
-    }
-    
-    .p-treetable .p-column-resizer-helper {
-        width: 1px;
-        position: absolute;
-        z-index: 10;
-        display: none;
-    }
-    
-    .p-treetable .p-treetable-loading-overlay {
-        position: absolute;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        z-index: 2;
-    }
-    
-    /* Scrollable */
-    .p-treetable-scrollable .p-treetable-wrapper {
-        position: relative;
-        overflow: auto;
-    }
-    
-    .p-treetable-scrollable .p-treetable-table {
-        display: block;
-    }
-    
-    .p-treetable-scrollable .p-treetable-thead,
-    .p-treetable-scrollable .p-treetable-tbody,
-    .p-treetable-scrollable .p-treetable-tfoot {
-        display: block;
-    }
-    
-    .p-treetable-scrollable .p-treetable-thead > tr,
-    .p-treetable-scrollable .p-treetable-tbody > tr,
-    .p-treetable-scrollable .p-treetable-tfoot > tr {
-        display: flex;
-        flex-wrap: nowrap;
-        width: 100%;
-    }
-    
-    .p-treetable-scrollable .p-treetable-thead > tr > th,
-    .p-treetable-scrollable .p-treetable-tbody > tr > td,
-    .p-treetable-scrollable .p-treetable-tfoot > tr > td {
-        display: flex;
-        flex: 1 1 0;
-        align-items: center;
-    }
-    
-    .p-treetable-scrollable .p-treetable-thead {
-        position: sticky;
-        top: 0;
-        z-index: 1;
-    }
-    
-    .p-treetable-scrollable .p-treetable-tfoot {
-        position: sticky;
-        bottom: 0;
-        z-index: 1;
-    }
-    
-    .p-treetable-scrollable .p-frozen-column {
-        position: sticky;
-        background: inherit;
-    }
-    
-    .p-treetable-scrollable th.p-frozen-column {
-        z-index: 1;
-    }
-    
-    .p-treetable-scrollable-both .p-treetable-thead > tr > th,
-    .p-treetable-scrollable-both .p-treetable-tbody > tr > td,
-    .p-treetable-scrollable-both .p-treetable-tfoot > tr > td,
-    .p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td,
-    .p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td {
-        flex: 0 0 auto;
-    }
-    
-    .p-treetable-flex-scrollable {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-    }
-    
-    .p-treetable-flex-scrollable .p-treetable-wrapper {
-        display: flex;
-        flex-direction: column;
-        flex: 1;
-        height: 100%;
-    }
-}
-`;
-
-const classes = {
-    root: ({ instance, props }) => [
-        'p-treetable p-component',
-        {
-            'p-treetable-hoverable-rows': props.rowHover || instance.rowSelectionMode,
-            'p-treetable-auto-layout': props.autoLayout,
-            'p-treetable-resizable': props.resizableColumns,
-            'p-treetable-resizable-fit': props.resizableColumns && props.columnResizeMode === 'fit',
-            'p-treetable-gridlines': props.showGridlines,
-            'p-treetable-scrollable': props.scrollable,
-            'p-treetable-scrollable-vertical': props.scrollable && props.scrollDirection === 'vertical',
-            'p-treetable-scrollable-horizontal': props.scrollable && props.scrollDirection === 'horizontal',
-            'p-treetable-scrollable-both': props.scrollable && props.scrollDirection === 'both',
-            'p-treetable-flex-scrollable': props.scrollable && props.scrollHeight === 'flex',
-            'p-treetable-responsive-scroll': props.responsiveLayout === 'scroll',
-            'p-treetable-sm': props.size === 'small',
-            'p-treetable-lg': props.size === 'large'
-        }
-    ],
-    loadingWrapper: 'p-treetable-loading',
-    loadingOverlay: 'p-treetable-loading-overlay p-component-overlay',
-    loadingIcon: 'p-treetable-loading-icon',
-    header: 'p-treetable-header',
-    paginator: ({ instance }) => (instance.paginatorTop ? 'p-paginator-top' : instance.paginatorBottom ? 'p-paginator-bottom' : ''),
-    wrapper: 'p-treetable-wrapper',
-    thead: 'p-treetable-thead',
-    //headercell
-    headerCell: ({ instance, props, column }) =>
-        column && instance.hasColumnFilter()
-            ? [
-                  'p-filter-column',
-                  {
-                      'p-frozen-column': instance.columnProp(column, 'frozen')
-                  }
-              ]
-            : [
-                  {
-                      'p-sortable-column': instance.columnProp('sortable'),
-                      'p-resizable-column': props.resizableColumns,
-                      'p-highlight': instance.isColumnSorted(),
-                      'p-frozen-column': instance.columnProp('frozen')
-                  }
-              ],
-    columnResizer: 'p-column-resizer',
-    headerTitle: 'p-column-title',
-    sortIcon: 'p-sortable-column-icon',
-    sortBadge: 'p-sortable-column-badge',
-    tbody: 'p-treetable-tbody',
-    //ttrow
-    row: ({ instance }) => [
-        {
-            'p-highlight': instance.selected
-        }
-    ],
-    //bodycell
-    bodyCell: ({ instance }) => [
-        {
-            'p-frozen-column': instance.columnProp('frozen')
-        }
-    ],
-    rowToggler: 'p-treetable-toggler p-link',
-    rowTogglerIcon: 'p-tree-toggler-icon',
-    checkboxWrapper: ({ instance }) => [
-        'p-checkbox p-treetable-checkbox p-component',
-        {
-            'p-checkbox-focused': instance.checkboxFocused
-        }
-    ],
-    checkbox: ({ instance }) => [
-        'p-checkbox-box',
-        {
-            'p-highlight': instance.checked,
-            'p-focus': instance.checkboxFocused,
-            'p-indeterminate': instance.partialChecked
-        }
-    ],
-    checkboxicon: 'p-checkbox-icon',
-    //treetable
-    emptyMessage: 'p-treetable-emptymessage',
-    tfoot: 'p-treetable-tfoot',
-    //footercell
-    footerCell: ({ instance }) => [
-        {
-            'p-frozen-column': instance.columnProp('frozen')
-        }
-    ],
-    //treetable
-    footer: 'p-treetable-footer',
-    resizeHelper: 'p-column-resizer-helper p-highlight'
-};
-
-const { load: loadStyle } = useStyle(styles, { name: 'treetable', manual: true });
+import TreeTableStyle from 'primevue/treetable/style';
 
 export default {
     name: 'BaseTreeTable',
@@ -429,10 +163,7 @@ export default {
             default: null
         }
     },
-    css: {
-        classes,
-        loadStyle
-    },
+    style: TreeTableStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/treetable/package.json b/components/lib/treetable/package.json
index 116ac29f1..c248335ee 100644
--- a/components/lib/treetable/package.json
+++ b/components/lib/treetable/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./treetable.cjs.js",
-  "module": "./treetable.esm.js",
-  "unpkg": "./treetable.min.js",
-  "types": "./TreeTable.d.ts",
-  "browser": {
-    "./sfc": "./TreeTable.vue"
-  }
-}
\ No newline at end of file
+    "main": "./treetable.cjs.js",
+    "module": "./treetable.esm.js",
+    "unpkg": "./treetable.min.js",
+    "types": "./TreeTable.d.ts",
+    "browser": {
+        "./sfc": "./TreeTable.vue"
+    }
+}
diff --git a/components/lib/treetable/style/TreeTableStyle.js b/components/lib/treetable/style/TreeTableStyle.js
new file mode 100644
index 000000000..f1697e4f3
--- /dev/null
+++ b/components/lib/treetable/style/TreeTableStyle.js
@@ -0,0 +1,271 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+@layer primevue {
+    .p-treetable {
+        position: relative;
+    }
+
+    .p-treetable table {
+        border-collapse: collapse;
+        width: 100%;
+        table-layout: fixed;
+    }
+
+    .p-treetable .p-sortable-column {
+        cursor: pointer;
+        user-select: none;
+    }
+
+    .p-treetable-responsive-scroll > .p-treetable-wrapper {
+        overflow-x: auto;
+    }
+
+    .p-treetable-responsive-scroll > .p-treetable-wrapper > table,
+    .p-treetable-auto-layout > .p-treetable-wrapper > table {
+        table-layout: auto;
+    }
+
+    .p-treetable-hoverable-rows .p-treetable-tbody > tr {
+        cursor: pointer;
+    }
+
+    .p-treetable-toggler {
+        cursor: pointer;
+        user-select: none;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        vertical-align: middle;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .p-treetable-toggler + .p-checkbox {
+        vertical-align: middle;
+    }
+
+    .p-treetable-toggler + .p-checkbox + span {
+        vertical-align: middle;
+    }
+
+    /* Resizable */
+    .p-treetable-resizable > .p-treetable-wrapper {
+        overflow-x: auto;
+    }
+
+    .p-treetable-resizable .p-treetable-thead > tr > th,
+    .p-treetable-resizable .p-treetable-tfoot > tr > td,
+    .p-treetable-resizable .p-treetable-tbody > tr > td {
+        overflow: hidden;
+    }
+
+    .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) {
+        background-clip: padding-box;
+        position: relative;
+    }
+
+    .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+        display: none;
+    }
+
+    .p-treetable .p-column-resizer {
+        display: block;
+        position: absolute !important;
+        top: 0;
+        right: 0;
+        margin: 0;
+        width: 0.5rem;
+        height: 100%;
+        padding: 0px;
+        cursor: col-resize;
+        border: 1px solid transparent;
+    }
+
+    .p-treetable .p-column-resizer-helper {
+        width: 1px;
+        position: absolute;
+        z-index: 10;
+        display: none;
+    }
+
+    .p-treetable .p-treetable-loading-overlay {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 2;
+    }
+
+    /* Scrollable */
+    .p-treetable-scrollable .p-treetable-wrapper {
+        position: relative;
+        overflow: auto;
+    }
+
+    .p-treetable-scrollable .p-treetable-table {
+        display: block;
+    }
+
+    .p-treetable-scrollable .p-treetable-thead,
+    .p-treetable-scrollable .p-treetable-tbody,
+    .p-treetable-scrollable .p-treetable-tfoot {
+        display: block;
+    }
+
+    .p-treetable-scrollable .p-treetable-thead > tr,
+    .p-treetable-scrollable .p-treetable-tbody > tr,
+    .p-treetable-scrollable .p-treetable-tfoot > tr {
+        display: flex;
+        flex-wrap: nowrap;
+        width: 100%;
+    }
+
+    .p-treetable-scrollable .p-treetable-thead > tr > th,
+    .p-treetable-scrollable .p-treetable-tbody > tr > td,
+    .p-treetable-scrollable .p-treetable-tfoot > tr > td {
+        display: flex;
+        flex: 1 1 0;
+        align-items: center;
+    }
+
+    .p-treetable-scrollable .p-treetable-thead {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+    }
+
+    .p-treetable-scrollable .p-treetable-tfoot {
+        position: sticky;
+        bottom: 0;
+        z-index: 1;
+    }
+
+    .p-treetable-scrollable .p-frozen-column {
+        position: sticky;
+        background: inherit;
+    }
+
+    .p-treetable-scrollable th.p-frozen-column {
+        z-index: 1;
+    }
+
+    .p-treetable-scrollable-both .p-treetable-thead > tr > th,
+    .p-treetable-scrollable-both .p-treetable-tbody > tr > td,
+    .p-treetable-scrollable-both .p-treetable-tfoot > tr > td,
+    .p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td,
+    .p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td {
+        flex: 0 0 auto;
+    }
+
+    .p-treetable-flex-scrollable {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+    }
+
+    .p-treetable-flex-scrollable .p-treetable-wrapper {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        height: 100%;
+    }
+}
+`;
+
+const classes = {
+    root: ({ instance, props }) => [
+        'p-treetable p-component',
+        {
+            'p-treetable-hoverable-rows': props.rowHover || instance.rowSelectionMode,
+            'p-treetable-auto-layout': props.autoLayout,
+            'p-treetable-resizable': props.resizableColumns,
+            'p-treetable-resizable-fit': props.resizableColumns && props.columnResizeMode === 'fit',
+            'p-treetable-gridlines': props.showGridlines,
+            'p-treetable-scrollable': props.scrollable,
+            'p-treetable-scrollable-vertical': props.scrollable && props.scrollDirection === 'vertical',
+            'p-treetable-scrollable-horizontal': props.scrollable && props.scrollDirection === 'horizontal',
+            'p-treetable-scrollable-both': props.scrollable && props.scrollDirection === 'both',
+            'p-treetable-flex-scrollable': props.scrollable && props.scrollHeight === 'flex',
+            'p-treetable-responsive-scroll': props.responsiveLayout === 'scroll',
+            'p-treetable-sm': props.size === 'small',
+            'p-treetable-lg': props.size === 'large'
+        }
+    ],
+    loadingWrapper: 'p-treetable-loading',
+    loadingOverlay: 'p-treetable-loading-overlay p-component-overlay',
+    loadingIcon: 'p-treetable-loading-icon',
+    header: 'p-treetable-header',
+    paginator: ({ instance }) => (instance.paginatorTop ? 'p-paginator-top' : instance.paginatorBottom ? 'p-paginator-bottom' : ''),
+    wrapper: 'p-treetable-wrapper',
+    thead: 'p-treetable-thead',
+    //headercell
+    headerCell: ({ instance, props, column }) =>
+        column && instance.hasColumnFilter()
+            ? [
+                  'p-filter-column',
+                  {
+                      'p-frozen-column': instance.columnProp(column, 'frozen')
+                  }
+              ]
+            : [
+                  {
+                      'p-sortable-column': instance.columnProp('sortable'),
+                      'p-resizable-column': props.resizableColumns,
+                      'p-highlight': instance.isColumnSorted(),
+                      'p-frozen-column': instance.columnProp('frozen')
+                  }
+              ],
+    columnResizer: 'p-column-resizer',
+    headerTitle: 'p-column-title',
+    sortIcon: 'p-sortable-column-icon',
+    sortBadge: 'p-sortable-column-badge',
+    tbody: 'p-treetable-tbody',
+    //ttrow
+    row: ({ instance }) => [
+        {
+            'p-highlight': instance.selected
+        }
+    ],
+    //bodycell
+    bodyCell: ({ instance }) => [
+        {
+            'p-frozen-column': instance.columnProp('frozen')
+        }
+    ],
+    rowToggler: 'p-treetable-toggler p-link',
+    rowTogglerIcon: 'p-tree-toggler-icon',
+    checkboxWrapper: ({ instance }) => [
+        'p-checkbox p-treetable-checkbox p-component',
+        {
+            'p-checkbox-focused': instance.checkboxFocused
+        }
+    ],
+    checkbox: ({ instance }) => [
+        'p-checkbox-box',
+        {
+            'p-highlight': instance.checked,
+            'p-focus': instance.checkboxFocused,
+            'p-indeterminate': instance.partialChecked
+        }
+    ],
+    checkboxicon: 'p-checkbox-icon',
+    //treetable
+    emptyMessage: 'p-treetable-emptymessage',
+    tfoot: 'p-treetable-tfoot',
+    //footercell
+    footerCell: ({ instance }) => [
+        {
+            'p-frozen-column': instance.columnProp('frozen')
+        }
+    ],
+    //treetable
+    footer: 'p-treetable-footer',
+    resizeHelper: 'p-column-resizer-helper p-highlight'
+};
+
+export default BaseStyle.extend({
+    name: 'treetable',
+    css,
+    classes
+});
diff --git a/components/lib/treetable/style/package.json b/components/lib/treetable/style/package.json
new file mode 100644
index 000000000..c020edea9
--- /dev/null
+++ b/components/lib/treetable/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./treetablestyle.cjs.js",
+    "module": "./treetablestyle.esm.js",
+    "unpkg": "./treetablestyle.min.js"
+}
diff --git a/components/lib/tristatecheckbox/BaseTriStateCheckbox.vue b/components/lib/tristatecheckbox/BaseTriStateCheckbox.vue
index 733752f46..862b7b62a 100644
--- a/components/lib/tristatecheckbox/BaseTriStateCheckbox.vue
+++ b/components/lib/tristatecheckbox/BaseTriStateCheckbox.vue
@@ -1,27 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-
-const classes = {
-    root: ({ instance, props }) => [
-        'p-checkbox p-component',
-        {
-            'p-checkbox-checked': props.modelValue === true,
-            'p-checkbox-disabled': props.disabled,
-            'p-checkbox-focused': instance.focused
-        }
-    ],
-    checkbox: ({ instance, props }) => [
-        'p-checkbox-box',
-        {
-            'p-highlight': props.modelValue != null,
-            'p-disabled': props.disabled,
-            'p-focus': instance.focused
-        }
-    ],
-    checkIcon: 'p-checkbox-icon',
-    uncheckIcon: 'p-checkbox-icon',
-    nullableIcon: 'p-checkbox-icon'
-};
+import TriStateCheckboxStyle from 'primevue/tristatecheckbox/style';
 
 export default {
     name: 'BaseTriStateCheckbox',
@@ -53,9 +32,7 @@ export default {
             default: null
         }
     },
-    css: {
-        classes
-    },
+    style: TriStateCheckboxStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/tristatecheckbox/package.json b/components/lib/tristatecheckbox/package.json
index d1e14fb5a..15bb4dc68 100644
--- a/components/lib/tristatecheckbox/package.json
+++ b/components/lib/tristatecheckbox/package.json
@@ -1,9 +1,9 @@
 {
-  "main": "./tristatecheckbox.cjs.js",
-  "module": "./tristatecheckbox.esm.js",
-  "unpkg": "./tristatecheckbox.min.js",
-  "types": "./TriStateCheckbox.d.ts",
-  "browser": {
-    "./sfc": "./TriStateCheckbox.vue"
-  }
-}
\ No newline at end of file
+    "main": "./tristatecheckbox.cjs.js",
+    "module": "./tristatecheckbox.esm.js",
+    "unpkg": "./tristatecheckbox.min.js",
+    "types": "./TriStateCheckbox.d.ts",
+    "browser": {
+        "./sfc": "./TriStateCheckbox.vue"
+    }
+}
diff --git a/components/lib/tristatecheckbox/style/TriStateCheckboxStyle.js b/components/lib/tristatecheckbox/style/TriStateCheckboxStyle.js
new file mode 100644
index 000000000..a063c8cc8
--- /dev/null
+++ b/components/lib/tristatecheckbox/style/TriStateCheckboxStyle.js
@@ -0,0 +1,29 @@
+import BaseStyle from 'primevue/base/style';
+
+const classes = {
+    root: ({ instance, props }) => [
+        'p-checkbox p-component',
+        {
+            'p-checkbox-checked': props.modelValue === true,
+            'p-checkbox-disabled': props.disabled,
+            'p-checkbox-focused': instance.focused
+        }
+    ],
+    checkbox: ({ instance, props }) => [
+        'p-checkbox-box',
+        {
+            'p-highlight': props.modelValue != null,
+            'p-disabled': props.disabled,
+            'p-focus': instance.focused
+        }
+    ],
+    checkIcon: 'p-checkbox-icon',
+    uncheckIcon: 'p-checkbox-icon',
+    nullableIcon: 'p-checkbox-icon'
+};
+
+export default BaseStyle.extend({
+    name: 'tristatecheckbox',
+    classes,
+    loadStyle: () => {}
+});
diff --git a/components/lib/tristatecheckbox/style/package.json b/components/lib/tristatecheckbox/style/package.json
new file mode 100644
index 000000000..810012b0f
--- /dev/null
+++ b/components/lib/tristatecheckbox/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./tristatecheckboxstyle.cjs.js",
+    "module": "./tristatecheckboxstyle.esm.js",
+    "unpkg": "./tristatecheckboxstyle.min.js"
+}
diff --git a/components/lib/useconfirm/package.json b/components/lib/useconfirm/package.json
index 0a73883dc..35f70a454 100644
--- a/components/lib/useconfirm/package.json
+++ b/components/lib/useconfirm/package.json
@@ -1,6 +1,6 @@
 {
-  "main": "./useconfirm.cjs.js",
-  "module": "./useconfirm.esm.js",
-  "unpkg": "./useconfirm.min.js",
-  "types": "./UseConfirm.d.ts"
-}
\ No newline at end of file
+    "main": "./useconfirm.cjs.js",
+    "module": "./useconfirm.esm.js",
+    "unpkg": "./useconfirm.min.js",
+    "types": "./UseConfirm.d.ts"
+}
diff --git a/components/lib/usedialog/package.json b/components/lib/usedialog/package.json
index 3ebad32fc..2e1de426f 100644
--- a/components/lib/usedialog/package.json
+++ b/components/lib/usedialog/package.json
@@ -3,4 +3,4 @@
     "module": "./usedialog.esm.js",
     "unpkg": "./usedialog.min.js",
     "types": "./UseDialog.d.ts"
-}
\ No newline at end of file
+}
diff --git a/components/lib/usestyle/UseStyle.d.ts b/components/lib/usestyle/UseStyle.d.ts
index a53ffde64..4ea262197 100644
--- a/components/lib/usestyle/UseStyle.d.ts
+++ b/components/lib/usestyle/UseStyle.d.ts
@@ -6,6 +6,7 @@ export interface StyleOptions {
     id?: string;
     media?: string;
     nonce?: string;
+    props?: any;
 }
 
 export declare function useStyle(
@@ -16,6 +17,6 @@ export declare function useStyle(
     name: string;
     css: any;
     unload: () => void;
-    load: (css?: string, options?: any) => void;
+    load: (css?: string, props?: any) => void;
     isLoaded: boolean;
 };
diff --git a/components/lib/usestyle/UseStyle.js b/components/lib/usestyle/UseStyle.js
index 8bbc03c76..df46b8d5b 100644
--- a/components/lib/usestyle/UseStyle.js
+++ b/components/lib/usestyle/UseStyle.js
@@ -19,15 +19,16 @@ export function useStyle(css, options = {}) {
     const styleRef = ref(null);
 
     const defaultDocument = DomHandler.isClient() ? window.document : undefined;
-    const { document = defaultDocument, immediate = true, manual = false, name = `style_${++_id}`, id = undefined, media = undefined, nonce = undefined } = options;
+    const { document = defaultDocument, immediate = true, manual = false, name = `style_${++_id}`, id = undefined, media = undefined, nonce = undefined, props = {} } = options;
 
     let stop = () => {};
 
     /* @todo: Improve _options params */
-    const load = (_css, _options = {}) => {
+    const load = (_css, _props = {}) => {
         if (!document) return;
 
-        const [_name, _id, _nonce] = [_options.name || name, _options.id || id, _options.nonce || nonce];
+        const _styleProps = { ...props, ..._props };
+        const [_name, _id, _nonce] = [_styleProps.name || name, _styleProps.id || id, _styleProps.nonce || nonce];
 
         styleRef.value = document.querySelector(`style[data-primevue-style-id="${_name}"]`) || document.getElementById(_id) || document.createElement('style');
 
@@ -42,7 +43,7 @@ export function useStyle(css, options = {}) {
             });
             document.head.appendChild(styleRef.value);
             DomHandler.setAttribute(styleRef.value, 'data-primevue-style-id', name);
-            DomHandler.setAttributes(styleRef.value, _options);
+            DomHandler.setAttributes(styleRef.value, _styleProps);
         }
 
         if (isLoaded.value) return;
diff --git a/components/lib/usestyle/package.json b/components/lib/usestyle/package.json
index ab7eb70ca..0a5095434 100644
--- a/components/lib/usestyle/package.json
+++ b/components/lib/usestyle/package.json
@@ -3,4 +3,4 @@
     "module": "./usestyle.esm.js",
     "unpkg": "./usestyle.min.js",
     "types": "./UseStyle.d.ts"
-}
\ No newline at end of file
+}
diff --git a/components/lib/usetoast/package.json b/components/lib/usetoast/package.json
index ac46db5f1..59bb8fb95 100644
--- a/components/lib/usetoast/package.json
+++ b/components/lib/usetoast/package.json
@@ -1,6 +1,6 @@
 {
-  "main": "./usetoast.cjs.js",
-  "module": "./usetoast.esm.js",
-  "unpkg": "./usetoast.min.js",
-  "types": "./UseToast.d.ts"
-}
\ No newline at end of file
+    "main": "./usetoast.cjs.js",
+    "module": "./usetoast.esm.js",
+    "unpkg": "./usetoast.min.js",
+    "types": "./UseToast.d.ts"
+}
diff --git a/components/lib/utils/package.json b/components/lib/utils/package.json
index 9cecd5390..e71e350a7 100644
--- a/components/lib/utils/package.json
+++ b/components/lib/utils/package.json
@@ -1,6 +1,6 @@
 {
-  "main": "./utils.cjs.js",
-  "module": "./utils.esm.js",
-  "unpkg": "./utils.min.js",
-  "types": "./Utils.d.ts"
+    "main": "./utils.cjs.js",
+    "module": "./utils.esm.js",
+    "unpkg": "./utils.min.js",
+    "types": "./Utils.d.ts"
 }
diff --git a/components/lib/virtualscroller/BaseVirtualScroller.vue b/components/lib/virtualscroller/BaseVirtualScroller.vue
index fa11bc717..c07b28078 100644
--- a/components/lib/virtualscroller/BaseVirtualScroller.vue
+++ b/components/lib/virtualscroller/BaseVirtualScroller.vue
@@ -1,71 +1,6 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-.p-virtualscroller {
-    position: relative;
-    overflow: auto;
-    contain: strict;
-    transform: translateZ(0);
-    will-change: scroll-position;
-    outline: 0 none;
-}
-
-.p-virtualscroller-content {
-    position: absolute;
-    top: 0;
-    left: 0;
-    /* contain: content; */
-    min-height: 100%;
-    min-width: 100%;
-    will-change: transform;
-}
-
-.p-virtualscroller-spacer {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 1px;
-    width: 1px;
-    transform-origin: 0 0;
-    pointer-events: none;
-}
-
-.p-virtualscroller .p-virtualscroller-loader {
-    position: sticky;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-}
-
-.p-virtualscroller-loader.p-component-overlay {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.p-virtualscroller-loading-icon {
-    font-size: 2rem;
-}
-
-.p-virtualscroller-loading-icon.p-icon {
-    width: 2rem;
-    height: 2rem;
-}
-
-.p-virtualscroller-horizontal > .p-virtualscroller-content {
-    display: flex;
-}
-
-/* Inline */
-.p-virtualscroller-inline .p-virtualscroller-content {
-    position: static;
-}
-`;
-
-const { load: loadStyle } = useStyle(styles, { name: 'virtualscroller', manual: true });
+import VirtualScrollerStyle from 'primevue/virtualscroller/style';
 
 export default {
     name: 'BaseVirtualScroller',
@@ -152,13 +87,14 @@ export default {
             default: false
         }
     },
+    style: VirtualScrollerStyle,
     provide() {
         return {
             $parentInstance: this
         };
     },
     beforeMount() {
-        loadStyle();
+        VirtualScrollerStyle.loadStyle();
     }
 };
 </script>
diff --git a/components/lib/virtualscroller/package.json b/components/lib/virtualscroller/package.json
index de1ab36fe..6bfc771e0 100644
--- a/components/lib/virtualscroller/package.json
+++ b/components/lib/virtualscroller/package.json
@@ -4,6 +4,6 @@
     "unpkg": "./virtualscroller.min.js",
     "types": "./VirtualScroller.d.ts",
     "browser": {
-      "./sfc": "./VirtualScroller.vue"
+        "./sfc": "./VirtualScroller.vue"
     }
-  }
\ No newline at end of file
+}
diff --git a/components/lib/virtualscroller/style/VirtualScrollerStyle.js b/components/lib/virtualscroller/style/VirtualScrollerStyle.js
new file mode 100644
index 000000000..e14b74b5a
--- /dev/null
+++ b/components/lib/virtualscroller/style/VirtualScrollerStyle.js
@@ -0,0 +1,69 @@
+import BaseStyle from 'primevue/base/style';
+
+const css = `
+.p-virtualscroller {
+    position: relative;
+    overflow: auto;
+    contain: strict;
+    transform: translateZ(0);
+    will-change: scroll-position;
+    outline: 0 none;
+}
+
+.p-virtualscroller-content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    /* contain: content; */
+    min-height: 100%;
+    min-width: 100%;
+    will-change: transform;
+}
+
+.p-virtualscroller-spacer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 1px;
+    width: 1px;
+    transform-origin: 0 0;
+    pointer-events: none;
+}
+
+.p-virtualscroller .p-virtualscroller-loader {
+    position: sticky;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.p-virtualscroller-loader.p-component-overlay {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.p-virtualscroller-loading-icon {
+    font-size: 2rem;
+}
+
+.p-virtualscroller-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+}
+
+.p-virtualscroller-horizontal > .p-virtualscroller-content {
+    display: flex;
+}
+
+/* Inline */
+.p-virtualscroller-inline .p-virtualscroller-content {
+    position: static;
+}
+`;
+
+export default BaseStyle.extend({
+    name: 'virtualscroller',
+    css
+});
diff --git a/components/lib/virtualscroller/style/package.json b/components/lib/virtualscroller/style/package.json
new file mode 100644
index 000000000..c1fe88767
--- /dev/null
+++ b/components/lib/virtualscroller/style/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./virtualscrollerstyle.cjs.js",
+    "module": "./virtualscrollerstyle.esm.js",
+    "unpkg": "./virtualscrollerstyle.min.js"
+}
diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json
index 12fae68b0..50c970d5a 100644
--- a/doc/common/apidoc/index.json
+++ b/doc/common/apidoc/index.json
@@ -49641,4 +49641,4 @@
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/package-build.json b/package-build.json
index 9aed1938b..a703c6082 100644
--- a/package-build.json
+++ b/package-build.json
@@ -10,21 +10,7 @@
     "bugs": {
         "url": "https://github.com/primefaces/primevue/issues"
     },
-    "keywords": [
-        "primevue",
-        "vue",
-        "vue.js",
-        "vue2",
-        "vue3",
-        "ui library",
-        "component library",
-        "material",
-        "bootstrap",
-        "fluent",
-        "tailwind",
-        "unstyled",
-        "passthrough"
-    ],
+    "keywords": ["primevue", "vue", "vue.js", "vue2", "vue3", "ui library", "component library", "material", "bootstrap", "fluent", "tailwind", "unstyled", "passthrough"],
     "web-types": "./web-types.json",
     "vetur": {
         "tags": "./vetur-tags.json",
@@ -33,4 +19,4 @@
     "peerDependencies": {
         "vue": "^3.0.0"
     }
-}
\ No newline at end of file
+}
diff --git a/package.json b/package.json
index 3fa722a84..bbc38c582 100644
--- a/package.json
+++ b/package.json
@@ -17,8 +17,8 @@
         "build:package": "NODE_ENV=production rollup -c && node build-meta && node api-generator/build-api && gulp build-styles",
         "build:check": "npm run format:check && npm run security:check",
         "security:check": "npm audit --production --audit-level high",
-        "format": "prettier --write \"**/*.{js,vue,d.ts}\" --cache",
-        "format:check": "prettier --check \"**/*.{js,vue,d.ts}\"",
+        "format": "prettier --write \"**/*.{js,vue,d.ts,json}\" --cache",
+        "format:check": "prettier --check \"**/*.{js,vue,d.ts,json}\"",
         "test:unit": "vitest run",
         "test:unit:watch": "vitest watch",
         "test:coverage": "vitest run --coverage",
@@ -82,4 +82,4 @@
         "nuxt-gtag": "^0.6.2",
         "vee-validate": "^4.8.2"
     }
-}
\ No newline at end of file
+}
diff --git a/rollup.config.js b/rollup.config.js
index b5c129a3c..2c1a80e51 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -64,10 +64,112 @@ const CORE_PASSTHROUGH_DEPENDENCIES = {
     'primevue/passthrough/tailwind': 'primevue.passthrough.tailwind'
 };
 
+const CORE_STYLE_DEPENDENCIES = {
+    'primevue/base/style': 'primevue.base.style',
+    'primevue/basecomponent/style': 'primevue.basecomponent.style',
+    'primevue/accordion/style': 'primevue.accordion.style',
+    'primevue/accordiontab/style': 'primevue.accordiontab.style',
+    'primevue/autocomplete/style': 'primevue.autocomplete.style',
+    'primevue/avatar/style': 'primevue.avatar.style',
+    'primevue/avatargroup/style': 'primevue.avatargroup.style',
+    'primevue/badge/style': 'primevue.badge.style',
+    'primevue/badgedirective/style': 'primevue.badgedirective.style',
+    'primevue/baseicon/style': 'primevue.baseicon.style',
+    'primevue/blockui/style': 'primevue.blockui.style',
+    'primevue/breadcrumb/style': 'primevue.breadcrumb.style',
+    'primevue/button/style': 'primevue.button.style',
+    'primevue/calendar/style': 'primevue.calendar.style',
+    'primevue/card/style': 'primevue.card.style',
+    'primevue/carousel/style': 'primevue.carousel.style',
+    'primevue/cascadeselect/style': 'primevue.cascadeselect.style',
+    'primevue/chart/style': 'primevue.chart.style',
+    'primevue/checkbox/style': 'primevue.checkbox.style',
+    'primevue/chip/style': 'primevue.chip.style',
+    'primevue/chips/style': 'primevue.chips.style',
+    'primevue/colorpicker/style': 'primevue.colorpicker.style',
+    'primevue/column/style': 'primevue.column.style',
+    'primevue/columngroup/style': 'primevue.columngroup.style',
+    'primevue/confirmdialog/style': 'primevue.confirmdialog.style',
+    'primevue/confirmpopup/style': 'primevue.confirmpopup.style',
+    'primevue/contextmenu/style': 'primevue.contextmenu.style',
+    'primevue/datatable/style': 'primevue.datatable.style',
+    'primevue/dataview/style': 'primevue.dataview.style',
+    'primevue/dataviewlayoutoptions/style': 'primevue.dataviewlayoutoptions.style',
+    'primevue/deferredcontent/style': 'primevue.deferredcontent.style',
+    'primevue/dialog/style': 'primevue.dialog.style',
+    'primevue/divider/style': 'primevue.divider.style',
+    'primevue/dock/style': 'primevue.dock.style',
+    'primevue/dropdown/style': 'primevue.dropdown.style',
+    'primevue/dynamicdialog/style': 'primevue.dynamicdialog.style',
+    'primevue/editor/style': 'primevue.editor.style',
+    'primevue/fieldset/style': 'primevue.fieldset.style',
+    'primevue/fileupload/style': 'primevue.fileupload.style',
+    'primevue/focustrap/style': 'primevue.focustrap.style',
+    'primevue/galleria/style': 'primevue.galleria.style',
+    'primevue/image/style': 'primevue.image.style',
+    'primevue/inlinemessage/style': 'primevue.inlinemessage.style',
+    'primevue/inplace/style': 'primevue.inplace.style',
+    'primevue/inputmask/style': 'primevue.inputmask.style',
+    'primevue/inputnumber/style': 'primevue.inputnumber.style',
+    'primevue/inputswitch/style': 'primevue.inputswitch.style',
+    'primevue/inputtext/style': 'primevue.inputtext.style',
+    'primevue/knob/style': 'primevue.knob.style',
+    'primevue/listbox/style': 'primevue.listbox.style',
+    'primevue/megamenu/style': 'primevue.megamenu.style',
+    'primevue/menu/style': 'primevue.menu.style',
+    'primevue/menubar/style': 'primevue.menubar.style',
+    'primevue/message/style': 'primevue.message.style',
+    'primevue/multiselect/style': 'primevue.multiselect.style',
+    'primevue/orderlist/style': 'primevue.orderlist.style',
+    'primevue/organizationchart/style': 'primevue.organizationchart.style',
+    'primevue/overlaypanel/style': 'primevue.overlaypanel.style',
+    'primevue/paginator/style': 'primevue.paginator.style',
+    'primevue/panel/style': 'primevue.panel.style',
+    'primevue/panelmenu/style': 'primevue.panelmenu.style',
+    'primevue/password/style': 'primevue.password.style',
+    'primevue/picklist/style': 'primevue.picklist.style',
+    'primevue/portal/style': 'primevue.portal.style',
+    'primevue/progressbar/style': 'primevue.progressbar.style',
+    'primevue/progressspinner/style': 'primevue.progressspinner.style',
+    'primevue/radiobutton/style': 'primevue.radiobutton.style',
+    'primevue/rating/style': 'primevue.rating.style',
+    'primevue/ripple/style': 'primevue.ripple.style',
+    'primevue/row/style': 'primevue.row.style',
+    'primevue/scrollpanel/style': 'primevue.scrollpanel.style',
+    'primevue/scrolltop/style': 'primevue.scrolltop.style',
+    'primevue/selectbutton/style': 'primevue.selectbutton.style',
+    'primevue/sidebar/style': 'primevue.sidebar.style',
+    'primevue/skeleton/style': 'primevue.skeleton.style',
+    'primevue/slider/style': 'primevue.slider.style',
+    'primevue/speeddial/style': 'primevue.speeddial.style',
+    'primevue/splitbutton/style': 'primevue.splitbutton.style',
+    'primevue/splitter/style': 'primevue.splitter.style',
+    'primevue/splitterpanel/style': 'primevue.splitterpanel.style',
+    'primevue/steps/style': 'primevue.steps.style',
+    'primevue/tabmenu/style': 'primevue.tabmenu.style',
+    'primevue/tabpanel/style': 'primevue.tabpanel.style',
+    'primevue/tabview/style': 'primevue.tabview.style',
+    'primevue/tag/style': 'primevue.tag.style',
+    'primevue/terminal/style': 'primevue.terminal.style',
+    'primevue/textarea/style': 'primevue.textarea.style',
+    'primevue/tieredmenu/style': 'primevue.tieredmenu.style',
+    'primevue/timeline/style': 'primevue.timeline.style',
+    'primevue/toast/style': 'primevue.toast.style',
+    'primevue/togglebutton/style': 'primevue.togglebutton.style',
+    'primevue/toolbar/style': 'primevue.toolbar.style',
+    'primevue/tooltip/style': 'primevue.tooltip.style',
+    'primevue/tree/style': 'primevue.tree.style',
+    'primevue/treeselect/style': 'primevue.treeselect.style',
+    'primevue/treetable/style': 'primevue.treetable.style',
+    'primevue/tristatecheckbox/style': 'primevue.tristatecheckbox.style',
+    'primevue/virtualscroller/style': 'primevue.virtualscroller.style'
+};
+
 const CORE_DEPENDENCIES = {
     'primevue/utils': 'primevue.utils',
     'primevue/api': 'primevue.api',
     'primevue/config': 'primevue.config',
+    ...CORE_STYLE_DEPENDENCIES,
     'primevue/usestyle': 'primevue.usestyle',
     'primevue/base': 'primevue.base',
     'primevue/basedirective': 'primevue.basedirective',
@@ -142,7 +244,7 @@ const TERSER_PLUGIN_OPTIONS = {
 const PLUGINS = [vue(), postcss(POSTCSS_PLUGIN_OPTIONS), babel(BABEL_PLUGIN_OPTIONS)];
 
 function addEntry(folder, inFile, outFile) {
-    const exports = inFile === 'PrimeVue.js' ? 'named' : 'auto';
+    const exports = inFile === 'PrimeVue.js' || folder === 'passthrough/tailwind' ? 'named' : 'auto';
     const useCorePlugin = Object.keys(GLOBAL_COMPONENT_DEPENDENCIES).some((d) => d.replace('primevue/', '') === folder);
     const plugins = PLUGINS;
     const external = EXTERNAL_COMPONENT;
@@ -275,6 +377,22 @@ function addIcon() {
         });
 }
 
+function addStyle() {
+    fs.readdirSync(path.resolve(__dirname, './components/lib'), { withFileTypes: true })
+        .filter((dir) => dir.isDirectory())
+        .forEach(({ name: folderName }) => {
+            try {
+                fs.readdirSync(path.resolve(__dirname, './components/lib/' + folderName + '/style')).forEach((file) => {
+                    if (/\.js$/.test(file)) {
+                        let name = file.split(/(.js)$/)[0].toLowerCase();
+
+                        addEntry(folderName + '/style', file, name);
+                    }
+                });
+            } catch {}
+        });
+}
+
 function addDirectives() {
     addEntry('basedirective', 'BaseDirective.js', 'basedirective');
     addEntry('badgedirective', 'BadgeDirective.js', 'badgedirective');
@@ -321,6 +439,7 @@ function addServices() {
 }
 
 addUtils();
+addStyle();
 addBase();
 addApi();
 addConfig();
diff --git a/tsconfig.json b/tsconfig.json
index 9e5d89444..22d582756 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,20 +1,20 @@
 {
-  "compilerOptions": {
-      "target": "es5",
-      "lib": ["dom", "dom.iterable", "esnext"],
-      "allowJs": true,
-      "skipLibCheck": false,
-      "strict": true,
-      "forceConsistentCasingInFileNames": true,
-      "noEmit": true,
-      "esModuleInterop": true,
-      "module": "esnext",
-      "moduleResolution": "node",
-      "resolveJsonModule": true,
-      "isolatedModules": false,
-      "jsx": "preserve",
-      "incremental": true,
-  },
-  "include": ["**/*.ts"],
-  "exclude": ["node_modules", "dist"]
+    "compilerOptions": {
+        "target": "es5",
+        "lib": ["dom", "dom.iterable", "esnext"],
+        "allowJs": true,
+        "skipLibCheck": false,
+        "strict": true,
+        "forceConsistentCasingInFileNames": true,
+        "noEmit": true,
+        "esModuleInterop": true,
+        "module": "esnext",
+        "moduleResolution": "node",
+        "resolveJsonModule": true,
+        "isolatedModules": false,
+        "jsx": "preserve",
+        "incremental": true
+    },
+    "include": ["**/*.ts"],
+    "exclude": ["node_modules", "dist"]
 }
diff --git a/vite.config.js b/vite.config.js
index f6be84c24..ca4be2b06 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,8 +1,163 @@
 import path from 'path';
 
+/* @todo: Refactor alias: https://github.com/rollup/plugins/tree/master/packages/alias#regular-expression-aliases */
+
+const STYLE_ALIAS = {
+    'primevue/base/style': path.resolve(__dirname, './components/lib/base/style/BaseStyle.js'),
+    'primevue/basecomponent/style': path.resolve(__dirname, './components/lib/basecomponent/style/BaseComponentStyle.js'),
+    'primevue/accordion/style': path.resolve(__dirname, './components/lib/accordion/style/AccordionStyle.js'),
+    'primevue/accordiontab/style': path.resolve(__dirname, './components/lib/accordiontab/style/AccordionTabStyle.js'),
+    'primevue/autocomplete/style': path.resolve(__dirname, './components/lib/autocomplete/style/AutoCompleteStyle.js'),
+    'primevue/avatar/style': path.resolve(__dirname, './components/lib/avatar/style/AvatarStyle.js'),
+    'primevue/avatargroup/style': path.resolve(__dirname, './components/lib/avatargroup/style/AvatarGroupStyle.js'),
+    'primevue/badge/style': path.resolve(__dirname, './components/lib/badge/style/BadgeStyle.js'),
+    'primevue/badgedirective/style': path.resolve(__dirname, './components/lib/badgedirective/style/BadgeDirectiveStyle.js'),
+    'primevue/baseicon/style': path.resolve(__dirname, './components/lib/baseicon/style/BaseIconStyle.js'),
+    'primevue/blockui/style': path.resolve(__dirname, './components/lib/blockui/style/BlockUIStyle.js'),
+    'primevue/breadcrumb/style': path.resolve(__dirname, './components/lib/breadcrumb/style/BreadcrumbStyle.js'),
+    'primevue/button/style': path.resolve(__dirname, './components/lib/button/style/ButtonStyle.js'),
+    'primevue/calendar/style': path.resolve(__dirname, './components/lib/calendar/style/CalendarStyle.js'),
+    'primevue/card/style': path.resolve(__dirname, './components/lib/card/style/CardStyle.js'),
+    'primevue/carousel/style': path.resolve(__dirname, './components/lib/carousel/style/CarouselStyle.js'),
+    'primevue/cascadeselect/style': path.resolve(__dirname, './components/lib/cascadeselect/style/CascadeSelectStyle.js'),
+    'primevue/chart/style': path.resolve(__dirname, './components/lib/chart/style/ChartStyle.js'),
+    'primevue/checkbox/style': path.resolve(__dirname, './components/lib/checkbox/style/CheckboxStyle.js'),
+    'primevue/chip/style': path.resolve(__dirname, './components/lib/chip/style/ChipStyle.js'),
+    'primevue/chips/style': path.resolve(__dirname, './components/lib/chips/style/ChipsStyle.js'),
+    'primevue/colorpicker/style': path.resolve(__dirname, './components/lib/colorpicker/style/ColorPickerStyle.js'),
+    'primevue/column/style': path.resolve(__dirname, './components/lib/column/style/ColumnStyle.js'),
+    'primevue/columngroup/style': path.resolve(__dirname, './components/lib/columngroup/style/ColumnGroupStyle.js'),
+    'primevue/confirmdialog/style': path.resolve(__dirname, './components/lib/confirmdialog/style/ConfirmDialogStyle.js'),
+    'primevue/confirmpopup/style': path.resolve(__dirname, './components/lib/confirmpopup/style/ConfirmPopupStyle.js'),
+    'primevue/contextmenu/style': path.resolve(__dirname, './components/lib/contextmenu/style/ContextMenuStyle.js'),
+    'primevue/datatable/style': path.resolve(__dirname, './components/lib/datatable/style/DataTableStyle.js'),
+    'primevue/dataview/style': path.resolve(__dirname, './components/lib/dataview/style/DataViewStyle.js'),
+    'primevue/dataviewlayoutoptions/style': path.resolve(__dirname, './components/lib/dataviewlayoutoptions/style/DataViewLayoutOptionsStyle.js'),
+    'primevue/deferredcontent/style': path.resolve(__dirname, './components/lib/deferredcontent/style/DeferredContentStyle.js'),
+    'primevue/dialog/style': path.resolve(__dirname, './components/lib/dialog/style/DialogStyle.js'),
+    'primevue/divider/style': path.resolve(__dirname, './components/lib/divider/style/DividerStyle.js'),
+    'primevue/dock/style': path.resolve(__dirname, './components/lib/dock/style/DockStyle.js'),
+    'primevue/dropdown/style': path.resolve(__dirname, './components/lib/dropdown/style/DropdownStyle.js'),
+    'primevue/dynamicdialog/style': path.resolve(__dirname, './components/lib/dynamicdialog/style/DynamicDialogStyle.js'),
+    'primevue/editor/style': path.resolve(__dirname, './components/lib/editor/style/EditorStyle.js'),
+    'primevue/fieldset/style': path.resolve(__dirname, './components/lib/fieldset/style/FieldsetStyle.js'),
+    'primevue/fileupload/style': path.resolve(__dirname, './components/lib/fileupload/style/FileUploadStyle.js'),
+    'primevue/focustrap/style': path.resolve(__dirname, './components/lib/focustrap/style/FocusTrapStyle.js'),
+    'primevue/galleria/style': path.resolve(__dirname, './components/lib/galleria/style/GalleriaStyle.js'),
+    'primevue/image/style': path.resolve(__dirname, './components/lib/image/style/ImageStyle.js'),
+    'primevue/inlinemessage/style': path.resolve(__dirname, './components/lib/inlinemessage/style/InlineMessageStyle.js'),
+    'primevue/inplace/style': path.resolve(__dirname, './components/lib/inplace/style/InplaceStyle.js'),
+    'primevue/inputmask/style': path.resolve(__dirname, './components/lib/inputmask/style/InputMaskStyle.js'),
+    'primevue/inputnumber/style': path.resolve(__dirname, './components/lib/inputnumber/style/InputNumberStyle.js'),
+    'primevue/inputswitch/style': path.resolve(__dirname, './components/lib/inputswitch/style/InputSwitchStyle.js'),
+    'primevue/inputtext/style': path.resolve(__dirname, './components/lib/inputtext/style/InputTextStyle.js'),
+    'primevue/knob/style': path.resolve(__dirname, './components/lib/knob/style/KnobStyle.js'),
+    'primevue/listbox/style': path.resolve(__dirname, './components/lib/listbox/style/ListboxStyle.js'),
+    'primevue/megamenu/style': path.resolve(__dirname, './components/lib/megamenu/style/MegaMenuStyle.js'),
+    'primevue/menu/style': path.resolve(__dirname, './components/lib/menu/style/MenuStyle.js'),
+    'primevue/menubar/style': path.resolve(__dirname, './components/lib/menubar/style/MenubarStyle.js'),
+    'primevue/message/style': path.resolve(__dirname, './components/lib/message/style/MessageStyle.js'),
+    'primevue/multiselect/style': path.resolve(__dirname, './components/lib/multiselect/style/MultiSelectStyle.js'),
+    'primevue/orderlist/style': path.resolve(__dirname, './components/lib/orderlist/style/OrderListStyle.js'),
+    'primevue/organizationchart/style': path.resolve(__dirname, './components/lib/organizationchart/style/OrganizationChartStyle.js'),
+    'primevue/overlaypanel/style': path.resolve(__dirname, './components/lib/overlaypanel/style/OverlayPanelStyle.js'),
+    'primevue/paginator/style': path.resolve(__dirname, './components/lib/paginator/style/PaginatorStyle.js'),
+    'primevue/panel/style': path.resolve(__dirname, './components/lib/panel/style/PanelStyle.js'),
+    'primevue/panelmenu/style': path.resolve(__dirname, './components/lib/panelmenu/style/PanelMenuStyle.js'),
+    'primevue/password/style': path.resolve(__dirname, './components/lib/password/style/PasswordStyle.js'),
+    'primevue/picklist/style': path.resolve(__dirname, './components/lib/picklist/style/PickListStyle.js'),
+    'primevue/portal/style': path.resolve(__dirname, './components/lib/portal/style/PortalStyle.js'),
+    'primevue/progressbar/style': path.resolve(__dirname, './components/lib/progressbar/style/ProgressBarStyle.js'),
+    'primevue/progressspinner/style': path.resolve(__dirname, './components/lib/progressspinner/style/ProgressSpinnerStyle.js'),
+    'primevue/radiobutton/style': path.resolve(__dirname, './components/lib/radiobutton/style/RadioButtonStyle.js'),
+    'primevue/rating/style': path.resolve(__dirname, './components/lib/rating/style/RatingStyle.js'),
+    'primevue/ripple/style': path.resolve(__dirname, './components/lib/ripple/style/RippleStyle.js'),
+    'primevue/row/style': path.resolve(__dirname, './components/lib/row/style/RowStyle.js'),
+    'primevue/scrollpanel/style': path.resolve(__dirname, './components/lib/scrollpanel/style/ScrollPanelStyle.js'),
+    'primevue/scrolltop/style': path.resolve(__dirname, './components/lib/scrolltop/style/ScrollTopStyle.js'),
+    'primevue/selectbutton/style': path.resolve(__dirname, './components/lib/selectbutton/style/SelectButtonStyle.js'),
+    'primevue/sidebar/style': path.resolve(__dirname, './components/lib/sidebar/style/SidebarStyle.js'),
+    'primevue/skeleton/style': path.resolve(__dirname, './components/lib/skeleton/style/SkeletonStyle.js'),
+    'primevue/slider/style': path.resolve(__dirname, './components/lib/slider/style/SliderStyle.js'),
+    'primevue/speeddial/style': path.resolve(__dirname, './components/lib/speeddial/style/SpeedDialStyle.js'),
+    'primevue/splitbutton/style': path.resolve(__dirname, './components/lib/splitbutton/style/SplitButtonStyle.js'),
+    'primevue/splitter/style': path.resolve(__dirname, './components/lib/splitter/style/SplitterStyle.js'),
+    'primevue/splitterpanel/style': path.resolve(__dirname, './components/lib/splitterpanel/style/SplitterPanelStyle.js'),
+    'primevue/steps/style': path.resolve(__dirname, './components/lib/steps/style/StepsStyle.js'),
+    'primevue/tabmenu/style': path.resolve(__dirname, './components/lib/tabmenu/style/TabMenuStyle.js'),
+    'primevue/tabpanel/style': path.resolve(__dirname, './components/lib/tabpanel/style/TabPanelStyle.js'),
+    'primevue/tabview/style': path.resolve(__dirname, './components/lib/tabview/style/TabviewStyle.js'),
+    'primevue/tag/style': path.resolve(__dirname, './components/lib/tag/style/TagStyle.js'),
+    'primevue/terminal/style': path.resolve(__dirname, './components/lib/terminal/style/TerminalStyle.js'),
+    'primevue/textarea/style': path.resolve(__dirname, './components/lib/textarea/style/TextareaStyle.js'),
+    'primevue/tieredmenu/style': path.resolve(__dirname, './components/lib/tieredmenu/style/TieredMenuStyle.js'),
+    'primevue/timeline/style': path.resolve(__dirname, './components/lib/timeline/style/TimelineStyle.js'),
+    'primevue/toast/style': path.resolve(__dirname, './components/lib/toast/style/ToastStyle.js'),
+    'primevue/togglebutton/style': path.resolve(__dirname, './components/lib/togglebutton/style/ToggleButtonStyle.js'),
+    'primevue/toolbar/style': path.resolve(__dirname, './components/lib/toolbar/style/ToolbarStyle.js'),
+    'primevue/tooltip/style': path.resolve(__dirname, './components/lib/tooltip/style/TooltipStyle.js'),
+    'primevue/tree/style': path.resolve(__dirname, './components/lib/tree/style/TreeStyle.js'),
+    'primevue/treeselect/style': path.resolve(__dirname, './components/lib/treeselect/style/TreeSelectStyle.js'),
+    'primevue/treetable/style': path.resolve(__dirname, './components/lib/treetable/style/TreeTableStyle.js'),
+    'primevue/tristatecheckbox/style': path.resolve(__dirname, './components/lib/tristatecheckbox/style/TriStateCheckboxStyle.js'),
+    'primevue/virtualscroller/style': path.resolve(__dirname, './components/lib/virtualscroller/style/VirtualScrollerStyle.js')
+};
+
+const ICON_ALIAS = {
+    'primevue/baseicon': path.resolve(__dirname, './components/lib/baseicon/BaseIcon.vue'),
+    'primevue/icons/angledoubledown': path.resolve(__dirname, './components/lib/icons/angledoubledown/index.vue'),
+    'primevue/icons/angledoubleleft': path.resolve(__dirname, './components/lib/icons/angledoubleleft/index.vue'),
+    'primevue/icons/angledoubleright': path.resolve(__dirname, './components/lib/icons/angledoubleright/index.vue'),
+    'primevue/icons/angledoubleup': path.resolve(__dirname, './components/lib/icons/angledoubleup/index.vue'),
+    'primevue/icons/angledown': path.resolve(__dirname, './components/lib/icons/angledown/index.vue'),
+    'primevue/icons/angleleft': path.resolve(__dirname, './components/lib/icons/angleleft/index.vue'),
+    'primevue/icons/angleright': path.resolve(__dirname, './components/lib/icons/angleright/index.vue'),
+    'primevue/icons/angleup': path.resolve(__dirname, './components/lib/icons/angleup/index.vue'),
+    'primevue/icons/arrowdown': path.resolve(__dirname, './components/lib/icons/arrowdown/index.vue'),
+    'primevue/icons/arrowup': path.resolve(__dirname, './components/lib/icons/arrowup/index.vue'),
+    'primevue/icons/ban': path.resolve(__dirname, './components/lib/icons/ban/index.vue'),
+    'primevue/icons/bars': path.resolve(__dirname, './components/lib/icons/bars/index.vue'),
+    'primevue/icons/calendar': path.resolve(__dirname, './components/lib/icons/calendar/index.vue'),
+    'primevue/icons/check': path.resolve(__dirname, './components/lib/icons/check/index.vue'),
+    'primevue/icons/chevrondown': path.resolve(__dirname, './components/lib/icons/chevrondown/index.vue'),
+    'primevue/icons/chevronleft': path.resolve(__dirname, './components/lib/icons/chevronleft/index.vue'),
+    'primevue/icons/chevronright': path.resolve(__dirname, './components/lib/icons/chevronright/index.vue'),
+    'primevue/icons/chevronup': path.resolve(__dirname, './components/lib/icons/chevronup/index.vue'),
+    'primevue/icons/exclamationtriangle': path.resolve(__dirname, './components/lib/icons/exclamationtriangle/index.vue'),
+    'primevue/icons/eye': path.resolve(__dirname, './components/lib/icons/eye/index.vue'),
+    'primevue/icons/eyeslash': path.resolve(__dirname, './components/lib/icons/eyeslash/index.vue'),
+    'primevue/icons/filter': path.resolve(__dirname, './components/lib/icons/filter/index.vue'),
+    'primevue/icons/filterslash': path.resolve(__dirname, './components/lib/icons/filterslash/index.vue'),
+    'primevue/icons/infocircle': path.resolve(__dirname, './components/lib/icons/infocircle/index.vue'),
+    'primevue/icons/minus': path.resolve(__dirname, './components/lib/icons/minus/index.vue'),
+    'primevue/icons/pencil': path.resolve(__dirname, './components/lib/icons/pencil/index.vue'),
+    'primevue/icons/plus': path.resolve(__dirname, './components/lib/icons/plus/index.vue'),
+    'primevue/icons/refresh': path.resolve(__dirname, './components/lib/icons/refresh/index.vue'),
+    'primevue/icons/search': path.resolve(__dirname, './components/lib/icons/search/index.vue'),
+    'primevue/icons/searchminus': path.resolve(__dirname, './components/lib/icons/searchminus/index.vue'),
+    'primevue/icons/searchplus': path.resolve(__dirname, './components/lib/icons/searchplus/index.vue'),
+    'primevue/icons/sortalt': path.resolve(__dirname, './components/lib/icons/sortalt/index.vue'),
+    'primevue/icons/sortamountdown': path.resolve(__dirname, './components/lib/icons/sortamountdown/index.vue'),
+    'primevue/icons/sortamountupalt': path.resolve(__dirname, './components/lib/icons/sortamountupalt/index.vue'),
+    'primevue/icons/spinner': path.resolve(__dirname, './components/lib/icons/spinner/index.vue'),
+    'primevue/icons/star': path.resolve(__dirname, './components/lib/icons/star/index.vue'),
+    'primevue/icons/starfill': path.resolve(__dirname, './components/lib/icons/starfill/index.vue'),
+    'primevue/icons/thlarge': path.resolve(__dirname, './components/lib/icons/thlarge/index.vue'),
+    'primevue/icons/times': path.resolve(__dirname, './components/lib/icons/times/index.vue'),
+    'primevue/icons/timescircle': path.resolve(__dirname, './components/lib/icons/timescircle/index.vue'),
+    'primevue/icons/trash': path.resolve(__dirname, './components/lib/icons/trash/index.vue'),
+    'primevue/icons/undo': path.resolve(__dirname, './components/lib/icons/undo/index.vue'),
+    'primevue/icons/upload': path.resolve(__dirname, './components/lib/icons/upload/index.vue'),
+    'primevue/icons/windowmaximize': path.resolve(__dirname, './components/lib/icons/windowmaximize/index.vue'),
+    'primevue/icons/windowminimize': path.resolve(__dirname, './components/lib/icons/windowminimize/index.vue')
+};
+
 export default {
     resolve: {
         alias: {
+            'primevue/utils': path.resolve(__dirname, './components/lib/utils/Utils.js'),
+            'primevue/api': path.resolve(__dirname, './components/lib/api/Api.js'),
+            ...STYLE_ALIAS,
             'primevue/base': path.resolve(__dirname, './components/lib/base/Base.js'),
             'primevue/basedirective': path.resolve(__dirname, './components/lib/basedirective/BaseDirective.js'),
             'primevue/ripple': path.resolve(__dirname, './components/lib/ripple/Ripple.js'),
@@ -11,57 +166,10 @@ export default {
             'primevue/useconfirm': path.resolve(__dirname, './components/lib/useconfirm/UseConfirm.js'),
             'primevue/usetoast': path.resolve(__dirname, './components/lib/usetoast/UseToast.js'),
             'primevue/usedialog': path.resolve(__dirname, './components/lib/usedialog/UseDialog.js'),
-            'primevue/utils': path.resolve(__dirname, './components/lib/utils/Utils.js'),
             'primevue/usestyle': path.resolve(__dirname, './components/lib/usestyle/UseStyle.js'),
-            'primevue/api': path.resolve(__dirname, './components/lib/api/Api.js'),
             'primevue/portal': path.resolve(__dirname, './components/lib/portal/Portal.vue'),
             'primevue/basecomponent': path.resolve(__dirname, './components/lib/basecomponent/BaseComponent.vue'),
-            'primevue/baseicon': path.resolve(__dirname, './components/lib/baseicon/BaseIcon.vue'),
-            'primevue/icons/angledoubledown': path.resolve(__dirname, './components/lib/icons/angledoubledown/index.vue'),
-            'primevue/icons/angledoubleleft': path.resolve(__dirname, './components/lib/icons/angledoubleleft/index.vue'),
-            'primevue/icons/angledoubleright': path.resolve(__dirname, './components/lib/icons/angledoubleright/index.vue'),
-            'primevue/icons/angledoubleup': path.resolve(__dirname, './components/lib/icons/angledoubleup/index.vue'),
-            'primevue/icons/angledown': path.resolve(__dirname, './components/lib/icons/angledown/index.vue'),
-            'primevue/icons/angleleft': path.resolve(__dirname, './components/lib/icons/angleleft/index.vue'),
-            'primevue/icons/angleright': path.resolve(__dirname, './components/lib/icons/angleright/index.vue'),
-            'primevue/icons/angleup': path.resolve(__dirname, './components/lib/icons/angleup/index.vue'),
-            'primevue/icons/arrowdown': path.resolve(__dirname, './components/lib/icons/arrowdown/index.vue'),
-            'primevue/icons/arrowup': path.resolve(__dirname, './components/lib/icons/arrowup/index.vue'),
-            'primevue/icons/ban': path.resolve(__dirname, './components/lib/icons/ban/index.vue'),
-            'primevue/icons/bars': path.resolve(__dirname, './components/lib/icons/bars/index.vue'),
-            'primevue/icons/calendar': path.resolve(__dirname, './components/lib/icons/calendar/index.vue'),
-            'primevue/icons/check': path.resolve(__dirname, './components/lib/icons/check/index.vue'),
-            'primevue/icons/chevrondown': path.resolve(__dirname, './components/lib/icons/chevrondown/index.vue'),
-            'primevue/icons/chevronleft': path.resolve(__dirname, './components/lib/icons/chevronleft/index.vue'),
-            'primevue/icons/chevronright': path.resolve(__dirname, './components/lib/icons/chevronright/index.vue'),
-            'primevue/icons/chevronup': path.resolve(__dirname, './components/lib/icons/chevronup/index.vue'),
-            'primevue/icons/exclamationtriangle': path.resolve(__dirname, './components/lib/icons/exclamationtriangle/index.vue'),
-            'primevue/icons/eye': path.resolve(__dirname, './components/lib/icons/eye/index.vue'),
-            'primevue/icons/eyeslash': path.resolve(__dirname, './components/lib/icons/eyeslash/index.vue'),
-            'primevue/icons/filter': path.resolve(__dirname, './components/lib/icons/filter/index.vue'),
-            'primevue/icons/filterslash': path.resolve(__dirname, './components/lib/icons/filterslash/index.vue'),
-            'primevue/icons/infocircle': path.resolve(__dirname, './components/lib/icons/infocircle/index.vue'),
-            'primevue/icons/minus': path.resolve(__dirname, './components/lib/icons/minus/index.vue'),
-            'primevue/icons/pencil': path.resolve(__dirname, './components/lib/icons/pencil/index.vue'),
-            'primevue/icons/plus': path.resolve(__dirname, './components/lib/icons/plus/index.vue'),
-            'primevue/icons/refresh': path.resolve(__dirname, './components/lib/icons/refresh/index.vue'),
-            'primevue/icons/search': path.resolve(__dirname, './components/lib/icons/search/index.vue'),
-            'primevue/icons/searchminus': path.resolve(__dirname, './components/lib/icons/searchminus/index.vue'),
-            'primevue/icons/searchplus': path.resolve(__dirname, './components/lib/icons/searchplus/index.vue'),
-            'primevue/icons/sortalt': path.resolve(__dirname, './components/lib/icons/sortalt/index.vue'),
-            'primevue/icons/sortamountdown': path.resolve(__dirname, './components/lib/icons/sortamountdown/index.vue'),
-            'primevue/icons/sortamountupalt': path.resolve(__dirname, './components/lib/icons/sortamountupalt/index.vue'),
-            'primevue/icons/spinner': path.resolve(__dirname, './components/lib/icons/spinner/index.vue'),
-            'primevue/icons/star': path.resolve(__dirname, './components/lib/icons/star/index.vue'),
-            'primevue/icons/starfill': path.resolve(__dirname, './components/lib/icons/starfill/index.vue'),
-            'primevue/icons/thlarge': path.resolve(__dirname, './components/lib/icons/thlarge/index.vue'),
-            'primevue/icons/times': path.resolve(__dirname, './components/lib/icons/times/index.vue'),
-            'primevue/icons/timescircle': path.resolve(__dirname, './components/lib/icons/timescircle/index.vue'),
-            'primevue/icons/trash': path.resolve(__dirname, './components/lib/icons/trash/index.vue'),
-            'primevue/icons/undo': path.resolve(__dirname, './components/lib/icons/undo/index.vue'),
-            'primevue/icons/upload': path.resolve(__dirname, './components/lib/icons/upload/index.vue'),
-            'primevue/icons/windowmaximize': path.resolve(__dirname, './components/lib/icons/windowmaximize/index.vue'),
-            'primevue/icons/windowminimize': path.resolve(__dirname, './components/lib/icons/windowminimize/index.vue'),
+            ...ICON_ALIAS,
             'primevue/button': path.resolve(__dirname, './components/lib/button/Button.vue'),
             'primevue/inputtext': path.resolve(__dirname, './components/lib/inputtext/InputText.vue'),
             'primevue/dialog': path.resolve(__dirname, './components/lib/dialog/Dialog.vue'),