Autoprefixer & postcss wih bulma

support
1

Hi,
i’m new french user of hugo.

I will create a new theme with bulma framework with npm option.
Bulma work correctly but i wish use purgecss because bulma css folder is 194ko ans i wish reduce this for optimisation.

i installing postcss, autoprefixer ans purgecss.
I have a probleme when a use hugo server commande, i have this message but i don’t understand this information :

Building sites …

Replace Autoprefixer browsers option to Browserslist config.
Use browserslist key in package.json or .browserslistrc file.

Using browsers option can cause errors. Browserslist config
can be used for Babel, Autoprefixer, postcss-normalize and other tools.

If you really need to use option, rename it to overrideBrowserslist.

Learn more at:
https://github.com/browserslist/browserslist#readme
https://twitter.com/browserslist

TypeError: Cannot read property ‘names’ of undefined
at Object.mergeExtractorSelectors (/Users/tintin/mongit/bulma/node_modules/purgecss/lib/purgecss.js:1:3177)
at /Users/tintin/mongit/bulma/node_modules/postcss-purgecss/lib/postcss-purgecss.js:1:649
ERROR 2020/02/29 17:25:18 Transformation failed: exit status 1
Built in 1788 ms
Error: Error building site: logged 1 error(s)

In my postcss.config.js(in theme forlder) i have this :

const purgecss = require('postcss-purgecss')
const autoprefixer = require('autoprefixer')
module.exports = {
  plugins: [
       purgecss({
        content: [
            'layouts/**/*.html'
        ]
    }),
    autoprefixer({
        browsers: [
            ''
        ]
    })
]
 }

in my package.json i have this informations

{
"name": "bulmasite",
"version": "1.0.0",
"description": "theme cree avec bulma",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Valentin",
"license": "MIT",
"dependencies": {
"autoprefixer": "^9.7.4",
"bulma": "^0.8.0",
"postcss-cli": "^7.1.0",
"postcss-purgecss": "^2.0.3",
"purgecss": "^2.1.0"
  }
}

in hy head i use this code

   <head>
{{ $style := resources.Get "css/main.scss" | toCSS | postCSS (dict "config" (.Scratch.Get "config") "noMap" true) |  minify | fingerprint }}
<link rel="stylesheet" href="{{ $style.RelPermalink }}" media="screen" async>

 </head>

Could you help me please
Best regards :wink:

2

None of these errors are Hugo related if you post a link to your repo maybe someone can provide more help but none of this is hugos fault and more like improper setup of your npm css pipeline.

3

hi @benmarte i will thinking found help in this community :pleading_face:

4

If you post a link to your repo so we can reproduce maybe Someone kind enough will look into it but like I said earlier this is not a hugo problem so it’s not something most hugo users might encounter because it is something specific you are trying to use with hugo.

Saying it’s a hugo problem because you don’t want to include the full bulma lib doesn’t make it a hugo problem, it’s just not something common most hugo users will experience.

Again we’re here to help as best we can not trying to be mean or rude if that’s how I’m coming off then my apologies that is not what I’m trying to convey.

1 Like
5

i understand and i’m so sorry if I hurt you.
I found a solution today. thank you very munch for your time

and sorry for my english…

6

@Ptitnux no harm done friend.

I think our language barrier is causing miscommunication but I was not trying to dismiss your issue but it, in fact, was something unique in your case due to your setup with hugo.

It would be awesome if you can share how you solved your problem so others who might use a similar setup to yours can benefit from it :slight_smile:

7

Could you please share?
I’m also having the same issue with purgeCSS
Thanks in advance

8

@Ptitnux if you can share what is your setup now it will help us a lot.

@Ptitnux si tu peux indiquer les divers fichiers de conf et comment tu as réglé ce problème, cela nous (moi en tous cas) sera très utile car j’ai aussi des difficultés.
Merci d’avance.

1 Like