postcss-import / postcss-custom-variables duplication

App.css

/* import tokens at top of App, along with any other global styles (e.g. normalize, etc.) */
@import "tokens";

ComponentOne.css

/* if tokens aren't imported here,
   will get a `variable is undefined and used without a fallback` warning
   and no fallback declaration in output
*/
@import "tokens";

.component-one {
  color: var(--color-red);
}

.component-one__heading {
  font-family: var(--font-family-fallback);
}

ComponentTwo.css

/* if tokens aren't imported here,
   will get a `variable is undefined and used without a fallback` warning
   and no fallback declaration in output
*/
@import "tokens";

.component-two {
  color: var(--color-blue);
}

.component-two__heading {
  font-family: var(--font-family-serif);
}

output.css

/* EXPECTED */
:root {
  --color-blue: #0e64b1;
  --color-red: #c62838;
  --font-family-fallback: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-family-serif: "Times New Roman", serif;
}

.component-one {
  color: #c62838;
  color: var(--color-red);
}

.component-one__heading {
  font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-family: var(--font-family-fallback);
}

.component-two {
  color: #0e64b1;
  color: var(--color-blue);
}

.component-two__heading {
  font-family: "Times New Roman", serif;
  font-family: var(--font-family-serif);
}


/* ACTUAL */
:root {
  --color-blue: #0e64b1;
  --color-red: #c62838;
  --font-family-fallback: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-family-serif: "Times New Roman", serif;
}

:root {
  --color-blue: #0e64b1;
  --color-red: #c62838;
  --font-family-fallback: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-family-serif: "Times New Roman", serif;
}

.component-one {
  color: #c62838;
  color: var(--color-red);
}

.component-one__heading {
  font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-family: var(--font-family-fallback);
}

:root {
  --color-blue: #0e64b1;
  --color-red: #c62838;
  --font-family-fallback: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-family-serif: "Times New Roman", serif;
}

.component-two {
  color: #0e64b1;
  color: var(--color-blue);
}

.component-two__heading {
  font-family: "Times New Roman", serif;
  font-family: var(--font-family-serif);
}

postcss.config.js

// largely taken from an ejected create-react-app

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.css$/,
        include: path.resolve(__dirname, '../src'),
        loader: ExtractTextPlugin.extract(
          Object.assign(
            {
              fallback: {
                loader: require.resolve('style-loader'),
                options: {
                  hmr: false,
                },
              },
              use: [
                {
                  loader: require.resolve('css-loader'),
                  options: {
                    importLoaders: 1,
                    minimize: false,
                    sourceMap: true,
                  },
                },
                {
                  loader: require.resolve('postcss-loader'),
                  options: {
                    // Necessary for external CSS imports to work
                    // https://github.com/facebookincubator/create-react-app/issues/2677
                    ident: 'postcss',
                    plugins: () => [
                      require('postcss-import')({
                        path: './src/styles',
                        addModulesDirectories: [path.resolve(__dirname, '../src/styles']
                      }),
                      require('postcss-cssnext')({
                        browsers: [
                          '>1%',
                          'last 4 versions',
                          'not ie < 10'
                        ],
                        features: {
                          customProperties: {}
                        }
                      })
                    ]
                  }
                }
              ]
            }
          )
        )
      }
    ]
  }
}

tokens.css

:root {
  --color-blue: #0e64b1;
  --color-red: #c62838;
  --font-family-fallback: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-family-serif: "Times New Roman", serif;
}