[email protected]

:root {
  --hds-spacing-1: 4px;
  --hds-spacing-2: 8px;
  /* etc */
}

.hds-theme-light {
  --hds-palette-primary-100: #ff3366;
}

.hds-theme-dark {
  --hds-palette-primary-100: #6633ff;
}

output.css

:root {
  --hds-spacing-1: 4px;
  --hds-spacing-2: 8px;
  /* etc */
}

/**
 * All class-scoped variables, and the class declarations are removed, so all of the

   .hds-theme-light {
      --hds-palette-primary-100: #ff3366;
   }

   .hds-theme-dark {
     --hds-palette-primary-100: #6633ff;
   }

   gets removed.
*/

.local-file-scope {
  --works-fine: 'yes'
}

path-to-local-file.css

.local-file-scope {
  --works-fine: 'yes';
}

styles.css

@import "@invisionapp/helios-base/dist/variables.css";

@import "./path/to/local/file.css";