wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions
tailwindcss/tests/plugins/__snapshots__/grayscale.test.js.snap

26 lines
1.1 KiB
Text
Raw Permalink Normal View History

Reduce `quickPluginTest` and `quickVariantPluginTest` snapshot size (#12170) * sync package-lock.json * reduce generated examples By default we use the default config when creating the quick tests for a given plugin. However, this can result in _a lot_ of changes. For example, when you update the opacity values, then these values will be generated for each color, and for each plugin that uses that color. You can see that behaviour in Adam's PR (https://github.com/tailwindlabs/tailwindcss/pull/11832). He added 6 values to the opacity configuration. This resulted in a diff that looked like this: ``` +219,436 −9 ``` This reduces the amount of examples for plugins that generate _a lot_ of output otherwise. * use `toMatchSnapshot` This way all the `quickPluginTest` and `quickVariantPluginTest` implementations are the same. This also allows us to update tests after config changes in an easier way because they use snapshot tests right now. * use real colors for reduced red This will make it a tiny bit easier to debug what's going on if we need it in the future since it's using the same values as the real colors.
2023-10-09 16:49:20 +02:00
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`should test the 'grayscale' plugin 1`] = `
"
.grayscale {
--tw-grayscale: grayscale(100%);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.grayscale-0 {
--tw-grayscale: grayscale(0);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.grayscale-\\[50\\%\\] {
--tw-grayscale: grayscale(50%);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.grayscale-\\[var\\(--my-value\\)\\] {
--tw-grayscale: grayscale(var(--my-value));
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
"
`;
Reference in a new issue Copy permalink