@hanamura/rcgen/dist/templates/components/Reel.module.css.tmpl.js

Generate optimized React container components from configuration

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = render;
const utils_1 = require("../../src/utils");
/**
 * Render the Reel component's CSS Module
 */
function render(config) {
    const prefix = config.variablePrefix ? `${config.variablePrefix}-` : '';
    return `/* generated by static-generator */

.reel {
  --${prefix}reel-columns: 100%;
  --${prefix}reel-gap: 0;
  --${prefix}reel-snap: none;
  --${prefix}reel-scrollbar-display: block;
  --${prefix}reel-scrollbar-width: auto;
  --${prefix}reel-padding-block: 0;
  --${prefix}reel-padding-inline: 0;

  display: grid;
  gap: var(--${prefix}reel-gap);
  grid-auto-columns: var(--${prefix}reel-columns);
  grid-auto-flow: column;
  overflow-x: auto;
  padding-block: var(--${prefix}reel-padding-block);
  padding-inline: var(--${prefix}reel-padding-inline);
  scroll-snap-type: var(--${prefix}reel-snap);
  scrollbar-width: var(--${prefix}reel-scrollbar-width);
}

/* For WebKit-based browsers (Chrome, Safari) */
.reel::-webkit-scrollbar {
  display: var(--${prefix}reel-scrollbar-display);
}

${config.queries
        .map(({ name, query }) => {
        const n = (0, utils_1.normalizeName)(name);
        return `
@media ${query} {
  .reel {
    --${prefix}reel-columns: var(--${prefix}reel-${n}-columns);
    --${prefix}reel-gap: var(--${prefix}reel-${n}-gap);
    --${prefix}reel-snap: var(--${prefix}reel-${n}-snap);
    --${prefix}reel-scrollbar-width: var(--${prefix}reel-${n}-scrollbar-width);
    --${prefix}reel-scrollbar-display: var(--${prefix}reel-${n}-scrollbar-width);
    --${prefix}reel-padding-block: var(--${prefix}reel-${n}-padding-block);
    --${prefix}reel-padding-inline: var(--${prefix}reel-${n}-padding-inline);
  }
}
`;
    })
        .join('\n\n')}
`;
}