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

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.

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 18 (4 by maintainers)

Most upvoted comments

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,

w00fz on Apr 30, 2021

@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!

CameronCT on Apr 27, 2021