Closed vhlongon closed 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)
@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
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>
Sorry, I didn't test in windows. What are the string of comment.text
?
'@styleguide\r\n\r\n# I love Twitter Bootstrap\r\n\r\nUse the button classes on an
,
fmm.. maybe this is the bug of postcss-style-guide. If you can fix this bug, feel free to send PR :)
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?
what it the expected result of annotation.read(comment.text)
?
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 }
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!
I have also checked the annotation plugin, but regex is really not my cup of tea :dancer:
This commit may be related to this bug.
Just released css-annotation v0.6.1. Please re-install postcss-style-guide and confirm again.
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 :|
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 :)
can you please update the css-annotation with the fix as well? Thanks!
Released v0.6.2 including this commit.
@morishitter Great dude! thanks for the quick reply! Again, awesome plugin!
@vhlongon Thank you for your help :)
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:
test.css contains the following:
the styleguide task looks like this:
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 ;)