Including ‘…/layout.css’ with content type HTML into incompatible type HTML/CSS

m.brecher
Generous Backer | 344
+
0
-

Hi,

I need to include css file directly into output html, so I tried go this native way:

layout.css:

body {margin: 0;  background-position: center center;  background-repeat: repeat;  font-family: var(--base-font-family);}
body * {box-sizing: border-box;}
.......

@layout.latte:

	<style>
		{include $wwwDir.'/css/layout.css'}
	</style>

This produces exception:

Latte\RuntimeException
Including '.../css/layout.css' with content type HTML into incompatible type HTML/CSS.

This is little surprising behaviour – the file layout.css isn´t of type html – its clearly identifiable from file extension and also from the content of the file that it is css.

Include the content of css file between html tags <style></style> is correct and the exception is exaggerated.

I haven´t found in latte documentation any notice about including any other file type than .latte.

I know that I can easily solve the problem by copying the css content into latte file between <style></style> tags:

layout-css.latte:

<style>
    ...css code...
</style>

But I want to write the css code in css file, first because the IDE works better, second I want to have the possibility to change easily including css via <link …> or via {include …}.

In php I was using this simple code:

@layout.php:

     .....
    <style>
        <?php include $wwwDir.'/css/layout.css' ?>
    </style>
     .....

Exist some equivalent in Latte for something like this above ??

Of course I have tried to use php code in latte template like this:

     .....
    <style>
        {php include $wwwDir.'/css/layout.css'}
    </style>
     .....

But this also ends with exception:

Latte\CompileException
Unexpected '$appDir', expecting end of tag in {php} ...

It looks like an intention not to allow including other files that .latte – may be from security reasons ??

Thanks for any advice or information.

Last edited by m.brecher (2023-01-12 02:53)

m.brecher
Generous Backer | 344
+
0
-

Hi,

I made last attempt to find a solution by myself and this works:

<style>
    {php readfile($wwwDir.'/css/layout.css')}
</style>

It looks like php include is completely disabled in latte in the tag {php …} but the error message isn´t sufficiently clear (see in my previous post). If it is so, than I propose to make the error message from latte more clear and It would be also useful make some comment in latte documentation about how include css file.

Last edited by m.brecher (2023-01-12 02:52)

nightfish
Member | 319
+
0
-

m.brecher wrote:

     .....
    <style>
        {php include $wwwDir.'/css/layout.css'}
    </style>
     .....

But this also ends with exception:

Latte\CompileException
Unexpected '$appDir', expecting end of tag in {php} ...

It looks like an intention not to allow including other files that .latte – may be from security reasons ??

  1. Your code contains $wwwDir, but the exception message mentions $appDir.
  2. I am not sure whether this error is caused by an intention or rather by not supporting PHP language constructs, such as echo, include, foreach, as opposed to functions (file_get_contents(), readfile()), in general.
Kamil Valenta
Member | 641
+
+2
-
<style type="text/css">
   @import url({$wwwDir}+"/css/layout.css");
</style>
Milo
Nette Core | 1280
+
0
-

I'am solving it by adding <style> into CSS file, change its extension into latte and include it.

# file css/layout.latte
<style>
...
</style>
{include css/layout.latte}
m.brecher
Generous Backer | 344
+
0
-

@nightfish

Your code contains $wwwDir, but the exception message mentions $appDir

Of course, you are right, I have simplified the code for posting on forum here, the code contains also $appDir but in more complicated code, but this is not the case.

Now it looks like, that latte doesnt allowe any potentially dangerous php functions like echo, include, … and readfile looks to be considered as safe ;).

Last edited by m.brecher (2023-01-12 14:02)

m.brecher
Generous Backer | 344
+
0
-

@KamilValenta

<style type=“text/css”>
@import url({$wwwDir}+“/css/layout.css”);
</style>

Thanks for this good solution, I only note to use $basePath instead of $wwwDir:

<style type="text/css">
    @import url({$basePath}+"/css/layout.css");
 </style>
nightfish
Member | 319
+
+1
-

m.brecher wrote:
Now it looks like, that latte doesnt allowe any potentially dangerous php functions like echo, include, … and readfile looks to be considered as safe ;).

That was the main idea of my previous message – that echo, include etc. are not functions, but rather language constructs. And that it is quite possible that Latte does not support language constructs because of their syntactical differences, not because of safety reasons.

m.brecher
Generous Backer | 344
+
0
-

@Milo

I'am solving it by adding <style> into CSS file, change its extension into latte and include it.

Thanks for tip, I know this and also I have mentioned it in my original post why I prefer to go the way simple css file. The reason is that outside latte plugin in phpStorm is much more comfortable to work. Unfortunately at the time being the latte plugin of @mesour blocks many very useful functions of the phpStorm IDE. The completing of file paths, completing of class names, …

An after you wroute 200 lines of css code outside latte and than copy it into latte like this:

style.latte

<style>
   .heading {font-family: Arial, sans-serif;}  // sample of one line of css
   .....
</style>

after than comes hundreds of latte exceptions like this:

Latte\CompileException
Unexpected tag {font-family} (in JavaScript or CSS, try to put a space after bracket or use n:syntax=off)

The whole Nette community knows that in Latte you have to write css with space after { and no one exceptions occurs, but – you use old css code, the css code writes somebody who doesn´t know latte, ......

Last week I have worked in PHP project and I was surprised how easy it is creating php templates and styles if the IDE completes 100% of all paths, and all css classes. I hope one day something similar would be also in Latte ;)

Notice: native phpStorm IDE completes paths in “a smart way” like this:

// index.php
$rootDir = __DIR__;

//  /templates/@layout.php

include $rootDir.'/....	// hints all directories in $rootDir !!

For backend developers may this my crying looks like hypersensitivity but quality of prompting has BIG impact on productivity of making the code. It's a pitty that great functionality of prompting which is ALREADY AVAILABLE in phpStorm IDE is not in latte plugin accessible :(.

Last edited by m.brecher (2023-01-12 14:36)

Marek Bartoš
Nette Blogger | 873
+
+1
-
<style>
	{include $wwwDir.'/css/layout.css'}
</style>

This looks like something that could be supported and no one yet just considered such use case. Latte 3 needs most things to be explicitly allowed to work


<style>
	{php include $wwwDir.'/css/layout.css'}
</style>

This works only with RawPhpExtension enabled. Include is a language construct which is not supported by Latte's PHP dialect and you would need that dialect to be replaced by raw PHP.

$this->template->getLatte()->addExtension(new \Latte\Essential\RawPhpExtension());

<style type="text/css">
   @import url({$wwwDir}+"/css/layout.css");
</style>

How is that helpful? Still an external file, just different syntax

Last edited by Marek Bartoš (2023-01-12 14:29)

m.brecher
Generous Backer | 344
+
0
-

@MarekBartoš

Yes, or support in latte, or mention in documentation recommended way how to do this – this doesn´t matter. I think that nobody has mentioned this because everybody will find at the end some solution – me too. But there is another problem, more serious – why I prefer not to write css in latte – that´s because of blocking some very useful hinting of phpStormIDE in latte plugin.

I have described this in more details in my post to @Milo https://forum.nette.org/…ype-html-css#…

Kamil Valenta
Member | 641
+
0
-

Marek Bartoš wrote:

<style type="text/css">
   @import url({$wwwDir}+"/css/layout.css");
</style>

How is that helpful? Still an external file, just different syntax

But you avoid compilation and latte processing, which you don't need anyway with .css file.

mystik
Member | 165
+
+1
-

@KamilValenta But it is basically just more complicated version of

<link rel="stylesheet" href="{$wwwDir}/css/layout.css">
Kamil Valenta
Member | 641
+
0
-

mystik wrote:

@KamilValenta But it is basically just more complicated version of

<link rel="stylesheet" href="{$wwwDir}/css/layout.css">

No, <link rel…> is valid tag in head, but @mbrecher required to write style in body tag.
Would this make sense then? “I want to have the possibility to change easily including css via <link …>”?

Last edited by Kamil Valenta (2023-01-12 20:15)

mystik
Member | 165
+
+1
-

Link stylesheet is valid in body too.

David Grudl
Nette Core | 7899
+
+1
-
	<style>
		{include $wwwDir.'/css/layout.css'}
	</style>

This is little surprising behaviour – the file layout.css isn´t of type html – its clearly identifiable from file extension and also from the content of the file that it is css.

{include} is used purely to loads templates written in Latte or blocks and does not take into account file extension. It's written in the documentation this way https://latte.nette.org/en/tags#…

     .....
    <style>
        <?php include $wwwDir.'/css/layout.css' ?>
    </style>
     .....

Exist some equivalent in Latte for something like this above ??

The include in PHP works the same way as {include} in Latte – it is used to load PHP scripts and does not take into account the extension. Loading CSS with it is a mistake. If the file contained <? characters, it would break it.

<style>
    {php readfile($wwwDir.'/css/layout.css')}
</style>

Yeah, that's the correct way. So there is one security risk (CSS file must not contain </style), which Latte does not address at the moment, but is going to in the next version.

David Grudl
Nette Core | 7899
+
+1
-

after than comes hundreds of latte exceptions like this:

Latte\CompileException
Unexpected tag {font-family} (in JavaScript or CSS, try to put a space after bracket or use n:syntax=off)

Use <style n:syntax=off> 🤦‍♂️

https://latte.nette.org/en/tags#…

m.brecher
Generous Backer | 344
+
0
-

@KamilValenta

but @mbrecher required to write style in body tag

Sorry Kamil for may be not clear formulation. I didn´t think about writing css code into html tag body but into output html code directly not via <link> tag – of course into html tag head – something like this:

<head>
   <style>
      ... direct css code ...
   </style>
...
</head>

I agree with @MarekBartoš and @mystik that @import is more or less the same as <link>.

m.brecher
Generous Backer | 344
+
+2
-

@DavidGrudl

Use <style n:syntax=off>

Of course – it was written in the Error message – I should read them :)