Tables rendering incorrectly after minification

[zachoooo]

EDIT: After a lot of fiddling around, I realized that postCSS was removing some CSS from the final that I actually needed. I was able to fix this issue by modifying postcss.config.js to whitelist table headers and cells.

The fix looks something like this:

const autoprefixer = require('autoprefixer');
const purgecss = require('@fullhuman/postcss-purgecss');
const whitelister = require('purgecss-whitelister');

module.exports = {
  plugins: [
    autoprefixer(),
    purgecss({
      content: [
        './layouts/**/*.html',
        './content/**/*.md',
      ],
      safelist: [
        'lazyloaded',
        'th',
        'td',
        ...whitelister([
          './assets/scss/components/_code.scss',
          './assets/scss/components/_search.scss',
          './assets/scss/common/_dark.scss',
        ]),
      ],
    }),
  ],
}

This seems to be working for now, but I think that common markdown stuff should be whitelisted by default.

Description

I created a table using Markdown and locally the table renders correctly, but when I the CSS is minified into a single file and displayed on the web, I'm not sure why, but the new CSS is not rendering tables as I would expect. I've narrowed this down to the line postCSS (dict "config" "config/postcss.config.js") in stylesheet.html. It appears that removing this fixes it. Perhaps the purge function is getting rid of stuff that I actually need?

Steps to reproduce

The project can be found here: https://github.com/ElectricBlocks/electricblocks.github.io

I created a table using the following code:

{{< table "table table-striped table-bordered table-dark" >}}

| Index | # Bytes | Data Type | Variable | Purpose |
|-------|---------|-----------|----------|---------|
| 0 - 3 | 4       | int       | x        | x coord of updated TE|
| 4 - 7 | 4       | int       | y        | y coord of updated TE|
| 8 - 11| 4       | int       | z        | z coord of updated TE|
| 12    | 1       | boolean   | inService| Is TE enabled? |
| 13 - 16| 4 | int | numInputs | # of inputs to a TE|
| 17 - end | 8 * numInputs| double[] | inputs | Double array of TE inputs|
{{</ table >}}

The shortcode for table is defined as:

{{ $htmlTable := .Inner | markdownify }}
{{ $class := .Get 0 }}
{{ $old := "<table>" }}
{{ $new := printf "<table class=\"%s\">" $class }}
{{ $htmlTable := replace $htmlTable $old $new }}
{{ $htmlTable | safeHTML }}

Expected result

When viewed on localhost, it renders correctly like this:

Actual result

When minified and pushed to github pages, the table renders like this:

Environment

npm run check

> [email protected] precheck
> npm version

{
  doks: '0.1.5',
  npm: '7.3.0',
  node: '15.5.0',
  v8: '8.6.395.17-node.23',
  uv: '1.40.0',
  zlib: '1.2.11',
  brotli: '1.0.9',
  ares: '1.17.1',
  modules: '88',
  nghttp2: '1.41.0',
  napi: '7',
  llhttp: '2.1.3',
  openssl: '1.1.1i',
  cldr: '38.0',
  icu: '68.1',
  tz: '2020b',
  unicode: '13.0'
}

> [email protected] check
> hugo version

Hugo Static Site Generator v0.80.0-792EF0F4/extended linux/amd64 BuildDate: 2020-12-31T13:46:18Z

[h-enk]

This seems to be working for now, but I think that common markdown stuff should be whitelisted by default.

Think so too — I will add the standard table classes:

'table',
'thead',
'tbody',
'tr',
'th',
'td',