WIP

src/lib/expandTailwindAtRules.js

@@ -209,8 +209,6 @@ export default function expandTailwindAtRules(context) {
     // compiled in an isolated environment like CSS modules
     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, defaults } from './util/run'
+import { run, html, css } from './util/run'
 
 test('basic', () => {
   let config = {
@@ -15,7 +15,6 @@ test('basic', () => {
 
   return run('@tailwind utilities', config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
-      ${defaults}
       @keyframes spin {
         to {
           transform: rotate(360deg);
@@ -69,7 +68,6 @@ test('custom', () => {
 
   return run('@tailwind utilities', config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
-      ${defaults}
       @keyframes one {
         to {
           transform: rotate(360deg);
@@ -100,7 +98,6 @@ test('custom prefixed', () => {
 
   return run('@tailwind utilities', config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
-      ${defaults}
       @keyframes tw-one {
         to {
           transform: rotate(360deg);
@@ -127,7 +124,6 @@ test('multiple', () => {
 
   return run('@tailwind utilities', config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
-      ${defaults}
       @keyframes bounce {
         0%,
         100% {
@@ -169,7 +165,6 @@ 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.css

@@ -1,50 +1,3 @@
-*,
-::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: ;
-}
 .basic-example {
   border-radius: 0.375rem;
   --tw-bg-opacity: 1;

tests/apply.test.js

@@ -283,7 +283,6 @@ 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,7 +350,6 @@ 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;
@@ -420,7 +418,6 @@ 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%;
@@ -464,7 +461,6 @@ 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;
@@ -546,7 +542,6 @@ 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));
@@ -682,7 +677,6 @@ it('should be possible to apply user css', () => {
 
   return run(input, config).then((result) => {
     return expect(result.css).toMatchFormattedCss(css`
-      ${defaults}
       .foo {
         color: red;
       }
@@ -754,7 +748,6 @@ 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;
@@ -840,7 +833,6 @@ it('should be possible to apply a class from another rule with multiple selector
 
   return run(input, config).then((result) => {
     return expect(result.css).toMatchFormattedCss(css`
-      ${defaults}
       .c {
         text-decoration-line: underline;
       }
@@ -871,7 +863,6 @@ it('should be possible to apply a class from another rule with multiple selector
 
   return run(input, config).then((result) => {
     return expect(result.css).toMatchFormattedCss(css`
-      ${defaults}
       span,
       .b {
         text-decoration-line: underline;
@@ -906,7 +897,6 @@ it('should be possible to apply a class from another rule with multiple selector
 
   return run(input, config).then((result) => {
     return expect(result.css).toMatchFormattedCss(css`
-      ${defaults}
       #a,
       .b {
         text-decoration-line: underline;
@@ -932,18 +922,8 @@ 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`
-      .foo {
-        --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;
-      }
       .foo:focus {
         --tw-rotate: 90deg;
         transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))

tests/arbitrary-values.test.css

@@ -1,50 +1,3 @@
-*,
-::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, defaults } from './util/run'
+import { run, html, css } from './util/run'
 
 test('arbitrary values', () => {
   let config = {
@@ -27,7 +27,6 @@ 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;
       }
@@ -50,7 +49,6 @@ 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');
       }
@@ -81,7 +79,6 @@ 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));
@@ -121,9 +118,7 @@ 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`
-      ${defaults}
-    `)
+    return expect(result.css).toMatchFormattedCss(css``)
   })
 })
 
@@ -132,7 +127,6 @@ it('should handle unknown typehints', () => {
 
   return run('@tailwind utilities', config).then((result) => {
     return expect(result.css).toMatchFormattedCss(css`
-      ${defaults}
       .w-\[length\:12px\] {
         width: 12px;
       }
@@ -145,10 +139,7 @@ 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 `
-      ${defaults}\n
-      ${templates.join('')}
-    `
+    return templates.join('')
   }
 
   let config = {
@@ -253,7 +244,6 @@ 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);
@@ -270,9 +260,7 @@ it('should warn and not generate if arbitrary values are ambiguous', () => {
   }
 
   return run('@tailwind utilities', config).then((result) => {
-    return expect(result.css).toMatchFormattedCss(css`
-      ${defaults}
-    `)
+    return expect(result.css).toMatchFormattedCss(css``)
   })
 })
 
@@ -285,7 +273,6 @@ 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');
       }
@@ -302,7 +289,6 @@ 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');
       }
@@ -323,7 +309,6 @@ 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);
       }
@@ -347,7 +332,6 @@ 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);
       }