Styles on the first build and styles upon HMR rebuild are not the same (VueJS, SFC) 2.6.0

[michaelKurowski]

🐛 bug report

Not all styles are emitted on the first build. Once HMR hits, they correct themselves.
The problem exists for VueJS SFC files.
All files are imported with static ES imports.

Please look below, focus on the .skill-circle class. Notice that it's absent on the first build, but it exists after rebuild.
Another thing is .skill class. It exists on the first build despite not being present in the codebase.
On the first build:

.modal[data-v-0a1aec] {
  z-index: 100;
  position: absolute;
  top: 0;
  left: 0;
}

.modal--centered[data-v-0a1aec] {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.event {
  max-width: 500px;
  min-width: 500px;
  min-height: 300px;
  background: silver;
  flex-direction: column;
  padding: 10px;
  display: flex;
}

.header {
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  display: flex;
}

.description {
  background: gray;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 5px;
}

.event {
  max-width: 500px;
  min-width: 500px;
  min-height: 300px;
  background: silver;
  flex-direction: column;
  padding: 10px;
  display: flex;
}

.header {
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  display: flex;
}

.description {
  background: gray;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 5px;
}

.list {
  overflow-y: scroll;
}

.team-entry {
  display: flex;
}

.team-entry__officer-description {
  flex-direction: column;
  display: flex;
}

.avatar {
  width: 80px;
  height: 100px;
}

.skill {
  width: 25px;
  height: 25px;
  background-color: teal;
  border-radius: 100%;
}

:root {
  overflow: hidden;
}

body {
  margin: 0;
}

/*# sourceMappingURL=index.fb65567b.css.map */

After HMR

.modal[data-v-19736d] {
  z-index: 100;
  position: absolute;
  top: 0;
  left: 0;
}

.modal--centered[data-v-19736d] {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.teams-manager[data-v-0e206b] {
  max-width: 500px;
  min-width: 500px;
  min-height: 300px;
  background: silver;
  flex-direction: column;
  padding: 10px;
  display: flex;
}

.header[data-v-0e206b] {
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  display: flex;
}

.description[data-v-0e206b] {
  background: gray;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 5px;
}

.list[data-v-0e206b] {
  height: 400px;
  overflow-y: scroll;
}

.team-entry[data-v-0e206b] {
  display: flex;
}

.team-entry__officer-description[data-v-0e206b] {
  flex-direction: column;
  display: flex;
}

.avatar[data-v-0e206b] {
  width: 80px;
  height: 100px;
}

.skill-icon[data-v-0e206b] {
  width: 25px;
  height: 25px;
}

.skill-circle[data-v-0e206b] {
  width: 35px;
  height: 35px;
  background-color: teal;
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
}

.tooltipable:hover .tooltiptext[data-v-0e206b] {
  visibility: visible;
}

.tooltipable .tooltiptext[data-v-0e206b] {
  visibility: hidden;
  width: 120px;
  color: #fff;
  text-align: center;
  z-index: 1;
  background-color: #000;
  border-radius: 6px;
  flex-basis: 0;
  padding: 5px 0;
  position: absolute;
}

.event[data-v-3bab80] {
  max-width: 500px;
  min-width: 500px;
  min-height: 300px;
  background: silver;
  flex-direction: column;
  padding: 10px;
  display: flex;
}

.header[data-v-3bab80] {
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  display: flex;
}

.description[data-v-3bab80] {
  background: gray;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 5px;
}

:root {
  overflow: hidden;
}

body {
  margin: 0;
}

/*# sourceMappingURL=index.fb65567b.css.map */

This is how the file that has these styles looks like in the sourcecode:

<template>
  <Modal :center="true">
    <div class="teams-manager">
      <div class="header">
        <div>
          Crew
        </div>
        <div @click="$emit('close')" style="cursor: pointer;">
          X
        </div>
      </div>
      <div class="list" v-if="teams">
        <div v-for="team in teams" :key="team.uuid" class="team-entry">
          <div v-html="team.officer.picture" class='avatar'/>
          <div class="team-entry__officer-description">
            <div>
              {{ team.officer.name }}
            </div>
            <div class='tooltipable' v-for="skill in team.officer.skills" :key="skill.uuid" >
              <div class="skill-circle ">
                <img  class='skill-icon' :src="skill.icon"/>
              </div>
              <span class="tooltiptext"> {{ skill.name }} </span>
            </div>
            </div>
        </div>
      </div>

    </div>
  </Modal>
</template>

<script>
import Modal from './modal.vue'
export default {
    components: {
      Modal
    },
    props: {
      teams: {
        type: Array,
        default: []
      }
    }
  };
</script>
<style scoped>
  .teams-manager {  
    max-width: 500px;
    min-width: 500px;
    min-height: 300px;
    background: silver;
    display: flex;
    flex-direction: column;
    padding: 10px;
  }
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
  }
  .description {
    background: grey;
    margin-top: 10px;
    padding: 5px;
    margin-bottom: 10px;
  }
  .list {
    overflow-y: scroll;
    height: 400px;
  }
  .team-entry {
    display: flex;

  }
  .team-entry__officer-description {
    display: flex;
    flex-direction: column;
  }
  .avatar {
    width: 80px;
    height: 100px;
  }
  .skill-icon {
    width: 25px;
    height: 25px;
  }
  .skill-circle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    background-color: teal;
    border-radius: 100%;
  }
  .tooltipable:hover .tooltiptext {
    visibility: visible;
  }  .tooltipable .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    flex-basis: 0;
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
  }
</style>

🎛 Configuration (.babelrc, package.json, cli command)

Command
npm start

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.{zip,tgz,mp3,wav}": ["@parcel/transformer-raw"],
    "*.vue": ["@parcel/transformer-vue"]
  }
}

I run version 2.6.0 of all @parcel/ packages. There's no .babelrc file in the project.

🤔 Expected Behavior

Parcel shouldn't lose styles

😯 Current Behavior

Parcel loses some styles upon the first build

💁 Possible Solution

🔦 Context

💻 Code Sample

🌍 Your Environment

Software	Version(s)
Parcel	2.6.0
Node	v17.0.1
npm/Yarn	npm 8.1.0
Operating System	Linux (5.13.19-2-MANJARO)

[michaelKurowski]

I did solve the issue, apperently CSS file was cached in the Chrome browser, although it means that the cache header for CSS haf to be set wrongly at some point by the rollup.

[mischnic]

Duplicate of #7546 then