custom props still preserved on code-splitted modules

[Altiano]

I'm making react project with create-react-app, and using code splitting to load module. The main module import index.css and all the custom css props is not preserved as expected. I put all the declarations there.

But other module say modA.js that got loaded asynchronously, its customs props still got preserved. here a example modA.js and its css file modA.js

import 'modA.css'

render() {
  return (
    <div className='ModA' />
  )
}

modA.css:

.ModA {
  font-size: var(--fs);
}

[ernsheong]

I found that you have to define the custom properties in :root in order for it to work.

:root {
  --foo-bar-color: red;
}

The following does not work:

html {
  --foo-bar-color: red;
}

[jonathantneal]

Would you provide a small test case to demonstrate the issue? Otherwise, I’m afraid I don’t understand your problem enough to help you. I’ll leave this open for a week if anyone would like to add to the discussion.