Requests for improvements

bob2517-whiteline commented 2 years ago

If anyone sees any specific errors or wants something specific highlighted, please let us know in this issue.

If anyone wants to help with code contributions for this repo then that would be cool.

dragontheory commented 2 years ago

ACSS code is highlighting but not validating.

At least when it is in the head of an HTML document and inside <style type="text/acss"></style>.

Wish I could show you a picture...

Oh wait, I can...

http://dragontheory.com/D7460N/index.html.screen.JPG

Here is the same HTML...

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="author" content="D7460N" />
  <meta name="description" content="Your data your way. Fast/Easy/Secure" />
  <title>D7460N APP</title>
  <link type="image/svg+xml" rel="icon" href="/assets/images/logo.svg" />
  <link type="text/css" rel="stylesheet" href="assets/css/styles.css" />
  <link type="text/css" rel="stylesheet" href="assets/css/scrollbars.css" />
  <style type="text/acss">
    /* Toggle panel-list open/close by clicking list-label */
    app-panel:nth-of-type(2) > list-item:not(:first-of-type):not(:last-of-type):click {
      self + panel-list {toggle-class: .close;}
    }
    /* RESET PANEL */
    app-panel:nth-of-type(2) > list-item list-cell:last-child span:click {
      panel-list {remove-class: .close;}
    }

    /* OPEN PANEL (it is has list-items) */
    panel-list:if-exists(list-item):observe {
      self < app-panel {add-attribute: display: grid;}
    }

    /* CLOSE PANEL (by removing it's list items) */
    app-panel:nth-of-type(4) > list-item list-cell:last-child span:click {
      remove: app-panel:nth-of-type(4) panel-list list-item;
    }
    app-panel:nth-of-type(5) > list-item list-cell:last-child span:click {
      remove: app-panel:nth-of-type(5) panel-list list-item;
    }

    /* CLOSE LISTS */
    app-panel panel-list:not-if-exists(list-item):observe {
      self {add-class: .close;}
    }

    @command conditional if-html-contains {=
      return (eventSelector.innerHTML.indexof(conditionalValue)!== -1) ? true : false;
    =}

    app-panel:nth-of-type(4) list-cell:last-of-type:if-html-contains(,):observe {
      run: {=
        o.obj.innerHTML = o.obj.innerHTML.replace(/,/g, '<br />');
      =};
    }
  </style>
</head>

<body></body>
</html>

bob2517 commented 2 years ago

When I put the code into a .acss file, then it doesn't correctly highlight the lines where you have the target selector and the action command on one line, which I can fix.

Eg.:

self {add-class: .close;}

More importantly for you though, as it is currently it will only work with .acss files, not .html files. I will have to check to see if it's possible to extend html to handle embedded ACSS, as that will be a common use.

Each file in VS Code has syntax highlighting based on the extension of the file, like ".html". I would need to set one up to work with .html, or modify the existing one to work with .html and .acss files.

When you say validating, do you mean syntax checking? I've not put any syntax checking in there yet - it's just the highlighting that it should be doing at the moment. Syntax checking is a separate beast which is a project in itself. It would be good to have though.

bob2517 commented 2 years ago

This line:

    panel-list:if-exists(list-item):observe {
      self < app-panel {add-attribute: display: grid;}
    }

... should have set-attribute instead of add-attribute.

bob2517 commented 2 years ago

I don't see anything else wrong in terms of syntax.

bob2517 commented 2 years ago

I just committed a fix to highlight the commands when they get wrapped onto the line above. But that won't help you if it's embedded in an html file. That will be the next priority - to get it working with embedded ACSS. It didn't even cross my mind for some reason.

Thanks for checking out the extension :)

dragontheory commented 2 years ago

More importantly for you though, as it is currently it will only work with .acss files, not .html files. I will have to check to see if it's possible to extend html to handle embedded ACSS, as that will be a common use.

Huh. I thought the embedded ACSS highlighting in the screen shot IS working. Not perfect but I figured it was maybe falling back to CSS or something similar for lines it didn't recognize. I assume no highlighting would be similar to just plain grey text with no colors?

When you say validating, do you mean syntax checking? I've not put any syntax checking in there yet - it's just the highlighting that it should be doing at the moment. Syntax checking is a separate beast which is a project in itself. It would be good to have though.

I think I mean syntax checking...

Each one of those orange and red squiggly underlines in the screen shot is a warning or error respectively, according to the VSCode. So, yeah, syntax validation in HTML world and syntax checking in IDE world seem the same.

CSS syntax checking is enabled by default in HTML files so I assume there is a way to do the same for ACSS syntax checking in HTML files?

... should have set-attribute instead of add-attribute.

Fixed. Thank you for that!

Active-CSS / active-css-vscode-syntax-highlighting

Requests for improvements #2