Skip to content

Commit e13f083

Browse files
adamwathanadamwathan
committed
Join arrays when using theme consistently
1 parent 6fa213d commit e13f083

File tree

7 files changed

+540
-45
lines changed

7 files changed

+540
-45
lines changed

‎__tests__/processPlugins.test.js‎

Lines changed: 372 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2050,3 +2050,375 @@ test('keyframes are not escaped', () => {
20502050
}
20512051
`)
20522052
})
2053+
2054+
test('font sizes are retrieved without default line-heights or letter-spacing using theme function', () => {
2055+
const { components } = processPlugins(
2056+
[
2057+
function ({ addComponents, theme }) {
2058+
addComponents({
2059+
'.foo': {
2060+
fontSize: theme('fontSize.sm'),
2061+
},
2062+
})
2063+
},
2064+
],
2065+
makeConfig({
2066+
theme: {
2067+
fontSize: {
2068+
sm: ['14px', '20px'],
2069+
},
2070+
},
2071+
})
2072+
)
2073+
2074+
expect(css(components)).toMatchCss(`
2075+
@layer components {
2076+
@variants {
2077+
.foo {
2078+
font-size: 14px;
2079+
}
2080+
}
2081+
}
2082+
`)
2083+
})
2084+
2085+
test('outlines are retrieved without outline-offset using theme function', () => {
2086+
const { components } = processPlugins(
2087+
[
2088+
function ({ addComponents, theme }) {
2089+
addComponents({
2090+
'.foo': {
2091+
outline: theme('outline.black'),
2092+
},
2093+
})
2094+
},
2095+
],
2096+
makeConfig({
2097+
theme: {
2098+
outline: {
2099+
black: ['2px dotted black', '4px'],
2100+
},
2101+
},
2102+
})
2103+
)
2104+
2105+
expect(css(components)).toMatchCss(`
2106+
@layer components {
2107+
@variants {
2108+
.foo {
2109+
outline: 2px dotted black;
2110+
}
2111+
}
2112+
}
2113+
`)
2114+
})
2115+
2116+
test('box-shadow values are joined when retrieved using the theme function', () => {
2117+
const { components } = processPlugins(
2118+
[
2119+
function ({ addComponents, theme }) {
2120+
addComponents({
2121+
'.foo': {
2122+
boxShadow: theme('boxShadow.lol'),
2123+
},
2124+
})
2125+
},
2126+
],
2127+
makeConfig({
2128+
theme: {
2129+
boxShadow: {
2130+
lol: ['width', 'height'],
2131+
},
2132+
},
2133+
})
2134+
)
2135+
2136+
expect(css(components)).toMatchCss(`
2137+
@layer components {
2138+
@variants {
2139+
.foo {
2140+
box-shadow: width, height;
2141+
}
2142+
}
2143+
}
2144+
`)
2145+
})
2146+
2147+
test('transition-property values are joined when retrieved using the theme function', () => {
2148+
const { components } = processPlugins(
2149+
[
2150+
function ({ addComponents, theme }) {
2151+
addComponents({
2152+
'.foo': {
2153+
transitionProperty: theme('transitionProperty.lol'),
2154+
},
2155+
})
2156+
},
2157+
],
2158+
makeConfig({
2159+
theme: {
2160+
transitionProperty: {
2161+
lol: ['width', 'height'],
2162+
},
2163+
},
2164+
})
2165+
)
2166+
2167+
expect(css(components)).toMatchCss(`
2168+
@layer components {
2169+
@variants {
2170+
.foo {
2171+
transition-property: width, height;
2172+
}
2173+
}
2174+
}
2175+
`)
2176+
})
2177+
2178+
test('transition-duration values are joined when retrieved using the theme function', () => {
2179+
const { components } = processPlugins(
2180+
[
2181+
function ({ addComponents, theme }) {
2182+
addComponents({
2183+
'.foo': {
2184+
transitionDuration: theme('transitionDuration.lol'),
2185+
},
2186+
})
2187+
},
2188+
],
2189+
makeConfig({
2190+
theme: {
2191+
transitionDuration: {
2192+
lol: ['width', 'height'],
2193+
},
2194+
},
2195+
})
2196+
)
2197+
2198+
expect(css(components)).toMatchCss(`
2199+
@layer components {
2200+
@variants {
2201+
.foo {
2202+
transition-duration: width, height;
2203+
}
2204+
}
2205+
}
2206+
`)
2207+
})
2208+
2209+
test('transition-delay values are joined when retrieved using the theme function', () => {
2210+
const { components } = processPlugins(
2211+
[
2212+
function ({ addComponents, theme }) {
2213+
addComponents({
2214+
'.foo': {
2215+
transitionDelay: theme('transitionDelay.lol'),
2216+
},
2217+
})
2218+
},
2219+
],
2220+
makeConfig({
2221+
theme: {
2222+
transitionDelay: {
2223+
lol: ['width', 'height'],
2224+
},
2225+
},
2226+
})
2227+
)
2228+
2229+
expect(css(components)).toMatchCss(`
2230+
@layer components {
2231+
@variants {
2232+
.foo {
2233+
transition-delay: width, height;
2234+
}
2235+
}
2236+
}
2237+
`)
2238+
})
2239+
2240+
test('transition-timing-function values are joined when retrieved using the theme function', () => {
2241+
const { components } = processPlugins(
2242+
[
2243+
function ({ addComponents, theme }) {
2244+
addComponents({
2245+
'.foo': {
2246+
transitionTimingFunction: theme('transitionTimingFunction.lol'),
2247+
},
2248+
})
2249+
},
2250+
],
2251+
makeConfig({
2252+
theme: {
2253+
transitionTimingFunction: {
2254+
lol: ['width', 'height'],
2255+
},
2256+
},
2257+
})
2258+
)
2259+
2260+
expect(css(components)).toMatchCss(`
2261+
@layer components {
2262+
@variants {
2263+
.foo {
2264+
transition-timing-function: width, height;
2265+
}
2266+
}
2267+
}
2268+
`)
2269+
})
2270+
2271+
test('background-image values are joined when retrieved using the theme function', () => {
2272+
const { components } = processPlugins(
2273+
[
2274+
function ({ addComponents, theme }) {
2275+
addComponents({
2276+
'.foo': {
2277+
backgroundImage: theme('backgroundImage.lol'),
2278+
},
2279+
})
2280+
},
2281+
],
2282+
makeConfig({
2283+
theme: {
2284+
backgroundImage: {
2285+
lol: ['width', 'height'],
2286+
},
2287+
},
2288+
})
2289+
)
2290+
2291+
expect(css(components)).toMatchCss(`
2292+
@layer components {
2293+
@variants {
2294+
.foo {
2295+
background-image: width, height;
2296+
}
2297+
}
2298+
}
2299+
`)
2300+
})
2301+
2302+
test('background-size values are joined when retrieved using the theme function', () => {
2303+
const { components } = processPlugins(
2304+
[
2305+
function ({ addComponents, theme }) {
2306+
addComponents({
2307+
'.foo': {
2308+
backgroundSize: theme('backgroundSize.lol'),
2309+
},
2310+
})
2311+
},
2312+
],
2313+
makeConfig({
2314+
theme: {
2315+
backgroundSize: {
2316+
lol: ['width', 'height'],
2317+
},
2318+
},
2319+
})
2320+
)
2321+
2322+
expect(css(components)).toMatchCss(`
2323+
@layer components {
2324+
@variants {
2325+
.foo {
2326+
background-size: width, height;
2327+
}
2328+
}
2329+
}
2330+
`)
2331+
})
2332+
2333+
test('background-color values are joined when retrieved using the theme function', () => {
2334+
const { components } = processPlugins(
2335+
[
2336+
function ({ addComponents, theme }) {
2337+
addComponents({
2338+
'.foo': {
2339+
backgroundColor: theme('backgroundColor.lol'),
2340+
},
2341+
})
2342+
},
2343+
],
2344+
makeConfig({
2345+
theme: {
2346+
backgroundColor: {
2347+
lol: ['width', 'height'],
2348+
},
2349+
},
2350+
})
2351+
)
2352+
2353+
expect(css(components)).toMatchCss(`
2354+
@layer components {
2355+
@variants {
2356+
.foo {
2357+
background-color: width, height;
2358+
}
2359+
}
2360+
}
2361+
`)
2362+
})
2363+
2364+
test('cursor values are joined when retrieved using the theme function', () => {
2365+
const { components } = processPlugins(
2366+
[
2367+
function ({ addComponents, theme }) {
2368+
addComponents({
2369+
'.foo': {
2370+
cursor: theme('cursor.lol'),
2371+
},
2372+
})
2373+
},
2374+
],
2375+
makeConfig({
2376+
theme: {
2377+
cursor: {
2378+
lol: ['width', 'height'],
2379+
},
2380+
},
2381+
})
2382+
)
2383+
2384+
expect(css(components)).toMatchCss(`
2385+
@layer components {
2386+
@variants {
2387+
.foo {
2388+
cursor: width, height;
2389+
}
2390+
}
2391+
}
2392+
`)
2393+
})
2394+
2395+
test('animation values are joined when retrieved using the theme function', () => {
2396+
const { components } = processPlugins(
2397+
[
2398+
function ({ addComponents, theme }) {
2399+
addComponents({
2400+
'.foo': {
2401+
animation: theme('animation.lol'),
2402+
},
2403+
})
2404+
},
2405+
],
2406+
makeConfig({
2407+
theme: {
2408+
animation: {
2409+
lol: ['width', 'height'],
2410+
},
2411+
},
2412+
})
2413+
)
2414+
2415+
expect(css(components)).toMatchCss(`
2416+
@layer components {
2417+
@variants {
2418+
.foo {
2419+
animation: width, height;
2420+
}
2421+
}
2422+
}
2423+
`)
2424+
})

0 commit comments

Comments
 (0)