Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature Request: Parse elements created dynamically #64

Open
rex opened this issue Jul 27, 2017 · 0 comments
Open

Feature Request: Parse elements created dynamically #64

rex opened this issue Jul 27, 2017 · 0 comments

Comments

@rex
Copy link

rex commented Jul 27, 2017

Hello Pirates!

I am really loving using Nucleus so far, but I just ran into a hiccup and wanted to formally request a feature: parsing documentation for dynamically generated objects.

My Use Case

I would prefer to define configuration for header levels in one variable and iterate over that variable to generate the elements, instead of defining them all individually. Given the following configuration map:

%text-header {
  font-family: $header-font-stack;
}

/**
 * Configuration for headers
 *
 * http://typecast.com/blog/a-more-modern-scale-for-web-typography
 *
 * @nuclide font-size-headers
 * @section Config > Typography
 */
$headers: (
  h1: (
    font_size: 3em,
    line_height: 1.05em
  ),
  h2: (
    font_size: 2.25em,
    line_height: 1.25
  ),
  h3: (
    font_size: 1.75em,
    line_height: 1.25em
  ),
  h4: (
    font_size: 1.125em,
    line_height: 1.22222222em
  )
);

I want to iterate over that map to generate all the elements I need, instead of doing each one individually:

@each $header, $config in $headers {
/**
 * @atom #{$header}
 * @section Typography > Headers
 * @markup
 *   <#{$header}>This is an #{$header}</#{$header}>
 */
  #{$header} {
    @extend %text-header;
    font-size: map-deep-get($config, "font_size");
    line-height: map-deep-get($config, "line_height");
  }
}

This correctly generates the elements I want

/**
 * Generic header styles
 *
 * @nuclide text-header
 * @section Config > Typography
 */
h1, h2, h3, h4 {
  font-family: "topgolf-header", sans-serif;
}

/**
 * @atom h1
 * @section Typography > Headers
 * @markup
 *   <h1>This is an h1</h1>
 */
h1 {
  font-size: 3em;
  line-height: 1.05em;
}

/**
 * @atom h2
 * @section Typography > Headers
 * @markup
 *   <h2>This is an h2</h2>
 */
h2 {
  font-size: 2.25em;
  line-height: 1.25;
}

/**
 * @atom h3
 * @section Typography > Headers
 * @markup
 *   <h3>This is an h3</h3>
 */
h3 {
  font-size: 1.75em;
  line-height: 1.25em;
}

/**
 * @atom h4
 * @section Typography > Headers
 * @markup
 *   <h4>This is an h4</h4>
 */
h4 {
  font-size: 1.125em;
  line-height: 1.22222em;
}

The problem is, of course, that the .scss is parsed, not the final .css, and that prevents it from showing up in my styleguide.

Is there a way to make this work? Or am I going to have to fall back to the write-them-out-individually way?

Thank you for your help!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant