addAdditionalAbsRefPrefixDirectories don't add "root" directory

[SvenJuergens]

hi, first of all many thanks for this great extension. I had the problem that my paths were rendered incorrectly and found the solution here. https://github.com/sabbelasichon/typo3_encore/issues/138

However, since I had previously done "exactly the same" (😅) on another project and it worked there, I tried a little further to see what my problem was.

I am then thanks to the other post on the function addAdditionalAbsRefPrefixDirectories https://github.com/sabbelasichon/typo3_encore/blob/a707de8d5667fa03d8d48534c99f51e83216aa1e/Classes/Asset/TagRenderer.php#L193

In my case the file "/dist/subfolder/main.css" is passed to the function. After calling $newDir = basename(dirname($file)) . '/'; only subfolder/ is passed instead of dist/.

This was then also the difference to my "exactly the same" (🙃) other config, there the path was "dist/main.css", so it worked out of the box.

If you would pass the "root" folder of this path here, then you would not have to adjust the LocalConfiguration.

I just don't know what is a safe way to get the RootFolder here....

Maybe something like

            $file = '/' . ltrim($file, '/');
            $path = explode('/', $file);
            if(!empty($path) && isset($path[1])){
                $newDir = $path[1];
            }

What do you think @sabbelasichon it's a feature, a bug or miss configuration?

[sabbelasichon]

@SvenJuergens I have also no idead what is safe here. Could you show me your configuration file, so i can see if it a miss configuration. I am lost, sorry.

[SvenJuergens]

Sorry @sabbelasichon, there was probably a bit more context missing here. My main project is a composer TYPO3 installation. At the moment there are several sitepackages and Webpages in the system, which will be gradually converted to use Webpack. The folder structure is as follows:

build
    project1
        Scss
        JavaScript
        Fonts
        ...
    webpack.config.js
config
packages
public
    dist
        project1
    fileadmin
    index.php
    typo3
    typo3conf
    typo3temp
var
vendor

project1 should now be edited in the build/project1/ folder in the future and the files should then end up in the public/dist/project1 folder.

However, when I am supposed to render everything with Webpack, the paths are not output correctly in the frontend of the page. I get the following output just like in the other BugReport: <link rel="stylesheet" type="text/css" href="dist/project1/main.1659451028.css" media="all">

Here the slash in front of the dist folder is missing. If I add to the dist folder, as described here in the Localconfiguration, then the slash is also rendered correctly.

in typo3_encore I had found the function additionalAbsRefPrefixDirectories, https://github.com/sabbelasichon/typo3_encore/blob/a707de8d5667fa03d8d48534c99f51e83216aa1e/Classes/Asset/TagRenderer.php#L193 which actually does exactly the whole thing itself. At least that's how I understood this function.

In my case and with my configuration then, however the path to the CSS file is passed to additionalAbsRefPrefixDirectories() dist/project1/main.css. When the function has run, however, the folder "project1/" is passed to FE/additionalAbsRefPrefixDirectories instead of "dist/" (the root folder of this path) When the TypoScriptFrontendController then looks to see if the included CSS file needs a prefix, dist/project1/main.css is compared to "project1/" instead of "dist/" and no prefix slash is set.

and back to the initial question, if the additionalAbsRefPrefixDirectories() function could be adapted to take only the "root" folder for a path, such situations would be caught as well

webpack.config.js

const Encore = require('@symfony/webpack-encore');

if (!Encore.isRuntimeEnvironmentConfigured()) {
  Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
  .setOutputPath('../public/dist/project1/')
  .setPublicPath('/dist/project1/')
  .setManifestKeyPrefix('build/project1/')
  .copyFiles({
   ...
  })

  .addEntry('main', './project1/JavaScript/main.js')
  .enableSingleRuntimeChunk()
  .cleanupOutputBeforeBuild()
  .enableSourceMaps(!Encore.isProduction())
  .enableSassLoader()
  .enablePostCssLoader((options) => {
    options.postcssOptions = {
      config: './postcss.config.js',
    }
  })
;

const project1Config = Encore.getWebpackConfig();
project1Config.name = 'project1Build';
module.exports = [project1Config];