Needlessly Provoking Marsupials

    windicss-media-interaction

    1.1.1 • Public • Published

    Windi CSS Plugin for Interaction Media Features

    GitHub Actions Coverage Status Version

    This plugin adds support for Interaction Media Features for any property in your Windi CSS project and an enhanced group-hover.

    Installation

    Using NPM:

    npm i -D windicss-media-interaction

    Using PNPM:

    pnpm add -D windicss-media-interaction

    Add the plugin to your Windi config file.

    plugins: [require('windicss-media-interaction')]

    Usage

    Available variants:

    Variant name CSS Media Query
    any-pointer-coarse @media (any-pointer: coarse)
    any-pointer-fine @media (any-pointer: fine)
    any-pointer-none @media (any-pointer: none)
    pointer-coarse @media (pointer: coarse)
    pointer-fine @media (pointer: fine)
    pointer-none @media (pointer: none)
    any-hover @media (any-hover: hover)
    any-hover-none @media (any-hover: none)
    hover-hover @media (hover: hover)
    hover-none @media (hover: none)
    group-any-coarse @media (any-pointer: coarse)
    group-any-fine @media (any-pointer: fine)
    group-any-pnone @media (any-pointer: none)
    group-pointer-coarse @media (pointer: coarse)
    group-pointer-fine @media (pointer: fine)
    group-pointer-none @media (pointer: none)
    group-any-hover @media (any-hover: hover)
    group-any-hnone @media (any-hover: none)
    group-hover-hover @media (hover: hover)
    group-hover-none @media (hover: none)

    Adding variants:

    You can add or extend many variants as you need to any property on your Windi config.

    theme: {
      variants: {
        extend: {
          backgroundColor: [
            'any-pointer-coarse',
            'any-pointer-fine',
            'any-pointer-none',
            'pointer-coarse',
            'pointer-fine',
            'pointer-none',
            'any-hover',
            'any-hover-none',
            'hover-hover',
            'hover-none',
            'group-any-coarse',
            'group-any-fine',
            'group-any-pnone',
            'group-pointer-coarse',
            'group-pointer-fine',
            'group-pointer-none',
            'group-any-hover',
            'group-any-hnone',
            'group-hover-hover',
            'group-hover-none'
          ],
          textColor: [
            'any-hover',
            'hover-hover',
            'group-any-coarse',
            'group-pointer-fine',
            'group-any-hover',
            'group-hover-hover'
          ]
        }
      }
    }

    Or overriding default variants:

    theme: {
      variants: {
        // Only these variants will be generated for backgroundColor
        backgroundColor: [
          'any-pointer-coarse',
          'any-pointer-fine',
          'any-pointer-none',
          'pointer-coarse',
          'pointer-fine',
          'pointer-none',
          'any-hover',
          'any-hover-none',
          'hover-hover',
          'hover-none',
          'group-any-coarse',
          'group-any-fine',
          'group-any-pnone',
          'group-pointer-coarse',
          'group-pointer-fine',
          'group-pointer-none',
          'group-any-hover',
          'group-any-hnone',
          'group-hover-hover',
          'group-hover-none'
        ],
        // Only these variants will be generated for textColor
        textColor: [
          'any-hover',
          'hover-hover',
          'group-any-coarse',
          'group-pointer-fine',
          'group-any-hover',
          'group-hover-hover'
        ]
      }
    }

    Examples

    Basic:

    <p class="text-blue-900 hover-hover:text-blue-500">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit...
    </p>

    Generated CSS

    .text-blue-900 {
      --tw-bg-opacity: 1;
      background-color: rgba(30, 58, 138, var(--tw-bg-opacity));
    }
    
    @media (hover: hover) {
      .hover-hover\:text-blue-500:hover {
        --tw-text-opacity: 1;
        color: rgba(59, 130, 246, var(--tw-text-opacity));
      }
    }

    With parent state:

    <section class="group">
      <p class="group-hover-hover:text-blue-500">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit...
      </p>
    </section>

    Generated CSS

    @media (hover: hover) {
      .group:hover .group-hover-hover\:text-blue-500 {
        --tw-text-opacit: 1;
        color: rgba(59, 130, 246, var(--tw-text-opacity));
      }
    }

    Resources

    If you are looking to use other variants see @windicss/plugin-interaction-variants.

    Knowledge

    Awesome article about Interaction Media Features:

    https://css-tricks.com/interaction-media-features-and-their-potential-for-incorrect-assumptions/

    Documentation about each media feature:

    Credits

    This plugin was inspired by tailwindcss-touch.

    License

    This project use the MIT License. Please see License File for more information.

    Install

    npm i windicss-media-interaction

    DownloadsWeekly Downloads

    6

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    229 kB

    Total Files

    18

    Last publish

    Collaborators

    • felix-icaza