Fix RangeError in not export error with other file type

[Shinyaigeek]

↪️ Pull Request

Fixes: #7278

Hi team ! 👋
I'm interested in contributing to parcel, and I have been doing some research on #7278, and I noticed that this RangeError is caused by language mismatch in highlighting. For example, in the situation of this issue, the JavaScript highlight that is the source of the css import is being done as a css one, and the resulting change in the number of lines is causing a RangeError.

I fixed this Range error by setting the language of codeFrame in A does not export B error to the file type of the file from which A imports (JavaScript in the above example). However, I am not yet familiar with the inner code of parcel, and there may be some context that I missed. If you find something I missed, please feel free to point it out to me.

💻 Examples

import React from "react";
import * as styles from "./hoge.module.css";

const App = function() {
  return (
    <div className={styles.notExisting} />
  )
}

// empty css

🚨 Test instructions

I was wondering how to test it, and I wrote it in scope-hoisting integration test, but it may not be the right test to write here. If you have a better idea, I'd appreciate it if you could point it out.

For now, I wrote a test to see if the language of the codeFrame is javascript instead of css in the hoge.module.css does not export notExisting error in a case like an example above

✔️ PR Todo

• Added/updated unit tests for this change
• Filled out test instructions (In case there aren't any unit tests)
• Included links to related issues/PRs

[height]

Link Height tasks by mentioning a task ID in the pull request title or commit messages, or description and comments with the keyword link (e.g. "Link T-123").

💡Tip: You can also use "Close T-X" to automatically close a task when the pull request is merged.

[mischnic]

Great find! Could you also move the test to packages/core/integration-tests/test/postcss.js and call it something like "should throw an error when importing a missing class"?

Here's an example for a test using scope hoisting in that file:

parcel/packages/core/integration-tests/test/postcss.js

Lines 156 to 195 in f651829

	it('should produce correct css without symbol propagation for css modules classes with a namespace import', async () => {
	let b = await bundle(
	path.join(
	__dirname,
	'/integration/postcss-modules-import-namespace/index.js',
	),
	{
	mode: 'production',
	defaultTargetOptions: {
	shouldScopeHoist: false,
	},
	},
	);
	assertBundles(b, [
	{
	name: 'index.js',
	assets: ['index.js', 'style.module.css'],
	},
	{
	name: 'index.css',
	assets: ['global.css', 'style.module.css'],
	},
	]);
	let {output} = await run(b, null, {require: false});
	assert(/_b-2_[0-9a-z]/.test(output));
	let css = await outputFS.readFile(
	b.getBundles().find(b => b.type === 'css').filePath,
	'utf8',
	);
	let includedRules = new Set();
	postcss.parse(css).walkRules(rule => {
	includedRules.add(rule.selector);
	});
	assert(includedRules.has('body'));
	assert(includedRules.has(`.${output}`));
	assert(includedRules.has('.page'));
	});

[Shinyaigeek]

Thank you for reviewing and helping! I moved the test into packages/core/integration-tests/test/postcss.js, and fixed the test label to "should throw an error when importing a missing class”? in f5ca1bc 👍