Fixed #4530 - Export styles of all components

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

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"
-  }
-}
+    "main": "./chart.cjs.js",
+    "module": "./chart.esm.js",
+    "unpkg": "./chart.min.js",
+    "types": "./Chart.d.ts",
+    "browser": {
+        "./sfc": "./Chart.vue"
+    }
+}

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
+});

components/lib/chart/style/package.json

@@ -0,0 +1,5 @@
+{
+    "main": "./chartstyle.cjs.js",
+    "module": "./chartstyle.esm.js",
+    "unpkg": "./chartstyle.min.js"
+}