8000 feat(postcss): allow content from node_modules by HomyeeKing · Pull Request #4554 · unocss/unocss · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

feat(postcss): allow content from node_modules #4554

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
Merged
merged 2 commits into from
Apr 25, 2025
Merged

feat(postcss): allow content from node_modules #4554

merged 2 commits into from
Apr 25, 2025

Conversation

HomyeeKing
Copy link
Contributor
@HomyeeKing HomyeeKing commented Mar 31, 2025 •
edited
Loading

I think the content.filesystem options is like @source in tailwindcss

sometimes we may need to include the packages from node_modules, like @llamaindex/chat-ui

so it'd be better to be able access the node_modules

@HomyeeKing HomyeeKing requested review from antfu and zyyv as code owners March 31, 2025 08:54
@netlify Netlify
Copy link
netlify bot commented Mar 31, 2025 •
edited
Loading

✅ Deploy Preview for unocss ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 43b7437
🔍 Latest deploy log https://app.netlify.com/sites/unocss/deploys/67ea594b82d01300083814a2
😎 Deploy Preview https://deploy-preview-4554--unocss.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@HomyeeKing HomyeeKing changed the title feat: allow sources from node_modules feat: allow content from node_modules Mar 31, 2025
@johndunderhill
Copy link
johndunderhill commented Apr 24, 2025 •
edited
Loading

@HomyeeKing @antfu This may be important for us. We are converting from Tailwind and use a number of custom 'source' components in our Monorepo. We install these via NPM and consume them by importing the TypeScript source directly, including the Atomic CSS inside our TSX components. We build everything out using Vite.

Moreover, like many Monorepo users, our CSS configuration files and stylesheets, which comprise our Design System, are stored in a package, not in the the web app itself. Those files are shared among many apps.

For Atomic CSS tools to find these source files via the filesystem, they have to be able to scan node_modules, where the source components are installed, or the classes will not be seen.

This may be moot if they are seen via the Vite pipeline, but I'm concerned that this may not work, and I may need this as a fallback, and possibly for other use cases, including finding the configuration files and CSS files themselves. We use a focused patturn within node_modules to find our components, so it's efficient enough:

// Part of tailwind.config.ts
const extensions = '.{astro,html,js,jsx,md,mdx,ts,tsx}';

const config = {
	content: {
		files: ['*' + extensions, 'src/**/*' + extensions, 'node_modules/@costvine/*/*' + extensions]
	},
	plugins: [forms, typography],
	darkMode: 'class',
	future: {
		hoverOnlyWhenSupported: true
	},
	theme: {
		colors: defaultColors
	}
};

Elsewhere:

// Part of another tailwind.config.ts
import config from '@costvine/colors/tailwind.config.js';

And in a package:

// Cardbox.tsx
import { Show, type JSX } from 'solid-js';
// Resolved via node_modules, may contain Atomic CSS classes
import Header from '@costvine/banners/Header.jsx';
import Rule from '@costvine/banners/Rule.jsx';

export default function (props: { title?: string; rule?: boolean; children: JSX.Element }) {
	return (
		<div class="w-full border-b px-6 py-5 sm:w-fit sm:mx-auto sm:border-none sm:shadow sm:rounded-lg sm:px-7 sm:py-6 lg:px-8 lg:py-7 cardbox-color">
			<Show when={props.title}>
				<Header>{props.title}</Header>
				<Show when={props.rule}>
					<Rule />
				</Show>
			</Show>
			{props.children}
		</div>
	);
}

If the pipeline works, then that would be great. Just for your information, Tailwind 4 can't get their pipeline scanner to work, so they solved that problem by removing it, which is causing many breaking changes for Monorepo users:

tailwindlabs/tailwindcss#16631

We are hoping to escape this drama. We're a pure SPA--no SSR of any kind--so we're not concerned about the concurrent rendering problems which caused this disaster, although perhaps even those problems could have been solved. We just want to get away from Tailwind, because they're hurting us.

It seems gratuitous for Uno CSS to force node_modules to be ignored if the user explicitly includes it. I have reviewed the changes in this PR and it looks good to me.

Appreciate all of you very much.

John

@HomyeeKing
Copy link
Contributor Author

@antfu @zyyv CC 👀

@pkg-pr-new pkg.pr.new
Copy link
pkg-pr-new bot commented Apr 25, 2025

Open in StackBlitz

commit: 43b7437

@zyyv zyyv changed the title feat: allow content from node_modules feat(pos 8000 tcss): allow content from node_modules Apr 25, 2025
@zyyv zyyv added this pull request to the merge queue Apr 25, 2025
Merged via the queue into unocss:main with commit 7960070 Apr 25, 2025
11 checks passed
@johndunderhill
Copy link

Thanks, everyone.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@zyyv zyyv zyyv approved these changes

@antfu antfu Awaiting requested review from antfu antfu is a code owner

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@HomyeeKing @johndunderhill @zyyv
0