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

.cluster {
  --${prefix}cluster-gap: 0;
  --${prefix}cluster-align: initial;
  --${prefix}cluster-justify: initial;
  --${prefix}cluster-wrap: initial;
  --${prefix}cluster-padding-block: 0;
  --${prefix}cluster-padding-inline: 0;

  align-items: var(--${prefix}cluster-align);
  display: flex;
  flex-wrap: var(--${prefix}cluster-wrap);
  gap: var(--${prefix}cluster-gap);
  justify-content: var(--${prefix}cluster-justify);
  padding-block: var(--${prefix}cluster-padding-block);
  padding-inline: var(--${prefix}cluster-padding-inline);
}

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