Fixed #4530 - Export styles of all components

.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

.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
     }
 }

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/');
 

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

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

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

components/lib/accordion/style/package.json

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

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

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

components/lib/accordiontab/style/AccordionTabStyle.js

@@ -0,0 +1 @@
+export default {};

components/lib/accordiontab/style/package.json

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