fix: config and CSS expiration (#346)

* fix: config mtime compared as string
* feat: using a map to cache CSS files
* refactor: declare regexp earlier

lib/util/cssFiles.js

@@ -3,9 +3,10 @@
 const fg = require('fast-glob');
 const fs = require('fs');
 const postcss = require('postcss');
+const lastClassFromSelectorRegexp = /\.([^\.\,\s\n\:\(\)\[\]\'~\+\>\*\\]*)/gim;
 const removeDuplicatesFromArray = require('./removeDuplicatesFromArray');
 
-let previousGlobsResults = [];
+const cssFilesInfos = new Map();
 let lastUpdate = null;
 let classnamesFromFiles = [];
 
@@ -16,28 +17,61 @@ let classnamesFromFiles = [];
  * @returns {Array} List of classnames
  */
 const generateClassnamesListSync = (patterns, refreshRate = 5_000) => {
- const now = new Date().getTime();
- const files = fg.sync(patterns, { suppressErrors: true });
- const newGlobs = previousGlobsResults.flat().join(',') != files.flat().join(',');
- const expired = lastUpdate === null || now - lastUpdate > refreshRate;
- if (newGlobs || expired) {
- previousGlobsResults = files;
- lastUpdate = now;
- let detectedClassnames = [];
- for (const file of files) {
- const data = fs.readFileSync(file, 'utf-8');
- const root = postcss.parse(data);
- root.walkRules((rule) => {
- const regexp = /\.([^\.\,\s\n\:\(\)\[\]\'~\+\>\*\\]*)/gim;
- const matches = [...rule.selector.matchAll(regexp)];
- const classnames = matches.map((arr) => arr[1]);
- detectedClassnames.push(...classnames);
- });
- detectedClassnames = removeDuplicatesFromArray(detectedClassnames);
+ const now = Date.now();
+ const isExpired = lastUpdate === null || now - lastUpdate > refreshRate;
+
+ if (!isExpired) {
+ // console.log(`generateClassnamesListSync from cache (${classnamesFromFiles.length} classes)`);
+ return classnamesFromFiles;
+ }
+
+ // console.log('generateClassnamesListSync EXPIRED');
+ // Update classnames from CSS files
+ lastUpdate = now;
+ const filesToBeRemoved = new Set([...cssFilesInfos.keys()]);
+ const files = fg.sync(patterns, { suppressErrors: true, stats: true });
+ for (const file of files) {
+ let mtime = '';
+ let canBeSkipped = cssFilesInfos.has(file.path);
+ if (canBeSkipped) {
+ // This file is still used
+ filesToBeRemoved.delete(file.path);
+ // Check modification date
+ const stats = fs.statSync(file.path);
+ mtime = `${stats.mtime || ''}`;
+ canBeSkipped = cssFilesInfos.get(file.path).mtime === mtime;
  }
- classnamesFromFiles = detectedClassnames;
+ if (canBeSkipped) {
+ // File did not change since last run
+ continue;
+ }
+ // Parse CSS file
+ const data = fs.readFileSync(file.path, 'utf-8');
+ const root = postcss.parse(data);
+ let detectedClassnames = new Set();
+ root.walkRules((rule) => {
+ const matches = [...rule.selector.matchAll(lastClassFromSelectorRegexp)];
+ const classnames = matches.map((arr) => arr[1]);
+ detectedClassnames = new Set([...detectedClassnames, ...classnames]);
+ });
+ // Save the detected classnames
+ cssFilesInfos.set(file.path, {
+ mtime: mtime,
+ classNames: [...detectedClassnames],
+ });
+ }
+ // Remove erased CSS from the Map
+ const deletedFiles = [...filesToBeRemoved];
+ for (let i = 0; i < deletedFiles.length; i++) {
+ cssFilesInfos.delete(deletedFiles[i]);
  }
- return classnamesFromFiles;
+ // Build the final list
+ classnamesFromFiles = [];
+ cssFilesInfos.forEach((css) => {
+ classnamesFromFiles = [...classnamesFromFiles, ...css.classNames];
+ });
+ // Unique classnames
+ return removeDuplicatesFromArray(classnamesFromFiles);
 };
 
 module.exports = generateClassnamesListSync;

lib/util/customConfig.js

@@ -25,27 +25,39 @@ let lastModifiedDate = null;
 function requireUncached(module) {
  delete require.cache[require.resolve(module)];
  if (twLoadConfig === null) {
+ // Using native loading
  return require(module);
  } else {
+ // Using Tailwind CSS's loadConfig utility
  return twLoadConfig.loadConfig(module);
  }
 }
 
+/**
+ * Load the config from a path string or parsed from an object
+ * @param {string|Object} config
+ * @returns `null` when unchanged, `{}` when not found
+ */
 function loadConfig(config) {
  let loadedConfig = null;
  if (typeof config === 'string') {
  const resolvedPath = path.isAbsolute(config) ? config : path.join(path.resolve(), config);
  try {
  const stats = fs.statSync(resolvedPath);
+ const mtime = `${stats.mtime || ''}`;
  if (stats === null) {
+ // Default to no config
  loadedConfig = {};
- } else if (lastModifiedDate !== stats.mtime) {
- lastModifiedDate = stats.mtime;
+ } else if (lastModifiedDate !== mtime) {
+ // Load the config based on path
+ lastModifiedDate = mtime;
  loadedConfig = requireUncached(resolvedPath);
  } else {
+ // Unchanged config
  loadedConfig = null;
  }
  } catch (err) {
+ // Default to no config
  loadedConfig = {};
  } finally {
  return loadedConfig;
@@ -70,8 +82,8 @@ function convertConfigToString(config) {
 }
 
 function resolve(twConfig) {
- const now = new Date().getTime();
  const newConfig = convertConfigToString(twConfig) !== convertConfigToString(previousConfig);
+ const now = Date.now();
  const expired = now - lastCheck > CHECK_REFRESH_RATE;
  if (newConfig || expired) {
  previousConfig = twConfig;

package.json

@@ -1,6 +1,6 @@
 {
  "name": "eslint-plugin-tailwindcss",
- "version": "3.17.2",
+ "version": "3.17.3-beta.3",
  "description": "Rules enforcing best practices while using Tailwind CSS",
  "keywords": [
  "eslint",

tests/integrations/flat-config.js

@@ -5,7 +5,7 @@ const cp = require("child_process");
 const path = require("path");
 const semver = require("semver");
 
-const ESLINT = `.${path.sep}node_modules${path.sep}.bin${path.sep}eslint`;
+const ESLINT_BIN_PATH = [".", "node_modules", ".bin", "eslint"].join(path.sep);
 
 describe("Integration with flat config", () => {
  let originalCwd;
@@ -29,11 +29,10 @@ describe("Integration with flat config", () => {
  return;
  }
 
- const result = JSON.parse(
- cp.execSync(`${ESLINT} a.vue --format=json`, {
- encoding: "utf8",
- })
- );
+ const lintResult = cp.execSync(`${ESLINT_BIN_PATH} a.vue --format=json`, {
+ encoding: "utf8",
+ });
+ const result = JSON.parse(lintResult);
  assert.strictEqual(result.length, 1);
  assert.deepStrictEqual(result[0].messages[0].messageId, "invalidOrder");
  });

tests/integrations/legacy-config.js

@@ -5,7 +5,7 @@ const cp = require("child_process");
 const path = require("path");
 const semver = require("semver");
 
-const ESLINT = `.${path.sep}node_modules${path.sep}.bin${path.sep}eslint`;
+const ESLINT_BIN_PATH = [".", "node_modules", ".bin", "eslint"].join(path.sep);
 
 describe("Integration with legacy config", () => {
  let originalCwd;
@@ -29,11 +29,10 @@ describe("Integration with legacy config", () => {
  return;
  }
 
- const result = JSON.parse(
- cp.execSync(`${ESLINT} a.vue --format=json`, {
- encoding: "utf8",
- })
- );
+ const lintResult = cp.execSync(`${ESLINT_BIN_PATH} a.vue --format=json`, {
+ encoding: "utf8",
+ });
+ const result = JSON.parse(lintResult);
  assert.strictEqual(result.length, 1);
  assert.deepStrictEqual(result[0].messages[0].messageId, "invalidOrder");
  });