straker/livingcss

Feature idea: namespaces for @examples

Opened this issue · 4 comments

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?

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?

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.

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.

👍