tailwindcss 3.0.1 → 3.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/CHANGELOG.md +38 -1
  2. package/lib/corePlugins.js +99 -117
  3. package/lib/css/preflight.css +2 -2
  4. package/lib/featureFlags.js +3 -1
  5. package/lib/lib/expandTailwindAtRules.js +25 -1
  6. package/lib/lib/generateRules.js +19 -1
  7. package/lib/lib/setupContextUtils.js +40 -6
  8. package/lib/util/defaults.js +6 -0
  9. package/lib/util/log.js +4 -0
  10. package/lib/util/normalizeConfig.js +34 -5
  11. package/package.json +4 -3
  12. package/src/corePlugins.js +100 -114
  13. package/src/css/preflight.css +2 -2
  14. package/src/featureFlags.js +5 -1
  15. package/src/lib/expandTailwindAtRules.js +23 -0
  16. package/src/lib/generateRules.js +24 -1
  17. package/src/lib/setupContextUtils.js +39 -6
  18. package/src/util/defaults.js +6 -0
  19. package/src/util/log.js +4 -0
  20. package/src/util/normalizeConfig.js +14 -1
package/CHANGELOG.md CHANGED
@@ -9,6 +9,39 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
9
9
 
10
10
  - Nothing yet!
11
11
 
12
+ ## [3.0.5] - 2021-12-15
13
+
14
+ ### Fixed
15
+
16
+ - Revert: add `li` to list-style reset ([9777562d](https://github.com/tailwindlabs/tailwindcss/commit/9777562da37ee631bbf77374c0d14825f09ef9af))
17
+
18
+ ## [3.0.4] - 2021-12-15
19
+
20
+ ### Fixed
21
+
22
+ - Insert always on defaults layer in correct spot ([#6526](https://github.com/tailwindlabs/tailwindcss/pull/6526))
23
+
24
+ ## [3.0.3] - 2021-12-15
25
+
26
+ ### Added
27
+
28
+ - Warn about invalid globs in `content` ([#6449](https://github.com/tailwindlabs/tailwindcss/pull/6449))
29
+ - Add standalone tailwindcss CLI ([#6506](https://github.com/tailwindlabs/tailwindcss/pull/6506))
30
+ - Add `li` to list-style reset ([00f60e6](https://github.com/tailwindlabs/tailwindcss/commit/00f60e61013c6e4e3419e4b699371a13eb30b75d))
31
+
32
+ ### Fixed
33
+
34
+ - Don't output unparsable values ([#6469](https://github.com/tailwindlabs/tailwindcss/pull/6469))
35
+ - Fix text decoration utilities from overriding the new text decoration color/style/thickness utilities when used with a modifier ([#6378](https://github.com/tailwindlabs/tailwindcss/pull/6378))
36
+ - Move defaults to their own always-on layer ([#6500](https://github.com/tailwindlabs/tailwindcss/pull/6500))
37
+ - Support negative values in safelist patterns ([6480](https://github.com/tailwindlabs/tailwindcss/pull/6480))
38
+
39
+ ## [3.0.2] - 2021-12-13
40
+
41
+ ### Fixed
42
+
43
+ - Temporarily disable optimize universal defaults, fixes issue with transforms/filters/rings not being `@apply`-able in CSS modules/Svelte components/Vue components ([#6461](https://github.com/tailwindlabs/tailwindcss/pull/6461))
44
+
12
45
  ## [3.0.1] - 2021-12-10
13
46
 
14
47
  ### Fixed
@@ -1690,7 +1723,11 @@ No release notes
1690
1723
 
1691
1724
  - Everything!
1692
1725
 
1693
- [unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.1...HEAD
1726
+ [unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.5...HEAD
1727
+ [3.0.5]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.4...v3.0.5
1728
+ [3.0.4]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.3...v3.0.4
1729
+ [3.0.3]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.2...v3.0.3
1730
+ [3.0.2]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.1...v3.0.2
1694
1731
  [3.0.1]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.0...v3.0.1
1695
1732
  [3.0.0]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.0-alpha.2...v3.0.0
1696
1733
  [3.0.0-alpha.2]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.0-alpha.1...v3.0.0-alpha.2
package/lib/corePlugins.js CHANGED
@@ -914,26 +914,24 @@ let corePlugins = {
914
914
  ], {
915
915
  supportsNegativeValues: true
916
916
  }),
917
- transform: ({ addBase , addUtilities })=>{
918
- addBase({
919
- '@defaults transform': {
920
- '--tw-translate-x': '0',
921
- '--tw-translate-y': '0',
922
- '--tw-rotate': '0',
923
- '--tw-skew-x': '0',
924
- '--tw-skew-y': '0',
925
- '--tw-scale-x': '1',
926
- '--tw-scale-y': '1',
927
- '--tw-transform': [
928
- 'translateX(var(--tw-translate-x))',
929
- 'translateY(var(--tw-translate-y))',
930
- 'rotate(var(--tw-rotate))',
931
- 'skewX(var(--tw-skew-x))',
932
- 'skewY(var(--tw-skew-y))',
933
- 'scaleX(var(--tw-scale-x))',
934
- 'scaleY(var(--tw-scale-y))',
935
- ].join(' ')
936
- }
917
+ transform: ({ addDefaults , addUtilities })=>{
918
+ addDefaults('transform', {
919
+ '--tw-translate-x': '0',
920
+ '--tw-translate-y': '0',
921
+ '--tw-rotate': '0',
922
+ '--tw-skew-x': '0',
923
+ '--tw-skew-y': '0',
924
+ '--tw-scale-x': '1',
925
+ '--tw-scale-y': '1',
926
+ '--tw-transform': [
927
+ 'translateX(var(--tw-translate-x))',
928
+ 'translateY(var(--tw-translate-y))',
929
+ 'rotate(var(--tw-rotate))',
930
+ 'skewX(var(--tw-skew-x))',
931
+ 'skewY(var(--tw-skew-y))',
932
+ 'scaleX(var(--tw-scale-x))',
933
+ 'scaleY(var(--tw-scale-y))',
934
+ ].join(' ')
937
935
  });
938
936
  addUtilities({
939
937
  '.transform': {
@@ -1001,14 +999,12 @@ let corePlugins = {
1001
999
  });
1002
1000
  },
1003
1001
  cursor: (0, _createUtilityPlugin).default('cursor'),
1004
- touchAction: ({ addBase , addUtilities })=>{
1005
- addBase({
1006
- '@defaults touch-action': {
1007
- '--tw-pan-x': 'var(--tw-empty,/*!*/ /*!*/)',
1008
- '--tw-pan-y': 'var(--tw-empty,/*!*/ /*!*/)',
1009
- '--tw-pinch-zoom': 'var(--tw-empty,/*!*/ /*!*/)',
1010
- '--tw-touch-action': 'var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)'
1011
- }
1002
+ touchAction: ({ addDefaults , addUtilities })=>{
1003
+ addDefaults('touch-action', {
1004
+ '--tw-pan-x': 'var(--tw-empty,/*!*/ /*!*/)',
1005
+ '--tw-pan-y': 'var(--tw-empty,/*!*/ /*!*/)',
1006
+ '--tw-pinch-zoom': 'var(--tw-empty,/*!*/ /*!*/)',
1007
+ '--tw-touch-action': 'var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)'
1012
1008
  });
1013
1009
  addUtilities({
1014
1010
  '.touch-auto': {
@@ -1096,11 +1092,9 @@ let corePlugins = {
1096
1092
  }
1097
1093
  });
1098
1094
  },
1099
- scrollSnapType: ({ addUtilities , addBase })=>{
1100
- addBase({
1101
- '@defaults scroll-snap-type': {
1102
- '--tw-scroll-snap-strictness': 'proximity'
1103
- }
1095
+ scrollSnapType: ({ addDefaults , addUtilities })=>{
1096
+ addDefaults('scroll-snap-type', {
1097
+ '--tw-scroll-snap-strictness': 'proximity'
1104
1098
  });
1105
1099
  addUtilities({
1106
1100
  '.snap-none': {
@@ -2095,22 +2089,18 @@ let corePlugins = {
2095
2089
  }
2096
2090
  });
2097
2091
  },
2098
- borderColor: ({ addBase , matchUtilities , theme , corePlugins: corePlugins2 })=>{
2092
+ borderColor: ({ addDefaults , matchUtilities , theme , corePlugins: corePlugins2 })=>{
2099
2093
  if (!corePlugins2('borderOpacity')) {
2100
2094
  let value = theme('borderColor.DEFAULT', 'currentColor');
2101
- addBase({
2102
- '@defaults border-width': {
2103
- 'border-color': (0, _toColorValue).default(value)
2104
- }
2095
+ addDefaults('border-width', {
2096
+ 'border-color': (0, _toColorValue).default(value)
2105
2097
  });
2106
2098
  } else {
2107
- addBase({
2108
- '@defaults border-width': (0, _withAlphaVariable).default({
2109
- color: theme('borderColor.DEFAULT', 'currentColor'),
2110
- property: 'border-color',
2111
- variable: '--tw-border-opacity'
2112
- })
2113
- });
2099
+ addDefaults('border-width', (0, _withAlphaVariable).default({
2100
+ color: theme('borderColor.DEFAULT', 'currentColor'),
2101
+ property: 'border-color',
2102
+ variable: '--tw-border-opacity'
2103
+ }));
2114
2104
  }
2115
2105
  matchUtilities({
2116
2106
  border: (value)=>{
@@ -2792,16 +2782,16 @@ let corePlugins = {
2792
2782
  textDecoration: ({ addUtilities })=>{
2793
2783
  addUtilities({
2794
2784
  '.underline': {
2795
- 'text-decoration': 'underline'
2785
+ 'text-decoration-line': 'underline'
2796
2786
  },
2797
2787
  '.overline': {
2798
- 'text-decoration': 'overline'
2788
+ 'text-decoration-line': 'overline'
2799
2789
  },
2800
2790
  '.line-through': {
2801
- 'text-decoration': 'line-through'
2791
+ 'text-decoration-line': 'line-through'
2802
2792
  },
2803
2793
  '.no-underline': {
2804
- 'text-decoration': 'none'
2794
+ 'text-decoration-line': 'none'
2805
2795
  }
2806
2796
  });
2807
2797
  },
@@ -3064,14 +3054,12 @@ let corePlugins = {
3064
3054
  `var(--tw-ring-shadow, 0 0 #0000)`,
3065
3055
  `var(--tw-shadow)`,
3066
3056
  ].join(', ');
3067
- return function({ matchUtilities , addBase , theme }) {
3068
- addBase({
3069
- '@defaults box-shadow': {
3070
- '--tw-ring-offset-shadow': '0 0 #0000',
3071
- '--tw-ring-shadow': '0 0 #0000',
3072
- '--tw-shadow': '0 0 #0000',
3073
- '--tw-shadow-colored': '0 0 #0000'
3074
- }
3057
+ return function({ matchUtilities , addDefaults , theme }) {
3058
+ addDefaults(' box-shadow', {
3059
+ '--tw-ring-offset-shadow': '0 0 #0000',
3060
+ '--tw-ring-shadow': '0 0 #0000',
3061
+ '--tw-shadow': '0 0 #0000',
3062
+ '--tw-shadow-colored': '0 0 #0000'
3075
3063
  });
3076
3064
  matchUtilities({
3077
3065
  shadow: (value)=>{
@@ -3180,20 +3168,18 @@ let corePlugins = {
3180
3168
  ]
3181
3169
  });
3182
3170
  },
3183
- ringWidth: ({ matchUtilities , addBase , addUtilities , theme })=>{
3171
+ ringWidth: ({ matchUtilities , addDefaults , addUtilities , theme })=>{
3184
3172
  let ringOpacityDefault = theme('ringOpacity.DEFAULT', '0.5');
3185
3173
  let ringColorDefault = (0, _withAlphaVariable).withAlphaValue(theme('ringColor.DEFAULT'), ringOpacityDefault, `rgb(147 197 253 / ${ringOpacityDefault})`);
3186
- addBase({
3187
- '@defaults ring-width': {
3188
- '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
3189
- '--tw-ring-offset-width': theme('ringOffsetWidth.DEFAULT', '0px'),
3190
- '--tw-ring-offset-color': theme('ringOffsetColor.DEFAULT', '#fff'),
3191
- '--tw-ring-color': ringColorDefault,
3192
- '--tw-ring-offset-shadow': '0 0 #0000',
3193
- '--tw-ring-shadow': '0 0 #0000',
3194
- '--tw-shadow': '0 0 #0000',
3195
- '--tw-shadow-colored': '0 0 #0000'
3196
- }
3174
+ addDefaults('ring-width', {
3175
+ '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
3176
+ '--tw-ring-offset-width': theme('ringOffsetWidth.DEFAULT', '0px'),
3177
+ '--tw-ring-offset-color': theme('ringOffsetColor.DEFAULT', '#fff'),
3178
+ '--tw-ring-color': ringColorDefault,
3179
+ '--tw-ring-offset-shadow': '0 0 #0000',
3180
+ '--tw-ring-shadow': '0 0 #0000',
3181
+ '--tw-shadow': '0 0 #0000',
3182
+ '--tw-shadow-colored': '0 0 #0000'
3197
3183
  });
3198
3184
  matchUtilities({
3199
3185
  ring: (value)=>{
@@ -3396,30 +3382,28 @@ let corePlugins = {
3396
3382
  values: theme('sepia')
3397
3383
  });
3398
3384
  },
3399
- filter: ({ addBase , addUtilities })=>{
3400
- addBase({
3401
- '@defaults filter': {
3402
- '--tw-blur': 'var(--tw-empty,/*!*/ /*!*/)',
3403
- '--tw-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
3404
- '--tw-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
3405
- '--tw-grayscale': 'var(--tw-empty,/*!*/ /*!*/)',
3406
- '--tw-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)',
3407
- '--tw-invert': 'var(--tw-empty,/*!*/ /*!*/)',
3408
- '--tw-saturate': 'var(--tw-empty,/*!*/ /*!*/)',
3409
- '--tw-sepia': 'var(--tw-empty,/*!*/ /*!*/)',
3410
- '--tw-drop-shadow': 'var(--tw-empty,/*!*/ /*!*/)',
3411
- '--tw-filter': [
3412
- 'var(--tw-blur)',
3413
- 'var(--tw-brightness)',
3414
- 'var(--tw-contrast)',
3415
- 'var(--tw-grayscale)',
3416
- 'var(--tw-hue-rotate)',
3417
- 'var(--tw-invert)',
3418
- 'var(--tw-saturate)',
3419
- 'var(--tw-sepia)',
3420
- 'var(--tw-drop-shadow)',
3421
- ].join(' ')
3422
- }
3385
+ filter: ({ addDefaults , addUtilities })=>{
3386
+ addDefaults('filter', {
3387
+ '--tw-blur': 'var(--tw-empty,/*!*/ /*!*/)',
3388
+ '--tw-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
3389
+ '--tw-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
3390
+ '--tw-grayscale': 'var(--tw-empty,/*!*/ /*!*/)',
3391
+ '--tw-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)',
3392
+ '--tw-invert': 'var(--tw-empty,/*!*/ /*!*/)',
3393
+ '--tw-saturate': 'var(--tw-empty,/*!*/ /*!*/)',
3394
+ '--tw-sepia': 'var(--tw-empty,/*!*/ /*!*/)',
3395
+ '--tw-drop-shadow': 'var(--tw-empty,/*!*/ /*!*/)',
3396
+ '--tw-filter': [
3397
+ 'var(--tw-blur)',
3398
+ 'var(--tw-brightness)',
3399
+ 'var(--tw-contrast)',
3400
+ 'var(--tw-grayscale)',
3401
+ 'var(--tw-hue-rotate)',
3402
+ 'var(--tw-invert)',
3403
+ 'var(--tw-saturate)',
3404
+ 'var(--tw-sepia)',
3405
+ 'var(--tw-drop-shadow)',
3406
+ ].join(' ')
3423
3407
  });
3424
3408
  addUtilities({
3425
3409
  '.filter': {
@@ -3559,30 +3543,28 @@ let corePlugins = {
3559
3543
  values: theme('backdropSepia')
3560
3544
  });
3561
3545
  },
3562
- backdropFilter: ({ addBase , addUtilities })=>{
3563
- addBase({
3564
- '@defaults backdrop-filter': {
3565
- '--tw-backdrop-blur': 'var(--tw-empty,/*!*/ /*!*/)',
3566
- '--tw-backdrop-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
3567
- '--tw-backdrop-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
3568
- '--tw-backdrop-grayscale': 'var(--tw-empty,/*!*/ /*!*/)',
3569
- '--tw-backdrop-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)',
3570
- '--tw-backdrop-invert': 'var(--tw-empty,/*!*/ /*!*/)',
3571
- '--tw-backdrop-opacity': 'var(--tw-empty,/*!*/ /*!*/)',
3572
- '--tw-backdrop-saturate': 'var(--tw-empty,/*!*/ /*!*/)',
3573
- '--tw-backdrop-sepia': 'var(--tw-empty,/*!*/ /*!*/)',
3574
- '--tw-backdrop-filter': [
3575
- 'var(--tw-backdrop-blur)',
3576
- 'var(--tw-backdrop-brightness)',
3577
- 'var(--tw-backdrop-contrast)',
3578
- 'var(--tw-backdrop-grayscale)',
3579
- 'var(--tw-backdrop-hue-rotate)',
3580
- 'var(--tw-backdrop-invert)',
3581
- 'var(--tw-backdrop-opacity)',
3582
- 'var(--tw-backdrop-saturate)',
3583
- 'var(--tw-backdrop-sepia)',
3584
- ].join(' ')
3585
- }
3546
+ backdropFilter: ({ addDefaults , addUtilities })=>{
3547
+ addDefaults('backdrop-filter', {
3548
+ '--tw-backdrop-blur': 'var(--tw-empty,/*!*/ /*!*/)',
3549
+ '--tw-backdrop-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
3550
+ '--tw-backdrop-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
3551
+ '--tw-backdrop-grayscale': 'var(--tw-empty,/*!*/ /*!*/)',
3552
+ '--tw-backdrop-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)',
3553
+ '--tw-backdrop-invert': 'var(--tw-empty,/*!*/ /*!*/)',
3554
+ '--tw-backdrop-opacity': 'var(--tw-empty,/*!*/ /*!*/)',
3555
+ '--tw-backdrop-saturate': 'var(--tw-empty,/*!*/ /*!*/)',
3556
+ '--tw-backdrop-sepia': 'var(--tw-empty,/*!*/ /*!*/)',
3557
+ '--tw-backdrop-filter': [
3558
+ 'var(--tw-backdrop-blur)',
3559
+ 'var(--tw-backdrop-brightness)',
3560
+ 'var(--tw-backdrop-contrast)',
3561
+ 'var(--tw-backdrop-grayscale)',
3562
+ 'var(--tw-backdrop-hue-rotate)',
3563
+ 'var(--tw-backdrop-invert)',
3564
+ 'var(--tw-backdrop-opacity)',
3565
+ 'var(--tw-backdrop-saturate)',
3566
+ 'var(--tw-backdrop-sepia)',
3567
+ ].join(' ')
3586
3568
  });
3587
3569
  addUtilities({
3588
3570
  '.backdrop-filter': {
package/lib/css/preflight.css CHANGED
@@ -144,7 +144,7 @@ sup {
144
144
  table {
145
145
  text-indent: 0; /* 1 */
146
146
  border-color: inherit; /* 2 */
147
- border-collapse: collapse; /* 3 */
147
+ border-collapse: collapse; /* 3 */
148
148
  }
149
149
 
150
150
  /*
@@ -310,7 +310,7 @@ textarea {
310
310
 
311
311
  input::placeholder,
312
312
  textarea::placeholder {
313
- opacity: 1; /* 1 */
313
+ opacity: 1; /* 1 */
314
314
  color: theme('colors.gray.400', #9ca3af); /* 2 */
315
315
  }
316
316
 
package/lib/featureFlags.js CHANGED
@@ -13,7 +13,9 @@ function _interopRequireDefault(obj) {
13
13
  };
14
14
  }
15
15
  let defaults = {
16
- optimizeUniversalDefaults: true
16
+ // TODO: Drop this once we can safely rely on optimizeUniversalDefaults being
17
+ // the default.
18
+ optimizeUniversalDefaults: process.env.NODE_ENV === 'test' ? true : false
17
19
  };
18
20
  let featureFlags = {
19
21
  future: [],
package/lib/lib/expandTailwindAtRules.js CHANGED
@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", {
3
3
  value: true
4
4
  });
5
5
  exports.default = expandTailwindAtRules;
6
+ exports.DEFAULTS_LAYER = void 0;
6
7
  var _quickLru = _interopRequireDefault(require("quick-lru"));
7
8
  var sharedState = _interopRequireWildcard(require("./sharedState"));
8
9
  var _generateRules = require("./generateRules");
@@ -112,6 +113,7 @@ function buildStylesheet(rules, context) {
112
113
  );
113
114
  let returnValue = {
114
115
  base: new Set(),
116
+ defaults: new Set(),
115
117
  components: new Set(),
116
118
  utilities: new Set(),
117
119
  variants: new Set(),
@@ -134,6 +136,10 @@ function buildStylesheet(rules, context) {
134
136
  returnValue.base.add(rule);
135
137
  continue;
136
138
  }
139
+ if (sort & context.layerOrder.defaults) {
140
+ returnValue.defaults.add(rule);
141
+ continue;
142
+ }
137
143
  if (sort & context.layerOrder.components) {
138
144
  returnValue.components.add(rule);
139
145
  continue;
@@ -149,6 +155,8 @@ function buildStylesheet(rules, context) {
149
155
  }
150
156
  return returnValue;
151
157
  }
158
+ const DEFAULTS_LAYER = Symbol('defaults-layer');
159
+ exports.DEFAULTS_LAYER = DEFAULTS_LAYER;
152
160
  function expandTailwindAtRules(context) {
153
161
  return (root)=>{
154
162
  let layerNodes = {
@@ -199,13 +207,29 @@ function expandTailwindAtRules(context) {
199
207
  ], context);
200
208
  }
201
209
  env.DEBUG && console.timeEnd('Build stylesheet');
202
- let { base: baseNodes , components: componentNodes , utilities: utilityNodes , variants: screenNodes , } = context.stylesheetCache;
210
+ let { defaults: defaultNodes , base: baseNodes , components: componentNodes , utilities: utilityNodes , variants: screenNodes , } = context.stylesheetCache;
203
211
  // ---
204
212
  // Replace any Tailwind directives with generated CSS
205
213
  if (layerNodes.base) {
206
214
  layerNodes.base.before((0, _cloneNodes).default([
207
215
  ...baseNodes
208
216
  ], layerNodes.base.source));
217
+ }
218
+ // @defaults rules are unconditionally added first to ensure that
219
+ // using any utility that relies on defaults will work even when
220
+ // compiled in an isolated environment like CSS modules
221
+ if (context.tailwindConfig[DEFAULTS_LAYER] !== false) {
222
+ if (layerNodes.base) {
223
+ layerNodes.base.after((0, _cloneNodes).default([
224
+ ...defaultNodes
225
+ ], root.source));
226
+ } else {
227
+ root.prepend((0, _cloneNodes).default([
228
+ ...defaultNodes
229
+ ], root.source));
230
+ }
231
+ }
232
+ if (layerNodes.base) {
209
233
  layerNodes.base.remove();
210
234
  }
211
235
  if (layerNodes.components) {
package/lib/lib/generateRules.js CHANGED
@@ -253,14 +253,32 @@ function parseRules(rule, cache, options = {
253
253
  options
254
254
  ];
255
255
  }
256
+ const IS_VALID_PROPERTY_NAME = /^[a-z_-]/;
257
+ function isValidPropName(name) {
258
+ return IS_VALID_PROPERTY_NAME.test(name);
259
+ }
260
+ function isParsableCssValue(property, value) {
261
+ try {
262
+ _postcss.default.parse(`a{${property}:${value}}`).toResult();
263
+ return true;
264
+ } catch (err) {
265
+ return false;
266
+ }
267
+ }
256
268
  function extractArbitraryProperty(classCandidate, context) {
257
269
  var ref;
258
270
  let [, property, value] = (ref = classCandidate.match(/^\[([a-zA-Z0-9-_]+):(\S+)\]$/)) !== null && ref !== void 0 ? ref : [];
259
271
  if (value === undefined) {
260
272
  return null;
261
273
  }
274
+ if (!isValidPropName(property)) {
275
+ return null;
276
+ }
277
+ if (!(0, _isValidArbitraryValue).default(value)) {
278
+ return null;
279
+ }
262
280
  let normalized = (0, _dataTypes).normalize(value);
263
- if (!(0, _isValidArbitraryValue).default(normalized)) {
281
+ if (!isParsableCssValue(property, normalized)) {
264
282
  return null;
265
283
  }
266
284
  return [
package/lib/lib/setupContextUtils.js CHANGED
@@ -271,6 +271,29 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
271
271
  ]);
272
272
  }
273
273
  },
274
+ /**
275
+ * @param {string} group
276
+ * @param {Record<string, string | string[]>} declarations
277
+ */ addDefaults (group, declarations) {
278
+ const groups = {
279
+ [`@defaults ${group}`]: declarations
280
+ };
281
+ for (let [identifier, rule] of withIdentifiers(groups)){
282
+ let prefixedIdentifier = prefixIdentifier(identifier, {
283
+ });
284
+ let offset = offsets.base++;
285
+ if (!context.candidateRuleMap.has(prefixedIdentifier)) {
286
+ context.candidateRuleMap.set(prefixedIdentifier, []);
287
+ }
288
+ context.candidateRuleMap.get(prefixedIdentifier).push([
289
+ {
290
+ sort: offset,
291
+ layer: 'defaults'
292
+ },
293
+ rule
294
+ ]);
295
+ }
296
+ },
274
297
  addComponents (components, options) {
275
298
  let defaultOptions = {
276
299
  respectPrefix: true,
@@ -562,6 +585,7 @@ function registerPlugins(plugins, context) {
562
585
  let variantList = [];
563
586
  let variantMap = new Map();
564
587
  let offsets = {
588
+ defaults: 0n,
565
589
  base: 0n,
566
590
  components: 0n,
567
591
  utilities: 0n,
@@ -587,6 +611,7 @@ function registerPlugins(plugins, context) {
587
611
  )
588
612
  )([
589
613
  offsets.base,
614
+ offsets.defaults,
590
615
  offsets.components,
591
616
  offsets.utilities,
592
617
  offsets.user,
@@ -596,12 +621,13 @@ function registerPlugins(plugins, context) {
596
621
  // so arbitrary properties are always sorted at the end.
597
622
  context.arbitraryPropertiesSort = (1n << reservedBits << 0n) - 1n;
598
623
  context.layerOrder = {
599
- base: 1n << reservedBits << 0n,
600
- components: 1n << reservedBits << 1n,
601
- utilities: 1n << reservedBits << 2n,
602
- user: 1n << reservedBits << 3n
624
+ defaults: 1n << reservedBits << 0n,
625
+ base: 1n << reservedBits << 1n,
626
+ components: 1n << reservedBits << 2n,
627
+ utilities: 1n << reservedBits << 3n,
628
+ user: 1n << reservedBits << 4n
603
629
  };
604
- reservedBits += 4n;
630
+ reservedBits += 5n;
605
631
  let offset = 0;
606
632
  context.variantOrder = new Map(variantList.map((variant, i)=>{
607
633
  let variantFunctions = variantMap.get(variant).length;
@@ -652,9 +678,17 @@ function registerPlugins(plugins, context) {
652
678
  let utils = Array.isArray(util) ? (()=>{
653
679
  let [utilName, options] = util;
654
680
  var ref;
655
- return Object.keys((ref = options === null || options === void 0 ? void 0 : options.values) !== null && ref !== void 0 ? ref : {
681
+ let classes = Object.keys((ref = options === null || options === void 0 ? void 0 : options.values) !== null && ref !== void 0 ? ref : {
656
682
  }).map((value)=>(0, _nameClass).formatClass(utilName, value)
657
683
  );
684
+ if (options === null || options === void 0 ? void 0 : options.supportsNegativeValues) {
685
+ classes = [
686
+ ...classes,
687
+ ...classes.map((cls)=>'-' + cls
688
+ )
689
+ ];
690
+ }
691
+ return classes;
658
692
  })() : [
659
693
  util
660
694
  ];
package/lib/util/defaults.js CHANGED
@@ -11,6 +11,12 @@ function defaults(target, ...sources) {
11
11
  target[k] = source[k];
12
12
  }
13
13
  }
14
+ for (let k1 of Object.getOwnPropertySymbols(source)){
15
+ var ref1;
16
+ if (!(target === null || target === void 0 ? void 0 : (ref1 = target.hasOwnProperty) === null || ref1 === void 0 ? void 0 : ref1.call(target, k1))) {
17
+ target[k1] = source[k1];
18
+ }
19
+ }
14
20
  }
15
21
  return target;
16
22
  }
package/lib/util/log.js CHANGED
@@ -2,6 +2,7 @@
2
2
  Object.defineProperty(exports, "__esModule", {
3
3
  value: true
4
4
  });
5
+ exports.dim = dim;
5
6
  exports.default = void 0;
6
7
  var _chalk = _interopRequireDefault(require("chalk"));
7
8
  function _interopRequireDefault(obj) {
@@ -18,6 +19,9 @@ function log(chalk, messages, key) {
18
19
  messages.forEach((message)=>console.warn(chalk, '-', message)
19
20
  );
20
21
  }
22
+ function dim(input) {
23
+ return _chalk.default.dim(input);
24
+ }
21
25
  var _default = {
22
26
  info (key, messages) {
23
27
  log(_chalk.default.bold.cyan('info'), ...Array.isArray(key) ? [
package/lib/util/normalizeConfig.js CHANGED
@@ -3,11 +3,29 @@ Object.defineProperty(exports, "__esModule", {
3
3
  value: true
4
4
  });
5
5
  exports.normalizeConfig = normalizeConfig;
6
- var _log = _interopRequireDefault(require("./log"));
7
- function _interopRequireDefault(obj) {
8
- return obj && obj.__esModule ? obj : {
9
- default: obj
10
- };
6
+ var _log = _interopRequireWildcard(require("./log"));
7
+ function _interopRequireWildcard(obj) {
8
+ if (obj && obj.__esModule) {
9
+ return obj;
10
+ } else {
11
+ var newObj = {
12
+ };
13
+ if (obj != null) {
14
+ for(var key in obj){
15
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
16
+ var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {
17
+ };
18
+ if (desc.get || desc.set) {
19
+ Object.defineProperty(newObj, key, desc);
20
+ } else {
21
+ newObj[key] = obj[key];
22
+ }
23
+ }
24
+ }
25
+ }
26
+ newObj.default = obj;
27
+ return newObj;
28
+ }
11
29
  }
12
30
  function normalizeConfig(config) {
13
31
  // Quick structure validation
@@ -204,5 +222,16 @@ function normalizeConfig(config) {
204
222
  return transformers;
205
223
  })()
206
224
  };
225
+ // Validate globs to prevent bogus globs.
226
+ // E.g.: `./src/*.{html}` is invalid, the `{html}` should just be `html`
227
+ for (let file of config.content.files){
228
+ if (typeof file === 'string' && /{([^,]*?)}/g.test(file)) {
229
+ _log.default.warn('invalid-glob-braces', [
230
+ `The glob pattern ${(0, _log).dim(file)} in your config is invalid.`,
231
+ ` Update it to ${(0, _log).dim(file.replace(/{([^,]*?)}/g, '$1'))} to silence this warning.`
232
+ ]);
233
+ break;
234
+ }
235
+ }
207
236
  return config;
208
237
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "tailwindcss",
3
- "version": "3.0.1",
3
+ "version": "3.0.5",
4
4
  "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
5
5
  "license": "MIT",
6
6
  "main": "lib/index.js",
@@ -51,7 +51,7 @@
51
51
  "cross-env": "^7.0.3",
52
52
  "cssnano": "^5.0.12",
53
53
  "esbuild": "^0.14.2",
54
- "eslint": "^8.2.0",
54
+ "eslint": "^8.4.1",
55
55
  "eslint-config-prettier": "^8.3.0",
56
56
  "eslint-plugin-prettier": "^4.0.0",
57
57
  "jest": "^27.4.3",
@@ -101,7 +101,8 @@
101
101
  ],
102
102
  "testPathIgnorePatterns": [
103
103
  "/node_modules/",
104
- "/integrations/"
104
+ "/integrations/",
105
+ "/standalone-cli/"
105
106
  ],
106
107
  "transform": {
107
108
  "\\.js$": "@swc/jest"
package/src/corePlugins.js CHANGED
@@ -529,27 +529,26 @@ export let corePlugins = {
529
529
  { supportsNegativeValues: true }
530
530
  ),
531
531
 
532
- transform: ({ addBase, addUtilities }) => {
533
- addBase({
534
- '@defaults transform': {
535
- '--tw-translate-x': '0',
536
- '--tw-translate-y': '0',
537
- '--tw-rotate': '0',
538
- '--tw-skew-x': '0',
539
- '--tw-skew-y': '0',
540
- '--tw-scale-x': '1',
541
- '--tw-scale-y': '1',
542
- '--tw-transform': [
543
- 'translateX(var(--tw-translate-x))',
544
- 'translateY(var(--tw-translate-y))',
545
- 'rotate(var(--tw-rotate))',
546
- 'skewX(var(--tw-skew-x))',
547
- 'skewY(var(--tw-skew-y))',
548
- 'scaleX(var(--tw-scale-x))',
549
- 'scaleY(var(--tw-scale-y))',
550
- ].join(' '),
551
- },
532
+ transform: ({ addDefaults, addUtilities }) => {
533
+ addDefaults('transform', {
534
+ '--tw-translate-x': '0',
535
+ '--tw-translate-y': '0',
536
+ '--tw-rotate': '0',
537
+ '--tw-skew-x': '0',
538
+ '--tw-skew-y': '0',
539
+ '--tw-scale-x': '1',
540
+ '--tw-scale-y': '1',
541
+ '--tw-transform': [
542
+ 'translateX(var(--tw-translate-x))',
543
+ 'translateY(var(--tw-translate-y))',
544
+ 'rotate(var(--tw-rotate))',
545
+ 'skewX(var(--tw-skew-x))',
546
+ 'skewY(var(--tw-skew-y))',
547
+ 'scaleX(var(--tw-scale-x))',
548
+ 'scaleY(var(--tw-scale-y))',
549
+ ].join(' '),
552
550
  })
551
+
553
552
  addUtilities({
554
553
  '.transform': { '@defaults transform': {}, transform: 'var(--tw-transform)' },
555
554
  '.transform-cpu': {
@@ -611,14 +610,12 @@ export let corePlugins = {
611
610
 
612
611
  cursor: createUtilityPlugin('cursor'),
613
612
 
614
- touchAction: ({ addBase, addUtilities }) => {
615
- addBase({
616
- '@defaults touch-action': {
617
- '--tw-pan-x': 'var(--tw-empty,/*!*/ /*!*/)',
618
- '--tw-pan-y': 'var(--tw-empty,/*!*/ /*!*/)',
619
- '--tw-pinch-zoom': 'var(--tw-empty,/*!*/ /*!*/)',
620
- '--tw-touch-action': 'var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)',
621
- },
613
+ touchAction: ({ addDefaults, addUtilities }) => {
614
+ addDefaults('touch-action', {
615
+ '--tw-pan-x': 'var(--tw-empty,/*!*/ /*!*/)',
616
+ '--tw-pan-y': 'var(--tw-empty,/*!*/ /*!*/)',
617
+ '--tw-pinch-zoom': 'var(--tw-empty,/*!*/ /*!*/)',
618
+ '--tw-touch-action': 'var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)',
622
619
  })
623
620
 
624
621
  addUtilities({
@@ -681,11 +678,9 @@ export let corePlugins = {
681
678
  })
682
679
  },
683
680
 
684
- scrollSnapType: ({ addUtilities, addBase }) => {
685
- addBase({
686
- '@defaults scroll-snap-type': {
687
- '--tw-scroll-snap-strictness': 'proximity',
688
- },
681
+ scrollSnapType: ({ addDefaults, addUtilities }) => {
682
+ addDefaults('scroll-snap-type', {
683
+ '--tw-scroll-snap-strictness': 'proximity',
689
684
  })
690
685
 
691
686
  addUtilities({
@@ -1182,22 +1177,21 @@ export let corePlugins = {
1182
1177
  })
1183
1178
  },
1184
1179
 
1185
- borderColor: ({ addBase, matchUtilities, theme, corePlugins }) => {
1180
+ borderColor: ({ addDefaults, matchUtilities, theme, corePlugins }) => {
1186
1181
  if (!corePlugins('borderOpacity')) {
1187
1182
  let value = theme('borderColor.DEFAULT', 'currentColor')
1188
- addBase({
1189
- '@defaults border-width': {
1190
- 'border-color': toColorValue(value),
1191
- },
1183
+ addDefaults('border-width', {
1184
+ 'border-color': toColorValue(value),
1192
1185
  })
1193
1186
  } else {
1194
- addBase({
1195
- '@defaults border-width': withAlphaVariable({
1187
+ addDefaults(
1188
+ 'border-width',
1189
+ withAlphaVariable({
1196
1190
  color: theme('borderColor.DEFAULT', 'currentColor'),
1197
1191
  property: 'border-color',
1198
1192
  variable: '--tw-border-opacity',
1199
- }),
1200
- })
1193
+ })
1194
+ )
1201
1195
  }
1202
1196
 
1203
1197
  matchUtilities(
@@ -1660,10 +1654,10 @@ export let corePlugins = {
1660
1654
 
1661
1655
  textDecoration: ({ addUtilities }) => {
1662
1656
  addUtilities({
1663
- '.underline': { 'text-decoration': 'underline' },
1664
- '.overline': { 'text-decoration': 'overline' },
1665
- '.line-through': { 'text-decoration': 'line-through' },
1666
- '.no-underline': { 'text-decoration': 'none' },
1657
+ '.underline': { 'text-decoration-line': 'underline' },
1658
+ '.overline': { 'text-decoration-line': 'overline' },
1659
+ '.line-through': { 'text-decoration-line': 'line-through' },
1660
+ '.no-underline': { 'text-decoration-line': 'none' },
1667
1661
  })
1668
1662
  },
1669
1663
 
@@ -1823,14 +1817,12 @@ export let corePlugins = {
1823
1817
  `var(--tw-shadow)`,
1824
1818
  ].join(', ')
1825
1819
 
1826
- return function ({ matchUtilities, addBase, theme }) {
1827
- addBase({
1828
- '@defaults box-shadow': {
1829
- '--tw-ring-offset-shadow': '0 0 #0000',
1830
- '--tw-ring-shadow': '0 0 #0000',
1831
- '--tw-shadow': '0 0 #0000',
1832
- '--tw-shadow-colored': '0 0 #0000',
1833
- },
1820
+ return function ({ matchUtilities, addDefaults, theme }) {
1821
+ addDefaults(' box-shadow', {
1822
+ '--tw-ring-offset-shadow': '0 0 #0000',
1823
+ '--tw-ring-shadow': '0 0 #0000',
1824
+ '--tw-shadow': '0 0 #0000',
1825
+ '--tw-shadow-colored': '0 0 #0000',
1834
1826
  })
1835
1827
 
1836
1828
  matchUtilities(
@@ -1908,7 +1900,7 @@ export let corePlugins = {
1908
1900
  )
1909
1901
  },
1910
1902
 
1911
- ringWidth: ({ matchUtilities, addBase, addUtilities, theme }) => {
1903
+ ringWidth: ({ matchUtilities, addDefaults, addUtilities, theme }) => {
1912
1904
  let ringOpacityDefault = theme('ringOpacity.DEFAULT', '0.5')
1913
1905
  let ringColorDefault = withAlphaValue(
1914
1906
  theme('ringColor.DEFAULT'),
@@ -1916,17 +1908,15 @@ export let corePlugins = {
1916
1908
  `rgb(147 197 253 / ${ringOpacityDefault})`
1917
1909
  )
1918
1910
 
1919
- addBase({
1920
- '@defaults ring-width': {
1921
- '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
1922
- '--tw-ring-offset-width': theme('ringOffsetWidth.DEFAULT', '0px'),
1923
- '--tw-ring-offset-color': theme('ringOffsetColor.DEFAULT', '#fff'),
1924
- '--tw-ring-color': ringColorDefault,
1925
- '--tw-ring-offset-shadow': '0 0 #0000',
1926
- '--tw-ring-shadow': '0 0 #0000',
1927
- '--tw-shadow': '0 0 #0000',
1928
- '--tw-shadow-colored': '0 0 #0000',
1929
- },
1911
+ addDefaults('ring-width', {
1912
+ '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
1913
+ '--tw-ring-offset-width': theme('ringOffsetWidth.DEFAULT', '0px'),
1914
+ '--tw-ring-offset-color': theme('ringOffsetColor.DEFAULT', '#fff'),
1915
+ '--tw-ring-color': ringColorDefault,
1916
+ '--tw-ring-offset-shadow': '0 0 #0000',
1917
+ '--tw-ring-shadow': '0 0 #0000',
1918
+ '--tw-shadow': '0 0 #0000',
1919
+ '--tw-shadow-colored': '0 0 #0000',
1930
1920
  })
1931
1921
 
1932
1922
  matchUtilities(
@@ -2133,30 +2123,28 @@ export let corePlugins = {
2133
2123
  )
2134
2124
  },
2135
2125
 
2136
- filter: ({ addBase, addUtilities }) => {
2137
- addBase({
2138
- '@defaults filter': {
2139
- '--tw-blur': 'var(--tw-empty,/*!*/ /*!*/)',
2140
- '--tw-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
2141
- '--tw-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
2142
- '--tw-grayscale': 'var(--tw-empty,/*!*/ /*!*/)',
2143
- '--tw-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)',
2144
- '--tw-invert': 'var(--tw-empty,/*!*/ /*!*/)',
2145
- '--tw-saturate': 'var(--tw-empty,/*!*/ /*!*/)',
2146
- '--tw-sepia': 'var(--tw-empty,/*!*/ /*!*/)',
2147
- '--tw-drop-shadow': 'var(--tw-empty,/*!*/ /*!*/)',
2148
- '--tw-filter': [
2149
- 'var(--tw-blur)',
2150
- 'var(--tw-brightness)',
2151
- 'var(--tw-contrast)',
2152
- 'var(--tw-grayscale)',
2153
- 'var(--tw-hue-rotate)',
2154
- 'var(--tw-invert)',
2155
- 'var(--tw-saturate)',
2156
- 'var(--tw-sepia)',
2157
- 'var(--tw-drop-shadow)',
2158
- ].join(' '),
2159
- },
2126
+ filter: ({ addDefaults, addUtilities }) => {
2127
+ addDefaults('filter', {
2128
+ '--tw-blur': 'var(--tw-empty,/*!*/ /*!*/)',
2129
+ '--tw-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
2130
+ '--tw-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
2131
+ '--tw-grayscale': 'var(--tw-empty,/*!*/ /*!*/)',
2132
+ '--tw-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)',
2133
+ '--tw-invert': 'var(--tw-empty,/*!*/ /*!*/)',
2134
+ '--tw-saturate': 'var(--tw-empty,/*!*/ /*!*/)',
2135
+ '--tw-sepia': 'var(--tw-empty,/*!*/ /*!*/)',
2136
+ '--tw-drop-shadow': 'var(--tw-empty,/*!*/ /*!*/)',
2137
+ '--tw-filter': [
2138
+ 'var(--tw-blur)',
2139
+ 'var(--tw-brightness)',
2140
+ 'var(--tw-contrast)',
2141
+ 'var(--tw-grayscale)',
2142
+ 'var(--tw-hue-rotate)',
2143
+ 'var(--tw-invert)',
2144
+ 'var(--tw-saturate)',
2145
+ 'var(--tw-sepia)',
2146
+ 'var(--tw-drop-shadow)',
2147
+ ].join(' '),
2160
2148
  })
2161
2149
  addUtilities({
2162
2150
  '.filter': { '@defaults filter': {}, filter: 'var(--tw-filter)' },
@@ -2299,30 +2287,28 @@ export let corePlugins = {
2299
2287
  )
2300
2288
  },
2301
2289
 
2302
- backdropFilter: ({ addBase, addUtilities }) => {
2303
- addBase({
2304
- '@defaults backdrop-filter': {
2305
- '--tw-backdrop-blur': 'var(--tw-empty,/*!*/ /*!*/)',
2306
- '--tw-backdrop-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
2307
- '--tw-backdrop-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
2308
- '--tw-backdrop-grayscale': 'var(--tw-empty,/*!*/ /*!*/)',
2309
- '--tw-backdrop-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)',
2310
- '--tw-backdrop-invert': 'var(--tw-empty,/*!*/ /*!*/)',
2311
- '--tw-backdrop-opacity': 'var(--tw-empty,/*!*/ /*!*/)',
2312
- '--tw-backdrop-saturate': 'var(--tw-empty,/*!*/ /*!*/)',
2313
- '--tw-backdrop-sepia': 'var(--tw-empty,/*!*/ /*!*/)',
2314
- '--tw-backdrop-filter': [
2315
- 'var(--tw-backdrop-blur)',
2316
- 'var(--tw-backdrop-brightness)',
2317
- 'var(--tw-backdrop-contrast)',
2318
- 'var(--tw-backdrop-grayscale)',
2319
- 'var(--tw-backdrop-hue-rotate)',
2320
- 'var(--tw-backdrop-invert)',
2321
- 'var(--tw-backdrop-opacity)',
2322
- 'var(--tw-backdrop-saturate)',
2323
- 'var(--tw-backdrop-sepia)',
2324
- ].join(' '),
2325
- },
2290
+ backdropFilter: ({ addDefaults, addUtilities }) => {
2291
+ addDefaults('backdrop-filter', {
2292
+ '--tw-backdrop-blur': 'var(--tw-empty,/*!*/ /*!*/)',
2293
+ '--tw-backdrop-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
2294
+ '--tw-backdrop-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
2295
+ '--tw-backdrop-grayscale': 'var(--tw-empty,/*!*/ /*!*/)',
2296
+ '--tw-backdrop-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)',
2297
+ '--tw-backdrop-invert': 'var(--tw-empty,/*!*/ /*!*/)',
2298
+ '--tw-backdrop-opacity': 'var(--tw-empty,/*!*/ /*!*/)',
2299
+ '--tw-backdrop-saturate': 'var(--tw-empty,/*!*/ /*!*/)',
2300
+ '--tw-backdrop-sepia': 'var(--tw-empty,/*!*/ /*!*/)',
2301
+ '--tw-backdrop-filter': [
2302
+ 'var(--tw-backdrop-blur)',
2303
+ 'var(--tw-backdrop-brightness)',
2304
+ 'var(--tw-backdrop-contrast)',
2305
+ 'var(--tw-backdrop-grayscale)',
2306
+ 'var(--tw-backdrop-hue-rotate)',
2307
+ 'var(--tw-backdrop-invert)',
2308
+ 'var(--tw-backdrop-opacity)',
2309
+ 'var(--tw-backdrop-saturate)',
2310
+ 'var(--tw-backdrop-sepia)',
2311
+ ].join(' '),
2326
2312
  })
2327
2313
  addUtilities({
2328
2314
  '.backdrop-filter': {
package/src/css/preflight.css CHANGED
@@ -144,7 +144,7 @@ sup {
144
144
  table {
145
145
  text-indent: 0; /* 1 */
146
146
  border-color: inherit; /* 2 */
147
- border-collapse: collapse; /* 3 */
147
+ border-collapse: collapse; /* 3 */
148
148
  }
149
149
 
150
150
  /*
@@ -310,7 +310,7 @@ textarea {
310
310
 
311
311
  input::placeholder,
312
312
  textarea::placeholder {
313
- opacity: 1; /* 1 */
313
+ opacity: 1; /* 1 */
314
314
  color: theme('colors.gray.400', #9ca3af); /* 2 */
315
315
  }
316
316
 
package/src/featureFlags.js CHANGED
@@ -2,7 +2,11 @@ import chalk from 'chalk'
2
2
  import log from './util/log'
3
3
 
4
4
  let defaults = {
5
- optimizeUniversalDefaults: true,
5
+ // TODO: Drop this once we can safely rely on optimizeUniversalDefaults being
6
+ // the default.
7
+ optimizeUniversalDefaults: process.env.NODE_ENV === 'test' ? true : false,
8
+
9
+ // optimizeUniversalDefaults: true
6
10
  }
7
11
 
8
12
  let featureFlags = {
package/src/lib/expandTailwindAtRules.js CHANGED
@@ -99,6 +99,7 @@ function buildStylesheet(rules, context) {
99
99
 
100
100
  let returnValue = {
101
101
  base: new Set(),
102
+ defaults: new Set(),
102
103
  components: new Set(),
103
104
  utilities: new Set(),
104
105
  variants: new Set(),
@@ -125,6 +126,11 @@ function buildStylesheet(rules, context) {
125
126
  continue
126
127
  }
127
128
 
129
+ if (sort & context.layerOrder.defaults) {
130
+ returnValue.defaults.add(rule)
131
+ continue
132
+ }
133
+
128
134
  if (sort & context.layerOrder.components) {
129
135
  returnValue.components.add(rule)
130
136
  continue
@@ -144,6 +150,8 @@ function buildStylesheet(rules, context) {
144
150
  return returnValue
145
151
  }
146
152
 
153
+ export const DEFAULTS_LAYER = Symbol('defaults-layer')
154
+
147
155
  export default function expandTailwindAtRules(context) {
148
156
  return (root) => {
149
157
  let layerNodes = {
@@ -202,6 +210,7 @@ export default function expandTailwindAtRules(context) {
202
210
  env.DEBUG && console.timeEnd('Build stylesheet')
203
211
 
204
212
  let {
213
+ defaults: defaultNodes,
205
214
  base: baseNodes,
206
215
  components: componentNodes,
207
216
  utilities: utilityNodes,
@@ -214,6 +223,20 @@ export default function expandTailwindAtRules(context) {
214
223
 
215
224
  if (layerNodes.base) {
216
225
  layerNodes.base.before(cloneNodes([...baseNodes], layerNodes.base.source))
226
+ }
227
+
228
+ // @defaults rules are unconditionally added first to ensure that
229
+ // using any utility that relies on defaults will work even when
230
+ // compiled in an isolated environment like CSS modules
231
+ if (context.tailwindConfig[DEFAULTS_LAYER] !== false) {
232
+ if (layerNodes.base) {
233
+ layerNodes.base.after(cloneNodes([...defaultNodes], root.source))
234
+ } else {
235
+ root.prepend(cloneNodes([...defaultNodes], root.source))
236
+ }
237
+ }
238
+
239
+ if (layerNodes.base) {
217
240
  layerNodes.base.remove()
218
241
  }
219
242
 
package/src/lib/generateRules.js CHANGED
@@ -248,6 +248,21 @@ function parseRules(rule, cache, options = {}) {
248
248
  return [cache.get(rule), options]
249
249
  }
250
250
 
251
+ const IS_VALID_PROPERTY_NAME = /^[a-z_-]/
252
+
253
+ function isValidPropName(name) {
254
+ return IS_VALID_PROPERTY_NAME.test(name)
255
+ }
256
+
257
+ function isParsableCssValue(property, value) {
258
+ try {
259
+ postcss.parse(`a{${property}:${value}}`).toResult()
260
+ return true
261
+ } catch (err) {
262
+ return false
263
+ }
264
+ }
265
+
251
266
  function extractArbitraryProperty(classCandidate, context) {
252
267
  let [, property, value] = classCandidate.match(/^\[([a-zA-Z0-9-_]+):(\S+)\]$/) ?? []
253
268
 
@@ -255,9 +270,17 @@ function extractArbitraryProperty(classCandidate, context) {
255
270
  return null
256
271
  }
257
272
 
273
+ if (!isValidPropName(property)) {
274
+ return null
275
+ }
276
+
277
+ if (!isValidArbitraryValue(value)) {
278
+ return null
279
+ }
280
+
258
281
  let normalized = normalize(value)
259
282
 
260
- if (!isValidArbitraryValue(normalized)) {
283
+ if (!isParsableCssValue(property, normalized)) {
261
284
  return null
262
285
  }
263
286
 
package/src/lib/setupContextUtils.js CHANGED
@@ -233,6 +233,28 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
233
233
  .push([{ sort: offset, layer: 'base' }, rule])
234
234
  }
235
235
  },
236
+ /**
237
+ * @param {string} group
238
+ * @param {Record<string, string | string[]>} declarations
239
+ */
240
+ addDefaults(group, declarations) {
241
+ const groups = {
242
+ [`@defaults ${group}`]: declarations,
243
+ }
244
+
245
+ for (let [identifier, rule] of withIdentifiers(groups)) {
246
+ let prefixedIdentifier = prefixIdentifier(identifier, {})
247
+ let offset = offsets.base++
248
+
249
+ if (!context.candidateRuleMap.has(prefixedIdentifier)) {
250
+ context.candidateRuleMap.set(prefixedIdentifier, [])
251
+ }
252
+
253
+ context.candidateRuleMap
254
+ .get(prefixedIdentifier)
255
+ .push([{ sort: offset, layer: 'defaults' }, rule])
256
+ }
257
+ },
236
258
  addComponents(components, options) {
237
259
  let defaultOptions = {
238
260
  respectPrefix: true,
@@ -528,6 +550,7 @@ function registerPlugins(plugins, context) {
528
550
  let variantList = []
529
551
  let variantMap = new Map()
530
552
  let offsets = {
553
+ defaults: 0n,
531
554
  base: 0n,
532
555
  components: 0n,
533
556
  utilities: 0n,
@@ -555,6 +578,7 @@ function registerPlugins(plugins, context) {
555
578
 
556
579
  let highestOffset = ((args) => args.reduce((m, e) => (e > m ? e : m)))([
557
580
  offsets.base,
581
+ offsets.defaults,
558
582
  offsets.components,
559
583
  offsets.utilities,
560
584
  offsets.user,
@@ -566,13 +590,14 @@ function registerPlugins(plugins, context) {
566
590
  context.arbitraryPropertiesSort = ((1n << reservedBits) << 0n) - 1n
567
591
 
568
592
  context.layerOrder = {
569
- base: (1n << reservedBits) << 0n,
570
- components: (1n << reservedBits) << 1n,
571
- utilities: (1n << reservedBits) << 2n,
572
- user: (1n << reservedBits) << 3n,
593
+ defaults: (1n << reservedBits) << 0n,
594
+ base: (1n << reservedBits) << 1n,
595
+ components: (1n << reservedBits) << 2n,
596
+ utilities: (1n << reservedBits) << 3n,
597
+ user: (1n << reservedBits) << 4n,
573
598
  }
574
599
 
575
- reservedBits += 4n
600
+ reservedBits += 5n
576
601
 
577
602
  let offset = 0
578
603
  context.variantOrder = new Map(
@@ -626,7 +651,15 @@ function registerPlugins(plugins, context) {
626
651
  let utils = Array.isArray(util)
627
652
  ? (() => {
628
653
  let [utilName, options] = util
629
- return Object.keys(options?.values ?? {}).map((value) => formatClass(utilName, value))
654
+ let classes = Object.keys(options?.values ?? {}).map((value) =>
655
+ formatClass(utilName, value)
656
+ )
657
+
658
+ if (options?.supportsNegativeValues) {
659
+ classes = [...classes, ...classes.map((cls) => '-' + cls)]
660
+ }
661
+
662
+ return classes
630
663
  })()
631
664
  : [util]
632
665
 
package/src/util/defaults.js CHANGED
@@ -5,6 +5,12 @@ export function defaults(target, ...sources) {
5
5
  target[k] = source[k]
6
6
  }
7
7
  }
8
+
9
+ for (let k of Object.getOwnPropertySymbols(source)) {
10
+ if (!target?.hasOwnProperty?.(k)) {
11
+ target[k] = source[k]
12
+ }
13
+ }
8
14
  }
9
15
 
10
16
  return target
package/src/util/log.js CHANGED
@@ -12,6 +12,10 @@ function log(chalk, messages, key) {
12
12
  messages.forEach((message) => console.warn(chalk, '-', message))
13
13
  }
14
14
 
15
+ export function dim(input) {
16
+ return chalk.dim(input)
17
+ }
18
+
15
19
  export default {
16
20
  info(key, messages) {
17
21
  log(chalk.bold.cyan('info'), ...(Array.isArray(key) ? [key] : [messages, key]))
package/src/util/normalizeConfig.js CHANGED
@@ -1,4 +1,4 @@
1
- import log from './log'
1
+ import log, { dim } from './log'
2
2
 
3
3
  export function normalizeConfig(config) {
4
4
  // Quick structure validation
@@ -245,5 +245,18 @@ export function normalizeConfig(config) {
245
245
  })(),
246
246
  }
247
247
 
248
+ // Validate globs to prevent bogus globs.
249
+ // E.g.: `./src/*.{html}` is invalid, the `{html}` should just be `html`
250
+ for (let file of config.content.files) {
251
+ if (typeof file === 'string' && /{([^,]*?)}/g.test(file)) {
252
+ log.warn('invalid-glob-braces', [
253
+ `The glob pattern ${dim(file)} in your config is invalid.`,
254
+ ` Update it to ${dim(file.replace(/{([^,]*?)}/g, '$1'))} to silence this warning.`,
255
+ // TODO: Add https://tw.wtf/invalid-glob-braces
256
+ ])
257
+ break
258
+ }
259
+ }
260
+
248
261
  return config
249
262
  }