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

Requests for improvements #2

Open
bob2517-whiteline opened this issue Jun 7, 2022 · 6 comments
Open

Requests for improvements #2

bob2517-whiteline opened this issue Jun 7, 2022 · 6 comments

Comments

@bob2517-whiteline
Copy link

bob2517-whiteline commented Jun 7, 2022 •
edited
Loading

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
Copy link

dragontheory commented Jun 15, 2022 •
edited
Loading

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
Copy link
Member

bob2517 commented Jun 16, 2022

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
Copy link
Member

bob2517 commented Jun 16, 2022

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
Copy link
Member

bob2517 commented Jun 16, 2022

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

@bob2517
Copy link
Member

bob2517 commented Jun 16, 2022

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
Copy link

dragontheory commented Jun 16, 2022 •
edited
Loading

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!

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

No branches or pull requests
3 participants
@dragontheory @bob2517 @bob2517-whiteline