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

.stack {
  --${prefix}stack-gap: 0;
  --${prefix}stack-padding-inline: 0;
  --${prefix}stack-padding-block: 0;
  --${prefix}stack-divider-start-display: none;
  --${prefix}stack-divider-between-display: contents;
  --${prefix}stack-divider-end-display: none;

  display: flex;
  flex-direction: column;
  gap: var(--${prefix}stack-gap);
  padding-block: var(--${prefix}stack-padding-block);
  padding-inline: var(--${prefix}stack-padding-inline);
}

.divider.isStart {
  display: var(--${prefix}stack-divider-start-display);
}

.divider.isBetween {
  display: var(--${prefix}stack-divider-between-display);
}

.divider.isEnd {
  display: var(--${prefix}stack-divider-end-display);
}

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