* quick fix for incorrect arbitrary properties
Turns out that using links like [https://example.com] causes arbitrary
properties to generate invalid css.
This is a very dirty quick fix for this specific case, so we have to fix
this properly!
* update changelog
* ensure content files are available in config
If you use the cli with the `--content` option, then we first resolve
the config (empty), then add the `content` to the config. The issue is
that this means that the content will be empty when you resolve it
initially. This results in a warning in your terminal.
Now, we will make sure to merge 2 configs if you have the `--content`
data passed. We will also make sure to override the final
`config.content.files` to whatever you passed in to make sure that this
is the same behaviour as before.
* update changelog
* ensure that we compile the postcss nesting plugin
* re-add optional chaining
This will allow us to be 100% sure that we can safely call
hasOwnProperty in case we get some very strange objects.
This will now also be compiled/transpiled by esbuild.
* import the internal postcss nesting plugin
This allows us to work on it without re-compiling while running tests.
Just like we do with all other code.
* update changelog
* remove optional chaining
This breaks on Node versions lower than version 13. Normally we
transpile everything, but we currently don't do this for the nesting
plugin since it is not really part of the `src` folder.
Will get this fixed in a better way, but for now this is a quick fix to
get everything working again!
* update changelog
* fix: options for nesting / nested plugins
* add tests to ensure passing options to postcss plugin works
Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
* 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
