Include all css in context

Author: garymathews

src/lib/setupTrackingContext.js

@@ -119,20 +119,13 @@ export default function setupTrackingContext(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 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)
-          }
+      // Add all css @import dependencies as context dependencies.
+      for (let message of result.messages) {
+        if (message.type === 'dependency') {
+          contextDependencies.add(message.file)
         }
       }
 

src/lib/setupWatchingContext.js

@@ -236,20 +236,13 @@ export default function setupWatchingContext(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 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)
-          }
+      // Add all css @import dependencies as context dependencies.
+      for (let message of result.messages) {
+        if (message.type === 'dependency') {
+          contextDependencies.add(message.file)
         }
       }
 

tests/apply.test.js

@@ -774,3 +774,38 @@ it('should not apply unrelated siblings when applying something from within atru
     `)
   })
 })
+
+it('should be possible to apply user css without directives', () => {
+  let config = {
+    content: [{ raw: html`<div class="foo"></div>` }],
+    plugins: [],
+  }
+
+  let input = css`
+    .bop {
+      color: red;
+    }
+    .bar {
+      background-color: blue;
+    }
+    .foo {
+      @apply absolute bar bop;
+    }
+  `
+
+  return run(input, config).then((result) => {
+    return expect(result.css).toMatchFormattedCss(css`
+      .bop {
+        color: red;
+      }
+      .bar {
+        background-color: blue;
+      }
+      .foo {
+        position: absolute;
+        color: red;
+        background-color: blue;
+      }
+    `)
+  })
+})