support for import aliasing

[imkunet]

such beauty is indeed for this world:

@import 'tailwindcss';
@plugin '@tailwindcss/typography';
@config '#/tailwind.config.mjs';

@import '@/styles/ctp.css';
@import '@/styles/theme.css';

@import '@/styles/underline.css';
@import '@/styles/dark.css';
@import '@/styles/font.css';
@import '@/styles/fixes.css';

but, alas:

Unable to load config: #/tailwind.config.ts 559 |                */
560 |           const finishWithoutResolve = log => {
561 |                   /**
562 |                    * @type {ErrorWithDetail}
563 |                    */
564 |                   const error = new Error("Can't " + message);
                       ^
error: Can't resolve '#/tailwind.config.ts' in '/Users/kunet/code/kunet/web/kunet-blog/src/styles'
 details: "",

      at finishWithoutResolve (/Users/kunet/code/kunet/web/kunet-blog/node_modules/enhanced-resolve/lib/Resolver.js:564:18)
      at <anonymous> (/Users/kunet/code/kunet/web/kunet-blog/node_modules/enhanced-resolve/lib/Resolver.js:718:5)
      at <anonymous> (file:///Users/kunet/code/kunet/web/kunet-blog/node_modules/tapable/lib/HookCodeFactory.js:15:10)
      at <anonymous> (/Users/kunet/code/kunet/web/kunet-blog/node_modules/enhanced-resolve/lib/Resolver.js:718:5)
      at <anonymous> (file:///Users/kunet/code/kunet/web/kunet-blog/node_modules/tapable/lib/HookCodeFactory.js:27:10)
      at <anonymous> (/Users/kunet/code/kunet/web/kunet-blog/node_modules/enhanced-resolve/lib/Resolver.js:718:5)
      at <anonymous> (file:///Users/kunet/code/kunet/web/kunet-blog/node_modules/tapable/lib/HookCodeFactory.js:15:10)
      at <anonymous> (/Users/kunet/code/kunet/web/kunet-blog/node_modules/enhanced-resolve/lib/Resolver.js:718:5)
      at <anonymous> (file:///Users/kunet/code/kunet/web/kunet-blog/node_modules/tapable/lib/HookCodeFactory.js:15:10)
      at <anonymous> (/Users/kunet/code/kunet/web/kunet-blog/node_modules/enhanced-resolve/lib/Resolver.js:718:5)

and so, for now, I must resort to:

@import 'tailwindcss';
@plugin '@tailwindcss/typography';
@config '../../tailwind.config.ts';

@import './ctp.css';
@import './theme.css';

@import './underline.css';
@import './dark.css';
@import './font.css';
@import './fixes.css';

unless there is just some way to do this that I don't know about...

[schoero]

Are these tsconfig paths? I don't think Tailwind CSS itself supports that: tailwindlabs/tailwindcss#11097. Or is this actually working for you?

[imkunet]

So after some testing, it seems like this is some niche Astro feature that I'm accidentally taking advantage of? That being Astro seems to respect aliases for any type of resource from the tsconfig paths.

I'm unable to recreate the resolution working in css using just without configuration (as I had suspected it was just vite's doing), even using a plugin like vite-tsconfig-paths (though it seems like they never had css working?), but it all seems to "just work" in Astro so maybe there's some magic happening there...

I've made this stackblitz that shows the import alias working with the hotpink text with a custom color in tailwind:

https://stackblitz.com/edit/withastro-astro-mrje2pnu?file=src%2Fstyles%2Fglobal.css

I've also included eslint with this example (npx eslint and uncomment the line in the eslint config that says to uncomment it to break it) to show that the alias resolution doesn't work in this plugin. The eslint config deviates from the included one in the docs (as the one in the docs doesn't seem to work? Perhaps contributing to the issue in some way? I'm not sure myself).

[schoero]

Thank you for the reproduction. I can also confirm that it works without astro with just the vite plugin.

As my eslint plugin doesn't run with vite, the paths need to be resolved manually. They did that too for their vscode intellisense plugin some time ago: tailwindlabs/tailwindcss-intellisense#1106

Basically the tsconfig paths need to be resolved before passing the css file to the tailwind internals: resolver/index.ts#L115

Not sure if I can find time for that anytime soon 😐