* ensure the `percentage` data type is validated correctly
When checking for our data types, we have to make sure that each part is
correct, this wasn't happening for the `percentage` data type, which
meant that `top_right_50%` was a valid percentage value because it ended
in `%` which is not correct.
Because of this, the generated code was non-existent because we got a
warning:
The class `bg-[top_right_50%]` is ambiguous and matches multiple utilities.
Use `bg-[length:top_right_50%]` for `background-size: top right 50%`
Use `bg-[position:top_right_50%]` for `background-position: top right 50%`
If this is content and not a class, replace it with `bg-[top_right_50%]` to silence this warning.
But this is not correct because this can never be a valid background
size due to the `top right` section.
This fixes it by validating each part individually, and now we get
generated css.
* update changelog
* allow for arbitrary configuration in the `theme` section
This is useful for third party plugins otherwise you will get an error.
* WIP: `theme()` utility function code completion
This will give you code completion in the `theme()` function. The reason
it is still a WIP is that this only works with the default config right
now and not 100% sure if it is possible to define generics in JSDoc.
The idea would be to:
- Provide types from the default config
- Provide types from the custom config (e.g.: 3rd party plugin)
- Override default config types with the overrides of the user's config
Right now this only provides types for the defaultConfig which might
result in dropping all of this in favor of a much simpler:
```ts
theme<D = any>(path: string, defaultValue: D) => D
```
But this sadly doesn't give you "nice" auto completion. However, the
default might be good enough if we don't error on for example
`theme('customPlugin')` which is currently not the case.
* update changelog
* undo all `theme` types, and type it as `theme(path: string): any`
Since currently we don't want to investigate time to make the code
completion *perfect* (because it might be even impossible to do it
properly due to resolving of overrides, extend and deeply nested presets)
For now we will provide a way simpler type, which is better than
incorrect types. So far we only had types for the default config theme
*only*.
`Partial` is only 1 level deep. We don't want it to be recursively deep,
that's for the plugin itself to decide. But the parts under `theme`
should all be optional.
In my testing, I was publishing using a node 16 install, but on CI we
are using Node 12. It seems that the NPM that shipped with Node 12
ignores all files for publishing if they are mentioned in `.gitignore`
which I could reproduce locally.
Doing a bit of testing, I used this solution which I think we also used
in v2 when generating `dist/` files. The `npm publish --dry-run` now
_does_ include the generated types as well and they are still ignored
for version control.
* add generate-types script
This script will generate the full list of core plugins, which will
allow you to get code completion for the `corePlugins` section.
It will also generate all the colors (and deprecated colors) which is
used in multiple places in the config.
* add types for the `tailwind.config.js` config file
* annotate stubs with a JSDoc pointing to the types
* add types to package.json
- Updated the files to make sure that the types are being published
- Add a `types` section in the `package.json`, otherwise your editor by
default will look for the `DefinitelyTyped` types which got me really
confused for a second.
- Added some scripts to make sure that the generation of types happens
when needed (before tests and before building). This way you never
ever have to think about generating them when working on Tailwind CSS
internals.
* re-export types top-level
Having a `colors.d.ts` next to the `colors.js` file allows us to type
the `colors.js` file and your editor will pickup the types from
`colors.d.ts`.
* also publish generated types
* update changelog
* enable TypeScript only when using `init --types` for now
* update tests to verify that `--types` works
* fix: allow extraction from template literal with array
* fix: support extraction from array in function
* test: add more tests for function and template
* test: add test for dynamic classes
* test: add dynamic class test in js
* test: add dynamic class test in js single quote
* Cleanup a bit
* Update changelog
Co-authored-by: Jordan Pittman <jordan@cryptica.me>
* Add prefix alone to animation names. Fixes#7149.
* Add test for keyframe animations with a dot in the name
* Add test for prefixed version
* Fix CS
* Simplify
* Update changelog
* Fix
Co-authored-by: Jordan Pittman <jordan@cryptica.me>
