Parsing CSS string adds unwanted = entity at the bottom of a base64 font

[vitto]

Hi, I'm trying to pass a CSS string in postcss plug-in but it sanitize (maybe?) it by adding a = the the bottom of src: url("data:font/truetype;charset=utf-8;base64,......==") CSS declaration.

I've wrote a postcss plugin to integrate my node module inside postcss and webpack, this is the plugin:

/* typescript */
import { parse, Plugin } from 'postcss'
import { build } from '@iconsauce/core'

const plugin = (): Plugin => {
  return {
    postcssPlugin: 'postcss-iconsauce',
    async AtRule (rule) {
      if (rule.name === 'iconsauce') {
        rule.replaceWith(parse(await build()))
      }
    },
  }
}

export const postcss = true
plugin.postcss = true
module.exports = plugin

Basically I use it with a custom rule @iconsauce

So this is the CSS I pass to postcss:

/* css */
@iconsauce;

My module will search for icon occurrences in the project to generate an icon font:

:root {
  --iconsauce-font-size: 24px;
}

@font-face {
  font-family: "iconsauce";
  src: url(data:font/truetype;charset=utf-8;base64,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) format("truetype");

  /* A short version */
  src: url(data:font/truetype;charset=utf-8;base64,AAEAA...AAAAA) format("truetype");
}

[class^="gm/"], [class*=" gm/"] {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: "iconsauce" !important;
  font-size: var(--iconsauce-font-size);
  font-style: normal;
  text-align: center;
  width: var(--iconsauce-font-size);
}

.gm\/filled\/accessible-forward::before { content: "\ea01"}
.gm\/filled\/add-chart::before { content: "\ea02"}
.gm\/filled\/close::before { content: "\ea03"}
.gm\/filled\/error::before { content: "\ea04"}
.gm\/filled\/info::before { content: "\ea05"}
.gm\/filled\/remove-shopping-cart::before { content: "\ea06"}
.gm\/filled\/vpn-key::before { content: "\ea07"}
.gm\/filled\/warning::before { content: "\ea08"}

This is what it outputs:

...

@font-face {
  font-family: "iconsauce";
  /* A short version, note = added before = */
  src: url("data:font/truetype;charset=utf-8;base64,AAEAA...AAAAA=") format("truetype");
}

...

This character is added every time, I've also tried directly on codepen and I confirm it breaks the font.

What am I missing?

[ai]

It is hard to answer. Try to simplify build() function content and make everything simple.

It could be an error of data: encoding.

[vitto]

Thanks for the fast answer, the strange thing is I don't get these characters in tests, I'll take a deeper look on how my code encodes.

[vitto]

It was my fault, when a font is converted to base64, if it's length is not a multiple of 3 bytes, the number of bits making up the result will not be a multiple of 6. Null bits (0) will then be inserted at the end (4 or 2), and added to the encoded value 0 to 2 '=' symbols (padding character) sufficient to reach a multiple of 4 symbols.

I needed to remove these padding characters to avoid the font to be not loaded.