Get a reference to the importing file's path in Custom Components

[WilliamABradley]

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
I want to build a sass rendering component, that you provide it a .scss path, and it wraps the style internals.

Component:

import { HeadComponent } from 'mjml-core';
import fs from 'fs';
import path from 'path';
import sass from 'sass';

export default class MjScss extends HeadComponent {
  static componentName = 'mj-scss';
  static endingTag = true;
  static dependencies = {
    'mj-head': ['mj-scss'],
  };
  static allowedAttributes = {
    src: 'string',
    inline: 'string',
  };

  handler() {
    const { add } = this.context;
    // We have no idea where this Component is called from,
    // therefore we assume there is a scss folder 2 directories away
    // Which assumes this component is in a folder, contained by a components folder.
    const callerPath = `${__dirname}/../../scss`;
    const filePath: string = path.resolve(callerPath, this.getAttribute('src'));
    if (!fs.existsSync(filePath)) {
      throw new Error(`Can't find scss file at ${filePath}`);
    }

    const scss = sass.renderSync({
      file: filePath,
    }).css.toString();

    add(
      this.getAttribute('inline') === 'inline' ? 'inlineStyle' : 'style',
      scss
    );
  }
}

Usage:

<mj-scss src="theme.scss"></mj-scss>

Describe the solution you'd like
A clear and concise description of what you want to happen.

Component:

import { HeadComponent } from 'mjml-core';
import fs from 'fs';
import path from 'path';
import sass from 'sass';

export default class MjScss extends HeadComponent {
  static componentName = 'mj-scss';
  static endingTag = true;
  static dependencies = {
    'mj-head': ['mj-scss'],
  };
  static allowedAttributes = {
    src: 'string',
    inline: 'string',
  };

  handler() {
    const { add, callerPath } = this.context;
    const filePath: string = path.resolve(callerPath, this.getAttribute('src'));
    if (!fs.existsSync(filePath)) {
      throw new Error(`Can't find scss file at ${filePath}`);
    }

    const scss = sass.renderSync({
      file: filePath,
    }).css.toString();

    add(
      this.getAttribute('inline') === 'inline' ? 'inlineStyle' : 'style',
      scss
    );
  }
}

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

^ implemented a known folder approach above.

Additional context
Add any other context or screenshots about the feature request here.

[iRyusa]

It shouldn't be that hard to pass down the filePath in globalData https://github.com/mjmlio/mjml/blob/master/packages/mjml-core/src/index.js#L140 feel free to open a pr on this one

[kmcb777]

Just opened a PR for this : #2407
@WilliamABradley with this you'll be able to get the path of the mjml file in which the component is called, that's what you needed right ? If it's in a partial included with mj-include, it will give the path of the partial.
In the component it will be provided in this.props.absoluteFilePath

[WilliamABradley]

@kmcb777 This works a treat! Just updated my component to use it.
It is unfortunate that @types/mjml npm package is out of date though 😢

[WilliamABradley]

For future reference of anyone interested, the implementation is now:

import { HeadComponent } from 'mjml-core';
import fs from 'fs';
import path from 'path';
import sass from 'sass';
import { AttributesFromProps, registerMJMLComponent } from '..';

export type MjScssProps = {
  src: string;
  inline?: string;
};

export default class MjScss extends HeadComponent {
  static componentName = 'mj-scss';
  static endingTag = true;
  static dependencies = {
    'mj-head': ['mj-scss'],
  };
  static allowedAttributes: AttributesFromProps<MjScssProps> = {
    src: 'string',
    inline: 'string',
  };

  handler() {
    const { add } = this.context;
    // @types/mjml is not up to date.
    const absoluteFilePath: string = (this.props as any).absoluteFilePath;

    // Get directory of file, if the path is a file.
    const callerPath = fs.lstatSync(absoluteFilePath).isDirectory() ? absoluteFilePath : path.dirname(absoluteFilePath);
    const filePath: string = path.resolve(callerPath, this.getAttribute('src'));
    if (!fs.existsSync(filePath)) {
      throw new Error(`Can't find scss file at ${filePath} (From ${absoluteFilePath})`);
    }

    const scss = sass
      .renderSync({
        file: filePath,
        includePaths: [callerPath],
      })
      .css.toString();

    add(this.getAttribute('inline') === 'inline' ? 'inlineStyle' : 'style', scss);
  }
}