fix: exports and build

.npmrc

@@ -0,0 +1,5 @@
+shamefully-hoist=true
+strict-peer-dependencies=false
+auto-install-peers=true
+side-effects-cache=false # Ensure the postinstall script of the lefthook package is executed and hooks are installed
+manage-package-manager-versions=true

package.json

@@ -24,6 +24,8 @@
       "import": "./dist/kong-markdown.es.js",
       "require": "./dist/kong-markdown.umd.js"
     },
+    "./dist/style.css": "./dist/markdown.css",
+    "./style.css": "./dist/markdown.css",
     "./package.json": "./package.json",
     "./dist/*": "./dist/*"
   },

src/assets/_mixins.scss

@@ -1,3 +1,6 @@
+// Add to the global Sass namespace
+@use "@kong/design-tokens/tokens/scss/variables" as *;
+
 @mixin toolbar-button {
   align-items: center;
   background-color: var(--kui-color-background-transparent, $kui-color-background-transparent);

src/components/MarkdownContent.vue

@@ -33,8 +33,6 @@ watch(() => props.content, (content: string): void => {
 </script>
 
 <style lang="scss" scoped>
-@import "../assets/mixins";
-
 // Computed component variables
 $header-anchor-offset-top: calc(var(--kui-space-80, $kui-space-80) + 2px);
 

src/components/toolbar/MarkdownToolbar.vue

@@ -270,8 +270,6 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/mixins";
-
 .markdown-ui-toolbar {
   align-items: center;
   background-color: var(--kui-color-background-neutral-weakest, $kui-color-background-neutral-weakest);

src/components/toolbar/ToolbarButton.vue

@@ -26,8 +26,6 @@ defineProps({
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/mixins";
-
 .toolbar-button {
   @include toolbar-button;
 

vite.config.ts

@@ -1,9 +1,12 @@
 import { defineConfig } from 'vite'
 import VueDevTools from 'vite-plugin-vue-devtools'
 import vue from '@vitejs/plugin-vue'
-import path, { join } from 'path'
+import { fileURLToPath } from 'url'
+import path, { dirname, join } from 'path'
 import { visualizer } from 'rollup-plugin-visualizer'
 
+const currentDir = dirname(fileURLToPath(import.meta.url))
+
 // Include the rollup-plugin-visualizer if the BUILD_VISUALIZER env var is set to "true"
 const buildVisualizerPlugin = process.env.BUILD_VISUALIZER
   ? visualizer({
@@ -31,8 +34,12 @@ export default defineConfig({
     preprocessorOptions: {
       scss: {
         // Inject the @kong/design-tokens SCSS variables to make them available for all components.
-        // This is not needed in host applications.
-        additionalData: '@use "sass:color";@import "@kong/design-tokens/tokens/scss/variables";',
+        additionalData: `
+        @use "sass:color";
+        // Add to the global Sass namespace
+        @use "@kong/design-tokens/tokens/scss/variables" as *;
+        @use "${join(currentDir, './src/assets/_mixins.scss')}" as *;
+        `,
       },
     },
   },