[themes] export Stonecrop themes correctly (#178)

* fix: export Stonecrop themes correctly

* fix: add changelogs

---------

Co-authored-by: Rohan Bansal <[email protected]>

aform/src/components/form/ADatePicker.vue

@@ -156,7 +156,7 @@ useKeyboardNav([
 </script>
 
 <style>
-@import url('@stonecrop/themes/default/default.css');
+@import url('@stonecrop/themes/default.css');
 @import url('@/theme/adate.css');
 @import url('@/theme/aform.css');
 </style>

aform/src/theme/aform.css

@@ -1 +1 @@
-@import url('@stonecrop/themes/default/default.css');
+@import url('@stonecrop/themes/default.css');

aform/src/theme/login.css

@@ -1,2 +1,2 @@
-@import url('@stonecrop/themes/default/default.css');
+@import url('@stonecrop/themes/default.css');
 @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200');

atable/src/components/ACell.vue

@@ -193,5 +193,5 @@ const cellStyle: CSSProperties = {
 </script>
 
 <style>
-@import url('@stonecrop/themes/default/default.css');
+@import url('@stonecrop/themes/default.css');
 </style>

atable/src/components/AExpansionRow.vue

@@ -61,5 +61,5 @@ if (addNavigation) {
 </script>
 
 <style>
-@import url('@stonecrop/themes/default/default.css');
+@import url('@stonecrop/themes/default.css');
 </style>

atable/src/components/ARow.vue

@@ -87,5 +87,5 @@ if (addNavigation) {
 </script>
 
 <style>
-@import url('@stonecrop/themes/default/default.css');
+@import url('@stonecrop/themes/default.css');
 </style>

atable/src/components/ATable.vue

@@ -224,5 +224,5 @@ window.addEventListener('keydown', (event: KeyboardEvent) => {
 </script>
 
 <style>
-@import url('@stonecrop/themes/default/default.css');
+@import url('@stonecrop/themes/default.css');
 </style>

atable/src/components/ATableHeader.vue

@@ -34,5 +34,5 @@ const getHeaderCellStyle = (column: TableColumn): CSSProperties => ({
 </script>
 
 <style>
-@import url('@stonecrop/themes/default/default.css');
+@import url('@stonecrop/themes/default.css');
 </style>

atable/src/components/ATableModal.vue

@@ -31,5 +31,5 @@ const handleInput = (event: Event) => {
 </script>
 
 <style>
-@import url('@stonecrop/themes/default/default.css');
+@import url('@stonecrop/themes/default.css');
 </style>

beam/themes/beam.css

@@ -1,4 +1,4 @@
-/* @import url('../../themes/default/default.css'); */
+/* @import url('../../themes/default.css'); */
 @import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
 
 /* Style */

common/changes/@stonecrop/aform/fix-export-styles_2024-10-30-08-22.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@stonecrop/aform",
+      "comment": "update theme path",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@stonecrop/aform"
+}

common/changes/@stonecrop/atable/fix-export-styles_2024-10-30-08-22.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@stonecrop/atable",
+      "comment": "update theme path",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@stonecrop/atable"
+}

common/changes/@stonecrop/beam/fix-export-styles_2024-10-30-08-22.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@stonecrop/beam",
+      "comment": "update theme path",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@stonecrop/beam"
+}

common/changes/@stonecrop/themes/fix-export-styles_2024-10-30-08-22.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@stonecrop/themes",
+      "comment": "export themes correctly",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@stonecrop/themes"
+}

examples/atable/default.story.vue

@@ -108,7 +108,7 @@ const full_width_table = ref({
 
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
-@import url('@stonecrop/themes/default/default.css');
+@import url('@stonecrop/themes/default.css');
 @import url('@stonecrop/atable/styles');
 </style>
 

examples/atable/list.story.vue

@@ -315,7 +315,7 @@ rowNav['keydown.enter'] = rowNav['keydown.down']
 </script>
 
 <style>
-@import url('@stonecrop/themes/default/default.css');
+@import url('@stonecrop/themes/default.css');
 @import url('@stonecrop/atable/styles');
 </style>
 

examples/atable/tree.story.vue

@@ -95,7 +95,7 @@ const pinned = ref({
 
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
-@import url('@stonecrop/themes/default/default.css');
+@import url('@stonecrop/themes/default.css');
 @import url('@stonecrop/atable/styles');
 </style>
 

examples/docbuilder/components/Builder.vue

@@ -88,7 +88,7 @@ const actionElements = [
 
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
-@import url('@stonecrop/themes/default/default.css');
+@import url('@stonecrop/themes/default.css');
 /* @import '../style.css'; */
 html,
 body {

examples/docbuilder/components/Listview.vue

@@ -106,6 +106,6 @@ rowNav['keydown.enter'] = rowNav['keydown.down']
 
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
-@import url('@stonecrop/themes/default/default.css');
+@import url('@stonecrop/themes/default.css');
 /* @import '../style.css'; */
 </style>

themes/.npmignore

@@ -5,16 +5,11 @@
 
 # Use negative patterns to bring back the specific things we want to publish.
 !/bin/**
-!/src/**
-!/src-*/**
 !/dist/**
 !ThirdPartyNotice.txt
 
 # Ignore certain patterns that should not get published.
 /dist/*.stats.*
-/src/**/test/
-/src-*/**/test/
-*.test.js
 
 # NOTE: These don't need to be specified, because NPM includes them automatically.
 #

themes/README.md

@@ -14,8 +14,8 @@ This directory contains various themes that can be used in Stonecrop application
 
 ## Usage
 
-To use a theme, simply import the stylesheet into your application. For example, to use the `dark` theme:
+To use a theme, import the corresponding stylesheet into your application. For example, to use the `dark` theme:
 
 ```javascript
-import '@stonecrop/themes/dark';
+import '@stonecrop/themes/dark.css';
 ```

themes/agritheory/index.ts

@@ -0,0 +1 @@
+import './agritheory.css'

themes/dark/index.ts

@@ -0,0 +1 @@
+import './dark.css'

themes/default/index.ts

@@ -0,0 +1 @@
+import './default.css'

themes/excel/index.ts

@@ -0,0 +1 @@
+import './excel.css'

themes/legal/index.ts

@@ -0,0 +1 @@
+import './legal.css'

themes/package.json

@@ -14,16 +14,23 @@
 	"bugs": {
 		"url": "https://github.com/agritheory/stonecrop/issues"
 	},
+	"exports": {
+		"./agritheory.css": "./dist/agritheory.css",
+		"./dark.css": "./dist/default.css",
+		"./default.css": "./dist/default.css",
+		"./excel.css": "./dist/default.css",
+		"./legal.css": "./dist/default.css",
+		"./verdant.css": "./dist/default.css",
+		"./vue.css": "./dist/default.css"
+	},
 	"scripts": {
 		"prepublish": "vite build",
 		"build": "vite build",
 		"dev": "vite",
 		"preview": "vite preview"
 	},
 	"devDependencies": {
-		"@vitejs/plugin-vue": "^5.1.3",
-		"vite": "^5.4.5",
-		"vue": "^3.5.6"
+		"vite": "^5.4.5"
 	},
 	"publishConfig": {
 		"access": "public"

themes/verdant/index.ts

@@ -0,0 +1 @@
+import './verdant.css'

themes/vite.config.js

@@ -1,28 +1,21 @@
 import { resolve } from 'path'
 import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
 
 const projectRootDir = resolve(__dirname)
 
 export default defineConfig({
-	plugins: [vue()],
-	resolve: {
-		alias: {
-			'@': resolve(projectRootDir, 'src'),
-		},
-	},
 	build: {
-		sourcemap: true,
+		cssCodeSplit: true,
 		lib: {
-			entry: resolve(projectRootDir, 'index.js'),
 			name: '@stonecrop/themes',
-		},
-		rollupOptions: {
-			external: ['vue'],
-			output: {
-				globals: {
-					vue: 'Vue',
-				},
+			entry: {
+				agritheory: resolve(projectRootDir, 'agritheory/index.ts'),
+				dark: resolve(projectRootDir, 'dark/index.ts'),
+				default: resolve(projectRootDir, 'default/index.ts'),
+				excel: resolve(projectRootDir, 'excel/index.ts'),
+				legal: resolve(projectRootDir, 'legal/index.ts'),
+				verdant: resolve(projectRootDir, 'verdant/index.ts'),
+				vue: resolve(projectRootDir, 'vue/index.ts'),
 			},
 		},
 	},

themes/vue/index.ts

@@ -0,0 +1 @@
+import './vue.css'