wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions
tailwindcss/tests
History
Robin Malfait fe08e919dc
Ensure @apply works consistently with or without @layer (#6938) 
* partition nodes as soon as possible

Time to write another story on `@apply`...

When we write code like this:

```css
.a {
  @apply b;
}

.b {
  @apply uppercase;
  color: red;
}
```

Then we create 2 Nodes in our context to keep track of. One has
identifier `a`, the other has identifier `b`. However, when we have an
`@apply` and it contains multiple declarations/atrules, then we have to
split up the (aka partition) node into multiple nodes so that we can
guarantee the correct expected sort order.

This means that the above example technically looks like this:

```css
.a {
  @apply b;
}

.b {
  @apply uppercase;
}

.b {
  color: red;
}
```

If this was your input, then we would still have 1 node for identifier
'a', but we would have 2 nodes for identifier 'b'.

As mentioned earlier, this is important to guarantee the correct order,
here is an example:

```css
.b {
  @apply md:font-bold xl:font-normal; /* Here we can sort by our
  internal rules. This means that the `md` comes before `xl`. */
}
```

... however

```css
.b {
  @apply xl:font-normal; /* This now exists _before_ the example below */
}

.b {
  @apply md:font-bold; /* Because we respect the order of the user's css */
}
```

So to guarantee the order when doing this:
```css
.b {
  @apply xl:font-normal;
  @apply lg:font-normal;
}
```

We also split this up into 2 nodes like this:
```css
.b {
  @apply xl:font-normal;
}
.b {
  @apply lg:font-normal;
}
```

The tricky part is that now only 1 empty `.b` node exists in our context
because we partitioned the orginal node into multiple nodes and moved
the children to the new nodes and because they are new nodes it means
that they have a different identity.

This partitioning used to happen in the expandApplyAtRules code, but
this is a bit too late because the context has already been filled at
this time. Instead, we move the code more to the front, as if you wrote
those separated blocks yourself. Now the code to inject those nodes into
the context happens in a single spot instead of multiple places.

Another good part about this is that we have better consistency between
each layer because it turns out that these two examples generated
different results...

```css
.a {
  @apply b;
}
.b {
  @apply uppercase;
  color: red;
}
```

... is different compared to:

```css
@tailwind components;
@layer components {
  .a {
    @apply b;
  }
  .b {
    @apply uppercase;
    color: red;
  }
}
```

Even if both `a` and `b` are being used in one of your content paths...
Yeah.. *sigh*

* add more `@apply` related tests

* update changelog

* remove support for basic nesting (leftover)

* remove leftover todo

This has been fixed already
2022-01-07 16:41:01 +01:00
..
fixtures remove unused fixture files 2021-12-15 18:13:09 +01:00
plugins Enable optimize universal defaults by default (#5635) 2021-10-06 17:45:26 +02:00
postcss-plugins/nesting Remove AOT (#5340) 2021-09-01 17:13:59 +02:00
util Move defaults to their own always-on layer (#6500) 2021-12-14 12:21:38 -05:00
animations.test.js Improve css expectations in tests (#5819) 2021-10-18 12:08:48 +02:00
apply.test.css Ensure @apply works consistently with or without @layer (#6938) 2022-01-07 16:41:01 +01:00
apply.test.html JIT by default - move tests and make them consistent (#5374) 2021-09-03 13:48:16 +02:00
apply.test.js Ensure @apply works consistently with or without @layer (#6938) 2022-01-07 16:41:01 +01:00
arbitrary-properties.test.js Properly detect theme() value usage in arbitrary properties (#6854) 2022-01-03 13:12:43 +01:00
arbitrary-values.test.css Support HSL with hue units in arbitrary values (#6726) 2021-12-24 13:20:35 -05:00
arbitrary-values.test.html Support HSL with hue units in arbitrary values (#6726) 2021-12-24 13:20:35 -05:00
arbitrary-values.test.js Validate theme() works in arbitray values (#6852) 2022-01-03 11:29:18 +01:00
basic-usage.test.css Improve order of color properties in transition and transition-colors utilities 2021-12-15 14:09:27 -05:00
basic-usage.test.html Support negative scale values 2021-12-06 10:47:16 -05:00
basic-usage.test.js Fix use of falsy values in theme config (#6917) 2022-01-05 16:37:07 -05:00
collapse-adjacent-rules.test.css JIT by default - move tests and make them consistent (#5374) 2021-09-03 13:48:16 +02:00
collapse-adjacent-rules.test.html JIT by default - move tests and make them consistent (#5374) 2021-09-03 13:48:16 +02:00
collapse-adjacent-rules.test.js JIT by default - move tests and make them consistent (#5374) 2021-09-03 13:48:16 +02:00
collapse-duplicate-declarations.test.js Improve collapsing of duplicate declarations (#6856) 2022-01-03 15:41:49 +01:00
color-opacity-modifiers.test.js Improve css expectations in tests (#5819) 2021-10-18 12:08:48 +02:00
color.test.js Support HSL with hue units in arbitrary values (#6726) 2021-12-24 13:20:35 -05:00
combined-selectors.test.js Ensure full node stays, if only a partial is used (#5617) 2021-09-28 11:54:39 +02:00
configurePlugins.test.js JIT by default - move tests and make them consistent (#5374) 2021-09-03 13:48:16 +02:00
containerPlugin.test.js Partially revert tuple syntax PR for screens: #6104 (#6289) 2021-12-07 18:49:40 +01:00
context-reuse.test.html JIT by default - move tests and make them consistent (#5374) 2021-09-03 13:48:16 +02:00
context-reuse.test.js JIT by default - move tests and make them consistent (#5374) 2021-09-03 13:48:16 +02:00
context-reuse.worker.js JIT by default - move tests and make them consistent (#5374) 2021-09-03 13:48:16 +02:00
custom-extractors.test.css Update color parsing and formatting (#5442) 2021-09-09 16:15:53 +02:00
custom-extractors.test.html JIT by default - move tests and make them consistent (#5374) 2021-09-03 13:48:16 +02:00
custom-extractors.test.js Handle old to new config when normalizing the config (#5658) 2021-10-01 12:56:54 +02:00
custom-plugins.test.js Preserve case of css variables added by plugins (#6888) 2022-01-04 23:03:41 -05:00
custom-separator.test.css JIT by default - move tests and make them consistent (#5374) 2021-09-03 13:48:16 +02:00
custom-separator.test.html JIT by default - move tests and make them consistent (#5374) 2021-09-03 13:48:16 +02:00
custom-separator.test.js JIT by default - move tests and make them consistent (#5374) 2021-09-03 13:48:16 +02:00
custom-transformers.test.html Use real files for custom transformer test 2021-12-04 13:38:40 -05:00
custom-transformers.test.js Use real files for custom transformer test 2021-12-04 13:38:40 -05:00
custom-transformers.test.php Use real files for custom transformer test 2021-12-04 13:38:40 -05:00
customConfig.test.js Improve css expectations in tests (#5819) 2021-10-18 12:08:48 +02:00
dark-mode.test.js Improve css expectations in tests (#5819) 2021-10-18 12:08:48 +02:00
default-extractor.test.js Properly detect theme() value usage in arbitrary properties (#6854) 2022-01-03 13:12:43 +01:00
defaultConfig.test.js Improve public API (#5526) 2021-09-26 12:44:13 +02:00
defaultTheme.test.js Improve public API (#5526) 2021-09-26 12:44:13 +02:00
detect-nesting.test.js Improve nesting detection (#6011) 2021-11-10 13:15:32 +01:00
escapeClassName.test.js [WIP] Unify JIT and AOT code paths (#4188) 2021-05-07 13:56:15 -04:00
evaluateTailwindFunctions.test.js Support square bracket notation in paths (#6519) 2021-12-15 11:09:29 -05:00
experimental.test.js Add support for colored box shadows (#5979) 2021-11-04 10:14:13 -04:00
extractor-edge-cases.test.js Improve before and after variants (#5820) 2021-10-18 18:11:34 +02:00
flattenColorPalette.test.js [WIP] Unify JIT and AOT code paths (#4188) 2021-05-07 13:56:15 -04:00
format-variant-selector.test.js Enforce the order of pseudo elements (#6018) 2021-11-12 16:38:03 +01:00
getClassList.test.js Make negative values a first-class feature, rather than theme-driven (#5709) 2021-10-06 13:42:05 -04:00
import-syntax.test.css Update color parsing and formatting (#5442) 2021-09-09 16:15:53 +02:00
import-syntax.test.html JIT by default - move tests and make them consistent (#5374) 2021-09-03 13:48:16 +02:00
import-syntax.test.js JIT by default - move tests and make them consistent (#5374) 2021-09-03 13:48:16 +02:00
important-boolean.test.css JIT by default - move tests and make them consistent (#5374) 2021-09-03 13:48:16 +02:00
important-boolean.test.html JIT by default - move tests and make them consistent (#5374) 2021-09-03 13:48:16 +02:00
important-boolean.test.js JIT by default - move tests and make them consistent (#5374) 2021-09-03 13:48:16 +02:00
important-modifier-prefix.test.css Improve addVariant API (#5809) 2021-10-18 11:26:11 +02:00
important-modifier-prefix.test.html JIT by default - move tests and make them consistent (#5374) 2021-09-03 13:48:16 +02:00
important-modifier-prefix.test.js JIT by default - move tests and make them consistent (#5374) 2021-09-03 13:48:16 +02:00
important-modifier.test.css Improve addVariant API (#5809) 2021-10-18 11:26:11 +02:00
important-modifier.test.html JIT by default - move tests and make them consistent (#5374) 2021-09-03 13:48:16 +02:00
important-modifier.test.js JIT by default - move tests and make them consistent (#5374) 2021-09-03 13:48:16 +02:00
important-selector.test.css JIT by default - move tests and make them consistent (#5374) 2021-09-03 13:48:16 +02:00
important-selector.test.html JIT by default - move tests and make them consistent (#5374) 2021-09-03 13:48:16 +02:00
important-selector.test.js JIT by default - move tests and make them consistent (#5374) 2021-09-03 13:48:16 +02:00
kitchen-sink.test.css Improve order of color properties in transition and transition-colors utilities 2021-12-15 14:09:27 -05:00
kitchen-sink.test.html Add variants for orientation media feature (#6046) 2021-11-23 14:59:25 -05:00
kitchen-sink.test.js Add variants for orientation media feature (#6046) 2021-11-23 14:59:25 -05:00
layer-at-rules.test.js add test to prove @supports is kept in @layer rule (#5992) 2021-11-05 15:12:35 +01:00
layer-without-tailwind.test.css JIT by default - move tests and make them consistent (#5374) 2021-09-03 13:48:16 +02:00
layer-without-tailwind.test.html JIT by default - move tests and make them consistent (#5374) 2021-09-03 13:48:16 +02:00
layer-without-tailwind.test.js JIT by default - move tests and make them consistent (#5374) 2021-09-03 13:48:16 +02:00
match-components.test.js Add support for colored box shadows (#5979) 2021-11-04 10:14:13 -04:00
minimum-impact-selector.test.js Enable optimize universal defaults by default (#5635) 2021-10-06 17:45:26 +02:00
modify-selectors.test.css JIT by default - move tests and make them consistent (#5374) 2021-09-03 13:48:16 +02:00
modify-selectors.test.html JIT by default - move tests and make them consistent (#5374) 2021-09-03 13:48:16 +02:00
modify-selectors.test.js JIT by default - move tests and make them consistent (#5374) 2021-09-03 13:48:16 +02:00
mutable.test.css JIT by default - move tests and make them consistent (#5374) 2021-09-03 13:48:16 +02:00
mutable.test.html JIT by default - move tests and make them consistent (#5374) 2021-09-03 13:48:16 +02:00
mutable.test.js JIT by default - move tests and make them consistent (#5374) 2021-09-03 13:48:16 +02:00
negated-content-ignore.test.html Fix using negated content globs (#5625) 2021-09-29 11:15:31 +01:00
negated-content-include.test.html Fix using negated content globs (#5625) 2021-09-29 11:15:31 +01:00
negated-content.test.js Fix using negated content globs (#5625) 2021-09-29 11:15:31 +01:00
negateValue.test.js Make negative values a first-class feature, rather than theme-driven (#5709) 2021-10-06 13:42:05 -04:00
negative-prefix.test.js Improve css expectations in tests (#5819) 2021-10-18 12:08:48 +02:00
normalize-config.test.js Warn about invalid globs in content (#6449) 2021-12-13 16:00:31 +01:00
normalize-screens.test.js Partially revert tuple syntax PR for screens: #6104 (#6289) 2021-12-07 18:49:40 +01:00
opacity.test.js Support using functions as colors when disabling color opacity utilities (#5470) 2021-09-10 09:35:15 -04:00
parallel-variants.test.js Enforce the order of pseudo elements (#6018) 2021-11-12 16:38:03 +01:00
parseAnimationValue.test.js ensure we don't override the name (#5602) 2021-09-26 07:44:41 -04:00
parseObjectStyles.test.js Preserve case of css variables added by plugins (#6888) 2022-01-04 23:03:41 -05:00
prefix.test.css Update color parsing and formatting (#5442) 2021-09-09 16:15:53 +02:00
prefix.test.html JIT by default - move tests and make them consistent (#5374) 2021-09-03 13:48:16 +02:00
prefix.test.js JIT by default - move tests and make them consistent (#5374) 2021-09-03 13:48:16 +02:00
prefixSelector.test.js Remove prefix as a function (#5829) 2021-10-19 15:22:49 +02:00
raw-content.test.css Improve order of color properties in transition and transition-colors utilities 2021-12-15 14:09:27 -05:00
raw-content.test.html Add new outline style, color, width and offset utilities (#5887) 2021-10-27 10:21:24 -04:00
raw-content.test.js Move defaults to their own always-on layer (#6500) 2021-12-14 12:21:38 -05:00
relative-purge-paths.test.html JIT by default - move tests and make them consistent (#5374) 2021-09-03 13:48:16 +02:00
relative-purge-paths.test.js JIT by default - move tests and make them consistent (#5374) 2021-09-03 13:48:16 +02:00
resolve-defaults-at-rules.test.js Move defaults to their own always-on layer (#6500) 2021-12-14 12:21:38 -05:00
resolveConfig.test.js Make negative values a first-class feature, rather than theme-driven (#5709) 2021-10-06 13:42:05 -04:00
responsive-and-variants-atrules.test.css JIT by default - move tests and make them consistent (#5374) 2021-09-03 13:48:16 +02:00
responsive-and-variants-atrules.test.html JIT by default - move tests and make them consistent (#5374) 2021-09-03 13:48:16 +02:00
responsive-and-variants-atrules.test.js JIT by default - move tests and make them consistent (#5374) 2021-09-03 13:48:16 +02:00
safelist.test.js Add support for negative values in safelist patterns (#6480) 2021-12-14 15:55:26 -05:00
screenAtRule.test.js Refactor internals to decouple watch strategies and extract IO 2021-05-26 09:43:05 -04:00
shared-state.test.js Improve DEBUG parsing: only take care of tailwindcss and not tailwind (#6804) 2021-12-30 16:41:23 +01:00
syntax-lit-html.test.js Add test for lit-html syntax 2021-09-21 12:41:58 -04:00
syntax-svelte.test.js Fix svelte test 2021-09-21 12:43:44 -04:00
syntax-svelte.test.svelte Rename svelte tests 2021-09-21 12:37:49 -04:00
tailwind-screens.test.js Partially revert tuple syntax PR for screens: #6104 (#6289) 2021-12-07 18:49:40 +01:00
to-path.test.js Support square bracket notation in paths (#6519) 2021-12-15 11:09:29 -05:00
variants.test.css use text-decoration-line instead of text-decoration (#6378) 2021-12-13 16:09:14 -05:00
variants.test.html Add variants for orientation media feature (#6046) 2021-11-23 14:59:25 -05:00
variants.test.js Ensure we can use < and > characters in modifiers (#6851) 2022-01-03 11:17:58 +01:00
withAlphaVariable.test.js Update color parsing and formatting (#5442) 2021-09-09 16:15:53 +02:00