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
![dependabot-preview[bot] avatar](https://avatars.githubusercontent.com/in/2141?v=4 "dependabot-preview[bot]")
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "github-actions[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent