Spacing classes on footer links not working

[pkd2512]

on these, px-3 doesn't seem to have any style associated. Why is this happening? Are the classes being flushed out for some reason?

[pkd2512]

Added this hotfix to the Gaza page, let me know if we should put this in the bluprint as well for now, or if there's a more elegant way to do it. @hobbes7878

purgeCss({
      safelist: {
        greedy: [/^px-3/],
      },
    }),

[hobbes7878]

Tagging also to: reuters-graphics/bluprint_graphics-kit#107

And also to say for the running record of these, this issue also looks like it happens where a class is only included in a child component below an IntersectionObserver event here: https://github.com/reuters-graphics/graphics-components/blob/main/src/components/SiteFooter/Referrals/index.svelte#L8-L19

OK, in terms of solution, I don't have a ready one for the plugin itself. It looks like the bundle for this component is still being stripped out here. Fudging that in our own fork, though, is going to over-include classes.

As for your proposed fix, @pkd2512, I think we need to deal with the issue in this library, not the project bluprint. Using the safelist config in a project should be an escape hatch for that specific project.

So maybe an answer for now is to avoid using classes in components below an IntersectionObserver event. An easy alternative would normally be to use includes in SCSS, but in this case we actually didn't make mixins for static paddings and margins.. We can either do that and then use them, or just write the SCSS rules we need within the component directly for now. We can then republish this library and update it in the bluprint and any existing projects can just bump the version number and go.