tailwindcss-radix/dist/index.test.js

Utilities and variants for styling Radix state

"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const node_path_1 = __importDefault(require("node:path"));
const postcss_1 = __importDefault(require("postcss"));
const tailwindcss_1 = __importDefault(require("tailwindcss"));
const vitest_1 = require("vitest");
const index_1 = __importDefault(require("./index"));
const html = String.raw;
function run(input, config, plugin = tailwindcss_1.default) {
    const { currentTestName } = vitest_1.expect.getState();
    return (0, postcss_1.default)(plugin(config)).process(input, {
        from: `${node_path_1.default.resolve(__filename)}?test=${currentTestName}`,
    });
}
(0, vitest_1.it)("should generate boolean data attribute variants", () => __awaiter(void 0, void 0, void 0, function* () {
    const config = {
        content: [
            {
                raw: html `
          <div class="radix-disabled:opacity-50" />
          <div class="group">
            <div class="group-radix-disabled:cursor-not-allowed" />
          </div>
          <div class="group/named">
            <div class="group-radix-disabled/named:cursor-not-allowed" />
          </div>
          <div class="peer" />
          <div class="peer-radix-disabled:cursor-not-allowed" />
          <div class="peer/named" />
          <div class="peer-radix-disabled/named:cursor-not-allowed" />
        `,
            },
        ],
        plugins: [index_1.default],
    };
    return run("@tailwind utilities", config).then((result) => {
        (0, vitest_1.expect)(result.css).toMatchInlineSnapshot(`
      ".radix-disabled\\:opacity-50[data-disabled] {
          opacity: 0.5
      }"
    `);
    });
}));
(0, vitest_1.it)("should generate value data attribute variants", () => __awaiter(void 0, void 0, void 0, function* () {
    const config = {
        content: [
            {
                raw: html `
          <div class="radix-state-open:opacity-50" />
          <div class="group">
            <div class="group-radix-state-open:cursor-not-allowed" />
          </div>
          <div class="group/named">
            <div class="group-radix-state-open/named:cursor-not-allowed" />
          </div>
          <div class="peer" />
          <div class="peer-radix-state-open:cursor-not-allowed" />
          <div class="peer/named" />
          <div class="peer-radix-state-open/named:cursor-not-allowed" />
        `,
            },
        ],
        plugins: [index_1.default],
    };
    return run("@tailwind utilities", config).then((result) => {
        (0, vitest_1.expect)(result.css).toMatchSnapshot();
    });
}));
(0, vitest_1.it)("should generate [width|height] utilities", () => __awaiter(void 0, void 0, void 0, function* () {
    const config = {
        content: [
            {
                raw: html `
          <div class="w-radix-navigation-menu-viewport" />
          <div class="h-radix-navigation-menu-viewport" />
          <div class="w-radix-accordion-content" />
          <div class="h-radix-accordion-content" />
          <div class="w-radix-collapsible-content" />
          <div class="h-radix-collapsible-content" />
        `,
            },
        ],
        plugins: [index_1.default],
    };
    return run("@tailwind utilities", config).then((result) => {
        (0, vitest_1.expect)(result.css).toMatchSnapshot();
    });
}));
(0, vitest_1.it)("should generate [width|height] `content-available` utilities", () => __awaiter(void 0, void 0, void 0, function* () {
    const config = {
        content: [
            {
                raw: html `
          <div class="w-radix-context-menu-content-available" />
          <div class="max-w-radix-context-menu-content-available" />
          <div class="h-radix-context-menu-content-available" />
          <div class="max-h-radix-context-menu-content-available" />

          <div class="w-radix-dropdown-menu-content-available" />
          <div class="max-w-radix-dropdown-menu-content-available" />
          <div class="h-radix-dropdown-menu-content-available" />
          <div class="max-h-radix-dropdown-menu-content-available" />

          <div class="w-radix-hover-card-content-available" />
          <div class="max-w-radix-hover-card-content-available" />
          <div class="h-radix-hover-card-content-available" />
          <div class="max-h-radix-hover-card-content-available" />

          <div class="w-radix-menubar-content-available" />
          <div class="max-w-radix-menubar-content-available" />
          <div class="h-radix-menubar-content-available" />
          <div class="max-h-radix-menubar-content-available" />

          <div class="w-radix-popover-content-available" />
          <div class="max-w-radix-popover-content-available" />
          <div class="h-radix-popover-content-available" />
          <div class="max-h-radix-popover-content-available" />

          <div class="w-radix-select-content-available" />
          <div class="max-w-radix-select-content-available" />
          <div class="h-radix-select-content-available" />
          <div class="max-h-radix-select-content-available" />

          <div class="w-radix-tooltip-content-available" />
          <div class="max-w-radix-tooltip-content-available" />
          <div class="h-radix-tooltip-content-available" />
          <div class="max-h-radix-tooltip-content-available" />
        `,
            },
        ],
        plugins: [index_1.default],
    };
    return run("@tailwind utilities", config).then((result) => {
        (0, vitest_1.expect)(result.css).toMatchSnapshot();
    });
}));
(0, vitest_1.it)("should generate [width|height] `trigger` utilities", () => __awaiter(void 0, void 0, void 0, function* () {
    const config = {
        content: [
            {
                raw: html `
          <div class="w-radix-context-menu-trigger" />
          <div class="h-radix-context-menu-trigger" />

          <div class="w-radix-dropdown-menu-trigger" />
          <div class="h-radix-dropdown-menu-trigger" />

          <div class="w-radix-hover-card-trigger" />
          <div class="h-radix-hover-card-trigger" />

          <div class="w-radix-menubar-trigger" />
          <div class="h-radix-menubar-trigger" />

          <div class="w-radix-popover-trigger" />
          <div class="h-radix-popover-trigger" />

          <div class="w-radix-select-trigger" />
          <div class="h-radix-select-trigger" />

          <div class="w-radix-tooltip-trigger" />
          <div class="h-radix-tooltip-trigger" />
        `,
            },
        ],
        plugins: [index_1.default],
    };
    return run("@tailwind utilities", config).then((result) => {
        (0, vitest_1.expect)(result.css).toMatchSnapshot();
    });
}));
(0, vitest_1.it)("should generate `content-transform-origin` utilities", () => __awaiter(void 0, void 0, void 0, function* () {
    const config = {
        content: [
            {
                raw: html `
          <div class="origin-radix-context-menu" />
          <div class="origin-radix-dropdown-menu" />
          <div class="origin-radix-hover-card" />
          <div class="origin-radix-menubar" />
          <div class="origin-radix-popover" />
          <div class="origin-radix-select" />
          <div class="origin-radix-tooltip" />
        `,
            },
        ],
        plugins: [index_1.default],
    };
    return run("@tailwind utilities", config).then((result) => {
        (0, vitest_1.expect)(result.css).toMatchSnapshot();
    });
}));
(0, vitest_1.it)("should generate tooltip transform utilities", () => __awaiter(void 0, void 0, void 0, function* () {
    const config = {
        content: [
            {
                raw: html `
          <div class="translate-x-radix-toast-swipe-end-x" />
          <div class="translate-y-radix-toast-swipe-end-y" />
          <div class="translate-x-radix-toast-swipe-move-x" />
          <div class="translate-y-radix-toast-swipe-move-y" />
        `,
            },
        ],
        plugins: [index_1.default],
    };
    return run("@tailwind utilities", config).then((result) => {
        (0, vitest_1.expect)(result.css).toMatchSnapshot();
    });
}));