search

matype / postcss-style-guide

PostCSS plugin to generate a style guide automatically
Other
526 stars 33 forks source link

Plugin runs but does not parse markdown #35

Closed vhlongon closed 8 years ago

vhlongon commented 8 years ago

Hi!

First I would like to thank for the awesome plugin! But I am having a little bit of trouble trying to make it work here.

I try to run the plugin with the exact same bit of css as in the example you have and a see the "Successfully created style guide!" output on the CMD, the style guide file is generated with the specific title I pass as a parameter to the plugin. The thing is that the page does not render the markdown from my css.

I have a separated folder for my gulp tasks that I then import with babel on the project root folder. I don't know if that might be a problem, but I can't see why it would.

I have the following structure:

app / css / test.css
gulp / tasks / styleguide.js
build/styleguide/index.html
gulpfile.babel.js

test.css contains the following:

/*
@document

# I love Twitter Bootstrap

Use the button classes on an `<a>`, `<button>`, `<input>` element.

<button class="btn">Button</button>

    <button class="btn">Button</button>

*/

.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}

.btn:hover,
.btn:focus,
.btn.focus {
  color: #333;
  text-decoration: none;
}

the styleguide task looks like this:

gulp.task('styleguide', function () {
  let output = global.isProd ? config.styleguide.prodDest : config.styleguide.dest,
    processors = [
      styleguide({
        project: 'A awesome title',
        dest: output + '/index.html',
      })
    ],
  return gulp.src('app/css/*.css')
          .pipe(postcss(processors, {syntax: scss}))
});

the output bit is correct since the style guide file is generated.

This plugin would be really really good if it worked for my next project. Thanks again if you have to look into it ;)

matype commented 8 years ago

@vhlongon Thank you for your report. Please tell me the output html file and your development environment(ex. OS, Node version, postcss-style-guide versioin)

vhlongon commented 8 years ago

@morishitter I am running win 10, node 4.2.3, postcss-style-guide ^0.11.0.

I had a quick look on the plugin and it seems like the problem is under analyser.js, well the css-annotation plugin doesn't parse the comment.text correctly. If you log the meta variable you will see that the object has a .text property, but when you you call the annotation plugin it returns on the check (!meta.documents && !meta.document && !meta.docs && !meta.doc && !meta.styleguide), because meta is just an empty object

vhlongon commented 8 years ago

Here is the output file. It looks like it should. I see the title a pass as parameter and it is written on the right place as well. But as you see it does not render the markdown from the comment on the css file:

<!doctype html>
<html class="psg-theme" lang="en">
    <head>
        <meta charset="UTF-8">
        <title>A awesome title</title>
        <style>.hljs{display:block;overflow-x:auto;padding:.5em;color:#333;background:#f8f8f8;-webkit-text-size-adjust:none}.diff .hljs-header,.hljs-comment{color:#998;font-style:italic}.css .rule .hljs-keyword,.hljs-keyword,.hljs-request,.hljs-status,.hljs-subst,.hljs-winutils,.nginx .hljs-title{color:#333;font-weight:700}.hljs-hexcolor,.hljs-number,.ruby .hljs-constant{color:teal}.hljs-doctag,.hljs-string,.hljs-tag .hljs-value,.tex .hljs-formula{color:#d14}.hljs-id,.hljs-title,.scss .hljs-preprocessor{color:#900;font-weight:700}.hljs-list .hljs-keyword,.hljs-subst{font-weight:400}.hljs-class .hljs-title,.hljs-type,.tex .hljs-command,.vhdl .hljs-literal{color:#458;font-weight:700}.django .hljs-tag .hljs-keyword,.hljs-rule .hljs-property,.hljs-tag,.hljs-tag .hljs-title{color:navy;font-weight:400}.hljs-attribute,.hljs-name,.hljs-variable,.lisp .hljs-body{color:teal}.hljs-regexp{color:#009926}.clojure .hljs-keyword,.hljs-prompt,.hljs-symbol,.lisp .hljs-keyword,.ruby .hljs-symbol .hljs-string,.scheme .hljs-keyword,.tex .hljs-special{color:#990073}.hljs-built_in{color:#0086b3}.hljs-cdata,.hljs-doctype,.hljs-pi,.hljs-pragma,.hljs-preprocessor,.hljs-shebang{color:#999;font-weight:700}.hljs-deletion{background:#fdd}.hljs-addition{background:#dfd}.diff .hljs-change{background:#0086b3}.hljs-chunk{color:#aaa}html.psg-theme{font-size:14px}body{margin:0;font-family:PT Sans,sans-serif;color:#5a5a5a}a{color:#08c;text-decoration:none}a:hover{text-decoration:underline}h1[id],h2[id],h3[id],h4[id]{margin:2rem 0 1rem;font-weight:400;line-height:1.4;color:#2a2a2a}h1[id]{font-size:1.5rem}h2[id]{font-size:1.3rem}h3[id]{font-size:1rem}h4[id]{font-size:.8rem}p[id]{margin:0 0 1rem}.lead{font-size:1.3rem}blockquote{position:relative;margin:0 1rem 1rem;font-style:italic;color:#7a7a7a}blockquote p{margin-bottom:0}ul li{margin-bottom:.25rem}blockquote:last-child,p:last-child,ul:last-child{margin-bottom:0}code,pre{font-family:PT Mono,Menlo,Courier New,monospace;font-size:95%}code{padding:2px 4px;font-size:85%;color:#d44950;background-color:#f7f7f9;border-radius:.2rem}pre{display:block;margin:1rem 0;line-height:1.4;white-space:pre;white-space:pre-wrap}pre.code{margin-top:0}pre code{padding:0;color:inherit;background-color:transparent;border:0}.col{padding:2rem 1rem}.col p{max-width:40rem;word-wrap:break-word}.col+.col{border-top:1px solid #dfe1e8;background-color:#f7f7f9}@media (min-width:38em){.col{padding:2rem}}@media (min-width:48em){.section{display:table;width:100%;table-layout:fixed}.col{display:table-cell;padding:3rem;vertical-align:top}.col+.col{border-top:0}}.toc .col+.col{background-color:#fff}.withoutCode{padding:3rem}.masthead{padding:3rem 1rem;color:hsla(0,0%,100%,.5);text-align:center;background-color:#333}.masthead h1{color:#fff;margin-bottom:.25rem;font-size:2.5rem}.masthead .icon{display:inline-block;font-size:3rem;margin:0 .5rem}.masthead-links{font-size:2rem}.masthead-links a{color:hsla(0,0%,100%,.5);text-decoration:none;transition:all .15s linear}.masthead-links a:hover{color:#fff}@media (min-width:38em){.masthead{padding-top:4rem;padding-bottom:4rem}}.heading{padding:2rem 1rem 1.5rem;background-color:#dfe1e8}@media (min-width:38em){.heading{padding:3rem 3rem 2.5rem}}.section{border-bottom:1px solid #dfe1e8}.btn{display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;touch-action:manipulation;cursor:pointer;user-select:none;background-image:none;border:1px solid transparent;border-radius:4px}.btn.focus,.btn:focus,.btn:hover{color:#333;text-decoration:none}</style>
    </head>
    <body>
        <header class="masthead">
        <h1>A awesome title</h1>
        <p class="lead">Generated by <a href="https://github.com/morishitter/postcss-style-guide">postcss-style-guide</a></p>
        </header>

    </body>
</html>
matype commented 8 years ago

Sorry, I didn't test in windows. What are the string of comment.text?

vhlongon commented 8 years ago

'@styleguide\r\n\r\n# I love Twitter Bootstrap\r\n\r\nUse the button classes on an,\r\n\r\n

'`
matype commented 8 years ago

fmm.. maybe this is the bug of postcss-style-guide. If you can fix this bug, feel free to send PR :)

vhlongon commented 8 years ago

sure, no problem. I can try, but since it the annotation.read(comment.text) is returned as just an empty object don't you think that the problem is actually with the css-annotation plugin?

vhlongon commented 8 years ago

what it the expected result of annotation.read(comment.text) ?

matype commented 8 years ago

Thanks!

don't you think that the problem is actually with the css-annotation plugin?

There is also the possibility.

what it the expected result of annotation.read(comment.text) ?

{ styleguide: true }
vhlongon commented 8 years ago

ok, So I have removed that check and it works, so it is definetely an issue with the annotation plugin. I had a look on the rest of the logic and it works like a charm!

vhlongon commented 8 years ago

I have also checked the annotation plugin, but regex is really not my cup of tea :dancer:

matype commented 8 years ago

This commit may be related to this bug.

matype commented 8 years ago

Just released css-annotation v0.6.1. Please re-install postcss-style-guide and confirm again.

vhlongon commented 8 years ago

I see the new version here, but still doesnt work. The weird thing is that if I test the exact same string returned from the postcss with the regex express on the browser console it returns ["@styleguide"] as expected, but now on the style-guide plugin. it still return empty :|

vhlongon commented 8 years ago

on line 77 of index.js (for the css-annotation): var names = commentText.match(/\@.+?(\n|$|\s.+?(\n|$))/gm)

the fix works but it was only used on the parse method and not the read :)

vhlongon commented 8 years ago

can you please update the css-annotation with the fix as well? Thanks!

matype commented 8 years ago

Released v0.6.2 including this commit.

vhlongon commented 8 years ago

@morishitter Great dude! thanks for the quick reply! Again, awesome plugin!

matype commented 8 years ago

@vhlongon Thank you for your help :)