TYPO3 includes CSS/JS depending on page UID

Question

I'm trying to add some external resources(CSS/JS) depending on the page, for a better use of resources. This is my actual situation:

page = PAGE
page.10 = FLUIDTEMPLATE
page {
    typeNum = 0
    //### GLOBAL CONFIG
    config {
        //some global config
    }
    //### CSS INCLUSION
    includeCSS {
        fontAwesome = fileadmin/assets/lib/fontawesome-5.14.0/css/all.css
        bootstrapCSS = fileadmin/assets/lib/bootstrap-4.5.2-dist/css/bootstrap.min.css
        mainCSS = fileadmin/assets/css/main.css 
    }
    //### HEADER JS INCLUSION
    includeJS {
        jquery = fileadmin/assets/lib/jquery-3.5.1.min.js
    }
    //### FOOTER JS INCLUSION
    includeJSFooter {
        bootstrapJS = fileadmin/assets/lib/bootstrap-4.5.2-dist/js/bootstrap.min.js
        siteMain = fileadmin/assets/js/main.js
    }
    //### TEMPLATING
    10 = FLUIDTEMPLATE
    10 {
        templateName = LayoutTemplate
        templateRootPaths.1 = fileadmin/Templates
        layoutRootPath  = fileadmin/Templates/Layouts
        variables{
            contentNormal < styles.content.get
            contentRight < styles.content.get
            contentRight.select.where = colPos = 2
        }
    }
}

I tried this 2 solutions:

This one modifying the previous code:

//### CSS INCLUSION
    includeCSS {
        fontAwesome = fileadmin/assets/lib/fontawesome-5.14.0/css/all.css
        bootstrapCSS = fileadmin/assets/lib/bootstrap-4.5.2-dist/css/bootstrap.min.css
        mainCSS = fileadmin/assets/css/main.css
        //###ADDED FOR NEW INCLUSION###
        [page ["uid"] == 1]
        additionalCSS = fileadmin/assets/css/additional.css
        [END]
        //#############################
    }

And this other adding code after the previus page object declaration:

1.)

[page ["uid"] == 1]
page.10.includeCSS.additionalCSS = fileadmin/assets/css/additional.css
......
[END]

2.)

[page ["uid"] == 1]
page.10.includeCSS{
    additionalCSS = fileadmin/assets/css/additional.css
    .......
}
[END]

Anyone of them is not working and I don't know why.

Any advice?

Answer 1

The first one won't work because conditions in TypoScript only work on the highest level.

So you can't do:

page.includeCSS {
  main = ...
  [page["uid"] == 1]
    additional = ...
  [end]
}

You have to do:

page.includeCSS {
  main = ...
}
[page["uid"] == 1]
  page.includeCSS.additional = ...
[end]

In the second one you're using page.10.includeCSS when you should be using page.includeCSS (without 10).

I'm also not sure if the condition will work with the space between page and ["uid"]. If it doesn't work, change it to [page["uid"] == 1].

Answer 2

Typoscript conditions are expensive, page IDs can change:

Talk a look at EXT:news IncludeFileViewhelper for a more sane approach - or the asset collector, if you are running TYPO3 10: https://usetypo3.com/asset-collector.html