Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

CSS is not applied correctly when running on node.js

See original GitHub issue

Maizzle Version: 3.5.0
Node.js Version: 15.0.1

Hello,

Instead of using the CLI, I tried to run with node.js according to the document found here:

https://maizzle.com/docs/nodejs/

My HTML is a very basic html with tailwind classes, for the sake of testing lets try something like this:

<!DOCTYPE html>
<html>
        <body>
                <div class="text-xs m-5">test</div>
        </body>
</html>

My nodejs code looks like this (ES6):

import fs from 'fs';
import Maizzle from "@maizzle/framework";
import minimist from 'minimist';

var args = minimist(process.argv.slice(2));

if (args.hasOwnProperty('in-file')) {
  var inFiles = args['in-file'];

  if (typeof inFiles === 'string' || inFiles instanceof String) {
    inFiles = [inFiles];
  }

  inFiles.forEach(function (file) {
    var content = fs.readFileSync(file, "utf8");
    // var {html, config} = Maizzle.render(content);
    Maizzle.render(content, {
      maizzle: {
        env: 'production',
        inlineCSS: true,
        removeUnusedCSS: {
          removeHTMLComments: true
        },
        build: {
          templates: {
            destination: {
              path: 'build_production',
            },
          },
        },
      },
      tailwind: {
        css: '@tailwind utilities;',
        config: import('./tailwind.config.js'),
      }
    }).then(({html}) => console.log(html))
  })
}

My tailwind.config.js looks something like this: https://raw.githubusercontent.com/maizzle/starter-litmus/master/tailwind.config.js

When I run node build.maizzle.mjs --in-file=test2.html I get something like this:

<!DOCTYPE html>
<html>
        <body>
                <div>test</div>
        </body>
</html>

Seems like Maizzle stripped all classes and returns the bare html?

Issue Analytics

State:
Created 2 years ago
Comments:6 (4 by maintainers)

Top GitHub Comments

1reaction

cossssmincommented, May 6, 2021

Updated the docs to make it clear that your template string needs to include the {{{ page.css }}} variable:

https://maizzle.com/docs/nodejs/#example

Feel free to reopen if you still encounter issues 👍

1reaction

yellow1912commented, May 6, 2021

I think Node.js document deserves some love 😄. This way of using Maizzle is super useful when integrating with other platforms since we can have more control over the code. A few things that would be cool to have:

A version with ES6 (where require is not available)
If I set compiled string then the css config will not kick in at all right? (no compilation needed)

I didn’t look much at the extend part (my fault) because I already generate the full html from another application and simply pass that string to maizzle for compilation.