[RFC] webpack-like tilde resolves in less

[crazyair]

What happened?

index.less content @import '~antd/dist/antd.less';

Version

Latest

What OS are you seeing the problem on?

MacOSX

What browsers are you seeing the problem on?

Microsoft Edge

Relevant log output

🔴 ERROR  | The @import path "\~antd/dist/antd.less" is using webpack specific syntax, which isn't supported by Parcel.

To @import files from node\_modules, use "antd/dist/antd.less"

But this project is OK
https://github.com/ant-design/parcel-antd/blob/master/src/style/index.less#L1

(OPTIONAL) Contact Details

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

[javaswing]

You can try @import "antd/dist/antd.less";

[crazyair]

You can try @import "antd/dist/antd.less";

xxxxx package insert @import "antd/dist/antd.less"

  "dependencies": {
    "xxxxx": "0.0.1"
  }

yarn dev

🔴 ERROR  | Inline JavaScript is not enabled. Is it set in your options?

[crazyair]

parcel-bundler/parcel#907 (comment)
parcel is support~

[louisgv]

@crazyair just tried this example, it seems to work for me: https://github.com/PlasmoHQ/examples/tree/main/with-ant-design

The tilde import means from the root of the current project for Plasmo (and latest Parcel), NOT from node_modules: https://docs.plasmo.com/workflows/faq#tilde-import-resolution

[crazyair]

~ It is used in the external package,Not in this project.

[louisgv]

can you give me the project you're trying to use? Or is it antd itself?

[louisgv]

Also, if they use ~ internally, that project should really bundle their style instead of exporting raw less (i.e, you should use the css file as end-user). I don't see the benefit of using less that way - bundle is the same?

[crazyair]

You can install @ant-design/pro-components in with-ant-design

popup.tsx

import { ProCard } from '@ant-design/pro-components';

<ProCard title="默认尺寸" extra="extra" tooltip="这是提示" style={{ maxWidth: 300 }}>
    <div>Card content</div>
    <div>Card content</div>
    <div>Card content</div>
</ProCard>

🔴 ERROR  | The @import path "\~antd/es/style/themes/index.less" is using webpack specific syntax, which isn't supported by Parcel.

To @import files from node\_modules, use "antd/es/style/themes/index.less"
···

[crazyair]

demo: PlasmoHQ/examples#15

[louisgv]

This is a "missing feature" within Parcel's less transformer: https://github.com/parcel-bundler/parcel/blob/v2/packages/transformers/less/src/LessTransformer.js#L115 OR more likely, inconsistency with parcel's definition of the ~ tilde path.

Some potential solutions:

1. Fix the less transformer linked above to parse internal ~ from node_modules (do a package.json lookup to ensure it always resolve to the root of its specific module).
2. Fix https://github.com/ant-design/pro-components/blob/master/packages/card/src/components/Actions/index.less and all of their component to NOT use ~, or if they do, replace them with non-tilde path on publish

@crazyair can you link me the doc for the tilde path import in less? Also, would you be down to investigate and implement a solution?

[louisgv]

parcel-bundler/parcel#907 (comment) parcel is support~

NOTE: These examples you're referencing uses parcel@1.x (same with the antd example). As of 2.x, parcel has its own definition of ~ and thus broke this less feature.

[crazyair]

1. Fix the less transformer linked above to parse internal ~ from node_modules (do a package.json lookup to ensure it always resolve to the root of its specific module).

external project Deleting ~, an error will be reported

@import '~antd/dist/antd.less'; to @import 'antd/dist/antd.less';

🔴 ERROR  | Inline JavaScript is not enabled. Is it set in your options?

[louisgv]

1. Fix the less transformer linked above to parse internal ~ from node_modules (do a package.json lookup to ensure it always resolve to the root of its specific module).

external project Deleting ~, an error will be reported

@import '~antd/dist/antd.less'; to @import 'antd/dist/antd.less';

🔴 ERROR  | Inline JavaScript is not enabled. Is it set in your options?

Do you have the lessrc option in your project?