WIP

Author: thecrypticace

src/lib/expandTailwindAtRules.js

@@ -129,8 +129,6 @@ function buildStylesheet(rules, context) {
   return returnValue
 }
 
-export const DEFAULTS_LAYER = Symbol('defaults-layer')
-
 export default function expandTailwindAtRules(context) {
   return (root) => {
     let layerNodes = {
@@ -209,12 +207,10 @@ export default function expandTailwindAtRules(context) {
     // @defaults rules are unconditionally added first to ensure that
     // using any utility that relies on defaults will work even when
     // compiled in an isolated environment like CSS modules
-    if (context.tailwindConfig[DEFAULTS_LAYER] !== false) {
-      if (layerNodes.base) {
-        layerNodes.base.after(cloneNodes([...defaultNodes], root.source))
-      } else {
-        root.prepend(cloneNodes([...defaultNodes], root.source))
-      }
+    if (layerNodes.base) {
+      layerNodes.base.after(cloneNodes([...defaultNodes], root.source))
+    } else {
+      root.prepend(cloneNodes([...defaultNodes], root.source))
     }
 
     if (layerNodes.base) {

tests/animations.test.js

@@ -1,4 +1,4 @@
-import { run, html, css } from './util/run'
+import { run, html, css, defaults } from './util/run'
 
 test('basic', () => {
   let config = {
@@ -15,6 +15,7 @@ test('basic', () => {
 
   return run('@tailwind utilities', config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
+      ${defaults}
       @keyframes spin {
         to {
           transform: rotate(360deg);
@@ -68,6 +69,7 @@ test('custom', () => {
 
   return run('@tailwind utilities', config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
+      ${defaults}
       @keyframes one {
         to {
           transform: rotate(360deg);
@@ -98,6 +100,7 @@ test('custom prefixed', () => {
 
   return run('@tailwind utilities', config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
+      ${defaults}
       @keyframes tw-one {
         to {
           transform: rotate(360deg);
@@ -124,6 +127,7 @@ test('multiple', () => {
 
   return run('@tailwind utilities', config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
+      ${defaults}
       @keyframes bounce {
         0%,
         100% {
@@ -165,6 +169,7 @@ test('multiple custom', () => {
 
   return run('@tailwind utilities', config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
+      ${defaults}
       @keyframes one {
         to {
           transform: rotate(360deg);

tests/apply.test.js

@@ -1,6 +1,5 @@
 import fs from 'fs'
 import path from 'path'
-import { DEFAULTS_LAYER } from '../src/lib/expandTailwindAtRules.js'
 
 import { run, html, css, defaults } from './util/run'
 
@@ -284,6 +283,7 @@ test('@apply classes from outside a @layer', async () => {
 
   await run(input, config).then((result) => {
     return expect(result.css).toMatchFormattedCss(css`
+      ${defaults}
       .font-bold {
         font-weight: 700;
       }
@@ -351,6 +351,7 @@ test('@applying classes from outside a @layer respects the source order', async
 
   await run(input, config).then((result) => {
     return expect(result.css).toMatchFormattedCss(css`
+      ${defaults}
       .baz {
         text-decoration-line: underline;
         text-decoration-line: none;
@@ -419,6 +420,7 @@ it('should remove duplicate properties when using apply with similar properties'
 
   return run(input, config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
+      ${defaults}
       .foo {
         position: absolute;
         top: 50%;
@@ -462,6 +464,7 @@ it('should apply all the definitions of a class', () => {
 
   return run(input, config).then((result) => {
     return expect(result.css).toMatchFormattedCss(css`
+      ${defaults}
       .foo {
         position: relative;
         --tw-aspect-w: 1;
@@ -543,6 +546,7 @@ it('should not throw when the selector is different (but contains the base parti
 
   return run(input, config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
+      ${defaults}
       .bg-gray-500 {
         --tw-bg-opacity: 1;
         background-color: rgb(107 114 128 / var(--tw-bg-opacity));
@@ -641,6 +645,7 @@ it('rules with vendor prefixes are still separate when optimizing defaults rules
 
   return run(input, config).then((result) => {
     return expect(result.css).toMatchFormattedCss(css`
+      ${defaults}
       [type='range']::-moz-range-thumb {
         border-color: #e5e7eb;
       }
@@ -678,6 +683,7 @@ it('should be possible to apply user css', () => {
 
   return run(input, config).then((result) => {
     return expect(result.css).toMatchFormattedCss(css`
+      ${defaults}
       .foo {
         color: red;
       }
@@ -749,6 +755,7 @@ it('should not apply unrelated siblings when applying something from within atru
 
   return run(input, config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
+      ${defaults}
       .foo {
         font-weight: bold;
         color: green;
@@ -797,6 +804,7 @@ it('should be possible to apply user css without tailwind directives', () => {
 
   return run(input, config).then((result) => {
     return expect(result.css).toMatchFormattedCss(css`
+      ${defaults}
       .bop {
         color: red;
       }
@@ -814,7 +822,6 @@ it('should be possible to apply user css without tailwind directives', () => {
 
 it('apply can emit defaults in isolated environments without @tailwind directives', () => {
   let config = {
-    [DEFAULTS_LAYER]: true,
     experimental: { optimizeUniversalDefaults: true },
 
     content: [{ raw: html`<div class="foo"></div>` }],
@@ -829,6 +836,7 @@ it('apply can emit defaults in isolated environments without @tailwind directive
   // TODO: Do we want this to work?
   return run(input, config).then((result) => {
     return expect(result.css).toMatchFormattedCss(css`
+      ${defaults}
       .foo {
         --tw-translate-x: 0;
         --tw-translate-y: 0;
@@ -850,7 +858,6 @@ it('apply can emit defaults in isolated environments without @tailwind directive
 
 it('apply does not emit defaults in isolated environments without optimizeUniversalDefaults', () => {
   let config = {
-    [DEFAULTS_LAYER]: true,
     experimental: { optimizeUniversalDefaults: false },
     content: [{ raw: html`<div class="foo"></div>` }],
     corePlugins: { preflight: false },

tests/arbitrary-values.test.css

@@ -1,3 +1,50 @@
+*,
+::before,
+::after {
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x: ;
+  --tw-pan-y: ;
+  --tw-pinch-zoom: ;
+  --tw-scroll-snap-strictness: proximity;
+  border-color: #e5e7eb;
+  --tw-ordinal: ;
+  --tw-slashed-zero: ;
+  --tw-numeric-figure: ;
+  --tw-numeric-spacing: ;
+  --tw-numeric-fraction: ;
+  --tw-ring-inset: ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur: ;
+  --tw-brightness: ;
+  --tw-contrast: ;
+  --tw-grayscale: ;
+  --tw-hue-rotate: ;
+  --tw-invert: ;
+  --tw-saturate: ;
+  --tw-sepia: ;
+  --tw-drop-shadow: ;
+  --tw-backdrop-blur: ;
+  --tw-backdrop-brightness: ;
+  --tw-backdrop-contrast: ;
+  --tw-backdrop-grayscale: ;
+  --tw-backdrop-hue-rotate: ;
+  --tw-backdrop-invert: ;
+  --tw-backdrop-opacity: ;
+  --tw-backdrop-saturate: ;
+  --tw-backdrop-sepia: ;
+}
 .inset-\[11px\] {
   top: 11px;
   right: 11px;

tests/arbitrary-values.test.js

@@ -1,7 +1,7 @@
 import fs from 'fs'
 import path from 'path'
 
-import { run, html, css } from './util/run'
+import { run, html, css, defaults } from './util/run'
 
 test('arbitrary values', () => {
   let config = {
@@ -27,6 +27,7 @@ it('should be possible to differentiate between decoration utilities', () => {
 
   return run('@tailwind utilities', config).then((result) => {
     return expect(result.css).toMatchFormattedCss(css`
+      ${defaults}
       .decoration-\[\#ccc\] {
         text-decoration-color: #ccc;
       }
@@ -49,6 +50,7 @@ it('should support modifiers for arbitrary values that contain the separator', (
 
   return run('@tailwind utilities', config).then((result) => {
     return expect(result.css).toMatchFormattedCss(css`
+      ${defaults}
       .hover\:bg-\[url\(\'https\:\/\/github\.com\/tailwindlabs\.png\'\)\]:hover {
         background-image: url('https://github.com/tailwindlabs.png');
       }
@@ -79,6 +81,7 @@ it('should support arbitrary values for various background utilities', () => {
 
   return run('@tailwind utilities', config).then((result) => {
     return expect(result.css).toMatchFormattedCss(css`
+      ${defaults}
       .bg-red-500 {
         --tw-bg-opacity: 1;
         background-color: rgb(239 68 68 / var(--tw-bg-opacity));
@@ -118,7 +121,9 @@ it('should not generate any css if an unknown typehint is used', () => {
   }
 
   return run('@tailwind utilities', config).then((result) => {
-    return expect(result.css).toMatchFormattedCss(css``)
+    return expect(result.css).toMatchFormattedCss(css`
+      ${defaults}
+    `)
   })
 })
 
@@ -127,6 +132,7 @@ it('should handle unknown typehints', () => {
 
   return run('@tailwind utilities', config).then((result) => {
     return expect(result.css).toMatchFormattedCss(css`
+      ${defaults}
       .w-\[length\:12px\] {
         width: 12px;
       }
@@ -139,7 +145,10 @@ it('should convert _ to spaces', () => {
   // into an issue with `\2c ` escapes. If we use `\2c ` then JS complains
   // about strict mode. But `\\2c ` is not what it expected.
   function css(templates) {
-    return templates.join('')
+    return `
+      ${defaults}\n
+      ${templates.join('')}
+    `
   }
 
   let config = {
@@ -244,6 +253,7 @@ it('should not convert escaped underscores with spaces', () => {
 
   return run('@tailwind utilities', config).then((result) => {
     return expect(result.css).toMatchFormattedCss(css`
+      ${defaults}
       .content-\[\'snake\\_case\'\] {
         --tw-content: 'snake_case';
         content: var(--tw-content);
@@ -260,7 +270,9 @@ it('should warn and not generate if arbitrary values are ambiguous', () => {
   }
 
   return run('@tailwind utilities', config).then((result) => {
-    return expect(result.css).toMatchFormattedCss(css``)
+    return expect(result.css).toMatchFormattedCss(css`
+      ${defaults}
+    `)
   })
 })
 
@@ -273,6 +285,7 @@ it('should support colons in URLs', () => {
 
   return run('@tailwind utilities', config).then((result) => {
     return expect(result.css).toMatchFormattedCss(css`
+      ${defaults}
       .bg-\[url\(\'https\:\/\/www\.spacejam\.com\/1996\/img\/bg_stars\.gif\'\)\] {
         background-image: url('https://www.spacejam.com/1996/img/bg_stars.gif');
       }
@@ -289,6 +302,7 @@ it('should support unescaped underscores in URLs', () => {
 
   return run('@tailwind utilities', config).then((result) => {
     return expect(result.css).toMatchFormattedCss(`
+      ${defaults}
       .bg-\\[url\\(\\'brown_potato\\.jpg\\'\\)\\2c _url\\(\\'red_tomato\\.png\\'\\)\\] {
         background-image: url('brown_potato.jpg'), url('red_tomato.png');
       }
@@ -309,6 +323,7 @@ it('should be possible to read theme values in arbitrary values (without quotes)
 
   return run('@tailwind utilities', config).then((result) => {
     return expect(result.css).toMatchFormattedCss(css`
+      ${defaults}
       .w-\[theme\(spacing\.1\)\] {
         width: calc(1 * 0.25rem);
       }
@@ -332,6 +347,7 @@ it('should be possible to read theme values in arbitrary values (with quotes)',
 
   return run('@tailwind utilities', config).then((result) => {
     return expect(result.css).toMatchFormattedCss(css`
+      ${defaults}
       .w-\[theme\(\'spacing\.1\'\)\] {
         width: calc(1 * 0.25rem);
       }

tests/basic-usage.test.js

@@ -1,7 +1,7 @@
 import fs from 'fs'
 import path from 'path'
 
-import { html, run, css } from './util/run'
+import { html, run, css, defaults } from './util/run'
 
 test('basic usage', () => {
   let config = {
@@ -46,6 +46,7 @@ test('all plugins are executed that match a candidate', () => {
 
   return run(input, config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
+      ${defaults}
       .bg-green-light {
         --tw-bg-opacity: 1;
         background-color: rgb(0 128 0 / var(--tw-bg-opacity));
@@ -98,6 +99,7 @@ test('per-plugin colors with the same key can differ when using a custom colors
 
   return run(input, config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
+      ${defaults}
       .bg-theme {
         --tw-bg-opacity: 1;
         background-color: rgb(255 0 0 / var(--tw-bg-opacity));