tailwindcss 3.0.7 → 3.0.11

package/src/lib/expandTailwindAtRules.js

@@ -140,14 +140,25 @@ export default function expandTailwindAtRules(context) {
       variants: null,
     }
 
-    // Make sure this file contains Tailwind directives. If not, we can save
-    // a lot of work and bail early. Also we don't have to register our touch
-    // file as a dependency since the output of this CSS does not depend on
-    // the source of any templates. Think Vue <style> blocks for example.
-    root.walkAtRules('tailwind', (rule) => {
-      if (Object.keys(layerNodes).includes(rule.params)) {
-        layerNodes[rule.params] = rule
+    // let hasApply = false
+
+    root.walkAtRules((rule) => {
+      // Make sure this file contains Tailwind directives. If not, we can save
+      // a lot of work and bail early. Also we don't have to register our touch
+      // file as a dependency since the output of this CSS does not depend on
+      // the source of any templates. Think Vue <style> blocks for example.
+      if (rule.name === 'tailwind') {
+        if (Object.keys(layerNodes).includes(rule.params)) {
+          layerNodes[rule.params] = rule
+        }
       }
+
+      // We also want to check for @apply because the user can
+      // apply classes in an isolated environment like CSS
+      // modules and we still need to inject defaults
+      // if (rule.name === 'apply') {
+      //   hasApply = true
+      // }
     })
 
     if (Object.values(layerNodes).every((n) => n === null)) {

package/src/lib/normalizeTailwindDirectives.js

@@ -3,8 +3,13 @@ import log from '../util/log'
 export default function normalizeTailwindDirectives(root) {
   let tailwindDirectives = new Set()
   let layerDirectives = new Set()
+  let applyDirectives = new Set()
 
   root.walkAtRules((atRule) => {
+    if (atRule.name === 'apply') {
+      applyDirectives.add(atRule)
+    }
+
     if (atRule.name === 'import') {
       if (atRule.params === '"tailwindcss/base"' || atRule.params === "'tailwindcss/base'") {
         atRule.name = 'tailwind'
@@ -74,5 +79,5 @@ export default function normalizeTailwindDirectives(root) {
     }
   }
 
-  return tailwindDirectives
+  return { tailwindDirectives, applyDirectives }
 }

package/src/lib/setupContextUtils.js

@@ -435,7 +435,14 @@ function trackModified(files, fileModifiedMap) {
     let parsed = url.parse(file)
     let pathname = parsed.hash ? parsed.href.replace(parsed.hash, '') : parsed.href
     pathname = parsed.search ? pathname.replace(parsed.search, '') : pathname
-    let newModified = fs.statSync(decodeURIComponent(pathname)).mtimeMs
+    let newModified = fs.statSync(decodeURIComponent(pathname), { throwIfNoEntry: false })?.mtimeMs
+    if (!newModified) {
+      // It could happen that a file is passed in that doesn't exist. E.g.:
+      // postcss-cli will provide you a fake path when reading from stdin. This
+      // path then looks like /path-to-your-project/stdin In that case we just
+      // want to ignore it and don't track changes at all.
+      continue
+    }
 
     if (!fileModifiedMap.has(file) || newModified > fileModifiedMap.get(file)) {
       changed = true

package/src/lib/setupTrackingContext.js

@@ -112,19 +112,20 @@ function resolveChangedFiles(candidateFiles, fileModifiedMap) {
 // source path), or set up a new one (including setting up watchers and registering
 // plugins) then return it
 export default function setupTrackingContext(configOrPath) {
-  return ({ tailwindDirectives, registerDependency }) => {
+  return ({ tailwindDirectives, registerDependency, applyDirectives }) => {
     return (root, result) => {
       let [tailwindConfig, userConfigPath, tailwindConfigHash, configDependencies] =
         getTailwindConfig(configOrPath)
 
       let contextDependencies = new Set(configDependencies)
 
-      // If there are no @tailwind rules, we don't consider this CSS file or it's dependencies
-      // to be dependencies of the context. Can reuse the context even if they change.
-      // We may want to think about `@layer` being part of this trigger too, but it's tough
-      // because it's impossible for a layer in one file to end up in the actual @tailwind rule
-      // in another file since independent sources are effectively isolated.
-      if (tailwindDirectives.size > 0) {
+      // If there are no @tailwind or @apply rules, we don't consider this CSS
+      // file or its dependencies to be dependencies of the context. Can reuse
+      // the context even if they change. We may want to think about `@layer`
+      // being part of this trigger too, but it's tough because it's impossible
+      // for a layer in one file to end up in the actual @tailwind rule in
+      // another file since independent sources are effectively isolated.
+      if (tailwindDirectives.size > 0 || applyDirectives.size > 0) {
         // Add current css file as a context dependencies.
         contextDependencies.add(result.opts.from)
 
@@ -147,12 +148,12 @@ export default function setupTrackingContext(configOrPath) {
 
       let candidateFiles = getCandidateFiles(context, tailwindConfig)
 
-      // If there are no @tailwind rules, we don't consider this CSS file or it's dependencies
-      // to be dependencies of the context. Can reuse the context even if they change.
+      // If there are no @tailwind or @apply rules, we don't consider this CSS file or it's
+      // dependencies to be dependencies of the context. Can reuse the context even if they change.
       // We may want to think about `@layer` being part of this trigger too, but it's tough
       // because it's impossible for a layer in one file to end up in the actual @tailwind rule
       // in another file since independent sources are effectively isolated.
-      if (tailwindDirectives.size > 0) {
+      if (tailwindDirectives.size > 0 || applyDirectives.size > 0) {
         let fileModifiedMap = getFileModifiedMap(context)
 
         // Add template paths as postcss dependencies.

package/src/lib/sharedState.js

@@ -1,10 +1,46 @@
 export const env = {
-  TAILWIND_MODE: process.env.TAILWIND_MODE,
   NODE_ENV: process.env.NODE_ENV,
-  DEBUG: process.env.DEBUG !== undefined && process.env.DEBUG !== '0',
-  TAILWIND_DISABLE_TOUCH: process.env.TAILWIND_DISABLE_TOUCH !== undefined,
-  TAILWIND_TOUCH_DIR: process.env.TAILWIND_TOUCH_DIR,
+  DEBUG: resolveDebug(process.env.DEBUG),
 }
 export const contextMap = new Map()
 export const configContextMap = new Map()
 export const contextSourcesMap = new Map()
+
+export function resolveDebug(debug) {
+  if (debug === undefined) {
+    return false
+  }
+
+  // Environment variables are strings, so convert to boolean
+  if (debug === 'true' || debug === '1') {
+    return true
+  }
+
+  if (debug === 'false' || debug === '0') {
+    return false
+  }
+
+  // Keep the debug convention into account:
+  // DEBUG=* -> This enables all debug modes
+  // DEBUG=projectA,projectB,projectC -> This enables debug for projectA, projectB and projectC
+  // DEBUG=projectA:* -> This enables all debug modes for projectA (if you have sub-types)
+  // DEBUG=projectA,-projectB -> This enables debug for projectA and explicitly disables it for projectB
+
+  if (debug === '*') {
+    return true
+  }
+
+  let debuggers = debug.split(',').map((d) => d.split(':')[0])
+
+  // Ignoring tailwindcss
+  if (debuggers.includes('-tailwindcss')) {
+    return false
+  }
+
+  // Including tailwindcss
+  if (debuggers.includes('tailwindcss')) {
+    return true
+  }
+
+  return false
+}

package/src/processTailwindFeatures.js

@@ -12,10 +12,11 @@ import { issueFlagNotices } from './featureFlags'
 
 export default function processTailwindFeatures(setupContext) {
   return function (root, result) {
-    let tailwindDirectives = normalizeTailwindDirectives(root)
+    let { tailwindDirectives, applyDirectives } = normalizeTailwindDirectives(root)
 
     let context = setupContext({
       tailwindDirectives,
+      applyDirectives,
       registerDependency(dependency) {
         result.messages.push({
           plugin: 'tailwindcss',

package/src/util/color.js

@@ -5,8 +5,11 @@ let SHORT_HEX = /^#([a-f\d])([a-f\d])([a-f\d])([a-f\d])?$/i
 let VALUE = `(?:\\d+|\\d*\\.\\d+)%?`
 let SEP = `(?:\\s*,\\s*|\\s+)`
 let ALPHA_SEP = `\\s*[,/]\\s*`
-let RGB_HSL = new RegExp(
-  `^(rgb|hsl)a?\\(\\s*(${VALUE})${SEP}(${VALUE})${SEP}(${VALUE})(?:${ALPHA_SEP}(${VALUE}))?\\s*\\)$`
+let RGB = new RegExp(
+  `^rgba?\\(\\s*(${VALUE})${SEP}(${VALUE})${SEP}(${VALUE})(?:${ALPHA_SEP}(${VALUE}))?\\s*\\)$`
+)
+let HSL = new RegExp(
+  `^hsla?\\(\\s*((?:${VALUE})(?:deg|rad|grad|turn)?)${SEP}(${VALUE})${SEP}(${VALUE})(?:${ALPHA_SEP}(${VALUE}))?\\s*\\)$`
 )
 
 export function parseColor(value) {
@@ -37,13 +40,23 @@ export function parseColor(value) {
     }
   }
 
-  let match = value.match(RGB_HSL)
+  let rgbMatch = value.match(RGB)
+
+  if (rgbMatch !== null) {
+    return {
+      mode: 'rgb',
+      color: [rgbMatch[1], rgbMatch[2], rgbMatch[3]].map((v) => v.toString()),
+      alpha: rgbMatch[4]?.toString?.(),
+    }
+  }
+
+  let hslMatch = value.match(HSL)
 
-  if (match !== null) {
+  if (hslMatch !== null) {
     return {
-      mode: match[1],
-      color: [match[2], match[3], match[4]].map((v) => v.toString()),
-      alpha: match[5]?.toString?.(),
+      mode: 'hsl',
+      color: [hslMatch[1], hslMatch[2], hslMatch[3]].map((v) => v.toString()),
+      alpha: hslMatch[4]?.toString?.(),
     }
   }
 

package/lib/lib/setupWatchingContext.js

@@ -1,288 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-exports.default = setupWatchingContext;
-var _fs = _interopRequireDefault(require("fs"));
-var _path = _interopRequireDefault(require("path"));
-var _tmp = _interopRequireDefault(require("tmp"));
-var _chokidar = _interopRequireDefault(require("chokidar"));
-var _fastGlob = _interopRequireDefault(require("fast-glob"));
-var _quickLru = _interopRequireDefault(require("quick-lru"));
-var _normalizePath = _interopRequireDefault(require("normalize-path"));
-var _hashConfig = _interopRequireDefault(require("../util/hashConfig"));
-var _log = _interopRequireDefault(require("../util/log"));
-var _getModuleDependencies = _interopRequireDefault(require("../lib/getModuleDependencies"));
-var _resolveConfig = _interopRequireDefault(require("../public/resolve-config"));
-var _resolveConfigPath = _interopRequireDefault(require("../util/resolveConfigPath"));
-var _setupContextUtils = require("./setupContextUtils");
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-// This is used to trigger rebuilds. Just updating the timestamp
-// is significantly faster than actually writing to the file (10x).
-function touch(filename) {
-    let time = new Date();
-    try {
-        _fs.default.utimesSync(filename, time, time);
-    } catch (err) {
-        _fs.default.closeSync(_fs.default.openSync(filename, 'w'));
-    }
-}
-let watchers = new WeakMap();
-function getWatcher(context) {
-    if (watchers.has(context)) {
-        return watchers.get(context);
-    }
-    return null;
-}
-function setWatcher(context, watcher) {
-    return watchers.set(context, watcher);
-}
-let touchFiles = new WeakMap();
-function getTouchFile(context) {
-    if (touchFiles.has(context)) {
-        return touchFiles.get(context);
-    }
-    return null;
-}
-function setTouchFile(context, touchFile) {
-    return touchFiles.set(context, touchFile);
-}
-let configPaths = new WeakMap();
-function getConfigPath(context, configOrPath) {
-    if (!configPaths.has(context)) {
-        configPaths.set(context, (0, _resolveConfigPath).default(configOrPath));
-    }
-    return configPaths.get(context);
-}
-function rebootWatcher(context, configPath, configDependencies, candidateFiles) {
-    let touchFile = getTouchFile(context);
-    if (touchFile === null) {
-        touchFile = _tmp.default.fileSync().name;
-        setTouchFile(context, touchFile);
-        touch(touchFile);
-    }
-    let watcher = getWatcher(context);
-    Promise.resolve(watcher ? watcher.close() : null).then(()=>{
-        _log.default.info([
-            'Tailwind CSS is watching for changes...',
-            'https://tailwindcss.com/docs/just-in-time-mode#watch-mode-and-one-off-builds', 
-        ]);
-        watcher = _chokidar.default.watch([
-            ...candidateFiles,
-            ...configDependencies
-        ], {
-            ignoreInitial: true,
-            awaitWriteFinish: process.platform === 'win32' ? {
-                stabilityThreshold: 50,
-                pollInterval: 10
-            } : false
-        });
-        setWatcher(context, watcher);
-        watcher.on('add', (file)=>{
-            let changedFile = _path.default.resolve('.', file);
-            let content = _fs.default.readFileSync(changedFile, 'utf8');
-            let extension = _path.default.extname(changedFile).slice(1);
-            context.changedContent.push({
-                content,
-                extension
-            });
-            touch(touchFile);
-        });
-        watcher.on('change', (file)=>{
-            // If it was a config dependency, touch the config file to trigger a new context.
-            // This is not really that clean of a solution but it's the fastest, because we
-            // can do a very quick check on each build to see if the config has changed instead
-            // of having to get all of the module dependencies and check every timestamp each
-            // time.
-            if (configDependencies.has(file)) {
-                for (let dependency of configDependencies){
-                    delete require.cache[require.resolve(dependency)];
-                }
-                touch(configPath);
-            } else {
-                let changedFile = _path.default.resolve('.', file);
-                let content = _fs.default.readFileSync(changedFile, 'utf8');
-                let extension = _path.default.extname(changedFile).slice(1);
-                context.changedContent.push({
-                    content,
-                    extension
-                });
-                touch(touchFile);
-            }
-        });
-        watcher.on('unlink', (file)=>{
-            // Touch the config file if any of the dependencies are deleted.
-            if (configDependencies.has(file)) {
-                for (let dependency of configDependencies){
-                    delete require.cache[require.resolve(dependency)];
-                }
-                touch(configPath);
-            }
-        });
-    });
-}
-let configPathCache = new _quickLru.default({
-    maxSize: 100
-});
-let configDependenciesCache = new WeakMap();
-function getConfigDependencies(context) {
-    if (!configDependenciesCache.has(context)) {
-        configDependenciesCache.set(context, new Set());
-    }
-    return configDependenciesCache.get(context);
-}
-let candidateFilesCache = new WeakMap();
-function getCandidateFiles(context, tailwindConfig) {
-    if (candidateFilesCache.has(context)) {
-        return candidateFilesCache.get(context);
-    }
-    let candidateFiles = tailwindConfig.content.files.filter((item)=>typeof item === 'string'
-    ).map((contentPath)=>(0, _normalizePath).default(contentPath)
-    );
-    return candidateFilesCache.set(context, candidateFiles).get(context);
-}
-// Get the config object based on a path
-function getTailwindConfig(configOrPath) {
-    let userConfigPath = (0, _resolveConfigPath).default(configOrPath);
-    if (userConfigPath !== null) {
-        let [prevConfig, prevModified = -Infinity, prevConfigHash] = configPathCache.get(userConfigPath) || [];
-        let modified = _fs.default.statSync(userConfigPath).mtimeMs;
-        // It hasn't changed (based on timestamp)
-        if (modified <= prevModified) {
-            return [
-                prevConfig,
-                userConfigPath,
-                prevConfigHash,
-                [
-                    userConfigPath
-                ]
-            ];
-        }
-        // It has changed (based on timestamp), or first run
-        delete require.cache[userConfigPath];
-        let newConfig = (0, _resolveConfig).default(require(userConfigPath));
-        let newHash = (0, _hashConfig).default(newConfig);
-        configPathCache.set(userConfigPath, [
-            newConfig,
-            modified,
-            newHash
-        ]);
-        return [
-            newConfig,
-            userConfigPath,
-            newHash,
-            [
-                userConfigPath
-            ]
-        ];
-    }
-    // It's a plain object, not a path
-    let newConfig = (0, _resolveConfig).default(configOrPath.config === undefined ? configOrPath : configOrPath.config);
-    return [
-        newConfig,
-        null,
-        (0, _hashConfig).default(newConfig),
-        []
-    ];
-}
-function resolvedChangedContent(context, candidateFiles) {
-    let changedContent = context.tailwindConfig.content.files.filter((item)=>typeof item.raw === 'string'
-    ).map(({ raw , extension ='html'  })=>({
-            content: raw,
-            extension
-        })
-    );
-    for (let changedFile of resolveChangedFiles(context, candidateFiles)){
-        let content = _fs.default.readFileSync(changedFile, 'utf8');
-        let extension = _path.default.extname(changedFile).slice(1);
-        changedContent.push({
-            content,
-            extension
-        });
-    }
-    return changedContent;
-}
-let scannedContentCache = new WeakMap();
-function resolveChangedFiles(context, candidateFiles) {
-    let changedFiles = new Set();
-    // If we're not set up and watching files ourselves, we need to do
-    // the work of grabbing all of the template files for candidate
-    // detection.
-    if (!scannedContentCache.has(context)) {
-        let files = _fastGlob.default.sync(candidateFiles);
-        for (let file of files){
-            changedFiles.add(file);
-        }
-        scannedContentCache.set(context, true);
-    }
-    return changedFiles;
-}
-function setupWatchingContext(configOrPath) {
-    return ({ tailwindDirectives , registerDependency  })=>{
-        return (root, result)=>{
-            let [tailwindConfig, userConfigPath, tailwindConfigHash, configDependencies] = getTailwindConfig(configOrPath);
-            let contextDependencies = new Set(configDependencies);
-            // If there are no @tailwind rules, we don't consider this CSS file or it's dependencies
-            // to be dependencies of the context. Can reuse the context even if they change.
-            // We may want to think about `@layer` being part of this trigger too, but it's tough
-            // because it's impossible for a layer in one file to end up in the actual @tailwind rule
-            // in another file since independent sources are effectively isolated.
-            if (tailwindDirectives.size > 0) {
-                // Add current css file as a context dependencies.
-                contextDependencies.add(result.opts.from);
-                // Add all css @import dependencies as context dependencies.
-                for (let message of result.messages){
-                    if (message.type === 'dependency') {
-                        contextDependencies.add(message.file);
-                    }
-                }
-            }
-            let [context, isNewContext] = (0, _setupContextUtils).getContext(root, result, tailwindConfig, userConfigPath, tailwindConfigHash, contextDependencies);
-            let candidateFiles = getCandidateFiles(context, tailwindConfig);
-            let contextConfigDependencies = getConfigDependencies(context);
-            for (let file of configDependencies){
-                registerDependency({
-                    type: 'dependency',
-                    file
-                });
-            }
-            context.disposables.push((oldContext)=>{
-                let watcher = getWatcher(oldContext);
-                if (watcher !== null) {
-                    watcher.close();
-                }
-            });
-            let configPath = getConfigPath(context, configOrPath);
-            if (configPath !== null) {
-                for (let dependency of (0, _getModuleDependencies).default(configPath)){
-                    if (dependency.file === configPath) {
-                        continue;
-                    }
-                    contextConfigDependencies.add(dependency.file);
-                }
-            }
-            if (isNewContext) {
-                rebootWatcher(context, configPath, contextConfigDependencies, candidateFiles);
-            }
-            // Register our temp file as a dependency — we write to this file
-            // to trigger rebuilds.
-            let touchFile = getTouchFile(context);
-            if (touchFile) {
-                registerDependency({
-                    type: 'dependency',
-                    file: touchFile
-                });
-            }
-            if (tailwindDirectives.size > 0) {
-                for (let changedContent of resolvedChangedContent(context, candidateFiles)){
-                    context.changedContent.push(changedContent);
-                }
-            }
-            return context;
-        };
-    };
-}