Giter Club home page Giter Club logo

Comments (19)

matype avatar matype commented on August 29, 2024

@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)

from postcss-style-guide.

vhlongon avatar vhlongon commented on August 29, 2024

@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

from postcss-style-guide.

vhlongon avatar vhlongon commented on August 29, 2024

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>

from postcss-style-guide.

matype avatar matype commented on August 29, 2024

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

from postcss-style-guide.

vhlongon avatar vhlongon commented on August 29, 2024

'@styleguide\r\n\r\n# I love Twitter Bootstrap\r\n\r\nUse the button classes on an , , element.\r\n\r\n<button class="btn">Button</button>\r\n\r\n <button class="btn">Button</button>'

from postcss-style-guide.

matype avatar matype commented on August 29, 2024

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

from postcss-style-guide.

vhlongon avatar vhlongon commented on August 29, 2024

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?

from postcss-style-guide.

vhlongon avatar vhlongon commented on August 29, 2024

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

from postcss-style-guide.

matype avatar matype commented on August 29, 2024

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 }

from postcss-style-guide.

vhlongon avatar vhlongon commented on August 29, 2024

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!

from postcss-style-guide.

vhlongon avatar vhlongon commented on August 29, 2024

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

from postcss-style-guide.

matype avatar matype commented on August 29, 2024

This commit may be related to this bug.

from postcss-style-guide.

matype avatar matype commented on August 29, 2024

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

from postcss-style-guide.

vhlongon avatar vhlongon commented on August 29, 2024

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 :|

from postcss-style-guide.

vhlongon avatar vhlongon commented on August 29, 2024

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 :)

from postcss-style-guide.

vhlongon avatar vhlongon commented on August 29, 2024

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

from postcss-style-guide.

matype avatar matype commented on August 29, 2024

Released v0.6.2 including this commit.

from postcss-style-guide.

vhlongon avatar vhlongon commented on August 29, 2024

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

from postcss-style-guide.

matype avatar matype commented on August 29, 2024

@vhlongon Thank you for your help :)

from postcss-style-guide.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.