@hanamura/rcgen/dist/templates/components/Tile.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 Tile component’s CSS Module
 */
function render(config) {
    const prefix = config.variablePrefix ? `${config.variablePrefix}-` : '';
    return `/* generated by static-generator */

.tile {
  --${prefix}tile-columns: 1;
  --${prefix}tile-gap: 0;
  --${prefix}tile-padding-inline: 0;
  --${prefix}tile-padding-block: 0;

  display: grid;
  gap: var(--${prefix}tile-gap);
  grid-template-columns: repeat(var(--${prefix}tile-columns), minmax(0, 1fr));
  padding-block: var(--${prefix}tile-padding-block);
  padding-inline: var(--${prefix}tile-padding-inline);
}

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