Post CSS not Working On Site Dynamic Content

[goldcoders]

My Custom Theme When I generate it for production Post CSS works

but when I compile a Hugo Site where the theme is below the custom theme newsite/themes/custom-theme/

Dynamic Variables defined in my newsite/content newsite/data

which is the same in custom-theme/exampleSite/content custom-theme/exampleSite/data

The PostCSss is not picking Up the compiled html from the main site folder

Im just wondering how thus PostCSS work in your config

my postcss looks like this on the theme

const themeDir = __dirname + "/../../";

const purgecss = require("@fullhuman/postcss-purgecss")({
  // Specify the paths to all of the template files in your project
  content: [
    themeDir + "layouts/**/*.html",
    themeDir + "exampleSite/content/**/*.html",
    themeDir + "exampleSite/public/**/*.html",
    "layouts/**/*.html",
    "content/**/*.html",
  ],

  // This is the function used to extract class names from your templates
  defaultExtractor: (content) => {
    // Capture as liberally as possible, including things like `h-(screen-1.5)`
    const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || [];

    // Capture classes within other delimiters like .block(class="w-1/2") in Pug
    const innerMatches = content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || [];

    return broadMatches.concat(innerMatches);
  },
});

module.exports = {
  plugins: [
    require("postcss-import")({
      path: [themeDir],
    }),
    require("tailwindcss")(themeDir + "assets/css/tailwind.config.js"),
    require("autoprefixer")({
      path: [themeDir],
    }),
    ...(process.env.HUGO_ENVIRONMENT === "production" ? [purgecss] : []),
  ],
};

Do i need to create another assets folder in my main site root folder as such newsite/assets/css/ then paste all the same content on newsite/themes/custom-theme/assets/css

I need your advice on this thanks

[goldcoders]

Manage to fix this ive added to the content array

content: [
    themeDir + "layouts/**/*.html",
    themeDir + "exampleSite/content/**/*.html",
    themeDir + "exampleSite/public/**/*.html",
    "layouts/**/*.html",
    "content/**/*.html",
    "public/**/**.html",
  ],

maybe you should also add it to make it compatible for a solo theme or with site included

[dirkolbrich]

Hey, I am not sure what the actual issue is. Please describe in more detail the desired output and the actual output. Or post a link to an example repository so I can try the build on MyMachine.

The content array content: [ ... ] specifies the folders to look up with PurgeCSS, to remove not used CSS classes from the styles.css file.

[goldcoders]

We Know we can develope themes in Hugo We can either use a Theme itself or Hugo Site with themes

the 3 items in content array is for themes so if i will build my theme as a site hugo server -s exampleSite --themesDir=../.. all the class will be added by PostCss

    themeDir + "layouts/**/*.html",
    themeDir + "exampleSite/content/**/*.html",
    themeDir + "exampleSite/public/**/*.html",

We can avoid missing class when buidling site with hugo --gc --minify by adding this 3 items in the array

    "layouts/**/*.html",
    "content/**/*.html",
    "public/**/**.html"

Im just telling you that You need to add public//.html to the array in your postcss.config.js to allow other users to build a hugo site with hugo --gc --minify witthout missing class in the compiled css

[dirkolbrich]

I think there is some misconception on your side how the PurgeCSS process works.

The content array within posts.config.js:

const purgecss = require("@fullhuman/postcss-purgecss")({
  // Specify the paths to all of the template files in your project
  content: [
    themeDir + "layouts/**/*.html",
    themeDir + "exampleSite/content/**/*.html",
    "layouts/**/*.html",
    "content/**/*.html",
  ],
  // ...
});

is for the specific context to tell PurgeCSS where to look for content files which might have CSS classes in them. PurgeCSS will compare these files to the styles.css file. Any css class which is in the styles.css file but NOT within the content files, will be REMOVED from the styles.css file. This process will NOT add any css classes to the styles.css file.

By default all of the TailwindCSS classes will be included in the generates styles.css. So the above array looks in the specified folder and removes any css class it does not find within these files.

The lines you added to your file:

themeDir + "exampleSite/public/**/*.html",
"public/**/*.html",

are USELESS, as at that point within the Hugo build process there are no files within these public/ folders. PurgeCSS would not find any specified css class and therefore would remove ALL css classes from styles.css, except the specifications for the selector *.

You can test this behavior easily for yourself. Change constant purgecss array within your posts.config.js file to

const purgecss = require('@fullhuman/postcss-purgecss')({
    content: [
        themeDir + 'exampleSite/public/**/*.html',
        'public/**/*.html',
    ],

and run the command: hugo server -s exampleSite --themesDir=../.. --disableFastRender --renderToDisk --environment production This will run the server version but use the production ENV variable and write the result to exampleSite/public/. Your styles.css will be empty except for the * selector.