tailwindcss 3.0.9 → 3.0.10

package/CHANGELOG.md

@@ -9,6 +9,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Nothing yet!
 
+## [3.0.10] - 2022-01-04
+
+### Fixed
+
+- Fix `@apply` in files without `@tailwind` directives ([#6580](https://github.com/tailwindlabs/tailwindcss/pull/6580), [#6875](https://github.com/tailwindlabs/tailwindcss/pull/6875))
+- CLI: avoid unnecessary writes to output files ([#6550](https://github.com/tailwindlabs/tailwindcss/pull/6550))
+
+### Added
+
+- Allow piping data into the CLI ([#6876](https://github.com/tailwindlabs/tailwindcss/pull/6876))
+
 ## [3.0.9] - 2022-01-03
 
 ### Fixed
@@ -1760,7 +1771,8 @@ No release notes
 
 - Everything!
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.9...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.10...HEAD
+[3.0.10]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.9...v3.0.10
 [3.0.9]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.8...v3.0.9
 [3.0.8]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.7...v3.0.8
 [3.0.7]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.6...v3.0.7

package/lib/cli.js

@@ -40,6 +40,25 @@ function formatNodes(root) {
         root.first.raws.before = '';
     }
 }
+async function outputFile(file, contents) {
+    if (_fs.default.existsSync(file) && await _fs.default.promises.readFile(file, 'utf8') === contents) {
+        return; // Skip writing the file
+    }
+    // Write the file
+    await _fs.default.promises.writeFile(file, contents, 'utf8');
+}
+function drainStdin() {
+    return new Promise((resolve, reject)=>{
+        let result = '';
+        process.stdin.on('data', (chunk)=>{
+            result += chunk;
+        });
+        process.stdin.on('end', ()=>resolve(result)
+        );
+        process.stdin.on('error', (err)=>reject(err)
+        );
+    });
+}
 function help({ message , usage , commands: commands1 , options  }) {
     let indent = 2;
     // Render header
@@ -336,7 +355,7 @@ async function build() {
         console.error('[deprecation] Running tailwindcss without -i, please provide an input file.');
         input = args['--input'] = args['_'][1];
     }
-    if (input && !_fs.default.existsSync(input = _path.default.resolve(input))) {
+    if (input && input !== '-' && !_fs.default.existsSync(input = _path.default.resolve(input))) {
         console.error(`Specified input file ${args['--input']} does not exist.`);
         process.exit(9);
     }
@@ -499,10 +518,8 @@ async function build() {
                     return process.stdout.write(result.css);
                 }
                 return Promise.all([
-                    _fs.default.promises.writeFile(output, result.css, ()=>true
-                    ),
-                    result.map && _fs.default.writeFile(output + '.map', result.map.toString(), ()=>true
-                    ), 
+                    outputFile(output, result.css),
+                    result.map && outputFile(output + '.map', result.map.toString()), 
                 ].filter(Boolean));
             }).then(()=>{
                 let end = process.hrtime.bigint();
@@ -510,7 +527,18 @@ async function build() {
                 console.error('Done in', (end - start) / BigInt(1000000) + 'ms.');
             });
         }
-        let css1 = input ? _fs.default.readFileSync(_path.default.resolve(input), 'utf8') : '@tailwind base; @tailwind components; @tailwind utilities';
+        let css1 = await (()=>{
+            // Piping in data, let's drain the stdin
+            if (input === '-') {
+                return drainStdin();
+            }
+            // Input file has been provided
+            if (input) {
+                return _fs.default.readFileSync(_path.default.resolve(input), 'utf8');
+            }
+            // No input file provided, fallback to default atrules
+            return '@tailwind base; @tailwind components; @tailwind utilities';
+        })();
         return processCSS(css1);
     }
     let context = null;
@@ -619,11 +647,9 @@ async function build() {
                     if (!output) {
                         return process.stdout.write(result.css);
                     }
-                    await Promise.all([
-                        _fs.default.promises.writeFile(output, result.css, ()=>true
-                        ),
-                        result.map && _fs.default.writeFile(output + '.map', result.map.toString(), ()=>true
-                        ), 
+                    return Promise.all([
+                        outputFile(output, result.css),
+                        result.map && outputFile(output + '.map', result.map.toString()), 
                     ].filter(Boolean));
                 }).then(()=>{
                     let end = process.hrtime.bigint();
@@ -636,7 +662,18 @@ async function build() {
                     }
                 });
             }
-            let css2 = input ? _fs.default.readFileSync(_path.default.resolve(input), 'utf8') : '@tailwind base; @tailwind components; @tailwind utilities';
+            let css2 = await (()=>{
+                // Piping in data, let's drain the stdin
+                if (input === '-') {
+                    return drainStdin();
+                }
+                // Input file has been provided
+                if (input) {
+                    return _fs.default.readFileSync(_path.default.resolve(input), 'utf8');
+                }
+                // No input file provided, fallback to default atrules
+                return '@tailwind base; @tailwind components; @tailwind utilities';
+            })();
             let result1 = await processCSS(css2);
             env.DEBUG && console.timeEnd('Finished in');
             return result1;

package/lib/lib/expandTailwindAtRules.js

@@ -143,17 +143,26 @@ function expandTailwindAtRules(context) {
             utilities: null,
             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
-        )) {
+        ) && !hasApply) {
             return root;
         }
         // ---

package/lib/lib/normalizeTailwindDirectives.js

@@ -12,7 +12,11 @@ function _interopRequireDefault(obj) {
 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';
@@ -72,5 +76,8 @@ function normalizeTailwindDirectives(root) {
             }
         }
     }
-    return tailwindDirectives;
+    return {
+        tailwindDirectives,
+        applyDirectives
+    };
 }

package/lib/lib/setupTrackingContext.js

@@ -119,16 +119,17 @@ function resolveChangedFiles(candidateFiles, fileModifiedMap) {
     return changedFiles;
 }
 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);
                 // Add all css @import dependencies as context dependencies.
@@ -140,12 +141,12 @@ function setupTrackingContext(configOrPath) {
             }
             let [context] = (0, _setupContextUtils).getContext(root, result, tailwindConfig, userConfigPath, tailwindConfigHash, contextDependencies);
             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 = (0, _setupContextUtils).getFileModifiedMap(context);
                 // Add template paths as postcss dependencies.
                 for (let fileOrGlob of candidateFiles){

package/lib/processTailwindFeatures.js

@@ -21,9 +21,10 @@ function _interopRequireDefault(obj) {
 }
 function processTailwindFeatures(setupContext) {
     return function(root, result) {
-        let tailwindDirectives = (0, _normalizeTailwindDirectives).default(root);
+        let { tailwindDirectives , applyDirectives  } = (0, _normalizeTailwindDirectives).default(root);
         let context = setupContext({
             tailwindDirectives,
+            applyDirectives,
             registerDependency (dependency) {
                 result.messages.push({
                     plugin: 'tailwindcss',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "3.0.9",
+  "version": "3.0.10",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "main": "lib/index.js",

package/src/cli.js

@@ -41,6 +41,26 @@ function formatNodes(root) {
   }
 }
 
+async function outputFile(file, contents) {
+  if (fs.existsSync(file) && (await fs.promises.readFile(file, 'utf8')) === contents) {
+    return // Skip writing the file
+  }
+
+  // Write the file
+  await fs.promises.writeFile(file, contents, 'utf8')
+}
+
+function drainStdin() {
+  return new Promise((resolve, reject) => {
+    let result = ''
+    process.stdin.on('data', (chunk) => {
+      result += chunk
+    })
+    process.stdin.on('end', () => resolve(result))
+    process.stdin.on('error', (err) => reject(err))
+  })
+}
+
 function help({ message, usage, commands, options }) {
   let indent = 2
 
@@ -355,7 +375,7 @@ async function build() {
     input = args['--input'] = args['_'][1]
   }
 
-  if (input && !fs.existsSync((input = path.resolve(input)))) {
+  if (input && input !== '-' && !fs.existsSync((input = path.resolve(input)))) {
     console.error(`Specified input file ${args['--input']} does not exist.`)
     process.exit(9)
   }
@@ -534,10 +554,11 @@ async function build() {
           if (!output) {
             return process.stdout.write(result.css)
           }
+
           return Promise.all(
             [
-              fs.promises.writeFile(output, result.css, () => true),
-              result.map && fs.writeFile(output + '.map', result.map.toString(), () => true),
+              outputFile(output, result.css),
+              result.map && outputFile(output + '.map', result.map.toString()),
             ].filter(Boolean)
           )
         })
@@ -548,9 +569,21 @@ async function build() {
         })
     }
 
-    let css = input
-      ? fs.readFileSync(path.resolve(input), 'utf8')
-      : '@tailwind base; @tailwind components; @tailwind utilities'
+    let css = await (() => {
+      // Piping in data, let's drain the stdin
+      if (input === '-') {
+        return drainStdin()
+      }
+
+      // Input file has been provided
+      if (input) {
+        return fs.readFileSync(path.resolve(input), 'utf8')
+      }
+
+      // No input file provided, fallback to default atrules
+      return '@tailwind base; @tailwind components; @tailwind utilities'
+    })()
+
     return processCSS(css)
   }
 
@@ -664,10 +697,10 @@ async function build() {
               return process.stdout.write(result.css)
             }
 
-            await Promise.all(
+            return Promise.all(
               [
-                fs.promises.writeFile(output, result.css, () => true),
-                result.map && fs.writeFile(output + '.map', result.map.toString(), () => true),
+                outputFile(output, result.css),
+                result.map && outputFile(output + '.map', result.map.toString()),
               ].filter(Boolean)
             )
           })
@@ -684,9 +717,21 @@ async function build() {
           })
       }
 
-      let css = input
-        ? fs.readFileSync(path.resolve(input), 'utf8')
-        : '@tailwind base; @tailwind components; @tailwind utilities'
+      let css = await (() => {
+        // Piping in data, let's drain the stdin
+        if (input === '-') {
+          return drainStdin()
+        }
+
+        // Input file has been provided
+        if (input) {
+          return fs.readFileSync(path.resolve(input), 'utf8')
+        }
+
+        // No input file provided, fallback to default atrules
+        return '@tailwind base; @tailwind components; @tailwind utilities'
+      })()
+
       let result = await processCSS(css)
       env.DEBUG && console.timeEnd('Finished in')
       return result

package/src/lib/expandTailwindAtRules.js

@@ -140,17 +140,28 @@ 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)) {
+    if (Object.values(layerNodes).every((n) => n === null) && !hasApply) {
       return root
     }
 

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/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/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',