postcss-import: Duplicated @imports within imported style sheets throw warnings, break

This may be a duplicate, but still documenting in case it is helpful.

I have my css broken into very small components. For this particular error here is what is happening:

I have

vars/colors.css
vars/global.css
textInput.css
buttons.css

Both textInput.css and buttons.css import colors.css and global.css

In a form component I have

@import 'textInput.css'
@import 'buttons.css'

which gives me the following warnings:

WARNING in ./~/css-loader?sourceMap&-minimize&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./src/forms/forms.css
postcss-custom-properties: /Users/jasongonzales/work/src/styles/variables/colors.css:5:3: Custom property ignored: not scoped to the top-level :root eleme
nt (:root { ... --lightest-grey: ... }), in atrule

… and later in the cascade of warnings

WARNING in ./~/css-loader?sourceMap&-minimize&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./src/forms/forms.css
postcss-custom-properties: /Users/jasongonzales/work/src/styles/textInput.css:19:5: variable '--light-blue' is undefined and used without a fallback

and then none of the styles are applied.

If I only import textInput.css or buttons.css all styles are applied.