Some CSS declarations are just *missing*

Support
1

I push a commit to Github and the production branch is deployed and the build log has no errors. The Github repo contains the CSS files but when I go to the Netlify hosted website, some of the styling is out of sorts and on checking the inspector declarations are missing. Compared to local build, just one or two declarations. I checked if it was something to do with CSS nesting, but some of the classes or other rules are nested and working fine.
Here is the deploy site : https://poppys-pals-rescue.netlify.app/

Here’s one (because I can’t put two embeds, yay) screenshots showing the same CSS rules on local and Netlify.

Screenshot from 2025-01-03 14-43-31
Screenshot from 2025-01-03 14-43-31802×510 29.9 KB

2

@simonaust When you say “compared to local build” do you mean running your actual ‘build command’ on your local system?, or do you mean running your ‘development server command’?

It’s hard to be specific, since you’ve not said what system you’re working with, but many systems don’t do ‘precisely the same thing’ under those two circumstances. (E.g. There’s often ‘production configuration’ for the build that applies alternate browser targets or minification.)

If you’re working with Vite for example, you can check production output with:
npm run build && npm run preview

1 Like
3

Thanks for the reply.
I am not working with Vite. Can I use those commands to preview without Vite?
Here is my local build log

$ npm run build

> poppys_pals_website@0.1.0 build
> react-scripts build

Creating an optimized production build...
One of your dependencies, babel-preset-react-app, is importing the
"@babel/plugin-proposal-private-property-in-object" package without
declaring it in its dependencies. This is currently working because
"@babel/plugin-proposal-private-property-in-object" is already in your
node_modules folder for unrelated reasons, but it may break at any time.

babel-preset-react-app is part of the create-react-app project, which
is not maintianed anymore. It is thus unlikely that this bug will
ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to
your devDependencies to work around this error. This will make this message
go away.
  
Compiled successfully.

File sizes after gzip:

  84.5 kB (+4.23 kB)  build/static/js/main.635ebb28.js
  2.07 kB (+1.07 kB)  build/static/css/main.8e7c71e7.css

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  npm install -g serve
  serve -s build

Find out more about deployment here:

  https://cra.link/deployment

And the log from the Netlify deploy.

1:51:35 PM: Netlify Build                                                 
1:51:35 PM: ────────────────────────────────────────────────────────────────
1:51:35 PM: ​
1:51:35 PM: ❯ Version
1:51:35 PM:   @netlify/build 29.58.1
1:51:35 PM: ​
1:51:35 PM: ❯ Flags
1:51:35 PM:   accountId: 60d9df12798504a035c3976a
1:51:35 PM:   baseRelDir: true
1:51:35 PM:   buildId: 67657637c1e7240008733189
1:51:35 PM:   deployId: 67657637c1e724000873318b
1:51:35 PM: ​
1:51:35 PM: ❯ Current directory
1:51:35 PM:   /opt/build/repo
1:51:35 PM: ​
1:51:35 PM: ❯ Config file
1:51:35 PM:   No config file was defined: using default values.
1:51:35 PM: ​
1:51:35 PM: ❯ Context
1:51:35 PM:   production
1:51:35 PM: ​
1:51:35 PM: Build command from Netlify app                                
1:51:35 PM: ────────────────────────────────────────────────────────────────
1:51:35 PM: ​
1:51:35 PM: $ CI=false npm run build
1:51:35 PM: > poppys_pals_website@0.1.0 build
1:51:35 PM: > react-scripts build
1:51:37 PM: Creating an optimized production build...
1:51:42 PM: One of your dependencies, babel-preset-react-app, is importing the
1:51:42 PM: "@babel/plugin-proposal-private-property-in-object" package without
1:51:42 PM: declaring it in its dependencies. This is currently working because
1:51:42 PM: "@babel/plugin-proposal-private-property-in-object" is already in your
1:51:42 PM: node_modules folder for unrelated reasons, but it may break at any time.
1:51:42 PM: babel-preset-react-app is part of the create-react-app project, which
1:51:42 PM: is not maintianed anymore. It is thus unlikely that this bug will
1:51:42 PM: ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to
1:51:42 PM: your devDependencies to work around this error. This will make this message
1:51:42 PM: go away.
1:51:45 PM: Compiled successfully.
1:51:45 PM: 
1:51:45 PM: File sizes after gzip:
1:51:45 PM:   82.24 kB  build/static/js/main.6586bd37.js
1:51:45 PM:   1.71 kB   build/static/css/main.251a7db5.css
1:51:45 PM: The project was built assuming it is hosted at /.
1:51:45 PM: You can control this with the homepage field in your package.json.
1:51:45 PM: The build folder is ready to be deployed.
1:51:45 PM: You may serve it with a static server:
1:51:45 PM:   npm install -g serve
1:51:45 PM:   serve -s build
1:51:45 PM: Find out more about deployment here:
1:51:45 PM:   https://cra.link/deployment
1:51:46 PM: ​
1:51:46 PM: (build.command completed in 10.6s)
1:51:46 PM: ​
1:51:46 PM: (Netlify Build completed in 11s)
1:51:47 PM: Section completed: building
1:52:51 PM: Finished processing build request in 1m45.628s

I am using a Linux system, Ubuntu 22.04, and Firefox. I just tested on Chrome and it has the same issue. In Chrome dev tools I can see that the CSS is present in the static directory.

Screenshot from 2025-01-04 09-41-55
Screenshot from 2025-01-04 09-41-551196×580 179 KB

I do not know a lot about minification or how the project is bundled for Netlify by npm, but if you could point me in the general direction to understand where I may be setting this process up wrong please do let me know.

Thank you.

Edit: I noticed that the compressed sizes of the gzip CSS files differs, perhaps something to investigate here, but I’m not sure how?

Edit2:
I used the npm install -g serve and serve -s build to deploy the build locally for me to view and low and behold the same issue presents itself :sweat_smile: What possible reason could there be for some of the CSS not being included in the build files? They are all present in the commit and production branch.

4

Probably not.

Only if whatever you’re working with has equivalent build and preview scripts in the package.json

This seems to be the equivalent for Create React App as per:
https://create-react-app.dev/docs/deployment/

There could be many causes, but the important part is that you know Netlify isn’t causing it, so you can proceed with searching for a solution and debugging your project locally.

Try things like:
https://www.google.com/search?q=create+react+app+production+build+missing+css
https://answers.netlify.com/t/some-css-styles-not-work-on-deployment/92506/6

1 Like