Base64 asset - InvalidCharacterError

[admfrenchdev]

Hi!
Trying to include fonts in my style dictionary, I encounter an error when encoding fonts file into base64.

Been trying with fonts from google font and even fonts provided in your examples/advanced/assets-base64-embed repo, always the same error:

node:buffer:1256
      throw lazyDOMException('Invalid character', 'InvalidCharacterError');
            ^
DOMException [InvalidCharacterError]: Invalid character
    at btoa (node:buffer:1256:13)
    at convertToBase64 (file:///my_local_path/Source/node_modules/style-dictionary/lib/utils/convertToBase64.js:31:10)     
    at Object.transform (file:///my_local_path/Source/node_modules/style-dictionary/lib/common/transforms.js:1395:14)      
    at transformToken (file:///C:/my_local_path/Source/node_modules/style-dictionary/lib/transform/token.js:67:52)
    at async transformObject (file:///my_local_path/Source/node_modules/style-dictionary/lib/transform/object.js:102:32)   
    at async transformObject (file:///my_local_path/Source/node_modules/style-dictionary/lib/transform/object.js:125:30)   
    at async transformObject (file:///my_local_path/Source/node_modules/style-dictionary/lib/transform/object.js:125:30)   
    at async transformObject (file:///my_local_path/Source/node_modules/style-dictionary/lib/transform/object.js:125:30)   
    at async StyleDictionary._exportPlatform (file:///my_local_path/Source/node_modules/style-dictionary/lib/StyleDictionary.js:512:27)
    at async StyleDictionary.getPlatformTokens (file:///my_local_path/Source/node_modules/style-dictionary/lib/StyleDictionary.js:411:26)

Been trying to open files with Notepad++ and converting them to UTF8 with no difference in the output.

If this can help, I'm running on Windows and using npm run build locally. The CLI is not globally installed as I prefer keeping it in the project.

Thanks for your help

[jorenbroekema]

Reproduced this bug locally.

I think we need to use a Node/Browser compatible way to read a font file, convert it to base64 properly:

const body = fs.readFileSync(filePath);
const toBase64 = buffer => {
  if (typeof window !== 'object') {
    // In Node we have Buffer and it's easy
    return Buffer.from(buffer).toString('base64');
  } else {
    // In browser we can use FileReader & Blob
    const reader = new FileReader();
    const blob = new Blob([body]);
    reader.readAsDataURL(blob);
    return new Promise(resolve => {
      reader.onloadend = () => {
        resolve(reader.result);
      };
    });
  }
};
const b64String = toBase64(body);