[{"data":1,"prerenderedAt":820},["ShallowReactive",2],{"content:\u002Fjavascript-bundle-optimization-code-splitting\u002Ftree-shaking-and-dead-code-elimination\u002Fsideeffects-false-broke-my-css-imports":3,"surroundings:\u002Fjavascript-bundle-optimization-code-splitting\u002Ftree-shaking-and-dead-code-elimination\u002Fsideeffects-false-broke-my-css-imports":811},{"id":4,"title":5,"body":6,"description":790,"extension":791,"meta":792,"navigation":804,"path":805,"seo":806,"stem":809,"__hash__":810},"content\u002Fjavascript-bundle-optimization-code-splitting\u002Ftree-shaking-and-dead-code-elimination\u002Fsideeffects-false-broke-my-css-imports\u002Findex.md","sideEffects: false Broke My CSS Imports",{"type":7,"value":8,"toc":782},"minimark",[9,14,34,42,47,80,213,217,229,235,245,251,255,260,331,334,340,374,380,446,452,568,572,575,578,581,659,662,666,678,695,704,713,729,742,746,767,772,775,778],[10,11,13],"h1",{"id":12},"why-sideeffects-false-deleted-your-css-and-how-to-fix-it","Why sideEffects: false Deleted Your CSS (and How to Fix It)",[15,16,17,18,23,24,28,29,33],"p",{},"This walkthrough sits under ",[19,20,22],"a",{"href":21},"\u002Fjavascript-bundle-optimization-code-splitting\u002Ftree-shaking-and-dead-code-elimination\u002F","Tree Shaking and Dead Code Elimination"," inside ",[19,25,27],{"href":26},"\u002Fjavascript-bundle-optimization-code-splitting\u002F","JavaScript Bundle Optimization & Code Splitting",". You added ",[30,31,32],"code",{},"\"sideEffects\": false"," to a package to unlock tree shaking, the bundle got pleasingly smaller, and the production build shipped unstyled components. The flag is a promise to the bundler that importing any module from this package does nothing except define exports — and a stylesheet import does exactly the thing you just promised it would not.",[15,35,36,37,41],{},"The fix is not to remove the flag. It is to declare which files ",[38,39,40],"em",{},"do"," have side effects.",[43,44,46],"h2",{"id":45},"rapid-diagnosis-confirm-the-bundler-dropped-it","Rapid Diagnosis: Confirm the Bundler Dropped It",[48,49,50,58,64,74],"ul",{},[51,52,53,57],"li",{},[54,55,56],"strong",{},"Compare dev and production."," Styles present in development and missing in production is the signature: dev builds usually skip tree shaking entirely.",[51,59,60,63],{},[54,61,62],{},"Search the output for a known selector."," If a class from the missing stylesheet does not appear in any emitted CSS file, it was eliminated, not merely overridden.",[51,65,66,69,70,73],{},[54,67,68],{},"Check which package declares the flag."," The offending ",[30,71,72],{},"package.json"," may be an internal workspace package rather than your app's.",[51,75,76,79],{},[54,77,78],{},"Look for other side-effectful imports."," Polyfills, global registrations, web component definitions and analytics bootstraps fail the same way and are less visible than missing styles.",[81,82,89,90,97,98,97,102,97,106,97,115,97,122,97,129,97,138,97,143,97,148,97,153,97,159,97,163,97,167,97,172,97,176,97,183,97,187,97,190,97,192,97,195,97,198,97,202,97,205,97,207,97,210,97],"svg",{"xmlns":83,"viewBox":84,"width":85,"role":86,"ariaLabel":87,"style":88},"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg","0 0 760 244","100%","img","Module graph where an import of a CSS file has no used exports, so a blanket sideEffects false lets the bundler drop it, while a scoped sideEffects array keeps the CSS and still shakes the unused JavaScript","height:auto;max-width:760px;display:block;margin:1.75rem auto;font-family:inherit;color:var(--fp-svg-ink)","\n  ",[91,92],"rect",{"className":93,"x":95,"y":95,"width":85,"height":85,"fill":96},[94],"svg-canvas","0","#ffffff"," ",[99,100,101],"title",{},"What the bundler is allowed to delete",[103,104,105],"desc",{},"With sideEffects false, an imported stylesheet with no used exports is eliminated along with unused JavaScript; with a scoped array the stylesheet is preserved while the unused module is still removed.",[91,107],{"x":108,"y":108,"width":109,"height":110,"rx":111,"fill":112,"stroke":113,"style":114},"1","758","242","10","none","currentColor","stroke-opacity:0.18",[116,117,121],"text",{"x":118,"y":119,"fill":113,"style":120},"24","32","font-size:16px;font-weight:700","Same graph, two permissions",[116,123,128],{"x":124,"y":125,"fill":113,"style":126,"textAnchor":127},"170","62","font-size:11.5px;font-weight:700;","middle","sideEffects: false",[91,130],{"x":131,"y":132,"width":133,"height":134,"rx":135,"fill":136,"stroke":136,"style":137},"70","76","200","26","4","#0466c8","fill-opacity:0.2;stroke-opacity:0.55",[116,139,142],{"x":124,"y":140,"fill":113,"style":141,"textAnchor":127},"94","font-size:10.5px;","index.js  (entry)",[91,144],{"x":145,"y":146,"width":147,"height":134,"rx":135,"fill":136,"stroke":136,"style":137},"40","118","120",[116,149,152],{"x":150,"y":151,"fill":113,"style":141,"textAnchor":127},"100","136","Button.js ✓",[91,154],{"x":155,"y":146,"width":147,"height":134,"rx":135,"fill":113,"stroke":113,"strokeDashArray":156,"style":158},"176",[135,157],"3","fill-opacity:0.06;stroke-opacity:0.4",[116,160,162],{"x":161,"y":151,"fill":113,"style":141,"textAnchor":127},"236","unused.js ✗",[91,164],{"x":145,"y":165,"width":147,"height":134,"rx":135,"fill":113,"stroke":113,"strokeDashArray":166,"style":158},"158",[135,157],[116,168,171],{"x":150,"y":155,"fill":169,"style":170,"textAnchor":127},"#b8860b","font-size:10.5px;font-weight:700;","button.css ✗",[116,173,175],{"x":124,"y":174,"fill":169,"style":126,"textAnchor":127},"208","styles deleted",[177,178],"line",{"x1":179,"y1":180,"x2":179,"y2":181,"stroke":113,"style":182},"380","50","220","stroke-opacity:0.2",[116,184,186],{"x":185,"y":125,"fill":113,"style":126,"textAnchor":127},"570","sideEffects: [\"*.css\"]",[91,188],{"x":189,"y":132,"width":133,"height":134,"rx":135,"fill":136,"stroke":136,"style":137},"470",[116,191,142],{"x":185,"y":140,"fill":113,"style":141,"textAnchor":127},[91,193],{"x":194,"y":146,"width":147,"height":134,"rx":135,"fill":136,"stroke":136,"style":137},"440",[116,196,152],{"x":197,"y":151,"fill":113,"style":141,"textAnchor":127},"500",[91,199],{"x":200,"y":146,"width":147,"height":134,"rx":135,"fill":113,"stroke":113,"strokeDashArray":201,"style":158},"576",[135,157],[116,203,162],{"x":204,"y":151,"fill":113,"style":141,"textAnchor":127},"636",[91,206],{"x":194,"y":165,"width":147,"height":134,"rx":135,"fill":136,"stroke":136,"style":137},[116,208,209],{"x":197,"y":155,"fill":113,"style":141,"textAnchor":127},"button.css ✓",[116,211,212],{"x":185,"y":174,"fill":113,"style":126,"textAnchor":127},"styles kept, JS still shaken",[43,214,216],{"id":215},"root-cause-analysis","Root Cause Analysis",[15,218,219,97,222,224,225,228],{},[54,220,221],{},"1. The flag is a global promise.",[30,223,32],{}," says ",[38,226,227],{},"every"," module in the package is free of side effects. A CSS import's entire purpose is its side effect, so the claim is false and the bundler acts on it.",[15,230,231,234],{},[54,232,233],{},"2. Only production builds enforce it."," Development builds usually skip minification and elimination, so the bug is invisible until a production deploy — often days after the change.",[15,236,237,240,241,244],{},[54,238,239],{},"3. Re-export barrels hide the import."," An ",[30,242,243],{},"index.js"," that re-exports a component whose module imports its stylesheet gives the bundler a clean opportunity to drop the whole module when only a sibling export is used.",[15,246,247,250],{},[54,248,249],{},"4. Other side effects fail silently."," Missing CSS is visible. A dropped polyfill or an unregistered custom element produces a runtime error on some browsers only, which can survive review and testing entirely.",[43,252,254],{"id":253},"step-by-step-resolution","Step-by-Step Resolution",[15,256,257],{},[54,258,259],{},"1. Replace the blanket flag with a scoped array.",[261,262,267],"pre",{"className":263,"code":264,"language":265,"meta":266,"style":266},"language-json shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast","{\n  \"name\": \"@internal\u002Fui\",\n  \"sideEffects\": [\"*.css\", \"*.scss\", \".\u002Fsrc\u002Fpolyfills\u002F*.js\", \".\u002Fsrc\u002Fregister-*.js\"]\n}\n","json","",[30,268,269,277,294,325],{"__ignoreMap":266},[270,271,273],"span",{"class":177,"line":272},1,[270,274,276],{"class":275},"saISM","{\n",[270,278,280,284,287,291],{"class":177,"line":279},2,[270,281,283],{"class":282},"sZBmE","  \"name\"",[270,285,286],{"class":275},": ",[270,288,290],{"class":289},"sZ8jY","\"@internal\u002Fui\"",[270,292,293],{"class":275},",\n",[270,295,297,300,303,306,309,312,314,317,319,322],{"class":177,"line":296},3,[270,298,299],{"class":282},"  \"sideEffects\"",[270,301,302],{"class":275},": [",[270,304,305],{"class":289},"\"*.css\"",[270,307,308],{"class":275},", ",[270,310,311],{"class":289},"\"*.scss\"",[270,313,308],{"class":275},[270,315,316],{"class":289},"\".\u002Fsrc\u002Fpolyfills\u002F*.js\"",[270,318,308],{"class":275},[270,320,321],{"class":289},"\".\u002Fsrc\u002Fregister-*.js\"",[270,323,324],{"class":275},"]\n",[270,326,328],{"class":177,"line":327},4,[270,329,330],{"class":275},"}\n",[15,332,333],{},"Expected outcome: unused JavaScript is still eliminated, while stylesheets and registration modules are preserved.",[15,335,336,339],{},[54,337,338],{},"2. Keep the pattern list honest as the package grows."," Any new file whose import does something beyond defining exports must be added.",[261,341,345],{"className":342,"code":343,"language":344,"meta":266,"style":266},"language-javascript shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast","\u002F\u002F A quick audit: which modules perform work at import time?\n\u002F\u002F grep for top-level statements that are not declarations or exports.\n\u002F\u002F rg -n '^(?!import|export|\u002F\u002F|\u002F\\*|\\s*$)' src --glob '*.js' | head -40\n\u002F\u002F trade-off: this is a heuristic and will flag constants and type-only files.\n\u002F\u002F Use it to build a candidate list, then confirm each one by reading it.\n","javascript",[30,346,347,353,358,363,368],{"__ignoreMap":266},[270,348,349],{"class":177,"line":272},[270,350,352],{"class":351},"sjfSM","\u002F\u002F A quick audit: which modules perform work at import time?\n",[270,354,355],{"class":177,"line":279},[270,356,357],{"class":351},"\u002F\u002F grep for top-level statements that are not declarations or exports.\n",[270,359,360],{"class":177,"line":296},[270,361,362],{"class":351},"\u002F\u002F rg -n '^(?!import|export|\u002F\u002F|\u002F\\*|\\s*$)' src --glob '*.js' | head -40\n",[270,364,365],{"class":177,"line":327},[270,366,367],{"class":351},"\u002F\u002F trade-off: this is a heuristic and will flag constants and type-only files.\n",[270,369,371],{"class":177,"line":370},5,[270,372,373],{"class":351},"\u002F\u002F Use it to build a candidate list, then confirm each one by reading it.\n",[15,375,376,379],{},[54,377,378],{},"3. Import styles where they cannot be orphaned."," If a component's styles belong to it, import them from the component module rather than from a barrel, so the two share a fate.",[261,381,383],{"className":342,"code":382,"language":344,"meta":266,"style":266},"\u002F\u002F Button.jsx — the style import lives with the code that needs it.\nimport '.\u002Fbutton.css';\nexport function Button(props) { \u002F* … *\u002F }\n\u002F\u002F trade-off: co-located imports make per-component CSS easy to reason about,\n\u002F\u002F but they also mean the style is only included when the component is. For a\n\u002F\u002F design system's base styles, a single explicit entry import is safer.\n",[30,384,385,390,402,430,435,440],{"__ignoreMap":266},[270,386,387],{"class":177,"line":272},[270,388,389],{"class":351},"\u002F\u002F Button.jsx — the style import lives with the code that needs it.\n",[270,391,392,396,399],{"class":177,"line":279},[270,393,395],{"class":394},"sPARh","import",[270,397,398],{"class":289}," '.\u002Fbutton.css'",[270,400,401],{"class":275},";\n",[270,403,404,407,410,414,417,421,424,427],{"class":177,"line":296},[270,405,406],{"class":394},"export",[270,408,409],{"class":394}," function",[270,411,413],{"class":412},"smZ65"," Button",[270,415,416],{"class":275},"(",[270,418,420],{"class":419},"sQw3B","props",[270,422,423],{"class":275},") { ",[270,425,426],{"class":351},"\u002F* … *\u002F",[270,428,429],{"class":275}," }\n",[270,431,432],{"class":177,"line":327},[270,433,434],{"class":351},"\u002F\u002F trade-off: co-located imports make per-component CSS easy to reason about,\n",[270,436,437],{"class":177,"line":370},[270,438,439],{"class":351},"\u002F\u002F but they also mean the style is only included when the component is. For a\n",[270,441,443],{"class":177,"line":442},6,[270,444,445],{"class":351},"\u002F\u002F design system's base styles, a single explicit entry import is safer.\n",[15,447,448,451],{},[54,449,450],{},"4. Verify with a production build before merging, not after deploying."," Add a check that fails when expected CSS is missing.",[261,453,457],{"className":454,"code":455,"language":456,"meta":266,"style":266},"language-bash shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast","# Fail if a known selector from each package's stylesheet is absent from output.\nfor sel in '.btn-primary' '.card-header' '.modal-backdrop'; do\n  grep -rq -- \"$sel\" dist\u002Fassets\u002F*.css || { echo \"MISSING $sel\"; exit 1; }\ndone\n# trade-off: selector-presence checks are coarse and break when class names are\n# refactored. They are still the cheapest guard against a whole stylesheet\n# vanishing, which is the failure this page exists to prevent.\n","bash",[30,458,459,464,490,547,552,557,562],{"__ignoreMap":266},[270,460,461],{"class":177,"line":272},[270,462,463],{"class":351},"# Fail if a known selector from each package's stylesheet is absent from output.\n",[270,465,466,469,472,475,478,481,484,487],{"class":177,"line":279},[270,467,468],{"class":394},"for",[270,470,471],{"class":275}," sel ",[270,473,474],{"class":394},"in",[270,476,477],{"class":289}," '.btn-primary'",[270,479,480],{"class":289}," '.card-header'",[270,482,483],{"class":289}," '.modal-backdrop'",[270,485,486],{"class":275},"; ",[270,488,489],{"class":394},"do\n",[270,491,492,495,499,502,505,508,511,514,517,520,523,526,529,532,534,536,538,541,544],{"class":177,"line":296},[270,493,494],{"class":419},"  grep",[270,496,498],{"class":497},"sPXB4"," -rq",[270,500,501],{"class":497}," --",[270,503,504],{"class":289}," \"",[270,506,507],{"class":275},"$sel",[270,509,510],{"class":289},"\"",[270,512,513],{"class":289}," dist\u002Fassets\u002F",[270,515,516],{"class":497},"*",[270,518,519],{"class":289},".css",[270,521,522],{"class":394}," ||",[270,524,525],{"class":275}," { ",[270,527,528],{"class":497},"echo",[270,530,531],{"class":289}," \"MISSING ",[270,533,507],{"class":275},[270,535,510],{"class":289},[270,537,486],{"class":275},[270,539,540],{"class":497},"exit",[270,542,543],{"class":497}," 1",[270,545,546],{"class":275},"; }\n",[270,548,549],{"class":177,"line":327},[270,550,551],{"class":394},"done\n",[270,553,554],{"class":177,"line":370},[270,555,556],{"class":351},"# trade-off: selector-presence checks are coarse and break when class names are\n",[270,558,559],{"class":177,"line":442},[270,560,561],{"class":351},"# refactored. They are still the cheapest guard against a whole stylesheet\n",[270,563,565],{"class":177,"line":564},7,[270,566,567],{"class":351},"# vanishing, which is the failure this page exists to prevent.\n",[43,569,571],{"id":570},"verification","Verification",[15,573,574],{},"Build for production and diff the emitted CSS against the previous release. A sudden drop in total CSS bytes is the leading indicator — far more reliable than noticing an unstyled component in review.",[15,576,577],{},"Then render the affected components in a real browser, not just a unit test. Tree shaking operates on the bundle graph, so a test that imports the module directly will pass while the built application fails.",[15,579,580],{},"Keep the CSS budget visible alongside the JavaScript one:",[261,582,584],{"className":263,"code":583,"language":265,"meta":266,"style":266},"{ \"ci\": { \"assert\": { \"assertions\": {\n  \"unused-css-rules\": [\"warn\", { \"maxNumericValue\": 40000 }],\n  \"total-byte-weight\": [\"error\", { \"maxNumericValue\": 1400000 }]\n} } } }\n",[30,585,586,608,632,654],{"__ignoreMap":266},[270,587,588,591,594,597,600,602,605],{"class":177,"line":272},[270,589,590],{"class":275},"{ ",[270,592,593],{"class":282},"\"ci\"",[270,595,596],{"class":275},": { ",[270,598,599],{"class":282},"\"assert\"",[270,601,596],{"class":275},[270,603,604],{"class":282},"\"assertions\"",[270,606,607],{"class":275},": {\n",[270,609,610,613,615,618,621,624,626,629],{"class":177,"line":279},[270,611,612],{"class":282},"  \"unused-css-rules\"",[270,614,302],{"class":275},[270,616,617],{"class":289},"\"warn\"",[270,619,620],{"class":275},", { ",[270,622,623],{"class":282},"\"maxNumericValue\"",[270,625,286],{"class":275},[270,627,628],{"class":497},"40000",[270,630,631],{"class":275}," }],\n",[270,633,634,637,639,642,644,646,648,651],{"class":177,"line":296},[270,635,636],{"class":282},"  \"total-byte-weight\"",[270,638,302],{"class":275},[270,640,641],{"class":289},"\"error\"",[270,643,620],{"class":275},[270,645,623],{"class":282},[270,647,286],{"class":275},[270,649,650],{"class":497},"1400000",[270,652,653],{"class":275}," }]\n",[270,655,656],{"class":177,"line":327},[270,657,658],{"class":275},"} } } }\n",[15,660,661],{},"If CSS bytes fall sharply while JavaScript is unchanged, treat it as a regression until proven otherwise — that pattern is almost always elimination rather than optimisation.",[43,663,665],{"id":664},"faq","FAQ",[667,668,671,675],"details",{"className":669},[670],"faq-item",[672,673,674],"summary",{},"Should I just remove sideEffects entirely?",[15,676,677],{},"No — omitting it makes the bundler assume every module might have side effects, which disables most cross-module elimination and inflates the bundle. The scoped array gives you the same safety with none of the cost. Removing the field is the right move only for a package that genuinely is side-effect-heavy throughout, such as a polyfill collection.",[667,679,681,684],{"className":680},[670],[672,682,683],{},"Does this apply to CSS modules too?",[15,685,686,687,690,691,694],{},"Yes, and it is subtler. A CSS module import ",[38,688,689],{},"does"," produce a value — the class-name map — so it looks like a normal export, but the stylesheet injection is still a side effect. If the imported map is unused on some path, the whole module can be dropped along with its styles. List the CSS module files in ",[30,692,693],{},"sideEffects"," exactly as you would plain stylesheets.",[667,696,698,701],{"className":697},[670],[672,699,700],{},"Why did this only break in production?",[15,702,703],{},"Because development builds skip the optimisation. Bundlers keep the module graph intact in dev for fast rebuilds and useful stack traces, and only run elimination in production mode. Any bug that depends on tree shaking is therefore invisible locally — which is why a production build belongs in the pre-merge pipeline, not only in the release step.",[667,705,707,710],{"className":706},[670],[672,708,709],{},"How do I know which files in my package have side effects?",[15,711,712],{},"Read every module that is not purely declarative and ask what happens when it is merely imported. Stylesheets, polyfills, custom-element registrations, service-worker installs, global monkey-patches and anything that mutates a shared registry all qualify. A quick heuristic is to look for top-level statements that are neither imports, exports nor declarations — those lines run at import time. Confirm each candidate by reading it, because the heuristic also flags harmless constant tables and type-only modules.",[667,714,716,719],{"className":715},[670],[672,717,718],{},"Does the sideEffects field affect my application, or only libraries?",[15,720,721,722,724,725,728],{},"Both, and applications are the case people forget. The field is read from every ",[30,723,72],{}," in the graph, including your app's own. Setting it to ",[30,726,727],{},"false"," at the root of an application that imports global stylesheets, a polyfill entry or an analytics bootstrap will drop those in the production build exactly as it does for a library. Applications are also where the failure is most visible, because the missing styles are the ones the user sees first.",[667,730,732,735],{"className":731},[670],[672,733,734],{},"Can I keep the byte saving without any risk?",[15,736,737,738,741],{},"Largely, yes: the elimination that the flag unlocks applies to unused JavaScript exports, and listing your side-effectful files does not prevent any of that. The one thing you give up is elimination of ",[38,739,740],{},"unused stylesheets",", which the bundler can no longer prove are safe to drop. In practice that is a small, bounded cost — and the CSS-level answer is a per-component style strategy that only ships the rules a rendered component needs, not a packaging flag.",[43,743,745],{"id":744},"related","Related",[48,747,748,753,760],{},[51,749,750,752],{},[19,751,22],{"href":21}," — how elimination decides what is reachable.",[51,754,755,759],{},[19,756,758],{"href":757},"\u002Fjavascript-bundle-optimization-code-splitting\u002Ftree-shaking-and-dead-code-elimination\u002Ffixing-tree-shaking-issues-with-lodash-and-moment\u002F","Fixing tree-shaking issues with lodash and moment"," — the opposite failure, where nothing is shaken at all.",[51,761,762,766],{},[19,763,765],{"href":764},"\u002Fjavascript-bundle-optimization-code-splitting\u002Fmodern-module-formats-esm-vs-commonjs\u002Ffixing-dual-package-hazard-in-a-library\u002F","Fixing dual package hazard in a library"," — another packaging field that changes what the bundler sees.",[768,769,771],"script",{"type":770},"application\u002Fld+json","\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"HowTo\",\n  \"name\": \"Fix stylesheets removed by sideEffects: false\",\n  \"description\": \"Replace a blanket side-effect-free declaration with a scoped array, keep it current as the package grows, co-locate style imports, and verify in a production build before merging.\",\n  \"step\": [\n    { \"@type\": \"HowToStep\", \"position\": 1, \"name\": \"Scope the sideEffects field\", \"text\": \"List stylesheet and registration file patterns instead of declaring the whole package side-effect free.\", \"url\": \"https:\u002F\u002Ffrontend-performance.com\u002Fjavascript-bundle-optimization-code-splitting\u002Ftree-shaking-and-dead-code-elimination\u002Fsideeffects-false-broke-my-css-imports\u002F#step-by-step-resolution\" },\n    { \"@type\": \"HowToStep\", \"position\": 2, \"name\": \"Audit for other side effects\", \"text\": \"Find modules that perform work at import time — polyfills, registrations, global setup — and add them to the list.\", \"url\": \"https:\u002F\u002Ffrontend-performance.com\u002Fjavascript-bundle-optimization-code-splitting\u002Ftree-shaking-and-dead-code-elimination\u002Fsideeffects-false-broke-my-css-imports\u002F#step-by-step-resolution\" },\n    { \"@type\": \"HowToStep\", \"position\": 3, \"name\": \"Co-locate style imports\", \"text\": \"Import a component's stylesheet from the component module so the two cannot be separated.\", \"url\": \"https:\u002F\u002Ffrontend-performance.com\u002Fjavascript-bundle-optimization-code-splitting\u002Ftree-shaking-and-dead-code-elimination\u002Fsideeffects-false-broke-my-css-imports\u002F#step-by-step-resolution\" },\n    { \"@type\": \"HowToStep\", \"position\": 4, \"name\": \"Check the production build\", \"text\": \"Assert that known selectors appear in the emitted CSS and watch for sudden drops in CSS bytes.\", \"url\": \"https:\u002F\u002Ffrontend-performance.com\u002Fjavascript-bundle-optimization-code-splitting\u002Ftree-shaking-and-dead-code-elimination\u002Fsideeffects-false-broke-my-css-imports\u002F#verification\" }\n  ]\n}\n",[768,773,774],{"type":770},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"TechArticle\",\n  \"headline\": \"Why sideEffects: false Deleted Your CSS (and How to Fix It)\",\n  \"description\": \"A blanket side-effect-free declaration gives the bundler permission to drop imported stylesheets, polyfills and registrations. Scope it instead.\",\n  \"datePublished\": \"2026-08-01\",\n  \"dateModified\": \"2026-08-01\",\n  \"author\": { \"@type\": \"Organization\", \"name\": \"frontend-performance.com\" },\n  \"publisher\": { \"@type\": \"Organization\", \"name\": \"frontend-performance.com\" },\n  \"mainEntityOfPage\": { \"@type\": \"WebPage\", \"@id\": \"https:\u002F\u002Ffrontend-performance.com\u002Fjavascript-bundle-optimization-code-splitting\u002Ftree-shaking-and-dead-code-elimination\u002Fsideeffects-false-broke-my-css-imports\u002F\" }\n}\n",[768,776,777],{"type":770},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"BreadcrumbList\",\n  \"itemListElement\": [\n    { \"@type\": \"ListItem\", \"position\": 1, \"name\": \"Home\", \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002F\" },\n    { \"@type\": \"ListItem\", \"position\": 2, \"name\": \"JavaScript Bundle Optimization & Code Splitting\", \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fjavascript-bundle-optimization-code-splitting\u002F\" },\n    { \"@type\": \"ListItem\", \"position\": 3, \"name\": \"Tree Shaking and Dead Code Elimination\", \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fjavascript-bundle-optimization-code-splitting\u002Ftree-shaking-and-dead-code-elimination\u002F\" },\n    { \"@type\": \"ListItem\", \"position\": 4, \"name\": \"sideEffects: false Broke My CSS Imports\", \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fjavascript-bundle-optimization-code-splitting\u002Ftree-shaking-and-dead-code-elimination\u002Fsideeffects-false-broke-my-css-imports\u002F\" }\n  ]\n}\n",[779,780,781],"style",{},"html pre.shiki code .saISM, html code.shiki .saISM{--shiki-default:#0E1116;--shiki-dark:#F0F3F6;--shiki-light:#0E1116}html pre.shiki code .sZBmE, html code.shiki .sZBmE{--shiki-default:#024C1A;--shiki-dark:#72F088;--shiki-light:#024C1A}html pre.shiki code .sZ8jY, html code.shiki .sZ8jY{--shiki-default:#032563;--shiki-dark:#ADDCFF;--shiki-light:#032563}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html pre.shiki code .sjfSM, html code.shiki .sjfSM{--shiki-default:#66707B;--shiki-dark:#BDC4CC;--shiki-light:#66707B}html pre.shiki code .sPARh, html code.shiki .sPARh{--shiki-default:#A0111F;--shiki-dark:#FF9492;--shiki-light:#A0111F}html pre.shiki code .smZ65, html code.shiki .smZ65{--shiki-default:#622CBC;--shiki-dark:#DBB7FF;--shiki-light:#622CBC}html pre.shiki code .sQw3B, html code.shiki .sQw3B{--shiki-default:#702C00;--shiki-dark:#FFB757;--shiki-light:#702C00}html pre.shiki code .sPXB4, html code.shiki .sPXB4{--shiki-default:#023B95;--shiki-dark:#91CBFF;--shiki-light:#023B95}",{"title":266,"searchDepth":279,"depth":279,"links":783},[784,785,786,787,788,789],{"id":45,"depth":279,"text":46},{"id":215,"depth":279,"text":216},{"id":253,"depth":279,"text":254},{"id":570,"depth":279,"text":571},{"id":664,"depth":279,"text":665},{"id":744,"depth":279,"text":745},"The flag that unlocks tree shaking also gives the bundler permission to delete your styles. Scope it correctly instead of turning it off.","md",{"slug":793,"type":794,"breadcrumb":795,"datePublished":803,"dateModified":803},"sideeffects-false-broke-my-css-imports","article",[796,799,800,801],{"name":797,"url":798},"Home","\u002F",{"name":27,"url":26},{"name":22,"url":21},{"name":5,"url":802},"\u002Fjavascript-bundle-optimization-code-splitting\u002Ftree-shaking-and-dead-code-elimination\u002Fsideeffects-false-broke-my-css-imports\u002F","2026-08-01",true,"\u002Fjavascript-bundle-optimization-code-splitting\u002Ftree-shaking-and-dead-code-elimination\u002Fsideeffects-false-broke-my-css-imports",{"title":807,"description":808},"sideEffects: false Broke My CSS Imports — How to Fix It","Declaring a package side-effect free lets the bundler drop imported stylesheets and polyfills. Use a targeted sideEffects array instead of a blanket false.","javascript-bundle-optimization-code-splitting\u002Ftree-shaking-and-dead-code-elimination\u002Fsideeffects-false-broke-my-css-imports\u002Findex","X7KWvVMkhgw3ZdrFWTSpUaEP3Knjzdm84dB1dRB2Bvs",[812,816],{"title":813,"path":814,"stem":815,"children":-1},"Fixing Tree Shaking Issues with Lodash and Moment","\u002Fjavascript-bundle-optimization-code-splitting\u002Ftree-shaking-and-dead-code-elimination\u002Ffixing-tree-shaking-issues-with-lodash-and-moment","javascript-bundle-optimization-code-splitting\u002Ftree-shaking-and-dead-code-elimination\u002Ffixing-tree-shaking-issues-with-lodash-and-moment\u002Findex",{"title":817,"path":818,"stem":819,"children":-1},"Webpack Bundle Analysis Techniques","\u002Fjavascript-bundle-optimization-code-splitting\u002Fwebpack-bundle-analysis-techniques","javascript-bundle-optimization-code-splitting\u002Fwebpack-bundle-analysis-techniques\u002Findex",1785622407577]