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.

Sign up for GitHub

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

Jump to bottom

wrong CSS declaration output #36

Closed
vhlongon opened this issue Feb 9, 2016 · 5 comments
Closed

wrong CSS declaration output #36

vhlongon opened this issue Feb 9, 2016 · 5 comments
Labels
bug

Comments

@vhlongon
Copy link

vhlongon commented Feb 9, 2016

Hi man!

Another issue here.

I have the following CSS:

/*
@styleguide

# This is a example component

Use the component classes on an `<div>` element.

<div class="component">Component</div>
*/
.component {
  background-color: black;
  color: white; }

/*
@styleguide

# This is a example component 2

Use the component classes on an `<div>` element.

<div class="component">Component 2</div>
*/
.component-2 {
  background-color: white;
  color: black; }

/*# sourceMappingURL=sourcemaps/styles.css.map */

and the HTML generated:

<body>
        <header class="masthead">
        <h1>Lights by TENA Style Guide</h1>
        <p class="lead">Site modules</p>
        </header>

        <div class="section">

              <div class="col"><h1 id="this-is-a-example-component">This is a example component</h1>
<p>Use the component classes on an <code>&lt;div&gt;</code> element.</p>
<div class="component">Component</div></div>
              <div class="col"><pre class="code"><code class="lang-css"><span class="hljs-class">.component</span> <span class="hljs-rules">{
  <span class="hljs-rule"><span class="hljs-attribute">background-color</span>:<span class="hljs-value"> black</span></span>;
  <span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value"> white</span></span>; }</span>
<span class="hljs-class">.component-2</span> <span class="hljs-rules">{
  <span class="hljs-rule"><span class="hljs-attribute">background-color</span>:<span class="hljs-value"> white</span></span>;
  <span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value"> black</span></span>; }</span></code></pre></div>

        </div>

        <div class="section">

              <div class="col"><h1 id="this-is-a-example-component-2">This is a example component 2</h1>
<p>Use the component classes on an <code>&lt;div&gt;</code> element.</p>
<div class="component">Component 2</div></div>
              <div class="col"><pre class="code"><code class="lang-css"><span class="hljs-class">.component-2</span> <span class="hljs-rules">{
  <span class="hljs-rule"><span class="hljs-attribute">background-color</span>:<span class="hljs-value"> white</span></span>;
  <span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value"> black</span></span>; }</span></code></pre></div>

        </div>

    </body>

It add up the different comments inside each other so that the first component style declarations will include the other ones that follow. I will try to have a look at my end and see if I can figure out the problem.

Thanks!
@vhlongon
Copy link
Author

vhlongon commented Feb 9, 2016

Maybe the plugin was not meant to be used that way, but it would be great if there was the possibility to have a output CSS file containing several @styleguide declarations that would be rendered as 'blocks', one for each component.

@vhlongon
Copy link
Author

vhlongon commented Feb 9, 2016

PostCSS returns three rules even though there are only 2 comment block on analyser.js

while (rule) {

            if (rule.type === 'rule' || rule.type === 'atrule') {
                rules.push(rule.toString());
            }

            // log 3 rule sets, 1 containing the css declaration for component, 1 for component2 
            // and a third one containing both of them
            console.log(rule.type);

            rule = rule.next();
        }

I am not familiar with how postcss works, but the problem is there somewhere.

@matype
Copy link
Owner

matype commented Feb 9, 2016

@vhlongon Thank you for your report.

@matype matype added the bug label Feb 9, 2016
@matype matype closed this as completed in 75180b2 Feb 9, 2016
@matype
Copy link
Owner

matype commented Feb 9, 2016

Just released v0.11.1. Please update postcss-style-guide and confirm again. If there is still a bug, re-open this issue.

Thanks 👍

@vhlongon
Copy link
Author

vhlongon commented Feb 9, 2016

works ace, dude! Thanks a bunch!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@matype @vhlongon