tailwindcss 0.0.0-insiders.cb6e45a → 0.0.0-insiders.cc1eec6

package/README.md

@@ -1,9 +1,10 @@
 <p align="center">
-  <a href="https://tailwindcss.com/#gh-light-mode-only" target="_blank">
-    <img src="./.github/logo-light.svg" alt="Tailwind CSS" width="350" height="70">
-  </a>
-  <a href="https://tailwindcss.com/#gh-dark-mode-only" target="_blank">
-    <img src="./.github/logo-dark.svg" alt="Tailwind CSS" width="350" height="70">
+  <a href="https://tailwindcss.com" target="_blank">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tailwindlabs/tailwindcss/HEAD/.github/logo-dark.svg">
+      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/tailwindlabs/tailwindcss/HEAD/.github/logo-light.svg">
+      <img alt="Tailwind CSS" src="https://raw.githubusercontent.com/tailwindlabs/tailwindcss/HEAD/.github/logo-light.svg" width="350" height="70" style="max-width: 100%;">
+    </picture>
   </a>
 </p>
 
@@ -13,7 +14,7 @@
 
 
 <p align="center">
-    <a href="https://github.com/tailwindlabs/tailwindcss/actions"><img src="https://img.shields.io/github/workflow/status/tailwindlabs/tailwindcss/Node.js%20CI" alt="Build Status"></a>
+    <a href="https://github.com/tailwindlabs/tailwindcss/actions"><img src="https://img.shields.io/github/actions/workflow/status/tailwindlabs/tailwindcss/ci-stable.yml?branch=master" alt="Build Status"></a>
     <a href="https://www.npmjs.com/package/tailwindcss"><img src="https://img.shields.io/npm/dt/tailwindcss.svg" alt="Total Downloads"></a>
     <a href="https://github.com/tailwindcss/tailwindcss/releases"><img src="https://img.shields.io/npm/v/tailwindcss.svg" alt="Latest Release"></a>
     <a href="https://github.com/tailwindcss/tailwindcss/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tailwindcss.svg" alt="License"></a>

package/lib/cli/build/index.js

@@ -9,13 +9,14 @@ Object.defineProperty(exports, "build", {
 });
 const _fs = /*#__PURE__*/ _interopRequireDefault(require("fs"));
 const _path = /*#__PURE__*/ _interopRequireDefault(require("path"));
+const _resolveConfigPathJs = require("../../util/resolveConfigPath.js");
 const _pluginJs = require("./plugin.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-async function build(args, configs) {
+async function build(args) {
     let input = args["--input"];
     let shouldWatch = args["--watch"];
     // TODO: Deprecate this in future versions
@@ -32,13 +33,20 @@ async function build(args, configs) {
         process.exit(9);
     }
     // TODO: Reference the @config path here if exists
-    let configPath = args["--config"] ? args["--config"] : ((defaultPath)=>_fs.default.existsSync(defaultPath) ? defaultPath : null)(_path.default.resolve(`./${configs.tailwind}`));
+    let configPath = args["--config"] ? args["--config"] : (0, _resolveConfigPathJs.resolveDefaultConfigPath)();
     let processor = await (0, _pluginJs.createProcessor)(args, configPath);
     if (shouldWatch) {
-        /* Abort the watcher if stdin is closed to avoid zombie processes */ process.stdin.on("end", ()=>process.exit(0));
+        // Abort the watcher if stdin is closed to avoid zombie processes
+        // You can disable this behavior with --watch=always
+        if (args["--watch"] !== "always") {
+            process.stdin.on("end", ()=>process.exit(0));
+        }
         process.stdin.resume();
         await processor.watch();
     } else {
-        await processor.build();
+        await processor.build().catch((e)=>{
+            console.error(e);
+            process.exit(1);
+        });
     }
 }

package/lib/cli/build/plugin.js

@@ -18,14 +18,15 @@ const _options = /*#__PURE__*/ _interopRequireDefault(require("postcss-load-conf
 const _processTailwindFeatures = /*#__PURE__*/ _interopRequireDefault(require("../../processTailwindFeatures"));
 const _deps = require("./deps");
 const _utils = require("./utils");
-const _shared = require("../shared");
+const _sharedState = require("../../lib/sharedState");
 const _resolveConfigJs = /*#__PURE__*/ _interopRequireDefault(require("../../../resolveConfig.js"));
-const _getModuleDependenciesJs = /*#__PURE__*/ _interopRequireDefault(require("../../lib/getModuleDependencies.js"));
 const _contentJs = require("../../lib/content.js");
 const _watchingJs = require("./watching.js");
 const _fastGlob = /*#__PURE__*/ _interopRequireDefault(require("fast-glob"));
 const _findAtConfigPathJs = require("../../lib/findAtConfigPath.js");
 const _log = /*#__PURE__*/ _interopRequireDefault(require("../../util/log"));
+const _loadConfig = require("../../lib/load-config");
+const _getModuleDependencies = /*#__PURE__*/ _interopRequireDefault(require("../../lib/getModuleDependencies"));
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -109,12 +110,12 @@ let state = {
     /** @type {any} */ context: null,
     /** @type {ReturnType<typeof createWatcher> | null} */ watcher: null,
     /** @type {{content: string, extension: string}[]} */ changedContent: [],
-    configDependencies: new Set(),
+    /** @type {ReturnType<typeof load> | null} */ configBag: null,
     contextDependencies: new Set(),
     /** @type {import('../../lib/content.js').ContentPath[]} */ contentPaths: [],
     refreshContentPaths () {
-        var ref;
-        this.contentPaths = (0, _contentJs.parseCandidateFiles)(this.context, (ref = this.context) === null || ref === void 0 ? void 0 : ref.tailwindConfig);
+        var _this_context;
+        this.contentPaths = (0, _contentJs.parseCandidateFiles)(this.context, (_this_context = this.context) === null || _this_context === void 0 ? void 0 : _this_context.tailwindConfig);
     },
     get config () {
         return this.context.tailwindConfig;
@@ -127,33 +128,36 @@ let state = {
     },
     loadConfig (configPath, content) {
         if (this.watcher && configPath) {
-            this.refreshConfigDependencies(configPath);
+            this.refreshConfigDependencies();
         }
-        let config = configPath ? require(configPath) : {};
+        let config = (0, _loadConfig.loadConfig)(configPath);
+        let dependencies = (0, _getModuleDependencies.default)(configPath);
+        this.configBag = {
+            config,
+            dependencies,
+            dispose () {
+                for (let file of dependencies){
+                    delete require.cache[require.resolve(file)];
+                }
+            }
+        };
         // @ts-ignore
-        config = (0, _resolveConfigJs.default)(config, {
+        this.configBag.config = (0, _resolveConfigJs.default)(this.configBag.config, {
             content: {
                 files: []
             }
         });
         // Override content files if `--content` has been passed explicitly
         if ((content === null || content === void 0 ? void 0 : content.length) > 0) {
-            config.content.files = content;
+            this.configBag.config.content.files = content;
         }
-        return config;
+        return this.configBag.config;
     },
-    refreshConfigDependencies (configPath) {
-        _shared.env.DEBUG && console.time("Module dependencies");
-        for (let file of this.configDependencies){
-            delete require.cache[require.resolve(file)];
-        }
-        if (configPath) {
-            let deps = (0, _getModuleDependenciesJs.default)(configPath).map(({ file  })=>file);
-            for (let dependency of deps){
-                this.configDependencies.add(dependency);
-            }
-        }
-        _shared.env.DEBUG && console.timeEnd("Module dependencies");
+    refreshConfigDependencies () {
+        var _this_configBag;
+        _sharedState.env.DEBUG && console.time("Module dependencies");
+        (_this_configBag = this.configBag) === null || _this_configBag === void 0 ? void 0 : _this_configBag.dispose();
+        _sharedState.env.DEBUG && console.timeEnd("Module dependencies");
     },
     readContentPaths () {
         let content = [];
@@ -161,18 +165,25 @@ let state = {
         // TODO: When we make the postcss plugin async-capable this can become async
         let files = _fastGlob.default.sync(this.contentPatterns.all);
         for (let file of files){
-            content.push({
-                content: _fs.default.readFileSync(_path.default.resolve(file), "utf8"),
-                extension: _path.default.extname(file).slice(1)
-            });
+            if (_sharedState.env.OXIDE) {
+                content.push({
+                    file,
+                    extension: _path.default.extname(file).slice(1)
+                });
+            } else {
+                content.push({
+                    content: _fs.default.readFileSync(_path.default.resolve(file), "utf8"),
+                    extension: _path.default.extname(file).slice(1)
+                });
+            }
         }
         // Resolve raw content in the tailwind config
         let rawContent = this.config.content.files.filter((file)=>{
             return file !== null && typeof file === "object";
         });
-        for (let { raw: content1 , extension ="html"  } of rawContent){
-            content1.push({
-                content: content1,
+        for (let { raw: htmlContent , extension ="html"  } of rawContent){
+            content.push({
+                content: htmlContent,
                 extension
             });
         }
@@ -183,37 +194,35 @@ let state = {
             this.context.changedContent = this.changedContent.splice(0);
             return this.context;
         }
-        _shared.env.DEBUG && console.time("Searching for config");
-        var ref;
-        let configPath = (ref = (0, _findAtConfigPathJs.findAtConfigPath)(root, result)) !== null && ref !== void 0 ? ref : cliConfigPath;
-        _shared.env.DEBUG && console.timeEnd("Searching for config");
-        _shared.env.DEBUG && console.time("Loading config");
+        _sharedState.env.DEBUG && console.time("Searching for config");
+        var _findAtConfigPath;
+        let configPath = (_findAtConfigPath = (0, _findAtConfigPathJs.findAtConfigPath)(root, result)) !== null && _findAtConfigPath !== void 0 ? _findAtConfigPath : cliConfigPath;
+        _sharedState.env.DEBUG && console.timeEnd("Searching for config");
+        _sharedState.env.DEBUG && console.time("Loading config");
         let config = this.loadConfig(configPath, content);
-        _shared.env.DEBUG && console.timeEnd("Loading config");
-        _shared.env.DEBUG && console.time("Creating context");
+        _sharedState.env.DEBUG && console.timeEnd("Loading config");
+        _sharedState.env.DEBUG && console.time("Creating context");
         this.context = createContext(config, []);
         Object.assign(this.context, {
             userConfigPath: configPath
         });
-        _shared.env.DEBUG && console.timeEnd("Creating context");
-        _shared.env.DEBUG && console.time("Resolving content paths");
+        _sharedState.env.DEBUG && console.timeEnd("Creating context");
+        _sharedState.env.DEBUG && console.time("Resolving content paths");
         this.refreshContentPaths();
-        _shared.env.DEBUG && console.timeEnd("Resolving content paths");
+        _sharedState.env.DEBUG && console.timeEnd("Resolving content paths");
         if (this.watcher) {
-            _shared.env.DEBUG && console.time("Watch new files");
+            _sharedState.env.DEBUG && console.time("Watch new files");
             this.watcher.refreshWatchedFiles();
-            _shared.env.DEBUG && console.timeEnd("Watch new files");
+            _sharedState.env.DEBUG && console.timeEnd("Watch new files");
         }
-        _shared.env.DEBUG && console.time("Reading content files");
         for (let file of this.readContentPaths()){
             this.context.changedContent.push(file);
         }
-        _shared.env.DEBUG && console.timeEnd("Reading content files");
         return this.context;
     }
 };
 async function createProcessor(args, cliConfigPath) {
-    var ref;
+    var _args_content;
     let postcss = (0, _deps.loadPostcss)();
     let input = args["--input"];
     let output = args["--output"];
@@ -229,13 +238,13 @@ async function createProcessor(args, cliConfigPath) {
             args["--content"] = args["--purge"];
         }
     }
-    var ref1;
-    let content = (ref1 = (ref = args["--content"]) === null || ref === void 0 ? void 0 : ref.split(/(?<!{[^}]+),/)) !== null && ref1 !== void 0 ? ref1 : [];
+    var _args_content_split;
+    let content = (_args_content_split = (_args_content = args["--content"]) === null || _args_content === void 0 ? void 0 : _args_content.split(/(?<!{[^}]+),/)) !== null && _args_content_split !== void 0 ? _args_content_split : [];
     let tailwindPlugin = ()=>{
         return {
             postcssPlugin: "tailwindcss",
             Once (root, { result  }) {
-                _shared.env.DEBUG && console.time("Compiling CSS");
+                _sharedState.env.DEBUG && console.time("Compiling CSS");
                 (0, _processTailwindFeatures.default)(({ createContext  })=>{
                     console.error();
                     console.error("Rebuilding...");
@@ -249,7 +258,7 @@ async function createProcessor(args, cliConfigPath) {
                         });
                     };
                 })(root, result);
-                _shared.env.DEBUG && console.timeEnd("Compiling CSS");
+                _sharedState.env.DEBUG && console.timeEnd("Compiling CSS");
             }
         };
     };
@@ -283,18 +292,49 @@ async function createProcessor(args, cliConfigPath) {
                 from: input,
                 to: output
             })).then((result)=>{
+            if (!state.watcher) {
+                return result;
+            }
+            _sharedState.env.DEBUG && console.time("Recording PostCSS dependencies");
+            for (let message of result.messages){
+                if (message.type === "dependency") {
+                    state.contextDependencies.add(message.file);
+                }
+            }
+            _sharedState.env.DEBUG && console.timeEnd("Recording PostCSS dependencies");
+            // TODO: This needs to be in a different spot
+            _sharedState.env.DEBUG && console.time("Watch new files");
+            state.watcher.refreshWatchedFiles();
+            _sharedState.env.DEBUG && console.timeEnd("Watch new files");
+            return result;
+        }).then((result)=>{
             if (!output) {
                 process.stdout.write(result.css);
                 return;
             }
             return Promise.all([
-                (0, _utils.outputFile)(output, result.css),
-                result.map && (0, _utils.outputFile)(output + ".map", result.map.toString())
+                (0, _utils.outputFile)(result.opts.to, result.css),
+                result.map && (0, _utils.outputFile)(result.opts.to + ".map", result.map.toString())
             ]);
         }).then(()=>{
             let end = process.hrtime.bigint();
             console.error();
             console.error("Done in", (end - start) / BigInt(1e6) + "ms.");
+        }).then(()=>{}, (err)=>{
+            // TODO: If an initial build fails we can't easily pick up any PostCSS dependencies
+            // that were collected before the error occurred
+            // The result is not stored on the error so we have to store it externally
+            // and pull the messages off of it here somehow
+            // This results in a less than ideal DX because the watcher will not pick up
+            // changes to imported CSS if one of them caused an error during the initial build
+            // If you fix it and then save the main CSS file so there's no error
+            // The watcher will start watching the imported CSS files and will be
+            // resilient to future errors.
+            if (state.watcher) {
+                console.error(err);
+            } else {
+                return Promise.reject(err);
+            }
         });
     }
     /**
@@ -317,7 +357,8 @@ async function createProcessor(args, cliConfigPath) {
          * @param {{file: string, content(): Promise<string>, extension: string}[]} changes
          */ async rebuild (changes) {
                     let needsNewContext = changes.some((change)=>{
-                        return state.configDependencies.has(change.file) || state.contextDependencies.has(change.file);
+                        var _state_configBag;
+                        return ((_state_configBag = state.configBag) === null || _state_configBag === void 0 ? void 0 : _state_configBag.dependencies.has(change.file)) || state.contextDependencies.has(change.file);
                     });
                     if (needsNewContext) {
                         state.context = null;

package/lib/cli/build/watching.js

@@ -37,22 +37,72 @@ function createWatcher(args, { state , rebuild  }) {
             pollInterval: pollInterval
         } : false
     });
+    // A queue of rebuilds, file reads, etc… to run
     let chain = Promise.resolve();
-    let pendingRebuilds = new Set();
-    let changedContent = [];
+    /**
+   * A list of files that have been changed since the last rebuild
+   *
+   * @type {{file: string, content: () => Promise<string>, extension: string}[]}
+   */ let changedContent = [];
+    /**
+   * A list of files for which a rebuild has already been queued.
+   * This is used to prevent duplicate rebuilds when multiple events are fired for the same file.
+   * The rebuilt file is cleared from this list when it's associated rebuild has _started_
+   * This is because if the file is changed during a rebuild it won't trigger a new rebuild which it should
+   **/ let pendingRebuilds = new Set();
+    let _timer;
+    let _reject;
+    /**
+   * Rebuilds the changed files and resolves when the rebuild is
+   * complete regardless of whether it was successful or not
+   */ async function rebuildAndContinue() {
+        let changes = changedContent.splice(0);
+        // There are no changes to rebuild so we can just do nothing
+        if (changes.length === 0) {
+            return Promise.resolve();
+        }
+        // Clear all pending rebuilds for the about-to-be-built files
+        changes.forEach((change)=>pendingRebuilds.delete(change.file));
+        // Resolve the promise even when the rebuild fails
+        return rebuild(changes).then(()=>{}, (e)=>{
+            console.error(e.toString());
+        });
+    }
     /**
    *
    * @param {*} file
    * @param {(() => Promise<string>) | null} content
-   */ function recordChangedFile(file, content = null) {
+   * @param {boolean} skipPendingCheck
+   * @returns {Promise<void>}
+   */ function recordChangedFile(file, content = null, skipPendingCheck = false) {
         file = _path.default.resolve(file);
-        content = content !== null && content !== void 0 ? content : async ()=>await _fs.default.promises.readFile(file, "utf8");
+        // Applications like Vim/Neovim fire both rename and change events in succession for atomic writes
+        // In that case rebuild has already been queued by rename, so can be skipped in change
+        if (pendingRebuilds.has(file) && !skipPendingCheck) {
+            return Promise.resolve();
+        }
+        // Mark that a rebuild of this file is going to happen
+        // It MUST happen synchronously before the rebuild is queued for this to be effective
+        pendingRebuilds.add(file);
         changedContent.push({
             file,
-            content,
+            content: content !== null && content !== void 0 ? content : ()=>_fs.default.promises.readFile(file, "utf8"),
             extension: _path.default.extname(file).slice(1)
         });
-        chain = chain.then(()=>rebuild(changedContent));
+        if (_timer) {
+            clearTimeout(_timer);
+            _reject();
+        }
+        // If a rebuild is already in progress we don't want to start another one until the 10ms timer has expired
+        chain = chain.then(()=>new Promise((resolve, reject)=>{
+                _timer = setTimeout(resolve, 10);
+                _reject = reject;
+            }));
+        // Resolves once this file has been rebuilt (or the rebuild for this file has failed)
+        // This queues as many rebuilds as there are changed files
+        // But those rebuilds happen after some delay
+        // And will immediately resolve if there are no changes
+        chain = chain.then(rebuildAndContinue, rebuildAndContinue);
         return chain;
     }
     watcher.on("change", (file)=>recordChangedFile(file));
@@ -91,22 +141,39 @@ function createWatcher(args, { state , rebuild  }) {
         if (pendingRebuilds.has(filePath)) {
             return;
         }
+        // We'll go ahead and add the file to the pending rebuilds list here
+        // It'll be removed when the rebuild starts unless the read fails
+        // which will be taken care of as well
         pendingRebuilds.add(filePath);
-        chain = chain.then(async ()=>{
-            let content;
+        async function enqueue() {
             try {
-                content = await (0, _utilsJs.readFileWithRetries)(_path.default.resolve(filePath));
-            } finally{
-                pendingRebuilds.delete(filePath);
+                // We need to read the file as early as possible outside of the chain
+                // because it may be gone by the time we get to it. doing the read
+                // immediately increases the chance that the file is still there
+                let content = await (0, _utilsJs.readFileWithRetries)(_path.default.resolve(filePath));
+                if (content === undefined) {
+                    return;
+                }
+                // This will push the rebuild onto the chain
+                // We MUST skip the rebuild check here otherwise the rebuild will never happen on Linux
+                // This is because the order of events and timing is different on Linux
+                // @ts-ignore: TypeScript isn't picking up that content is a string here
+                await recordChangedFile(filePath, ()=>content, true);
+            } catch  {
+            // If reading the file fails, it's was probably a deleted temporary file
+            // So we can ignore it and no rebuild is needed
             }
-            return recordChangedFile(filePath, ()=>content);
+        }
+        enqueue().then(()=>{
+            // If the file read fails we still need to make sure the file isn't stuck in the pending rebuilds list
+            pendingRebuilds.delete(filePath);
         });
     });
     return {
         fswatcher: watcher,
         refreshWatchedFiles () {
             watcher.add(Array.from(state.contextDependencies));
-            watcher.add(Array.from(state.configDependencies));
+            watcher.add(Array.from(state.configBag.dependencies));
             watcher.add(state.contentPatterns.all);
         }
     };