diff --git a/__tests__/color-variable-helper.test.html b/__tests__/color-variable-helper.test.html
index 30554b3..0810d48 100644
--- a/__tests__/color-variable-helper.test.html
+++ b/__tests__/color-variable-helper.test.html
@@ -8,9 +8,6 @@
tailwindcss-variables
tailwindcss-variables
tailwindcss-variables
-
-
-
tailwindcss-variables
tailwindcss-variables
diff --git a/__tests__/color-variable-helper.test.js b/__tests__/color-variable-helper.test.js
index aa825da..e3a7200 100644
--- a/__tests__/color-variable-helper.test.js
+++ b/__tests__/color-variable-helper.test.js
@@ -283,143 +283,3 @@ test('colorVariable - background and text color 2', async () => {
"
`)
})
-
-test('colorVariable with gradient color stops', async () => {
- expect(
- await utils.diffOnly({
- corePlugins: ['textColor', 'textOpacity', 'gradientColorStops'],
- content: [utils.content()],
-
- darkMode: false,
- theme: {
- screens: false,
- colors: {
- red: {
- 400: colorVariable('var(--colors-red-400)'), // RGBA
- 500: colorVariable('var(--colors-red-500)'), // RGBA
- 600: colorVariable('var(--colors-red-600)'), // HEX
- },
- },
-
- variables: {
- DEFAULT: {
- colors: {
- red: {
- 400: 'rgba(254,0,0,1)',
- 500: 'rgba(254,0,0,0.5)',
- 600: '#a20606',
- },
- },
- },
- },
- },
-
- plugins: [
- tailwindcssVariables({
- colorVariables: true,
- }),
- ],
- })
- ).toMatchInlineSnapshot(`
- "
-
-
- + :root {
- + --colors-red-400: rgba(254,0,0,1);
- + --colors-red-500: rgba(254,0,0,0.5);
- + --colors-red-600: #a20606;
- + --colors-red-400-rgb: 254,0,0;
- + --colors-red-500-rgb: 254,0,0;
- + --colors-red-600-rgb: 162,6,6
- + }
- + .from-red-400 {
- + --tw-gradient-from: rgb(var(--colors-red-400-rgb));
- + --tw-gradient-to: rgba(var(--colors-red-400-rgb), 0);
- + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
- + }
- + .from-red-500 {
- + --tw-gradient-from: rgb(var(--colors-red-500-rgb));
- + --tw-gradient-to: rgba(var(--colors-red-500-rgb), 0);
- + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
- + }
- + .from-red-600 {
- + --tw-gradient-from: rgb(var(--colors-red-600-rgb));
- + --tw-gradient-to: rgba(var(--colors-red-600-rgb), 0);
- + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
- + }
- + .text-opacity-50 {
- + --tw-text-opacity: 0.5
- + }
-
- "
- `)
-})
-
-test('colorVariable with gradient color stops (forceRGB)', async () => {
- expect(
- await utils.diffOnly({
- corePlugins: ['textColor', 'textOpacity', 'gradientColorStops'],
- content: [utils.content()],
-
- darkMode: false,
- theme: {
- screens: false,
- colors: {
- red: {
- 400: colorVariable('var(--colors-red-400)', true), // RGBA
- 500: colorVariable('var(--colors-red-500)', true), // RGBA
- 600: colorVariable('var(--colors-red-600)', true), // HEX
- },
- },
-
- variables: {
- DEFAULT: {
- colors: {
- red: {
- 400: 'rgba(254,0,0,1)',
- 500: 'rgba(254,0,0,0.5)',
- 600: '#a20606',
- },
- },
- },
- },
- },
-
- plugins: [
- tailwindcssVariables({
- colorVariables: true,
- forceRGB: true,
- }),
- ],
- })
- ).toMatchInlineSnapshot(`
- "
-
-
- + :root {
- + --colors-red-400: 254,0,0;
- + --colors-red-500: 254,0,0;
- + --colors-red-600: 162,6,6
- + }
- + .from-red-400 {
- + --tw-gradient-from: rgb(var(--colors-red-400));
- + --tw-gradient-to: rgba(var(--colors-red-400), 0);
- + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
- + }
- + .from-red-500 {
- + --tw-gradient-from: rgb(var(--colors-red-500));
- + --tw-gradient-to: rgba(var(--colors-red-500), 0);
- + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
- + }
- + .from-red-600 {
- + --tw-gradient-from: rgb(var(--colors-red-600));
- + --tw-gradient-to: rgba(var(--colors-red-600), 0);
- + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
- + }
- + .text-opacity-50 {
- + --tw-text-opacity: 0.5
- + }
-
- "
- `)
-})