cannot load stylesheets

ChristopherJTrent commented 2 months ago

I don't have a rails app or anything fancy going on. All I'm trying to do is get a plain HTML file, that links to a CSS file, to render to a jpeg.

No matter what I do, up to and including giving an absolute path using the file:// protocol, my stylesheets never apply to the output.

Below are the entire contents of my project. These three files should, in my opinion, be all the code I should have to write in order to get a basic jpeg image out the other side, but no, this doesn't apply card_template.css

Edit for clarification: the html file works perfectly fine in normal Chrome, Microsoft Edge, and Firefox. It's just Grover that can't handle it.

renderer.rb

require "grover"

template = File.read('./template/card_template.html')

File.write(
    './out.jpg',
    Grover.new(template).to_jpeg
)

card_template.html

<html>
    <head>
        <link rel="stylesheet" href="file:///C:/Users/Chris/source/ruby/MechaZooCardCreator/template/card_template.css" />
    </head>
    <body>
        <div id="card-frame-outer">
            <div id="card-image-container">
                <img />
            </div>
            <div id="card-frame-inner">
                <div id="energy-frame">
                    <p>0</p>
                </div>
                <div id="cardname-box">
                    <p>Cowboy for Game</p>
                </div>
                <div id="scrap-value-box">
                    <p>3</p>
                </div>
                <div id="card-type-box-back">
                    <div id="card-type-box-front">
                        <p id="card-type-text">!</p>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

card_template.css

body {
    width: 756px;
    height: 1056px;
    margin: 0;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 900;
    text-rendering: geometricPrecision;
}
#card-frame-outer {
    background-color: black;
    width: 756px;
    height: 1056px;
    border-radius: 36px;
    z-index: 256;
}
#card-frame-inner {
    background-color: green;
    position: absolute;
    top: 36px;
    left: 36px;
    width: 684px;
    height: 984px;
    border-radius: 18px;
    z-index: 0;
}

#card-image-container {
    z-index: 1;
}

#energy-frame {
    border-radius: 36px 0px;
    background-color: white;
    border: 12px solid black;
    position: fixed;
    top: 24px;
    left: 24px;
    width: 162px;
    height: 210px;
    & > p {
        text-align: center;
        vertical-align: middle;
        line-height: 210px;
        font-size: 140px;
        height:inherit;
        width: inherit;
        margin: 0
    }
}

#cardname-box {
    position: fixed;
    top: 60px;
    left: 212px;
    width: 396px;
    & > p {
        width: 100%;
        text-align: center;
        font-size: 48px;
        margin: 0;
        --o-offset: 2px;
        --o-off-neg: calc(var(--o-offset) * -1);
        --o-color: #FFF;
        text-shadow: 
            var(--o-off-neg) var(--o-off-neg) 0 var(--o-color), 
            var(--o-offset) var(--o-off-neg) 0 var(--o-color), 
            var(--o-off-neg) var(--o-offset) 0 var(--o-color), 
            var(--o-offset) var(--o-offset) 0 var(--o-color);
    }
}

#scrap-value-box {
    position: fixed;
    height: 93px;
    width: 93px;
    border-radius: 93px;
    border: 6px solid black;
    background-color: white;
    left: 603px;
    top: 48px;
    & > p {
        width: 93px;
        line-height: 93px;
        text-align: center;
        margin: 0;
        font-size: 46px;
    }
}

ChristopherJTrent commented 2 months ago

Oh fun fact, this continues to fail and be broken when I add INLINE CSS.

Nothing changes in normal browsers, but in here, no, even inline CSS is ignored.

abrom commented 2 months ago

The README has a section about debugging. If you load Grover specifying that you want to show the browser and essentially "pause" you will see the reason the CSS isn't loading in the console tab:

Grover.new(html, debug: { headless: false, devtools: true }, wait_for_selector: 'foo').to_jpeg('out.jpg'); nil

Specifically, Chrome won't load local files into a page that itself isn't a local file for security reasons. The way that you're loading the HTML into the browser (as a string) means that Chrome doesn't see it as being a local file.

I'll also note that the "CSS" file you've listed isn't CSS.. it appears to be SCSS.

Also note, if I dump your "CSS" into a style tag it is rendered just fine (well.. the styles that are actual CSS appear to render).

Please have a read of the README on how to use Grover, specifically the debugging section. Suggest also have a bit of a read about the differences between CSS and SCSS.

ChristopherJTrent commented 2 months ago

I've moved to Selenium webdrivers as they are more compatible with my use case. As for your comment about SCSS. My CSS is valid. I assume you're referring to the CSS nesting selector "&" which has been supported in all major browsers since the beginning of the year but is still seen as some kind of black magic by some. I'd suggest you take the time to understand what you're looking at before choosing to condescend.

abrom commented 2 months ago

https://caniuse.com/css-nesting 80% of the time it's valid every time.

I'd suggest that you try read the manual and debug things a little more yourself next time 😉 And if you're asking for help, and then get it.. a simple thank you is all that is needed 😄

I provided numerous suggestions and prompts to help you solve your problem and your response is to berate.. some self reflection wouldn't go astray

Studiosity / grover

cannot load stylesheets #260