Tips for handling external CSS dependencies in a Create React App project

Working on a web application using CRA 3.4.1 along with a component library called PrimeReact 4.1.2.

My custom CSS is processed through the PostCSS setup in CRA, which adds prefixed versions for properties like display: flex to ensure IE10 support in the built files (main.<hash>.chunk.css).

The issue arises with PrimeReact components, as their bundled CSS is not processed during the build. Consequently, the final 2.<hash>.chunk.css lacks the necessary vendor prefixed rules.

How can I enable processing of this third party CSS without ejecting from the project? Is there a way to configure it? The official docs don't seem to provide information on this. Perhaps excluding third party CSS and manually importing 

'../node_modules/primereact/resources/primereact.css'
could be a solution?

cssreactjscreate-react-appreact-scripts

Answer №1

This particular issue is related to the primereact package. The problem arises from the presence of a browserslist rule in the package.json file, specifically stating "not ie <= 11":

"browserslist": [
  ">0.2%",
  "not dead",
  "not ie <= 11",
  "not op_mini all"
]

To resolve this issue, you will need to manually edit the 

node_modules/primereact/package.json
file and change "not ie <= 11" to "ie 10-11". This adjustment ensures that PostCSS Normalize adds necessary browser prefixes for IE11 support by setting the browserslist value to ie 10-11.

By making this change, you will enable the generation of -ms-flex prefixes in all rules within 

primereact/resources/primereact.css
.

If primereact does not support IE11, then this may not be considered a genuine issue since their package.json explicitly excludes IE11. In such cases, you can utilize patch-package to apply the necessary fixes after each npm/yarn modification (exercise caution as it excludes package.json by default).

Typically, CRA and react-scripts include prefixes for browsers specified in the project's package.json file. However, PostCSS Normalize can override these settings by inspecting each module's package.json file. If you encounter similar issues in the future, always check the "browserslist" option in the relevant module's package.json file.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to dynamically adjust the width of table columns using CSS/LESS on a per-column basis?

In this scenario, the table's column width is determined by the number of columns present. For example, if there are 4 columns in the table, each column's width would be set to a maximum of 25% of the table's overall width. With 3 columns, t ...

cssless

What's the issue with reducers receiving a Function instead of an Object in Redux?

I encountered an error in my react and redux project but I am unable to figure out how to fix it. Here is the error message: The reducer received unexpected type "Function" as the previous state. It was expecting an object with keys: "posts", "sidebar" ...

javascriptreactjsredux

Issue: ReactJS - $npm_package_version variable not functioning properly in build versionIn the current

After trying this suggested solution, unfortunately, it did not work for my specific case. The React application I am working on was initialized with CRA version 5.0.1 and currently has a version of 18.2.0. Additionally, the dotenv version being used is 1 ...

reactjstypescriptnpmcreate-react-app

Issue when activating Materialize Bootstrap

I'm facing an issue with my code. I have implemented a feature where a modal should be triggered after a user successfully adds a new user. However, I am using Materialize and the modal is not being triggered. Below is a snippet of my code: <div i ...

javascriptjquerycssmaterialize

Customize bullet list icons to adjust in size based on content using css

In my CMS project, the CMS team has a special requirement regarding unordered and ordered lists. They want the size of the bullet list icon to adjust according to the text content within the list. The image below shows the default design of a list item: ...

javascriptjqueryhtmlcss

What is the method for adjusting the right padding of the MUI Autocomplete Input field?

When using MUI, it automatically adds 65px of right padding to the outlined Autocomplete box. However, for my specific needs, I want to change this right padding to 50px. Despite my efforts to override the padding, I have been unsuccessful so far. You can ...

htmlcssmaterial-ui

creating unique icons in primefaces

I attempted to create a new icon for my p:commandButton, but unfortunately, I was unsuccessful. I followed the method outlined in this helpful link: PrimeFaces: how can I make use of customized icons? However, this approach did not work for me. Below i ...

cssjsfprimefaces

What can I do to eliminate the excess white space within my div element?

I've built this app using the create-react-app CLI, but I'm struggling to remove the extra white spaces surrounding my main container. Check out the screenshot below for reference. Currently, the only div in my app has the following CSS: .main ...

htmlcssreactjs

access various paths to distinct iframes

<?php // Specify the directory path, can be either absolute or relative $dirPath = "C:/xampp/htdocs/statistics/pdf/"; // Open the specified directory and check if it's opened successfully if ($handle = opendir($dirPath)) { // Keep readin ...

javascriptphphtmlcssiframe

When working with ReactJs, we leverage the powerful Formik library for managing forms alongside the Yup library for validation

Using ReactJs with the formik library to manage forms and Yup library for form validation rules. I am attempting to use the "yup.array().of()" validator to validate an array of fields (name, gender) passed from another component via props. These componen ...

reactjsformikyup

Exploring unstructured data with nodejs and elasticsearch

Currently, I am encountering an issue with my datatable in ReactJS. The datatable is being populated with data retrieved from elasticsearch. The data retrieval works perfectly fine without any filters applied. However, when filters are added to the data, t ...

node.jsreactjselasticsearch

Issue with React functional component not triggering re-render even after state change has occurred

I am having an issue with my code. I am using the useState hook to manage state for a variable called urls. When I click the button "push", I am updating the urls state using the setUrls function. However, even though the urls state has changed, React is ...

reactjs

What crucial element am I overlooking in the React Transition Group Component while implementing it for a carousel design?

I'm trying to add a feature to my Carousel where the opacity changes between images. When clicking on the icons, the images should transition smoothly. I've been using React Transition Group, but for some reason, it's not working as expected ...

javascriptcssreactjsreact-transition-group

Using Javascript to prevent css from changing the display

I want to make some CSS adjustments to a single element using a single script, but I want all the changes to be displayed at once. For example: $("#someelement").css({width:"100%"}); //this change should not be displayed $("#someelement").width($("#someel ...

javascriptjqueryhtmlcss

Selecting multiple items from a grid using the Ionic framework

I am looking to create a grid of category images in Ionic framework, where users can select multiple categories and send their values to the controller. However, I'm unsure about how to make this happen with Ionic framework. Below is the view I curre ...

htmlcssangularjsionic-frameworkmultiple-select

The enigmatic borders of a website

While working on a custom Wordpress theme, I encountered an issue where the entire body of the page was slightly pushed down. Using Chrome's inspector tool, I identified the following problematic styles: <style type="text/css" media="screen> ...

csswordpresswordpress-theming

The headline is being improperly rendered inside a black box on Firefox

A while back, I inquired about creating a black box with padding around a two-line headline. The solution worked well, except for older versions of Internet Explorer. However, in Firefox, there are occasional issues with the display looking jagged. This oc ...

cssfirefoxpaddinghtml

The v-text-field within the activator slot of the v-menu mysteriously vanishes upon navigating to a new route within a

Working on my Nuxt project with Vuetify, I encountered an issue where the v-text-field would disappear before the page changed after a user inputs date and clicks save. This seems to be related to route changing, but I have yet to find a suitable solutio ...

javascriptreactjsvue.jsvuetify.jsnuxtjs

"Hovering over the navigation tab does not trigger the dropdown menu

Can't seem to get my dropdown menu on the right to work when hovered. I feel like I must be missing something really simple, but I can't figure it out! When I use .vanish:hover .dropdown, it's not quite hitting the mark. What am I doing wron ...

htmlcss

What is the reason behind the exclusion of post categories from Strapi's API?

I have created two content types: post and category. The category has a relationship of many-to-many with the post content type. However, I am unable to retrieve each post's category through the API! The API URL that I am using to fetch all posts ...

reactjsnext.jsstrapiheadless-cms