Jump to content
Sign in to follow this  
DavidRM

CSS Resource Files

Recommended Posts

I have set my project to save my custom CSS file as separate from the project. But when I do a build/compile, it's not seeing changes to the external file. I have to remove the CSS file from the project then add it again before it sees the changes. So I guess it's caching the CSS file in the project and not updating it.

-David

Share this post


Link to post
Share on other sites

So, I created a new test project. In project Options \ Linker  I checked "Use Custom Theme"

By default the option "Store CSS as Separate File" was already checked.

I Compiled and double checked my folder contained the "default.css" file.  It Did!

I then double clicked on the file in the SMS Project Manager. In the tab on the right, I edited the file. Recompiled, exited SMS  and looked at the default.css file in my project folder and the changes were there

am i missing something here?

 

Share this post


Link to post
Share on other sites

My current project has that option checked, and it doesn't work as expected. I can make changes in the CSS file all I want, do a new build, and those changes will *not* be included.

Even when I delete the .css file from the "www\res" folder for the project, doing a new build replaces that file with the version as it was when I first added it to the project. So even my "external" CSS file is being saved somewhere in the project file.

The only way to force it to update is to remove the CSS file from the project and add it again.

-David

Share this post


Link to post
Share on other sites

Gonna have a look at this.

@DavidRM I am not able to reproduce the problem.

  • Store CSS as a separate file is checked
  • I click "Use Custom Theme"
    • Custom CSS is added to the project
  • Compile
    • res/app.css contains the theme
    • index.html is properly linking to it on line 17
  • I open the Custom CSS file and make changes (for example, change font sizes)
    • Save
    • Compile
    • Execute
    • I can see the changes in the app

 

Share this post


Link to post
Share on other sites
18 hours ago, DavidRM said:

I'm not using "Use Custom Theme".

I'm using the default theme. But I added my own CSS file as an external resource. I'm just adding project-specific elements to my CSS file.

-David

Ok, that explains it. Adding a css file as an external resource does not mean that the project will load it. However, it can be done:

function AddCustomStyleSheet(File: String): THandle;
begin
  result := BrowserAPI.Document.createElement('link');
  result.type := 'text/css';
  result.rel := 'stylesheet';
  result.href := File;
  BrowserAPI.Head.appendChild(result);
end;

Call like this:

AddCustomStyleSheet('res/MyCssFile.css');

 

Share this post


Link to post
Share on other sites

This is what I'm doing:

procedure TApplication.LoadPBTCSS;
begin
  TW3Storage.LoadCSS('res/PBTerm-NodeJS.css', procedure (const FromUrl: string;
    const ObjectHandle: THandle; const Success: boolean)
  begin
    if success then
      Writeln('PBTerm-NodeJS.css loaded.')
    else
      Writeln('Error loading PBTerm-NodeJS.css.');
  end);
end;

However, how does changing how I call the CSS load solve the problem that the project is caching the CSS file?

I update the CSS project file, I do a build, but the updated CSS file is *not* being copied into the new build.

-David

Share this post


Link to post
Share on other sites
4 hours ago, DavidRM said:

This is what I'm doing:


procedure TApplication.LoadPBTCSS;
begin
  TW3Storage.LoadCSS('res/PBTerm-NodeJS.css', procedure (const FromUrl: string;
    const ObjectHandle: THandle; const Success: boolean)
  begin
    if success then
      Writeln('PBTerm-NodeJS.css loaded.')
    else
      Writeln('Error loading PBTerm-NodeJS.css.');
  end);
end;

However, how does changing how I call the CSS load solve the problem that the project is caching the CSS file?

I update the CSS project file, I do a build, but the updated CSS file is *not* being copied into the new build.

-David

As you use the default theme, it gets copied as res/app.css every time you compile. Also, the compiler adds this to the head of the html-file:

<link rel="stylesheet" type="text/css" href="res/app.css"/>

If you write your own styles for your components, you can create a separate css file just like you have done and use it with TW3Storage.LoadCSS or the function I wrote above. They both add the same kind of stylesheet-link to the html-file.

I can't reproduce the caching. Let's see if we are doing everything the same way.

I added MyTestControl.css to the Resources section. The file itself is in the project's own folder and NOT www/res.

image.png

Once I compile, the file gets copied to www/res/MyTestControl.css

During startup of my app, I load the css with TW3Storage.LoadCSS. I run it and see my style.

The css-resource is currently an unknown type for the IDE, so I can't edit it in the IDE. I open the file in Notepad++ and change something + save.

I hit Compile again and Execute and I do see the changes that I made.

Share this post


Link to post
Share on other sites

I just did it again.

I right-clicked on the CSS file in the "Resources" tree and chose "Remove".

I right-clicked on the tree again and chose "Add", then "Resource Files..." Selected my CSS file.

I right-clicked on the newly re-added CSS file in the Resources tree and see "Make Item Internal" which seems to me to be a flag that the project is considering this file an external file.

I do a build. The correct CSS file is added to the "www\res" folder.

I edit the CSS file using Notepad++.

I do a build. The CSS file in the "www\res" folder is NOT updated.

I DELETE the CSS file from the "www\res" folder.

I do ANOTHER build.

The CSS file added to the "www\res" folder is the ORIGINAL CSS file. NOT the edited one.

The CSS file, though seemingly marked as "external", is being stored in the project file (I guess). And isn't updated until I do another Remove/Add sequence.

-David

image.png

Share this post


Link to post
Share on other sites

I think I have narrowed down the problem.

It's SMS itself that's caching the file. Once SMS has read in the CSS file, it never does so again. If I close SMS and restart, though, it will read in the updated CSS file.

I think I have noticed this with PNG resource files, as well.

Is there an option where I can tell SMS to *always* read the resource files on a build? Or at least check the date of the file it has cached versus the file on the disk?

-David

Share this post


Link to post
Share on other sites

I created a minimal project to test this. I've attached what I have.

I ran into an error with this, actually. I let it send, so you can dig that up.

Basically, with this project, when I have it open in SMS, if I edit the CSS file in Notepad++, as soon as I save the change, SMS gets an error. I haven't seen this error happen with my other project, so I have no idea what's going on there.

-David

SMS-TestCSS.zip

Share this post


Link to post
Share on other sites

@DavidRM Now I was able to reproduce the problem and it explains the "caching" too. When the IDE gets a signal, that something has changed, it reacts to it while the file is still being saved -> It can't access the file. I did probably not get this bug myself as the css file I was testing with was so small.

Thank you. Now I can fix this problem 🙂

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×