SolidJS•2y ago

Solid-js design system CSS troubleshooting

I have a design-system I am building out using Kobalte. However, when I export the components none of the CSS gets applied. I have tried both regular CSS imports and CSS module imports. In both cases none of the CSS gets applied in the consuming application. Has anyone had experiences creating design systems with solid-js?

3 Replies

Unknown User•2y ago

Message Not Public

HansOP•2y ago

accordion.module.css

.accordion-root {
  background-color: #fff;
}

.accordion-root {
  background-color: #fff;
}

Accordion.tsx

import { Accordion } from '@kobalte/core'
import { For, JSX } from 'solid-js'
import { accordionRoot } from './accordion.module.css'

interface AccordionProps {
  sections: [string, JSX.Element | string][]
}

const DSAccordion = ({ sections }: AccordionProps) => {
  return (
    <div class={accordionRoot}>
      {/* The rest of my accordion component */}
    </div>
  )
}

export default DSAccordion

import { Accordion } from '@kobalte/core'
import { For, JSX } from 'solid-js'
import { accordionRoot } from './accordion.module.css'

interface AccordionProps {
  sections: [string, JSX.Element | string][]
}

const DSAccordion = ({ sections }: AccordionProps) => {
  return (
    <div class={accordionRoot}>
      {/* The rest of my accordion component */}
    </div>
  )
}

export default DSAccordion

vite.config.ts

import { resolve } from 'path'
import { defineConfig } from 'vite'
import dts from 'vite-plugin-dts'
import solid from 'vite-plugin-solid'

export default defineConfig({
  plugins: [
    solid(),
    dts({
      insertTypesEntry: true,
    }),
  ],
  css: {
    modules: {
      localsConvention: 'camelCaseOnly',
    },
  },
  build: {
    lib: {
      // Could also be a dictionary or array of multiple entry points
      entry: resolve(__dirname, 'src/index.tsx'),
      name: 'design-system',
      // the proper extensions will be added
      fileName: 'index',
    },
    rollupOptions: {
      // make sure to externalize deps that shouldn't be bundled
      // into your library
      external: ['@kobalte/core'],
      output: {
        // Provide global variables to use in the UMD build
        // for externalized deps
        globals: {
          '@kobalte/core': '@kobalte/core',
        },
      },
    },
  },
})

import { resolve } from 'path'
import { defineConfig } from 'vite'
import dts from 'vite-plugin-dts'
import solid from 'vite-plugin-solid'

export default defineConfig({
  plugins: [
    solid(),
    dts({
      insertTypesEntry: true,
    }),
  ],
  css: {
    modules: {
      localsConvention: 'camelCaseOnly',
    },
  },
  build: {
    lib: {
      // Could also be a dictionary or array of multiple entry points
      entry: resolve(__dirname, 'src/index.tsx'),
      name: 'design-system',
      // the proper extensions will be added
      fileName: 'index',
    },
    rollupOptions: {
      // make sure to externalize deps that shouldn't be bundled
      // into your library
      external: ['@kobalte/core'],
      output: {
        // Provide global variables to use in the UMD build
        // for externalized deps
        globals: {
          '@kobalte/core': '@kobalte/core',
        },
      },
    },
  },
})

I figured it out. I need to import the compiled stylesheet from the design system in the consuming app.

import '@swiftmind/design-system/dist/style.css'

import '@swiftmind/design-system/dist/style.css'

Unknown User•2y ago

Message Not Public

Gaming

Programming

Solid-js design system CSS troubleshooting