multiple CSS Module issue
dual brand CSS module implementation issue.
npm run start:cocacolaORnpm run start:pepsi
- default body color blue
- cocacola has it's text colors red
- pepsi has it's text colors black
- some views might have different colors (expected color in text)
Having more than onestyle tag marked withmodule attribute breaks implementation and only the last one in the file gets it's___CSS_LOADER_EXPORT___.locals hash exported.
Simplest example:
<template> <h2> multiple module=> <span :class="$style.multi1">orange</span> | <span :class="$style.multi2">purple</span> </h2></template><style lang="scss" module>.multi1 { color: orange;}</style><style lang="scss" module>.multi2 { color: purple;}</style>
While each style tag has it's data (sourcemap, values, etc) pushed to___CSS_LOADER_EXPORT___, the exports for CSS Module are overwritten by the next style tag.
First style tag:
// Module___CSS_LOADER_EXPORT___.push([module.id, ".module-multiple_multi1_[HASH]" /* sourcemap, source, etc*/]);// Exports___CSS_LOADER_EXPORT___.locals = {"multi1": ".module-multiple_multi1_[HASH]"};
Second style tag:
// Module___CSS_LOADER_EXPORT___.push([module.id, ".module-multiple_multi2_[HASH]" /* sourcemap, source, etc*/]);// Exports___CSS_LOADER_EXPORT___.locals = {"multi2": ".module-multiple_multi2_[HASH]"};
Final Code:
<h2> multiple module=> <span>orange</span> | <span>purple</span> </h2>
The first style tag's locals export is overwritten by the second, instead of merged/ammended, and therefore the first span class becomes empty (as the hashmap of class->hash doesn't exist).