How can I inject CSS vars into styles of Node dependencies with Webpack?

Intro

Hello! I am currently creating a web app using NodeJS, npm, React, Webpack and PostCSS and I am having trouble setting the CSS loading up.

I’ve split the code into two different Node modules:

  • A business code module that contains my business logic and represents the functionality of my actual web app
  • And a components library module that contains a number of React components

I decided to split my code into two modules because those React components felt generic and reusable enough to be able to also use them in other projects.

My Setup

Each React component contains a JSX class and a CSS style, looking like this:

An ?index.jsx looks like this (using Section as example, it’s just a React representation of <div>):

import React from "react"
import PropTypes from "prop-types"
import classnames from "classnames"
import css from "./style.css"

export default class Section extends React.Component {

    static propTypes = {
        children: PropTypes.node,
        className: PropTypes.string
    }

    render() {
        return (
            <div className={classnames(this.props.className, css.section)}>
                {this.props.children}
            </div>
        )
    }

}

The style.css looks like this:

@import 'src/theme.css'; // This does not work!

.section {
    padding: 30px;
    border-radius: 3px;
    background: hsla(0, 0%, var(--section-lightness, 100%), var(--section-opacity, 0.1));
    box-shadow: hsla(0, 0%, 0%, var(--section-shadow-opacity, 0.5)) 2px 2px 5px;
}

The Section is like a <div>, but the style defaults to some CSS rules that are dynamically resolved using CSS vars. The resolving comes from postcss-custom-properties which is included in the postcss-cssnext I am using.

My Problem

All of this code is in my components library module. The theme.css (which contains the variable definitions) is in my business code module which has the components library module listed in dependencies in package.json.

What is the best approach to inject the theme.css (from business code module) into all components’ style.css (from components library module)?
The best way (I guess) to resolve CSS variables is using @import in the style.css files, but I can’t do this, because the components library module can’t @import a file from its dependents.

Is there a way to make the @import dynamic? Like @import “business_code_module/src/theme.css” while still keeping the components library module reusable?