Nebulous Pumpkin Moons

    code-hike-classer-vue3
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.6 • Public • Published

    A little package to make React component libraries interoperable with most styling solutions.

    online demo

    https://stackblitz.com/edit/vitejs-vite-oqvfsr

    install

    npm i
    
    # with usage demo
    npm run dev

    classer + emotion usage

    full demo:

    npm run dev

    • Provider
    <script setup lang="ts">
    import { css } from '@emotion/css';
    import { ClasserProvider } from 'code-hike-classer-vue3';
    import Child from './components/Child.vue';
    
    const color = 'white';
    const motion = css`
      background-color: hotpink;
      &:hover {
        color: ${color};
      }
    `;
    </script>
    
    <template>
      <classer-provider
        :classes="{
          'sp-title': 'title-1 title-2',
          'sp-motion': motion,
        }"
      >
        <child />
      </classer-provider>
    </template>
    • Child
    <template>
      <button :class="[c('title', 'motion', 'other')]">i am child</button>
    </template>
    
    <script setup lang="ts">
    import { useClasser } from 'code-hike-classer-vue3';
    
    const c = useClasser('sp', { 'sp-other': 'custom-class' });
    </script>
    • result
    <div class="sp-title sp-motion sp-other title-1 title-2 css-64o2cv custom-class">i am child</div>

    css-64o2cv is motion style

    sipport browsers

    npx browserslist

    Install

    npm i code-hike-classer-vue3

    DownloadsWeekly Downloads

    19

    Version

    0.1.6

    License

    MIT

    Unpacked Size

    9.05 kB

    Total Files

    6

    Last publish

    Collaborators

    • wc57242263