* use export default instead of named exports
I'm a little sad about this change, but it turns out that the order is
not guaranteed for named exports in ESM. It was the correct order in our
tests because of babel, but not in native ESM.
* update imports
* simplify `inset` plugin
* run `prettier` on stub file
* simplify `align` utility
* improve arbitrary support for outline
This will allow us to use `outline-[OUTLINE,OPTIONAL_OFFSET]`
Input:
```html
outline-[2px_solid_black]
```
Output:
```css
.outline-\[2px_solid_black\] {
outline: 2px solid black;
outline-offset: 0;
}
```
---
Input:
```html
outline-[2px_solid_black,2px]
```
Output:
```css
.outline-\[2px_solid_black\2c 2px\] {
outline: 2px solid black;
outline-offset: 2px;
}
```
* remove default `type`
* simplify createUtilityPlugin, use types directly
* find first matching type when coercing the value
* introduce css data types
Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Types
These data types will be used to "guess" the type of an arbitrary value
if there is some ambiguity going on. For example:
```
bg-[#0088cc] -> This is a `color` -> `background-color`
bg-[url('...')] -> This is a `url` -> `background-image`
```
If you are using css variables, then there is no way of knowing which
type it is referring to, in that case you can be explicit:
```
bg-[color:var(--value)] -> This is a `color` -> `background-color`
bg-[url:var(--value)] -> This is a `url` -> `background-image`
```
When you explicitly pass a data type, then we bypass the type system and
assume you are right. This is nice in a way because now we don't have to
run all of the guessing type code. On the other hand, you can introduce
runtime issues that we are not able to detect:
```
:root {
--value: 12px;
}
/* Later... */
bg-[color:var(--value)] -> Assumes `color` -> *eventually* -> `background-color: 12px`
```
* add a bunch of new tests for advanced arbitrary values
If you use a typehint like `w-[length:12px]`, then currently that
wouldn't generate anything because we don't have a matchUtilities for
`w` with a `length` type. To fix this, we can detect if this is
unnecessary, if it is we still generate the expected outcome. (In this
case `width: 12px`) but we also warn to the user that we detected this.
Currently we detect this by checking if there is only a single plugin
registered for handling the prefix (e.g.: `w-`). We can probably improve
this by also checking all the types that all plugins are handling for
the resolved plugins.
* add url to resolveArbitraryValue list
* add `asURL` data type
* add `bg-[url('..')]` regex
* allow for `resolveArbitraryValue` to be an array
* prevent spaces around `-` when in a `url`
* add tests to verify `bg-[url('...')]` and `stroke-[url(...)]`
* move to real regexes
These regexes are only calculated once so we don't really have a
performance penalty here. However, it's a bit nicer to do it this way
because now you don't have to think about the proper escapes.
/.*/.source will basically take the source of the regex ".*" without
flags and converts it to a string with the proper escapes for you.
Fun fact, this `.source` property has been supported since Chrome,
Firefox and Safari version 1.
* allow for `'>'` in `content-['>']`
* Add variant for file-selector-button pseudo element
* Rename `file-selector-button` variant to `file`
Co-Authored-By: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Co-authored-by: Jonathan Reinink <jonathan@reinink.ca>
Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
* add dedicated tests for the experimenal universal selector improvements
* Add failing test
* keep pseudo elements
* re-add logic for special types (class, id, attribute)
Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
* Add `break-before` utilities
* Add `break-inside` utilities
* Add `break-after` utilities
* Add `break-before/inside/after` utilities to basic usage test
* Remove `break-before` and `break-after` utilities that have no browser support
* Rename `break-inside: avoid-column` utility to `break-inside-avoid-column`
* splitup nameClass functionality
We want to separate the logic of the formatting the class and of turning
it into a class with a `.` and escaped values.
* collect base classList
* implement `safelist` where you can use regex patterns
* drop `variants` related resolveConfig functionality
More AOT code that we could get rid of!
* drop more files!
I keep finding these unused files 😅
* Update setupContextUtils.js
Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
* refactor dropShadow plugin, use `matchUtilities`
* replace `_` with ` ` for arbitrary values
* remove custom `asList` function
* do not replace escaped underscores with spaces
* Replace `culori` with simple color parser
* Use space-separated color syntax
* Update default color values to use space-separated syntax
* Update separator regex
* Fix tests
* add tests for the new `color` util
Also slightly modified the `color` util itself to take `transparent`
into account and also format every value as a string for consistency.
Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
* filter out `..Variant` plugins for the core-plugin-list
* inline all corePlugins
* move preflight css to `./src/css`
* remove individual plugins
* convert export default object to named exports
Note: Normally I would use export function ..., but since we also have
some export let xx = createUtilityPlugin in this file, it means that all
the `export function` declarations would be hoisted and therefore won't
have the correct order anymore.
To fix this, I used `export let xx = () => {}` instead of the usual
`export function xx() {}`
* drop unused `variants()` function
This was required for AOT mode.
* make a few plugins shorter
* support `@apply` for classes outside of a `@layer`
* Add failing test for respecting source order
* sort rules when using `@apply`
The `layer` was not taken into account yet when we resolved the rules
from the applyCache. This is because we set the `classCache` to the
`matches` inside of the `generateRules` function. You can think of them
as "raw" rules I guess. However, it is later in that function that we
apply the `layerOrder` to the `sort`.
This does mean that when you `@apply font-bold text-red-500` that the
rules inside the `.target {}` will be in order of the "normal" css as
well.
Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
* simplify `negateValue`
Co-authored-by: Brad Cornes <bradlc41@gmail.com>
* ensure we have the exact same behaviour
* Simplify/loosen regex to be more future-proof
Co-authored-by: Brad Cornes <bradlc41@gmail.com>
Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
* add tests for the plugin API
* make plugin invocation optional
It could be that an object has been passed as a plugin, in that case we
will use the `handler` function from the object. If it doesn't exist,
then we will only take the `config` section out of it.
* make `jit` mode the default when no mode is specified
* unify JIT and AOT codepaths
* ensure `Object.entries` on undefined doesn't break
It could be that sometimes you don't have values in your config (e.g.: `presets: []`), this in turn will break some plugins where we assume we have a value.
* drop AOT specific tests
These tests are all covered by JIT mode already and were AOT specific.
* simplify tests, and add a few
Some of the tests were written for AOT specifically, some were missing. We also updated the way we write those tests, essentially making Tailwind a blackbox, by testing against the final output.
Now that JIT mode is the default, this is super fast because we only generate what is used, instead of partially testing in a 3MB file or building it all, then purging.
* add some todo's to make sure we warn in a few cases
* make `darkMode: 'media'`, the default
This also includes moving dark mode tests to its own dedicated file.
* remove PostCSS 7 compat mode
* update CLI to be JIT-first
* fix integration tests
This is not a _real_ fix, but it does solve the broken test for now.
* warn when using @responsive or @variants
* remove the JIT preview warning
* remove AOT-only code paths
* remove all `mode: 'jit'` blocks
Also remove `variants: {}` since they are not useful in `JIT` mode
anymore.
* drop unused dependencies
* rename `purge` to `content`
* remove static CDN builds
* mark `--purge` as deprecated in the CLI
This will still work, but a warning will be printed and it won't show up
in the `--help` output.
* cleanup nesting plugin
We don't have to duplicate it anymore since there is no PostCSS 7
version anymore.
* make sure integration tests run in band
* cleanup folder structure
* make sure nesting folder is available
* simplify resolving of purge/content information
The trackedModified call in the tracking logic has a bug that
incorrectly removes `null` from pathnames
Currently:
```
let pathname = parsed.href.replace(parsed.hash, '').replace(parsed.search, '')
```
Where if `parsed.hash` or `parsed.search` are missing (which is
mostly the case for FS files), the value is null
eg `{ hash: null, search: null}`
- In which case, we essentially trim `null`
converting `/mypath/nulldir/file.js` -> `/mypath/dir/filejs` and
breaking builds (see #4920 ).
Fix checks if `hash` or `search` are set before replacing them
Fixes#4920
