Classes based on custom properties like text-xxx not working on production build

PrimeFlex is a lightweight responsive CSS utility library to accompany Prime UI libraries and static webpages
Post Reply
damiancerero
Posts: 6
Joined: 30 Nov 2021, 21:23

29 Dec 2021, 22:11

Hi there,

I'm using PrimeReact + Primeflex happily in development. However, when building with npm run build it seems that *only some* classes based on custom properties vars like bg-blue-50, don't work. For example, my topbar component uses bg-bluegray-900 and it works, and I can use that class all over the application without any problems.

However, some other clases like bg-blue-50, which I employ in the login section (from primeblocks) just shows a white background and the class is not working. Same thing happens with border colors, text colors, etc. It seems that the optimisation process (not an expert in npm run build process in react-app applications) doesn't recognise that those vars are being used and therefore it removes them.

Did somebody experience this before? some hints on how can I avoid npm run build removing those vars (which come from the theme). I imported everything correctly I guess:

import './index.css'
import 'primereact/resources/themes/lara-light-indigo/theme.css' // theme
import 'primereact/resources/primereact.min.css' // core css
import 'primeicons/primeicons.css' // icons
import 'primeflex/primeflex.css'

Thanks in advance!

damiancerero
Posts: 6
Joined: 30 Nov 2021, 21:23

30 Dec 2021, 14:33

As usual, I reply to myself...

I finally could overcome this limitation by adding
<link rel="stylesheet" href="https://unpkg.com/primeflex@3.1.0/primeflex.css">
to my index.html, which is clearly suboptimal.

So it seems to be strictly related to PrimeFlex. However, no light is ever provided (nor documented).

Let's see if this time is different =)

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

26 Apr 2022, 03:35

Hi,

Interesting! Could you please check bg-blue-50 class in the inspector of the browser? Also, you can check this class in primeflex.css/primeflex.min.css on production build.

Best Regards,

Post Reply

Return to “PrimeFlex”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests