[JIT] Purge paths with 'parent' levels (../) not working with JIT when symlinked

[rhukster]

What version of Tailwind CSS are you using?

2.1.1

What build tool (or framework if it abstracts the build tool) are you using?

postcss-cli v8.3.1

What version of Node.js are you using?

Node v12.20.1

What browser are you using?

Chrome

What operating system are you using?

macOS v11.2.3

Reproduction repository

https://cln.sh/Nwpa4g

Describe your issue

Prior to JIT, I was able to 'purge' paths for production CSS that included paths 'above' the current directory by using the standard filesystem ../ syntax. For example my purge setup is as follows:

purge: [
    '../../config/**/*.yaml',
    '../../pages/**/*.md',
    './blueprints/**/*.yaml',
    './js/**/*.js',
    './templates/**/*.twig',
    './typhoon.yaml',
    './typhoon.php',
    './available-classes.md',
  ],

I'm working in a CMS where Tailwind is part of a theme in user/themes/theme_name folder. However, I also need to check any configuration in user/config/**/*.yaml as well as any references to Tailwind classes in content pages (user/pages/**/*.md).

This works fine in Tailwind without JIT enabled. However, as soon as JIT is enabled those ../* paths are ignored.

You can see this clearly in the linked video because changes in those files do not trigger a JIT compilation, whereas changes in the non-../ paths do.

[ricardo118]

Im noticing the same issue

[mammadataei]

The same issue in a monorepo using vite, all of the styles from other packages get purged.

[mammadataei]

I realized something.
In my case, the classes will not be resolved when the dev server starts, but after changing the file in another package it will be fixed and everything works till the dev server restart again.

[ricardo118]

any update on this?

[adamwathan]

Haven't looked at it yet. Feel free to PR a fix if you like 👍🏻

[ricardo118]

@adamwathan appreciate the response, happy to take a look see if i can figure it out. Do you have any suggestion of where/what file to start looking at?

[CameronCT]

@adamwathan appreciate the response, happy to take a look see if i can figure it out. Do you have any suggestion of where/what file to start looking at?

https://github.com/tailwindlabs/tailwindcss/blob/master/src/lib/purgeUnusedStyles.js

I'm going to assume right here!

[rhukster]

After digging into this a bit today, I've determined that it's actually an issue related to symlinking the tailwind root folder into my project. Tailwind (or perhaps even postcss) is resolving the symlink and therefore the purge entries that are going 'up' (i.e. ../../) and is actually going up from the real path of the symlinked directory and not the path of the project i'm actually in. Not being a JS developer i'm struggling to find out how to change this behavior early enough.

Example:

I have a tailwind theme in my web project:

/Users/me/web/myproject/user/themes/tailwind

This is where tailwind is located, and this is where I run npm run watch for example.

However, that tailwind folder is actually symlinked to:

/Users/me/projects/tailwind

With my purge configuration:

purge: [
    '../../config/**/*.yaml',
    '../../pages/**/*.md',
    './blueprints/**/*.yaml',
    './js/**/*.js',
    './templates/**/*.twig',
    './typhoon.yaml',
    './typhoon.php',
    './available-classes.md',
  ],

The first entry is going up two levels, so instead of looking for purge files in the correct path of /Users/me/web/myproject/user/config/**/*.yaml it's trying to find them here: /Users/me/config/**/*.yaml which does not exist and is not correct.

I'm not sure how/why this works with the non-JIT 'purge' process, but with JIT it's definitely purging differently.

[w00fz]

I have found a workaround that is very hackish but works for our use case, maybe this can help pin-point how/if this can be resolved within JIT.

The main problem seems to be caused by the path being relative to the symbolically linked folder rather than project location it is residing in. I tried several ways within JIT to get the path relative to the project linked to (__dirname, process.cwd(), fs.realpathSync()), but it always ends up resolving relative to the original symbolically linked path, which means anything ../ is targeting the wrong path.

This is my workaround within the tailwind.config.js file. It basically tries to resolve those .. paths before even getting into JIT, since JIT seems to be losing context of the relative linked location.

const path = require('path');
const process = require('process');
const dirname = process.env.PWD || process.cwd();
const normalize = (paths) => {
  return paths.map((_path) => path.normalize(`${dirname}/${_path}`));
}
module.exports = {
  mode: 'jit',
  purge: normalize([
    '../../config/**/*.yaml',
    '../../pages/**/*.md',
    './blueprints/**/*.yaml',
    './js/**/*.js',
    './templates/**/*.twig',
    './typhoon.yaml',
    './typhoon.php',
    './available-classes.md',
  ]),

This is only an issue in Mac/Linux, which is why it falls back to process.cwd()

Cheers,

[rhukster]

Just to confirm, @w00fz's approach addresses my issue. However, I've not closed this because the unexpected difference between non-JIT and JIT behavior leads me to believe this should still be addressed inside JIT so the behavior remains the same between the two.

[adamwathan]

Thanks for digging into this! I expect this will be resolved when we merge #4214 👍🏻

[adamwathan]

Will be fixed in v2.2! In the mean time use the canary build if you want to test it out right away:

npm install -D tailwindcss@canary

[rhukster]

@adamwathan tailwind 2.2.0-canary was working for this issue up to version 11, but 12 and now 13 have broken this path fix again.

[rhukster]

Should I create a new ticket or will you re-open this one? Cheers.

[w00fz]

I can confirm something got reverted after #4214 because we are back to square one and the relative pathing is still an issue.

[adamwathan]

I believe this has been adjusted to what you want here:

#4655

Try npm install tailwindcss@insiders and see if that version behaves the way you want.

[rhukster]

@adamwathan i tried the latest tailwindcss@insiders and unfortunately that doesn't work either.

[michaelrog]

fwiw — I think this issue is not specific to symlinked setups. I'm running into this issue (I think) in a project where there are definitely no symlinks in play, and the Tailwind/Vite install is as vanilla as possible.

In my project, Tailwind lives in /build (along with package.json, node_modules, etc.), but my source files are in /src — So I'm trying to get Tailwind (JIT) to purge ../src/css/**/*.{pcss,css}, and it just... doesn't.

(If, on the other hand, I move my source files below the working dir and ask Tailwind to purge ./src/css/**/*.{pcss,css} it works as expected.)