@import

[p11h]

While trying to work around #34, found that it was not possible to use @import to include an external stylesheet (nor e.g. Google Fonts).

The @import statement must precede all other rules (except @charset rules). However a short comment and rule (... page-break-inside:avoid;) is placed before any custom CSS rules. The at-rule is therefore not processed.

[nea]

Hey @stezmi

Do you have a full example?

Thanks

[p11h]

For example, if we use @import to include an external style sheet and some Google fonts:

/* Custom CSS */
@import url('markdownpad-github.css');
@import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans|Cousine');

body { font: 14px 'Open Sans',helvetica,arial,sans-serif; }
pre,code { font: 14px Cousine,consolas,monaco,monospace; }

When we Export as HTML we get the following style in the head of the HTML:

    <style type="text/css">
            /* Avoid page breaks inside the most common attributes, especially for exports (i.e. PDF) */
td, h1, h2, h3, h4, h5, p, ul, ol, li {
    page-break-inside: avoid; 
}

            /* Custom CSS */
@import url('markdownpad-github.css');
@import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans|Cousine');

body { font: 14px 'Open Sans',helvetica,arial,sans-serif; }
pre,code { font: 14px Cousine,consolas,monaco,monospace; }

        </style>

We can manually edit the HTML to move the at-rules to the top of style:

    <style type="text/css">
@import url('markdownpad-github.css');
@import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans|Cousine');

            /* Avoid page breaks inside the most common attributes, especially for exports (i.e. PDF) */
td, h1, h2, h3, h4, h5, p, ul, ol, li {
    page-break-inside: avoid; 
}

            /* Custom CSS */
body { font: 14px 'Open Sans',helvetica,arial,sans-serif; }
pre,code { font: 14px Cousine,consolas,monaco,monospace; }

        </style>

With this example we can clearly see the use of Google fonts when refreshing the page (especially headings). If testing with markdownpad-github.css the code is obvious as well.

---

Couldn't hotlink example CSS; you can download to test, or use any stylesheet really.

(OT, WRT issue #34: this CSS contains child selectors if you want to test/copy directly into Custom CSS.)

[nea]

Hey @stezmi

After a long time (really sorry about that) I am now checking for @import statements inside the custom CSS and have these lead the exported CSS.

I didn't want to just put my CSS at the end as I want to allow overriding. Therefore, I am parsing the custom CSS for @import statements now and put these in front.

Will be rolled out with release 0.8.1.

Thanks a lot for the hint