Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Linking to second entry point removes styling #2386

Closed
Tedowski opened this issue Dec 10, 2018 · 2 comments
Closed

Linking to second entry point removes styling #2386

Tedowski opened this issue Dec 10, 2018 · 2 comments
Labels
🐛 Bug ✔️ Confirmed Bug

Comments

@Tedowski
Copy link

🐛 bug report

I am working with multiple page setup, with all pages interlinked by anchors. All the styling provided by scss is imported in index.js, which automatically adds stylesheet link to every html file. This works just fine, however, when I try to add anchor leading to the second html file, it removes the styling from that page (styling still works on page without the anchor).

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

{
  "name": "parcel-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "parcel build/*.html",
    "build": "parcel build build/*.html"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0",
    "parcel-bundler": "^1.10.3",
    "sass": "^1.15.2"
  },
  "dependencies": {
    "test": "^0.6.0"
  }
}

🤔 Expected Behavior

Stylesheet link should be added to each html file with "index.js" script tag

😯 Current Behavior

Stylesheet link is generated only in file (test.html) that does not link to other entry point.

No errors

💁 Possible Solution

🔦 Context

💻 Code Sample

//index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <a href="test.html">test</a>
    <img src="media/test.png">
    <script src="js/index.js"></script>
</body>
</html>

//test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
</head>
<body>
    <img src="media/test.png">
    <script src="js/index.js"></script>
</body>
</html>

//index.js file

import './test';
import '../scss/index.scss';

console.log('hello world!');

🌍 Your Environment

Software Version(s)
Parcel ^1.10.3
Node v10.9.0
npm/Yarn npm v6.2.0
Operating System macOS Mojave 10.14.1
@mischnic
Copy link
Member

mischnic commented Jan 6, 2019

With the code below, the issue seems to be that the index.html bundle contains only test.html as a childBundle and not index.js. The test.html bundle correctly contains index.js.
I guess there is a mechanism to only compile an Asset once, so the JSAsset gets added only to test.html, making the style appending code fail:

parcel/packages/core/parcel-bundler/src/packagers/HTMLPackager.js

Line 29 in 08398bd

let siblingBundles = Array.from(this.bundle.childBundles)

Example:

// index.html
<a href="test.html">Test</a>
<script src="index.js"></script>

// test.html
<script src="index.js"></script>
// index.js
import './style.css';

@mischnic
Copy link
Member

mischnic commented Jan 6, 2019

Actually a duplicate of #2340

@mischnic mischnic closed this as completed Jan 6, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
🐛 Bug ✔️ Confirmed Bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@DeMoorJasper @mischnic @Tedowski and others