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");
   });