Skip to content

Commit e177dac

Browse files
jpudyszjpudysz
authored
Merge pull request #1194 from jpudysz/feature/improve-casing
feat: support all key casings in variants
2 parents 6cd48f3 + 16d8c12 commit e177dac

4 files changed

Lines changed: 235 additions & 73 deletions

File tree

‎packages/unistyles/plugin/__tests__/variants.spec.tsx‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -216,5 +216,141 @@ pluginTester({
216216
const styles = StyleSheet.create({})
217217
`,
218218
},
219+
{
220+
title: 'Should detect variants on string-literal keyed styles (#1188)',
221+
code: `
222+
import { View, Text } from 'react-native'
223+
import { StyleSheet } from 'react-native-unistyles'
224+
225+
export const Example = () => {
226+
styles.useVariants({
227+
size: 'small'
228+
})
229+
230+
return (
231+
<View style={styles['headline-large']}>
232+
<Text>Hello world</Text>
233+
</View>
234+
)
235+
}
236+
237+
const styles = StyleSheet.create((theme, rt) => ({
238+
'headline-large': {
239+
backgroundColor: theme.colors.background,
240+
variants: {
241+
size: {
242+
small: {
243+
width: 100
244+
},
245+
large: {
246+
width: 300
247+
}
248+
}
249+
}
250+
}
251+
}))
252+
`,
253+
output: `
254+
import { Text } from 'react-native-unistyles/components/native/Text'
255+
import { View } from 'react-native-unistyles/components/native/View'
256+
257+
import { StyleSheet } from 'react-native-unistyles'
258+
259+
export const Example = () => {
260+
const _styles = styles
261+
{
262+
const styles = _styles.useVariants({
263+
size: 'small'
264+
})
265+
266+
return (
267+
<View style={styles['headline-large']}>
268+
<Text>Hello world</Text>
269+
</View>
270+
)
271+
}
272+
}
273+
274+
const styles = StyleSheet.create((theme, rt) => ({
275+
'headline-large': {
276+
backgroundColor: theme.colors.background,
277+
variants: {
278+
size: {
279+
small: {
280+
width: 100
281+
},
282+
large: {
283+
width: 300
284+
}
285+
}
286+
},
287+
uni__dependencies: [0, 4]
288+
}
289+
}))
290+
`,
291+
},
292+
{
293+
title: 'Should detect variants on string-literal keyed styles in object form (#1188)',
294+
code: `
295+
import { View, Text } from 'react-native'
296+
import { StyleSheet } from 'react-native-unistyles'
297+
298+
export const Example = () => {
299+
styles.useVariants({
300+
size: 'small'
301+
})
302+
303+
return (
304+
<View style={styles['headline-large']}>
305+
<Text>Hello world</Text>
306+
</View>
307+
)
308+
}
309+
310+
const styles = StyleSheet.create({
311+
'headline-large': {
312+
variants: {
313+
size: {
314+
small: { width: 100 },
315+
large: { width: 300 }
316+
}
317+
}
318+
}
319+
})
320+
`,
321+
output: `
322+
import { Text } from 'react-native-unistyles/components/native/Text'
323+
import { View } from 'react-native-unistyles/components/native/View'
324+
325+
import { StyleSheet } from 'react-native-unistyles'
326+
327+
export const Example = () => {
328+
const _styles = styles
329+
{
330+
const styles = _styles.useVariants({
331+
size: 'small'
332+
})
333+
334+
return (
335+
<View style={styles['headline-large']}>
336+
<Text>Hello world</Text>
337+
</View>
338+
)
339+
}
340+
}
341+
342+
const styles = StyleSheet.create({
343+
'headline-large': {
344+
variants: {
345+
size: {
346+
small: { width: 100 },
347+
large: { width: 300 }
348+
}
349+
},
350+
uni__dependencies: [4]
351+
}
352+
})
353+
`,
354+
},
219355
],
220356
})

‎packages/unistyles/plugin/index.js‎

Lines changed: 42 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -219,6 +219,18 @@ var UnistyleDependency = {
219219
Ime: 14,
220220
Rtl: 15
221221
};
222+
function getStyleKeyName(key) {
223+
if (!key) {
224+
return null;
225+
}
226+
if (t4.isIdentifier(key)) {
227+
return key.name;
228+
}
229+
if (t4.isStringLiteral(key) || t4.isNumericLiteral(key) || t4.isBooleanLiteral(key)) {
230+
return String(key.value);
231+
}
232+
return null;
233+
}
222234
function getProperty(property) {
223235
if (!property) {
224236
return void 0;
@@ -389,28 +401,30 @@ function getStylesDependenciesFromObject(path2) {
389401
const stylesheet = path2.node.arguments[0];
390402
if (t4.isObjectExpression(stylesheet)) {
391403
stylesheet?.properties.forEach((property) => {
392-
if (!t4.isObjectProperty(property) || !t4.isIdentifier(property.key)) {
404+
if (!t4.isObjectProperty(property)) {
393405
return;
394406
}
395-
if (t4.isObjectProperty(property)) {
396-
if (t4.isObjectExpression(property.value)) {
397-
property.value.properties.forEach((innerProp) => {
398-
if (t4.isObjectProperty(innerProp) && t4.isIdentifier(innerProp.key) && t4.isIdentifier(property.key) && innerProp.key.name === "variants") {
399-
detectedStylesWithVariants.add({
400-
label: "variants",
401-
key: property.key.name
402-
});
403-
}
404-
});
405-
}
407+
const styleKey = getStyleKeyName(property.key);
408+
if (!styleKey) {
409+
return;
410+
}
411+
if (t4.isObjectExpression(property.value)) {
412+
property.value.properties.forEach((innerProp) => {
413+
if (t4.isObjectProperty(innerProp) && t4.isIdentifier(innerProp.key) && innerProp.key.name === "variants") {
414+
detectedStylesWithVariants.add({
415+
label: "variants",
416+
key: styleKey
417+
});
418+
}
419+
});
406420
}
407421
if (t4.isArrowFunctionExpression(property.value)) {
408422
if (t4.isObjectExpression(property.value.body)) {
409423
property.value.body.properties.forEach((innerProp) => {
410-
if (t4.isObjectProperty(innerProp) && t4.isIdentifier(innerProp.key) && t4.isIdentifier(property.key) && innerProp.key.name === "variants") {
424+
if (t4.isObjectProperty(innerProp) && t4.isIdentifier(innerProp.key) && innerProp.key.name === "variants") {
411425
detectedStylesWithVariants.add({
412426
label: "variants",
413-
key: property.key.name
427+
key: styleKey
414428
});
415429
}
416430
});
@@ -493,10 +507,10 @@ function getStylesDependenciesFromFunction(funcPath) {
493507
if (Array.isArray(stylePath)) {
494508
return;
495509
}
496-
if (!stylePath.isIdentifier()) {
510+
const styleKey = getStyleKeyName(stylePath.node);
511+
if (!styleKey) {
497512
return;
498513
}
499-
const styleKey = stylePath.node.name;
500514
const valuePath = propPath.get("value");
501515
if (Array.isArray(valuePath)) {
502516
return;
@@ -901,13 +915,12 @@ function index_default() {
901915
if (detectedDependencies) {
902916
if (t6.isObjectExpression(arg)) {
903917
arg.properties.forEach((property) => {
904-
if (t6.isObjectProperty(property) && t6.isIdentifier(property.key) && Object.prototype.hasOwnProperty.call(detectedDependencies, property.key.name)) {
905-
addDependencies(
906-
state,
907-
property.key.name,
908-
property,
909-
detectedDependencies[property.key.name] ?? []
910-
);
918+
if (!t6.isObjectProperty(property)) {
919+
return;
920+
}
921+
const styleKey = getStyleKeyName(property.key);
922+
if (styleKey && Object.prototype.hasOwnProperty.call(detectedDependencies, styleKey)) {
923+
addDependencies(state, styleKey, property, detectedDependencies[styleKey] ?? []);
911924
}
912925
});
913926
}
@@ -920,13 +933,12 @@ function index_default() {
920933
const body = t6.isBlockStatement(arg.body) ? arg.body.body.find((statement) => t6.isReturnStatement(statement))?.argument : arg.body;
921934
if (t6.isObjectExpression(body)) {
922935
body.properties.forEach((property) => {
923-
if (t6.isObjectProperty(property) && t6.isIdentifier(property.key) && Object.prototype.hasOwnProperty.call(detectedDependencies, property.key.name)) {
924-
addDependencies(
925-
state,
926-
property.key.name,
927-
property,
928-
detectedDependencies[property.key.name] ?? []
929-
);
936+
if (!t6.isObjectProperty(property)) {
937+
return;
938+
}
939+
const styleKey = getStyleKeyName(property.key);
940+
if (styleKey && Object.prototype.hasOwnProperty.call(detectedDependencies, styleKey)) {
941+
addDependencies(state, styleKey, property, detectedDependencies[styleKey] ?? []);
930942
}
931943
});
932944
}

‎packages/unistyles/plugin/src/index.ts‎

Lines changed: 17 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import { toPlatformPath } from './paths'
1717
import { hasStringRef } from './ref'
1818
import {
1919
addDependencies,
20+
getStyleKeyName,
2021
getStylesDependenciesFromFunction,
2122
getStylesDependenciesFromObject,
2223
isKindOfStyleSheet,
@@ -254,17 +255,14 @@ export default function (): PluginObj<UnistylesPluginPass> {
254255
if (detectedDependencies) {
255256
if (t.isObjectExpression(arg)) {
256257
arg.properties.forEach((property) => {
257-
if (
258-
t.isObjectProperty(property) &&
259-
t.isIdentifier(property.key) &&
260-
Object.prototype.hasOwnProperty.call(detectedDependencies, property.key.name)
261-
) {
262-
addDependencies(
263-
state,
264-
property.key.name,
265-
property,
266-
detectedDependencies[property.key.name] ?? [],
267-
)
258+
if (!t.isObjectProperty(property)) {
259+
return
260+
}
261+
262+
const styleKey = getStyleKeyName(property.key)
263+
264+
if (styleKey && Object.prototype.hasOwnProperty.call(detectedDependencies, styleKey)) {
265+
addDependencies(state, styleKey, property, detectedDependencies[styleKey] ?? [])
268266
}
269267
})
270268
}
@@ -286,17 +284,14 @@ export default function (): PluginObj<UnistylesPluginPass> {
286284
// Ensure the function body returns an object
287285
if (t.isObjectExpression(body)) {
288286
body.properties.forEach((property) => {
289-
if (
290-
t.isObjectProperty(property) &&
291-
t.isIdentifier(property.key) &&
292-
Object.prototype.hasOwnProperty.call(detectedDependencies, property.key.name)
293-
) {
294-
addDependencies(
295-
state,
296-
property.key.name,
297-
property,
298-
detectedDependencies[property.key.name] ?? [],
299-
)
287+
if (!t.isObjectProperty(property)) {
288+
return
289+
}
290+
291+
const styleKey = getStyleKeyName(property.key)
292+
293+
if (styleKey && Object.prototype.hasOwnProperty.call(detectedDependencies, styleKey)) {
294+
addDependencies(state, styleKey, property, detectedDependencies[styleKey] ?? [])
300295
}
301296
})
302297
}

0 commit comments

Comments
 (0)