Styles remains on .js build output when they already got extracted to their own .css file #3397

ferdinando-ferreira · 2021-05-13T06:13:38Z

Describe the bug

The styles from a vue project build remain present on declared but not used variables on the resulting .js files even after it gets extracted to their own .css files.
On a project with a large css (for instance, importing a framework), this can bloat the javascript file by 400, 500k

Reproduction

git clone https://github.com/vitejs/vite.git vite
cd vite
yarn
yarn build
cd packages/playground/vue
yarn build

Below are the resulting files, notice all styles are duplicated on the built javascript file on variables not used anywhere like Hmr_vue_vue_type_style_index_0_lang, PreProcessors_vue_vue_type_style_index_0_lang and PreProcessors_vue_vue_type_style_index_1_scoped_true_lang

index.a4fdb80a.css

.hmr-inc {
  color: red;
}
.pug {
  color: magenta;
}.pug-less[data-v-2bd98200] {
  color: green;
}

._blue-color_1s4zt_2 {
  color: blue;
}
._orange-color_1iw5l_1 {
  color: orange;
}
img[data-v-7ad4e7cc] {
  width: 30px;
}
.relative-style-url[data-v-7ad4e7cc] {
  display: inline-block;
  height: 30px;
  width: 30px;
  background-image: url('/assets/asset.b9f46fb3.png');
  background-size: 30px;
}
.src-imports-style[data-v-2c227604] {
  color: tan;
}

div[data-v-7d107005-s] {
  color: red;
}

index.19cdf8f1.js

var __defProp = Object.defineProperty;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {enumerable: true, configurable: true, writable: true, value}) : obj[key] = value;
var __objSpread = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
import {d as defineComponent, r as ref, o as openBlock, c as createBlock, a as createVNode, t as toDisplayString, F as Fragment, s as setScopeId, w as withCtx, b as createTextVNode, g as getCurrentInstance, e as renderSlot, u as unref, f as debounce, h as createApp} from "./vendor.0ae2c9e3.js";
const _hoisted_1$9 = /* @__PURE__ */ createVNode("h2", {class: "hmr"}, "HMR", -1);
const _hoisted_2$8 = /* @__PURE__ */ createVNode("p", null, "Click the button then edit this message. The count should be preserved.", -1);
var _sfc_main$9 = defineComponent({
  expose: [],
  setup(__props) {
    let foo = 0;
    const count = ref(foo);
    return (_ctx, _cache) => {
      return openBlock(), createBlock(Fragment, null, [
        _hoisted_1$9,
        _hoisted_2$8,
        createVNode("button", {
          class: "hmr-inc",
          onClick: _cache[1] || (_cache[1] = ($event) => count.value++)
        }, "count is " + toDisplayString(count.value), 1)
      ], 64);
    };
  }
});
var Hmr_vue_vue_type_style_index_0_lang = "\n.hmr-inc {\n  color: red;\n}\n";
const _hoisted_1$8 = /* @__PURE__ */ createVNode("h2", null, "Syntax Support", -1);
const _hoisted_2$7 = {class: "syntax"};
const _sfc_main$8 = {
  expose: [],
  setup(__props) {
    const foo = {
      bar: "baz"
    };
    const a = ref({
      b: foo == null ? void 0 : foo.bar
    });
    return (_ctx, _cache) => {
      var _a;
      return openBlock(), createBlock(Fragment, null, [
        _hoisted_1$8,
        createVNode("p", _hoisted_2$7, toDisplayString((_a = a.value) == null ? void 0 : _a.b), 1)
      ], 64);
    };
  }
};
var PreProcessors_vue_vue_type_style_index_0_lang = ".pug {\n  color: magenta;\n}";
var PreProcessors_vue_vue_type_style_index_1_scoped_true_lang = ".pug-less[data-v-2bd98200] {\n  color: green;\n}\n";
setScopeId("data-v-2bd98200");
const _hoisted_1$7 = /* @__PURE__ */ createVNode("h2", {class: "pre-processors"}, "Pre-Processors", -1);
const _hoisted_2$6 = /* @__PURE__ */ createVNode("p", {class: "pug"}, 'This is rendered from <template lang="pug"> and styled with <style lang="sass">. It should be megenta.', -1);
const _hoisted_3$4 = /* @__PURE__ */ createVNode("p", {class: "pug-less"}, 'This is rendered from <template lang="pug"> and styled with <style lang="less">. It should be green.', -1);
const _hoisted_4$2 = /* @__PURE__ */ createVNode("div", {class: "pug-slot"}, "slot content", -1);
setScopeId(null);
const _sfc_main$7 = {
  expose: [],
  setup(__props) {
    function SlotComponent(_, {slots}) {
      return slots["test-slot"]();
    }
    return (_ctx, _cache) => {
      return openBlock(), createBlock(Fragment, null, [
        _hoisted_1$7,
        _hoisted_2$6,
        _hoisted_3$4,
        createVNode(SlotComponent, null, {
          "test-slot": withCtx(() => [
            _hoisted_4$2
          ]),
          _: 1
        })
      ], 64);
    };
  }
};
_sfc_main$7.__scopeId = "data-v-2bd98200";
const blueColor = "_blue-color_1s4zt_2";
var style0 = {
  blueColor
};
const orangeColor = "_orange-color_1iw5l_1";
var style1 = {
  orangeColor
};
const _sfc_main$6 = {};
const _hoisted_1$6 = /* @__PURE__ */ createVNode("h2", null, "CSS Modules", -1);
const _hoisted_2$5 = /* @__PURE__ */ createTextVNode(" <style module> - this should be blue ");
const _hoisted_3$3 = /* @__PURE__ */ createTextVNode(" CSS - this should be orange ");
function _sfc_render$3(_ctx, _cache) {
  return openBlock(), createBlock(Fragment, null, [
    _hoisted_1$6,
    createVNode("div", {
      class: ["sfc-css-modules", _ctx.$style.blueColor]
    }, [
      _hoisted_2$5,
      createVNode("pre", null, toDisplayString(_ctx.$style), 1)
    ], 2),
    createVNode("div", {
      class: ["sfc-css-modules-with-pre", _ctx.mod.orangeColor]
    }, [
      _hoisted_3$3,
      createVNode("pre", null, toDisplayString(_ctx.mod), 1)
    ], 2)
  ], 64);
}
const cssModules = _sfc_main$6.__cssModules = {};
cssModules["$style"] = style0;
cssModules["mod"] = style1;
_sfc_main$6.render = _sfc_render$3;
var _imports_1 = "/assets/asset.b9f46fb3.png";
var _imports_2 = "/icon.png";
var _imports_3 = "/assets/fragment.624136a7.svg";
var Assets_vue_vue_type_style_index_0_scoped_true_lang = "\nimg[data-v-7ad4e7cc] {\n  width: 30px;\n}\n.relative-style-url[data-v-7ad4e7cc] {\n  display: inline-block;\n  height: 30px;\n  width: 30px;\n  background-image: url('__VITE_ASSET__b9f46fb3__');\n  background-size: 30px;\n}\n";
const _sfc_main$5 = {};
setScopeId("data-v-7ad4e7cc");
const _hoisted_1$5 = _imports_3 + "#icon-heart-view";
const _hoisted_2$4 = /* @__PURE__ */ createVNode("h2", null, "Template Static Asset Reference", -1);
const _hoisted_3$2 = /* @__PURE__ */ createVNode("p", null, [
  /* @__PURE__ */ createTextVNode(" Relative "),
  /* @__PURE__ */ createVNode("img", {
    class: "relative-import",
    src: _imports_1
  })
], -1);
const _hoisted_4$1 = /* @__PURE__ */ createVNode("p", null, [
  /* @__PURE__ */ createTextVNode(" Absolute "),
  /* @__PURE__ */ createVNode("img", {
    class: "absolute-import",
    src: _imports_1
  })
], -1);
const _hoisted_5 = /* @__PURE__ */ createVNode("p", null, [
  /* @__PURE__ */ createTextVNode(" Absolute import from public dir "),
  /* @__PURE__ */ createVNode("img", {
    class: "public-import",
    src: _imports_2
  })
], -1);
const _hoisted_6 = /* @__PURE__ */ createVNode("p", null, [
  /* @__PURE__ */ createTextVNode(" Relative URL in style "),
  /* @__PURE__ */ createVNode("span", {class: "relative-style-url"})
], -1);
const _hoisted_7 = /* @__PURE__ */ createVNode("p", null, [
  /* @__PURE__ */ createTextVNode(" SVG Fragment reference "),
  /* @__PURE__ */ createVNode("img", {
    class: "svg-frag",
    style: {"width": "32px", "height": "32px"},
    src: _hoisted_1$5,
    alt: ""
  })
], -1);
setScopeId(null);
function _sfc_render$2(_ctx, _cache) {
  return openBlock(), createBlock(Fragment, null, [
    _hoisted_2$4,
    _hoisted_3$2,
    _hoisted_4$1,
    _hoisted_5,
    _hoisted_6,
    _hoisted_7
  ], 64);
}
_sfc_main$5.render = _sfc_render$2;
_sfc_main$5.__scopeId = "data-v-7ad4e7cc";
var block0 = (Comp) => {
  Comp.i18n = {"en": {"hello": "hello,vite!"}, "ja": {"hello": "\u3053\u3093\u306B\u3061\u306F\u3001vite\uFF01"}};
};
function useI18n(locale = "en") {
  const instance = getCurrentInstance();
  const resources = instance.type.i18n || {en: {}};
  function t(key) {
    const res = resources[locale] || {};
    return res[key];
  }
  return {t};
}
const _sfc_main$4 = {
  setup() {
    return __objSpread({}, useI18n("ja"));
  }
};
const _hoisted_1$4 = /* @__PURE__ */ createVNode("h2", null, "Custom Blocks", -1);
const _hoisted_2$3 = {class: "custom-block"};
function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createBlock(Fragment, null, [
    _hoisted_1$4,
    createVNode("p", _hoisted_2$3, toDisplayString(_ctx.t("hello")), 1)
  ], 64);
}
if (typeof block0 === "function")
  block0(_sfc_main$4);
_sfc_main$4.render = _sfc_render$1;
var _sfc_main$3 = defineComponent({
  setup() {
    return {
      msg: "hello from script src!"
    };
  }
});
setScopeId("data-v-2c227604");
const _hoisted_1$3 = /* @__PURE__ */ createVNode("h2", null, "SFC Src Imports", -1);
const _hoisted_2$2 = {class: "src-imports-script"};
const _hoisted_3$1 = /* @__PURE__ */ createVNode("div", {class: "src-imports-style"}, "This should be tan", -1);
setScopeId(null);
function render(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createBlock(Fragment, null, [
    _hoisted_1$3,
    createVNode("div", _hoisted_2$2, toDisplayString(_ctx.msg), 1),
    _hoisted_3$1
  ], 64);
}
var style_css_vue_type_style_index_0_src_scoped_true_lang = ".src-imports-style[data-v-2c227604] {\n  color: tan;\n}\n";
_sfc_main$3.render = render;
_sfc_main$3.__scopeId = "data-v-2c227604";
var Slotted_vue_vue_type_style_index_0_scoped_true_lang = "\ndiv[data-v-7d107005-s] {\n  color: red;\n}\n";
const _sfc_main$2 = {};
setScopeId("data-v-7d107005");
const _hoisted_1$2 = /* @__PURE__ */ createVNode("h2", null, ":slotted", -1);
setScopeId(null);
function _sfc_render(_ctx, _cache) {
  return openBlock(), createBlock("div", null, [
    _hoisted_1$2,
    renderSlot(_ctx.$slots, "default", {}, void 0, true)
  ]);
}
_sfc_main$2.render = _sfc_render;
_sfc_main$2.__scopeId = "data-v-7d107005";
const _hoisted_1$1 = /* @__PURE__ */ createVNode("h2", null, "Scan Deps from <script setup lang=ts> blocks", -1);
const _hoisted_2$1 = {class: "scan"};
var _sfc_main$1 = defineComponent({
  expose: [],
  setup(__props) {
    return (_ctx, _cache) => {
      return openBlock(), createBlock(Fragment, null, [
        _hoisted_1$1,
        createVNode("div", _hoisted_2$1, toDisplayString(typeof unref(debounce) === "function" ? "ok" : "error"), 1)
      ], 64);
    };
  }
});
const _hoisted_1 = /* @__PURE__ */ createVNode("div", {class: "comments"}, null, -1);
const _hoisted_2 = /* @__PURE__ */ createVNode("h1", null, "Vue SFCs", -1);
const _hoisted_3 = {class: "hmr-block"};
const _hoisted_4 = /* @__PURE__ */ createVNode("div", {class: "slotted"}, "this should be red", -1);
var _sfc_main = defineComponent({
  expose: [],
  setup(__props) {
    const time = ref("loading...");
    window.addEventListener("load", () => {
      setTimeout(() => {
        const [entry] = performance.getEntriesByType("navigation");
        time.value = `loaded in ${entry.duration.toFixed(2)}ms.`;
      }, 0);
    });
    return (_ctx, _cache) => {
      return openBlock(), createBlock(Fragment, null, [
        _hoisted_1,
        _hoisted_2,
        createVNode("pre", null, toDisplayString(time.value), 1),
        createVNode("div", _hoisted_3, [
          createVNode(_sfc_main$9)
        ]),
        createVNode(_sfc_main$8),
        createVNode(_sfc_main$7),
        createVNode(_sfc_main$6),
        createVNode(_sfc_main$5),
        createVNode(_sfc_main$4),
        createVNode(_sfc_main$3),
        createVNode(_sfc_main$2, null, {
          default: withCtx(() => [
            _hoisted_4
          ]),
          _: 1
        }),
        createVNode(_sfc_main$1)
      ], 64);
    };
  }
});
createApp(_sfc_main).mount("#app");

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

  System:
    OS: Windows 10 10.0.19041
    CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
    Memory: 3.22 GB / 7.91 GB
  Binaries:
    Node: 15.11.0
    Yarn: 1.22.10
    npm: 7.6.0
  Browsers:
    Chrome: 90.0.4430.93
    Edge: Spartan (44.19041.906.0), Chromium (90.0.818.51)
    Internet Explorer: 11.0.19041.1

Used package manager:
yarn

Logs

N/A

Before submitting the issue, please make sure you do the following

Read the Contributing Guidelines.
Read the docs.
Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
Provide a description in this issue that describes the bug.
Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

The text was updated successfully, but these errors were encountered:

fixes vitejs#3397

test fixes vitejs#3397

tests fixes vitejs#3397

ferdinando-ferreira added the pending triage label May 13, 2021

ferdinando-ferreira added a commit to ferdinando-ferreira/vite that referenced this issue May 13, 2021

fix: avoid css leaking into emitted javascript

a8045ca

fixes vitejs#3397

ferdinando-ferreira mentioned this issue May 13, 2021

fix: avoid css leaking into emitted javascript #3402

Merged

9 tasks

ferdinando-ferreira added a commit to ferdinando-ferreira/vite that referenced this issue May 13, 2021

fix: avoid css leaking into emitted javascript

55dd48f

fixes vitejs#3397

ferdinando-ferreira added a commit to ferdinando-ferreira/vite that referenced this issue May 13, 2021

fix: avoid css leaking into emitted javascript

11066e5

fixes vitejs#3397

ferdinando-ferreira added a commit to ferdinando-ferreira/vite that referenced this issue May 13, 2021

test: add text to the fix for vitejs#3397

3a6c10c

test fixes vitejs#3397

ferdinando-ferreira added a commit to ferdinando-ferreira/vite that referenced this issue May 13, 2021

test: add text to the fix for vitejs#3397

97cba80

test fixes vitejs#3397

ferdinando-ferreira added a commit to ferdinando-ferreira/vite that referenced this issue May 13, 2021

test: add text to the fix for vitejs#3397

b941318

tests fixes vitejs#3397

antfu closed this as completed in #3402 May 23, 2021

github-actions bot locked and limited conversation to collaborators Jul 16, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Styles remains on .js build output when they already got extracted to their own .css file #3397

Styles remains on .js build output when they already got extracted to their own .css file #3397

ferdinando-ferreira commented May 13, 2021

Styles remains on .js build output when they already got extracted to their own .css file #3397

Styles remains on .js build output when they already got extracted to their own .css file #3397

Comments

ferdinando-ferreira commented May 13, 2021

Describe the bug

Reproduction

System Info

Logs

Before submitting the issue, please make sure you do the following