search

skeeto / skewer-mode

Live web development in Emacs
The Unlicense
1.1k stars 57 forks source link

Can't evaluate html and css. #66

Open proofit404 opened 8 years ago

proofit404 commented 8 years ago

Hello.

First of all thanks for awesome project. I have some troubles with skewer-html-mode and skewer-css-mode.

skewer-html-mode issue

Steps to reproduce:

<table>
  | <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

Suppose we have following css file

body {
    background-color: red;
}

If I press C-M-x whole buffer highlighter for a second but style doesn't applied to the skewer tab.

Browser version

Firefox 43.0.

There is no problem with javascript code evaluation. I can modify page html with js code and result appears immediately in the browser. Am I doing something wrong?

proofit404 commented 8 years ago

Looks like I find the reason of this problem. Here is skewer page body right after run-skewer command:

skewer01

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="/test.css">
        <title>Test page</title>
    </head>
    <body>
        <h1>This is a table (c) K.O.</h1>
        <table>
            <tr>
                <td>A</td>
                <td>B</td>
                <td>C</td>|
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
        </table>
    </body>
</html>

After I press C-M-x at given position skewer page content turns into this structure:

skewer02

Here real head tag gets new children tag and whole body inside it. 

<body>
    <h1>This is a table (c) K.O.</h1>
    <table>
        <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>|
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
</body>

After I press C-M-x skewer page structure turns into this:

skewer03

Table was wrongly inserted into header so we got "C" header on page.

<body>
    <table>
        <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>|
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
</body>

We got correct result for this buffer:

skewer04

<table>
    <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

Result so far:

skewer05

Nothing happens. I don't know if this is skewer.fn.html related or sgml-mode related bug. My emacs version is 25.0.91.2. Here is ancestries for each situation above:

Hope this help.

proofit404 commented 8 years ago

Also if I count ancestries with html-mode instead web-mode enabled it got absolutely different values:

for each case correspondingly.

skeeto commented 8 years ago

You need a complete HTML document (html and body) in your buffer in order to evaluate tags. The content will inserted/replaced at the structurally equivalent place in the DOM.

proofit404 commented 8 years ago

So it looks like expected behaviour. I guess this issue maybe reformulated as "web-mode isn't supported" since first example does have full html.

stardiviner commented 8 years ago

I can't get the result display in skewer demo tab in Chrome.

Here is my code:

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <p>Hello, world!</p>|
  </body>
</html>

I put cursor at |. And press [C-M-x]. Also I tried behind all other tags with [C-M-x]. Nothing changed.

Just saw a log in Chrome console:

XHR finished loading: POST "http://127.0.0.1:8080/skewer/post".

I found there are many others code in page source code, some are from Chrome extensions. I don't know whether they affect the result displaying.

skeeto commented 8 years ago

Like C-M-x in other modes, put the cursor inside to form you want to evaluate, then press C-M-x. With the cursor at the shown position, it would evaluate the body tag, but this isn't allowed since JavaScript doesn't allow the body tag itself (nor head) to be replaced. It should have displayed a warning, even if no browser was attached, if you're in skewer-html-mode minor mode and you do that.

stardiviner commented 8 years ago

I see, thanks, It work as I expected.