[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?

[crazyair]

Do you have the lessrc option in your project?

The main project has, but the external project does not

[louisgv]

Can you do a bundling of the external project into some plain component, and just import the output inside plasmo and use it that way then?

[crazyair]

how?

[louisgv]

Create a sibling-level project to your extension project, compile them with webpack (or any bundler that has the behavior described), then import them into the plasmo project.

https://lesscss.org/features/ <- based on this, I confirm the tilde resolve you're referencing from antd-pro is not a thing in less, and is only a thing within antd's webpack configuration (and maybe the webpack ecosystem?).

antd pro less loader is here: https://github.com/ant-design/pro-components/blob/master/webpack.config.js#L108

Also, try using the specific component that's been compiled and see if it works for you: https://www.npmjs.com/package/@ant-design/pro-card

[louisgv]

Also, don't use the es version in that bundle, use the cjs version

[crazyair]

Also, don't use the es version in that bundle, use the cjs version

Why? We currently require the use of ES

[louisgv]

Also, don't use the es version in that bundle, use the cjs version

Why? We currently require the use of ES

Why would that matters for a dependency? Their ES version requires custom resolver for those less path

[crazyair]

Only one path is referenced， lib or es.

[louisgv]

Only one path is referenced， lib or es.

you can import directly like @import 'antd-pro/dist/some-pro-comp';

[crazyair]

I've tried everything but still haven't solved it 😭

[crazyair]

Only one path is referenced， lib or es.

you can import directly like @import 'antd-pro/dist/some-pro-comp';

no dist，need change less variable

[louisgv]

ls .\node_modules\@ant-design\pro-card\dist\

    Directory: P:\Projects\plasmo-test\with-antd\node_modules\@
ant-design\pro-card\dist

Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
-a---          2022-08-21    12:31          15777 card.css
-a---          2022-08-21    12:31         243527 card.js
-a---          2022-08-21    12:31            771 card.js.LICENSE.txt
-a---          2022-08-21    12:31            431 card.less
-a---          2022-08-21    12:31          15777 card.min.css
-a---          2022-08-21    12:31         243531 card.min.js
-a---          2022-08-21    12:31            771 card.min.js.LICENSE.txt

^ There's a dist directory if you installed the specific pro-card package

[louisgv]

I've tried everything but still haven't solved it 😭

have you tried hacking the less transformer? Basically, make it align with the way webpack bundle less source as antd. Also I have no idea how other project uses antd-pro unless they have a similar webpack bundler OR postcss plugin to reconfigure those paths.

[crazyair]

No problem with webpack or umi

[louisgv]

@crazyair in Umi for it to work with latest antd-pro, you also need to hack up the less path on webpack config:

https://v3.umijs.org/guide/upgrade-antd-pro-to-umi-3#%E9%85%8D%E7%BD%AE%E5%B1%82%E8%BF%81%E7%A7%BB

So yeah for it to work with parcel, you will need to play around with the less transformer as well and maybe handle the antd special case, OR if antd managed to make their convention widespread enough, implement it as default

[crazyair]

How is parcel configured and can it be built-in?

[louisgv]

Yes, see this comment: #143 (comment)

[crazyair]

Second, I've tried, but I can't

[xudaolong]

@crazyair I encountered the same problem, the solution is parcel-bundler/parcel#6623 (comment)

[crazyair]

@crazyair I encountered the same problem, the solution is parcel-bundler/parcel#6623 (comment)

node_moudles ? no

[xudaolong]

@crazyair You can use a script similar to the one executed after postinstall.

const fs = require("fs-extra")

const previous = {
  same: [
    // ISSUE: https://github.com/PlasmoHQ/plasmo/issues/143
    [
      "node_modules_cover/less/default-options.js",
      "node_modules/.pnpm/less@4.1.3/node_modules/less/lib/less/default-options.js"
    ]
  ]
}

;(async () => {
  ;[...previous["same"]].map(([source, target]) => {
    fs.copy(source, target)
      .then(() => console.log(`${target}: load success`))
      .catch((err) => console.log(err))
    return null
  })
})()