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.

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

[Bug]: transformImport did not import styles. #6245

Open
TopGrd opened this issue Apr 15, 2024 · 3 comments · May be fixed by #6668
Open

[Bug]: transformImport did not import styles. #6245

TopGrd opened this issue Apr 15, 2024 · 3 comments · May be fixed by #6668
Labels
bug Something isn't working pr welcome stale

Comments

@TopGrd
Copy link

TopGrd commented Apr 15, 2024

Version

System:
    OS: macOS 14.4.1
    CPU: (8) x64 Apple M1
    Memory: 26.24 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Browsers:
    Chrome: 123.0.6312.123
    Safari: 17.4.1
  npmPackages:
    @rsbuild/core: ^0.6.1 => 0.6.1 
    @rsbuild/plugin-react: ^0.6.1 => 0.6.1

Details

rsbuild.config.ts

import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';

export default defineConfig({
  source: {
    transformImport: [
      {
        libraryName: '@alifd/next',
        libraryDirectory: 'es',
        style: true,
      },
      {
        libraryName: '@formily/next',
        libraryDirectory: 'esm',
        style: true,
      },
    ],
  },
  plugins: [pluginReact()],
});

I used transformImport to configure modular import, but the styles were not imported on demand. As you can see, the input box below lacks styling.
CleanShot 2024-04-15 at 22 12 07@2x

Reproduce link

https://github.com/TopGrd/rsbuild-transformImport

Reproduce Steps

  1. pnpm i
  2. pnpm dev
@TopGrd TopGrd changed the title [Bug]: transformImport is not work [Bug]: transformImport did not import styles. Apr 15, 2024
@xc2
Copy link
Collaborator

xc2 commented Apr 15, 2024

https://github.com/alibaba/formily/blob/5f9411f415d1e50b0e2cc180fad4e9040d81cab0/packages/next/package.json#L17

the cause might be **/*/style.js is not matching esm/input/style.js by rspack's treeshaking implementation.

when i changed it to **/style.js, the styles are back.

will transfer the issue to rspack for help tomorrow.

@chenjiahan chenjiahan transferred this issue from web-infra-dev/rsbuild Apr 15, 2024
@xc2 xc2 added the pending triage The issue/PR is currently untouched. label Apr 16, 2024
@xc2
Copy link
Collaborator

xc2 commented Apr 16, 2024

webpack's implementation:

// https://npmjs.com/glob-to-regexp
const glob2regexp = require('glob-to-regexp');
const globToRegexp = (glob) => {
	if (!glob.includes("/")) {
		glob = `**/${glob}`;
	}
	const baseRegexp = glob2regexp(glob, { globstar: true, extended: true });
	const regexpSource = baseRegexp.source;
	const regexp = new RegExp("^(\\./)?" + regexpSource.slice(1));
	return regexp;
};

globToRegexp('**/*/style.js').test('esm/input/style.js'); // true
// the regexp is /^(\.\/)?((?:[^/]*(?:\/|$))*)([^/]*)\/style\.js$/

while glob-match:

image

Copy link

stale bot commented Jun 28, 2024

This issue has been automatically marked as stale because it has not had recent activity. If this issue is still affecting you, please leave any comment (for example, "bump"). We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

@stale stale bot added the stale label Jun 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working pr welcome stale
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants