straker / livingcss

Parse comments in your CSS to generate a living style guide using Markdown, Handlebars, Polymer, and Prism syntax highlighter.
MIT License
241 stars 21 forks source link

Feature idea: namespaces for @examples #64

Open digitalfu opened 6 years ago

digitalfu commented 6 years ago

I have a requirement to add a namespace class for the @examples code to be styled correctly. Best practice debates aside I think this would be a common requirement for existing projects and I would like to contribute it to this project.

I have 2 3 ideas:

  1. Global 'namespace' option that gets copied into each context
  2. A new 'namespace' tag that can be applied to individual examples
  3. None.

What is your preference?

straker commented 6 years ago

Thanks for wanting to contribute!

So I'm not entirely sure what you mean by namespace class. Could you provide a bit more details? Maybe an example of how the namespace would be used in an example and what you're hoping the end result will look like?

digitalfu commented 6 years ago

Projects (usually SASS) sometimes have a namespace class that needs to be applied to a parent element for the styles to be applied correctly. This can be useful to trump the existing styles of a framework.

e.g.

.xyz {
    .button {
      ...
   }
   ...
}

I have hacked a custom polymer.hbs to place this class on the body of each example using a global option, but I think it would be more flexible to parse as part of the docblock that the @example code was part of.

Looking at the custom tag API can't see how I would use it to affect the body tag that is created in polymer.hbs so I think it has to be a change in the core.

I will get a PR together for you to see as I don't think it is that much work, we can go from there.

straker commented 6 years ago

Ok, that makes sense. You're correct that there's no api right now to add a class to the polymer elements body tag and that custom tags can't do it. We'd probably need to add a new options property in the livingcss call that allows you to add classnames.

digitalfu commented 6 years ago

👍