Skip to content

Commit

Permalink
WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
@thecrypticace
thecrypticace committed Jan 6, 2022
1 parent a077b35 commit 85d418c
Show file tree
Hide file tree
Showing 9 changed files with 135 additions and 59 deletions.
47 changes: 47 additions & 0 deletions tests/apply.test.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,50 @@
*,
::before,
::after {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
border-color: #e5e7eb;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
.basic-example {
border-radius: 0.375rem;
--tw-bg-opacity: 1;
Expand Down
6 changes: 3 additions & 3 deletions tests/apply.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -645,7 +645,6 @@ it('rules with vendor prefixes are still separate when optimizing defaults rules

return run(input, config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
${defaults}
[type='range']::-moz-range-thumb {
border-color: #e5e7eb;
}
Expand Down Expand Up @@ -804,7 +803,6 @@ it('should be possible to apply user css without tailwind directives', () => {

return run(input, config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
${defaults}
.bop {
color: red;
}
Expand Down Expand Up @@ -842,6 +840,7 @@ it('should be possible to apply a class from another rule with multiple selector

return run(input, config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
${defaults}
.c {
text-decoration-line: underline;
}
Expand Down Expand Up @@ -872,6 +871,7 @@ it('should be possible to apply a class from another rule with multiple selector

return run(input, config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
${defaults}
span,
.b {
text-decoration-line: underline;
Expand Down Expand Up @@ -906,6 +906,7 @@ it('should be possible to apply a class from another rule with multiple selector

return run(input, config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
${defaults}
#a,
.b {
text-decoration-line: underline;
Expand Down Expand Up @@ -934,7 +935,6 @@ it('apply can emit defaults in isolated environments without @tailwind directive
// TODO: Do we want this to work?
return run(input, config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
${defaults}
.foo {
--tw-translate-x: 0;
--tw-translate-y: 0;
Expand Down
9 changes: 7 additions & 2 deletions tests/basic-usage.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,9 @@ test('all plugins are executed that match a candidate', () => {

return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
${defaults({
defaultBorderColor: 'currentColor',
})}
.bg-green-light {
--tw-bg-opacity: 1;
background-color: rgb(0 128 0 / var(--tw-bg-opacity));
Expand Down Expand Up @@ -99,7 +101,9 @@ test('per-plugin colors with the same key can differ when using a custom colors

return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
${defaults({
defaultBorderColor: 'currentColor',
})}
.bg-theme {
--tw-bg-opacity: 1;
background-color: rgb(255 0 0 / var(--tw-bg-opacity));
Expand Down Expand Up @@ -130,6 +134,7 @@ it('fasly config values still work', () => {

return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
.inset-0 {
top: 0;
right: 0;
Expand Down
4 changes: 3 additions & 1 deletion tests/color-opacity-modifiers.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,9 @@ test('function colors are supported', async () => {

return run('@tailwind utilities', config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
${defaults({
defaultBorderColor: 'currentColor',
})}
.bg-blue\/50 {
background-color: rgba(var(--colors-blue), 0.5);
}
Expand Down
5 changes: 4 additions & 1 deletion tests/customConfig.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -274,7 +274,10 @@ test('the default config can be removed by using an empty presets key in a prese

return run('@tailwind utilities', config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
${defaults({
defaultBorderColor: 'currentColor',
defaultRingColor: 'rgb(147 197 253 / 0.5)',
})}
.min-h-primary {
min-height: 48px;
}
Expand Down
4 changes: 3 additions & 1 deletion tests/negative-prefix.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,9 @@ test('a color', () => {

return run('@tailwind utilities', config).then((result) => {
return expect(result.css).toMatchCss(css`
${defaults}
${defaults({
defaultBorderColor: 'currentColor',
})}
`)
})
})
Expand Down
4 changes: 3 additions & 1 deletion tests/opacity.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,9 @@ test('colors defined as functions work when opacity plugins are disabled', () =>

return run('@tailwind utilities', config).then((result) => {
expect(result.css).toMatchCss(css`
${defaults}
${defaults({
defaultBorderColor: 'currentColor',
})}
.divide-primary > :not([hidden]) ~ :not([hidden]) {
border-color: rgb(var(--color-primary));
}
Expand Down
4 changes: 3 additions & 1 deletion tests/plugins/gradientColorStops.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,9 @@ test('opacity variables are given to colors defined as closures', () => {

return run('@tailwind utilities', config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
${defaults}
${defaults({
defaultBorderColor: 'currentColor',
})}
.from-primary {
--tw-gradient-from: rgb(31, 31, 31);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(31, 31, 31, 0));
Expand Down
111 changes: 62 additions & 49 deletions tests/util/defaults.js
View file
Original file line number Diff line number Diff line change
@@ -1,51 +1,64 @@
import { css } from './strings'

export const defaults = css`
*,
::before,
::after {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
border-color: #e5e7eb;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
`
/**
* @param {object} param0
* @param {string} [param0.defaultBorderColor]
* @param {string} [param0.defaultRingColor]
* @returns {string}
*/
export function defaults({
defaultBorderColor = `#e5e7eb`,
defaultRingColor = `rgb(59 130 246 / 0.5)`,
} = {}) {
return css`
*,
::before,
::after {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
border-color: ${defaultBorderColor};
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: ${defaultRingColor};
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
`
}

defaults.toString = () => defaults()

0 comments on commit 85d418c

Please sign in to comment.