aspect-ratio purged by purgecss

[patrickedqvist]

Hello Codyhouse,

I'm recently running a project with this wonderful framework but stumbling on an issue with the .aspect-ratio main styling being purged from the css.

I've tried to add the .aspect-ratio class to the PurgeCSS safelist option but that doesn't seem to do it.

The HTML being scanned is using .aspect-ratio-4:3 and that's the only class being added to the final CSS but not the base styling.

I guess it's because the main styling selector ([class*="aspect-ratio"]) isn't caught by the PurgeCSS plugin.

Any idea how to resolve this?

[patrickedqvist]

The following safelist configuration worked but it would be nice to target specifically the aspect-ratio of it's maybe a issue with PurgeCSS itself.

safelist: ['.is-hidden', '.is-visible', 'class'],

[claudia-romano]

Hi Patrick, what config options are you using for PurgeCSS? I have been testing it (using the default options we provide in the framework gulp file) but I was not able to recreate the issue. Thanks.

[patrickedqvist]

@claudia-romano Thanks for getting back to me. We've been using codyhouse in a .Net Framework so our setup is naturally a little different but it should not be that different from a plain HTML setup either.

var PurgeCSSContent = [
    'Views/**/*.cshtml',
    'ComplainForm/src/**/*.tsx',
    scriptsJsPath + '/scripts.js'
]

// …

.pipe(purgecss({
    content: PurgeCSSContent,
    extractors: [                    
        {
            extractor: purgecssFromHtml,
            extensions: ['html', 'cshtml']
        }
    ],
    safelist: ['.is-hidden', '.is-visible', 'class'],
    defaultExtractor: content => content.match(/[\w-/:%@]+(?<!:)/g) || []
}))

The situation where we use the aspect-ratio class looks this

// Views/Partials/BlockList/Components/LatestDecisionsBlock.cshtml
// ..
<div class="decisions-item__media">
    <picture class="decisions-item__picture aspect-ratio-4:3">
        <img src="~/src/img/default-decisions.png" width="400" height="300" class="decisions-item__image" />
    </picture>
</div>

I understand if this problem might be out of your support but any help is welcome :)

[sebastiano-guerriero]

Hi Patrick, can you please check if the issue is fixed in v2.8.8? https://github.com/CodyHouse/codyhouse-framework/releases/tag/v2.8.8

There was a problem with the padding-bottom calc function (when used with purgeCSS or similar tools).

[patrickedqvist]

@sebastiano-guerriero Hello! Sure we will try it out and see if it worked :)

[patrickedqvist]

@sebastiano-guerriero sadly it did not work. I think there either is a bug with PurgeCSS or that selectors such as [class^=aspect-ratio],[class*=" aspect-ratio"] needs to be whitelisted.

I've whitelisted any attribute selector starting with "class" by modifying the purgeCSS function like this.

function purgeCSS() {
    return new Promise(function (resolve, reject) {
        var stream = gulp
            .src(cssFolder + '/style.css')
            .pipe(purgecss({
                content: PurgeCSSContent,
                extractors: [
                    {
                        extractor: purgecssFromHtml,
                        extensions: ['html', 'cshtml']
                    }
                ],                
                safelist: {
                    standard: ['is-hidden', 'is-visible'],
                    deep: [/class$/],
                    greedy: []
                },
                defaultExtractor: content => content.match(/[\w-/:%@]+(?<!:)/g) || []
            }))
            .pipe(gulp.dest(distFolder + '/assets/css'));

        stream.on('finish', function () {
            resolve();
        });
    });
};

[sebastiano-guerriero]

Hi Patrick! Thanks for the info. We're still looking into it. We couldn't recreate the bug using our configuration file, but I see how the [class^=aspect-ratio] and [class*=" aspect-ratio"] can trick tools that remove unused CSS. Good to hear that whitelistening the classes has fixed the issue.

[claudia-romano]

With the latest v3 release, we have updated the default PurgeCSS configuration file to whitelist that classes as well. Thanks for your help on this!