3

I am working on a project where I am developing a set of UI components for developers to use to build out their sites. I have created an NPM package which consists of just the CSS required to implement an Accordion component.

I installed my css-accordion-component as a development dependency via npm install to a React project created using create-react-app. My Accordion.js file in the React project imports the css-accordion package from node_modules like so:

import "css-accordion-component/lib/accordion.css";

This does bring the styles into my project but none of the CSS Variables defined and used in the file are resolving. The CSS file looks like so:

:root {
    --Accordion-bgColor: #fff;
};

.Accordion {
    background-color: var(--Accordion-bgColor);
}

I believe it may be because the React project built with create-react-app is not running this imported css file through its post-css plugins. There seems to be a lot of out of date advice online about how to correctly configure Webpack to use PostCSS. Any advice would be really great.

James Howell
  • 1,392
  • 5
  • 24
  • 42

1 Answers1

2
:root {
    --Accordion-bgColor: #fff;
};

^^ The semi-colon here proved to be the problem. It caused the whole :root block to fail to render.

James Howell
  • 1,392
  • 5
  • 24
  • 42