[Question] Is it possible to use if condition based on the current build file extension?

[seyfer]

• Maizzle Version: #.#.#
  latest ^3.5.0
• Node.js Version: #.#.#
  v12.20.0

I have configured 2 build targets with different extensions for the output.

templates: [
      {
        source: 'src/templates/email',
        destination: {
          path: 'build_production',
        },
      },
      {
        source: 'src/templates/email',
        destination: {
          path: 'build_laravel',
          extension: 'blade.php'
        },
      },
    ],

The problem is that when I develop, I use fixtures variables as {{ page.name }} but for Laravel this should be {{ $page['name'] }}. Since JS also supports access by array, this approach {{ $page['name'] }} works in both HTML and blade.php extensions.
But then I faced another problem with assets. Let's say I have logo image. In HTML it will work just href="images/logo.png" and show it in preview.
For Laravel I need to wrap it in href="{{ asset(images/logo.png) }}". I can put it in HTML, but then I will not have an image in the preview.

To solve it, I see only will be possible with something like

<if condition="page.build.extension == blade.php">
  // some
</if>

Is it possible to achieve in any other way?

I tried to create a custom config as config.laravel.js for that first to set a custom page variable only for laravel ENV.
maizzle build laravel
with config exactly as for production
But, the build was producing crazy nested @media queries in generated <style>. Like 5 nested media queries and empty inside. Even setting NODE_ENV=production did not help. I was able to fix it only by putting blade.php build in production config file. This is another bug btw.

[cossssmin]

You could use the (currently undocumented) page.build.currentTemplates object, which contains your page.build.templates[x] object for every iteration, when multiple templates sources are used.

With that you should be able to access the currently-being-built templates' extension through:

{{ page.build.currentTemplates.destination.extension }}

Note that page.build.currentTemplates is only available to you inside a template, not in a config file.

However that might get tedious to write all the time, so I'd recommend using environment configs, as you suggested with config.laravel.js. You'd then write your HTML like this:

<img src="{{ page.env === 'laravel' ? 'asset(images/logo.png)' : 'images/logo.png' }}">

Nested media queries shouldn't happen unless you've got something wrong in the layout - can you show your template and the layout it extends?

[seyfer]

@cossssmin the strange behaviour is, that absolutely the same code, just compiled with laravel as env config has nested media queries issue in blade.php file and same compiled in production env has no issues in a generated HTML file.
I thought there must be something hardcoded in Maizzle for production env? As when I just moved blade.php compilation from laravel config to production config, not making any more changes, the nested media queries issue was gone.

What I do now, I have

"build": "cross-env NODE_ENV=production maizzle build production",
"build:laravel": "cross-env NODE_ENV=production BUILD_MODE=laravel maizzle build production",

and I check this process.env.BUILD_MODE. the only way I made it work without problems with compiled css. :)

[seyfer]

@cossssmin I get this behaviour basically on starter main layout and starter transactional template.
Just create config as config.laravel.js

module.exports = {
  build: {
    templates: 
      {
        source: 'src/templates/email',
        destination: {
          path: 'build_laravel',
          extension: 'blade.php'
        },
        assets: {
          source: 'src/assets/images',
          destination: 'images/email',
        },
      },
    postcss: {
      plugins: [
        require('autoprefixer')(),
        require("postcss-css-variables")()
      ]
    }
  },
  inlineCSS: true,
  removeUnusedCSS: true,
}

and call it maizzle build laravel - leads to nested media queries.

but same config.production.php

module.exports = {
  build: {
    templates: 
      {
        source: 'src/templates/email',
        destination: {
          path: 'build_production',
        },
        assets: {
          source: 'src/assets/images',
          destination: 'images/email',
        },
      },
    postcss: {
      plugins: [
        require('autoprefixer')(),
        require("postcss-css-variables")()
      ]
    }
  },
  inlineCSS: true,
  removeUnusedCSS: true,
}

called as maizzle build production has no issues.

the only differences are:

• laravel env instead of production
• blade.php extension instead of html

then when I put laravel blade.php building inside config.production.js, as shown in the first message - no issues again.

[cossssmin]

Can you create a repo (based on the default Starter) that reproduces the issue please? Can't tell why that would happen, would need to see the full setup.