kylefang/nativewind
1
0
Fork 0
mirror of https://github.com/zhigang1992/nativewind.git synced 2026-06-16 02:34:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: prevent duplicate identifiers when accidentally importing RWN

Browse Source
This commit is contained in:
Mark Lawlor
2022-06-01 06:46:46 +10:00
parent c8a11b5a69
commit ef1e83ed9c
18 changed files with 51 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
__tests__/visitor/allow-modules-with-content/output.tsx
View File

@@ -1,4 +1,4 @@
import { StyleSheet } from "react-native"; import { StyleSheet as RNStyleSheet } from "react-native";
import { StyledComponent } from "tailwindcss-react-native"; import { StyledComponent } from "tailwindcss-react-native";
import { Text } from "react-native"; import { Text } from "react-native";
import { TailwindProvider } from "tailwindcss-react-native"; import { TailwindProvider } from "tailwindcss-react-native";
@@ -19,7 +19,7 @@ export function Test() {
} }
globalThis.tailwindcss_react_native_style = Object.assign( globalThis.tailwindcss_react_native_style = Object.assign(
globalThis.tailwindcss_react_native_style || {}, globalThis.tailwindcss_react_native_style || {},
StyleSheet.create({ RNStyleSheet.create({
"font-bold": { "font-bold": {
fontWeight: "700", fontWeight: "700",
}, },

4
__tests__/visitor/allow-modules/output.tsx
View File

@@ -1,4 +1,4 @@
import { StyleSheet } from "react-native"; import { StyleSheet as RNStyleSheet } from "react-native";
import { StyledComponent } from "tailwindcss-react-native"; import { StyledComponent } from "tailwindcss-react-native";
import { Text, View } from "react-native"; import { Text, View } from "react-native";
import { TailwindProvider } from "tailwindcss-react-native"; import { TailwindProvider } from "tailwindcss-react-native";
@@ -17,7 +17,7 @@ export function Test() {
} }
globalThis.tailwindcss_react_native_style = Object.assign( globalThis.tailwindcss_react_native_style = Object.assign(
globalThis.tailwindcss_react_native_style || {}, globalThis.tailwindcss_react_native_style || {},
StyleSheet.create({ RNStyleSheet.create({
container: { container: {
width: "100%", width: "100%",
}, },

4
__tests__/visitor/basic-tw/output.tsx
View File

@@ -1,4 +1,4 @@
import { StyleSheet } from "react-native"; import { StyleSheet as RNStyleSheet } from "react-native";
import { StyledComponent } from "tailwindcss-react-native"; import { StyledComponent } from "tailwindcss-react-native";
import { Text, View } from "react-native"; import { Text, View } from "react-native";
import { TailwindProvider } from "tailwindcss-react-native"; import { TailwindProvider } from "tailwindcss-react-native";
@@ -15,7 +15,7 @@ export function Test() {
} }
globalThis.tailwindcss_react_native_style = Object.assign( globalThis.tailwindcss_react_native_style = Object.assign(
globalThis.tailwindcss_react_native_style || {}, globalThis.tailwindcss_react_native_style || {},
StyleSheet.create({ RNStyleSheet.create({
container: { container: {
width: "100%", width: "100%",
}, },

4
__tests__/visitor/basic/output.tsx
View File

@@ -1,4 +1,4 @@
import { StyleSheet } from "react-native"; import { StyleSheet as RNStyleSheet } from "react-native";
import { StyledComponent } from "tailwindcss-react-native"; import { StyledComponent } from "tailwindcss-react-native";
import { Text, View } from "react-native"; import { Text, View } from "react-native";
import { TailwindProvider } from "tailwindcss-react-native"; import { TailwindProvider } from "tailwindcss-react-native";
@@ -15,7 +15,7 @@ export function Test() {
} }
globalThis.tailwindcss_react_native_style = Object.assign( globalThis.tailwindcss_react_native_style = Object.assign(
globalThis.tailwindcss_react_native_style || {}, globalThis.tailwindcss_react_native_style || {},
StyleSheet.create({ RNStyleSheet.create({
container: { container: {
width: "100%", width: "100%",
}, },

4
__tests__/visitor/block-modules/output.tsx
View File

@@ -1,4 +1,4 @@
import { StyleSheet } from "react-native"; import { StyleSheet as RNStyleSheet } from "react-native";
import { StyledComponent } from "tailwindcss-react-native"; import { StyledComponent } from "tailwindcss-react-native";
import { Text } from "react-native"; import { Text } from "react-native";
import { MotiText } from "moti"; import { MotiText } from "moti";
@@ -14,7 +14,7 @@ export function Test() {
} }
globalThis.tailwindcss_react_native_style = Object.assign( globalThis.tailwindcss_react_native_style = Object.assign(
globalThis.tailwindcss_react_native_style || {}, globalThis.tailwindcss_react_native_style || {},
StyleSheet.create({ RNStyleSheet.create({
"font-bold": { "font-bold": {
fontWeight: "700", fontWeight: "700",
}, },

4
__tests__/visitor/className-expression/output.tsx
View File

@@ -1,4 +1,4 @@
import { StyleSheet } from "react-native"; import { StyleSheet as RNStyleSheet } from "react-native";
import { StyledComponent } from "tailwindcss-react-native"; import { StyledComponent } from "tailwindcss-react-native";
import { Text } from "react-native"; import { Text } from "react-native";
import { TailwindProvider } from "tailwindcss-react-native"; import { TailwindProvider } from "tailwindcss-react-native";
@@ -16,7 +16,7 @@ export function Test({ isBold, isUnderline }) {
} }
globalThis.tailwindcss_react_native_style = Object.assign( globalThis.tailwindcss_react_native_style = Object.assign(
globalThis.tailwindcss_react_native_style || {}, globalThis.tailwindcss_react_native_style || {},
StyleSheet.create({ RNStyleSheet.create({
"font-bold": { "font-bold": {
fontWeight: "700", fontWeight: "700",
}, },

4
__tests__/visitor/compile-only/output.tsx
View File

@@ -1,4 +1,4 @@
import { StyleSheet } from "react-native"; import { StyleSheet as RNStyleSheet } from "react-native";
import { Text, View } from "react-native"; import { Text, View } from "react-native";
import { TailwindProvider } from "tailwindcss-react-native"; import { TailwindProvider } from "tailwindcss-react-native";
export function Test() { export function Test() {
@@ -12,7 +12,7 @@ export function Test() {
} }
globalThis.tailwindcss_react_native_style = Object.assign( globalThis.tailwindcss_react_native_style = Object.assign(
globalThis.tailwindcss_react_native_style || {}, globalThis.tailwindcss_react_native_style || {},
StyleSheet.create({ RNStyleSheet.create({
container: { container: {
width: "100%", width: "100%",
}, },

4
__tests__/visitor/content-directory-no-index/output.tsx
View File

@@ -1,4 +1,4 @@
import { StyleSheet } from "react-native"; import { StyleSheet as RNStyleSheet } from "react-native";
import { StyledComponent } from "tailwindcss-react-native"; import { StyledComponent } from "tailwindcss-react-native";
import { Text } from "react-native"; import { Text } from "react-native";
import { TestComponent } from "./test-directory"; import { TestComponent } from "./test-directory";
@@ -14,7 +14,7 @@ export function Test() {
} }
globalThis.tailwindcss_react_native_style = Object.assign( globalThis.tailwindcss_react_native_style = Object.assign(
globalThis.tailwindcss_react_native_style || {}, globalThis.tailwindcss_react_native_style || {},
StyleSheet.create({ RNStyleSheet.create({
"font-bold": { "font-bold": {
fontWeight: "700", fontWeight: "700",
}, },

4
__tests__/visitor/content-directory/output.tsx
View File

@@ -1,4 +1,4 @@
import { StyleSheet } from "react-native"; import { StyleSheet as RNStyleSheet } from "react-native";
import { StyledComponent } from "tailwindcss-react-native"; import { StyledComponent } from "tailwindcss-react-native";
import { Text } from "react-native"; import { Text } from "react-native";
import { TestComponent } from "./test-directory"; import { TestComponent } from "./test-directory";
@@ -14,7 +14,7 @@ export function Test() {
} }
globalThis.tailwindcss_react_native_style = Object.assign( globalThis.tailwindcss_react_native_style = Object.assign(
globalThis.tailwindcss_react_native_style || {}, globalThis.tailwindcss_react_native_style || {},
StyleSheet.create({ RNStyleSheet.create({
"font-bold": { "font-bold": {
fontWeight: "700", fontWeight: "700",
}, },

4
__tests__/visitor/content-ignore-unmatched-relative-import/output.tsx
View File

@@ -1,4 +1,4 @@
import { StyleSheet } from "react-native"; import { StyleSheet as RNStyleSheet } from "react-native";
import { StyledComponent } from "tailwindcss-react-native"; import { StyledComponent } from "tailwindcss-react-native";
import { Text } from "react-native"; import { Text } from "react-native";
import { ShouldNotBeTransformed } from "./should-not-be-transformed"; import { ShouldNotBeTransformed } from "./should-not-be-transformed";
@@ -14,7 +14,7 @@ export function Test() {
} }
globalThis.tailwindcss_react_native_style = Object.assign( globalThis.tailwindcss_react_native_style = Object.assign(
globalThis.tailwindcss_react_native_style || {}, globalThis.tailwindcss_react_native_style || {},
StyleSheet.create({ RNStyleSheet.create({
"font-bold": { "font-bold": {
fontWeight: "700", fontWeight: "700",
}, },

4
__tests__/visitor/content-positive-match/output.tsx
View File

@@ -1,4 +1,4 @@
import { StyleSheet } from "react-native"; import { StyleSheet as RNStyleSheet } from "react-native";
import { StyledComponent } from "tailwindcss-react-native"; import { StyledComponent } from "tailwindcss-react-native";
import { Text } from "react-native"; import { Text } from "react-native";
import { TestComponent } from "./test"; import { TestComponent } from "./test";
@@ -14,7 +14,7 @@ export function Test() {
} }
globalThis.tailwindcss_react_native_style = Object.assign( globalThis.tailwindcss_react_native_style = Object.assign(
globalThis.tailwindcss_react_native_style || {}, globalThis.tailwindcss_react_native_style || {},
StyleSheet.create({ RNStyleSheet.create({
"font-bold": { "font-bold": {
fontWeight: "700", fontWeight: "700",
}, },

9
__tests__/visitor/empty-className/output.tsx
View File

@@ -1,4 +1,3 @@
import { StyleSheet } from "react-native";
import { StyledComponent } from "tailwindcss-react-native"; import { StyledComponent } from "tailwindcss-react-native";
import { Text } from "react-native"; import { Text } from "react-native";
import { TailwindProvider } from "tailwindcss-react-native"; import { TailwindProvider } from "tailwindcss-react-native";
@@ -11,11 +10,3 @@ export function Test() {
</TailwindProvider> </TailwindProvider>
); );
} }
globalThis.tailwindcss_react_native_style = Object.assign(
globalThis.tailwindcss_react_native_style || {},
StyleSheet.create({})
);
globalThis.tailwindcss_react_native_media = Object.assign(
globalThis.tailwindcss_react_native_media || {},
{}
);

3
__tests__/visitor/existing-style/output.tsx
View File

@@ -1,3 +1,4 @@
import { StyleSheet as RNStyleSheet } from "react-native";
import { StyledComponent } from "tailwindcss-react-native"; import { StyledComponent } from "tailwindcss-react-native";
import { StyleSheet, Text } from "react-native"; import { StyleSheet, Text } from "react-native";
import { TailwindProvider } from "tailwindcss-react-native"; import { TailwindProvider } from "tailwindcss-react-native";
@@ -21,7 +22,7 @@ const styles = StyleSheet.create({
}); });
globalThis.tailwindcss_react_native_style = Object.assign( globalThis.tailwindcss_react_native_style = Object.assign(
globalThis.tailwindcss_react_native_style || {}, globalThis.tailwindcss_react_native_style || {},
StyleSheet.create({ RNStyleSheet.create({
"font-bold": { "font-bold": {
fontWeight: "700", fontWeight: "700",
}, },

18
src/babel/root-visitor.ts
View File

@@ -116,10 +116,17 @@ export default function rootVisitor(
); );
} }
// If there are no styles, early exit
if (Object.keys(styles).length === 0) return;
appendVariables(bodyNode, styles); appendVariables(bodyNode, styles);
if (!hasStyleSheetImport) { if (!hasStyleSheetImport) {
prependImport(bodyNode, "StyleSheet", "react-native"); prependImport(
bodyNode,
["RNStyleSheet", "StyleSheet"],
"react-native"
);
} }
} else { } else {
if (!hasProvider) { if (!hasProvider) {
@@ -131,11 +138,18 @@ export default function rootVisitor(
*/ */
const { styles } = extractStyles(tailwindConfig); const { styles } = extractStyles(tailwindConfig);
// If there are no styles, early exit
if (Object.keys(styles).length === 0) return;
const bodyNode = path.node.body; const bodyNode = path.node.body;
appendVariables(bodyNode, styles); appendVariables(bodyNode, styles);
if (!hasStyleSheetImport) { if (!hasStyleSheetImport) {
prependImport(bodyNode, "StyleSheet", "react-native"); prependImport(
bodyNode,
["RNStyleSheet", "StyleSheet"],
"react-native"
);
} }
} }
}, },

6
src/babel/transforms/append-import.ts
View File

@@ -8,12 +8,14 @@ import {
export function prependImport( export function prependImport(
body: Statement[], body: Statement[],
variable: string, variable: string | string[],
source: string source: string
) { ) {
body.unshift( body.unshift(
importDeclaration( importDeclaration(
[importSpecifier(identifier(variable), identifier(variable))], typeof variable === "string"
? [importSpecifier(identifier(variable), identifier(variable))]
: [importSpecifier(identifier(variable[0]), identifier(variable[1]))],
stringLiteral(source) stringLiteral(source)
) )
); );

7
src/babel/transforms/append-variables.ts
View File

@@ -43,7 +43,10 @@ export function appendVariables(body: Statement[], styleRecord: StyleRecord) {
identifier("{}") identifier("{}")
), ),
callExpression( callExpression(
memberExpression(identifier("StyleSheet"), identifier("create")), memberExpression(
identifier("RNStyleSheet"),
identifier("create")
),
[serialize(styles)] [serialize(styles)]
), ),
] ]
@@ -86,7 +89,7 @@ function serialize(literal: unknown): Expression {
case "string": case "string":
if (literal === "hairlineWidth") { if (literal === "hairlineWidth") {
return memberExpression( return memberExpression(
identifier("StyleSheet"), identifier("RNStyleSheet"),
identifier("hairlineWidth") identifier("hairlineWidth")
); );
} }

2
src/babel/utils/has-named-import.ts
View File

@@ -21,7 +21,7 @@ export function hasNamedImport(
return isStringLiteral(specifier.imported) return isStringLiteral(specifier.imported)
? specifier.imported.value === variable ? specifier.imported.value === variable
: specifier.imported.name === variable; : specifier.local.name === variable;
}); });
} }

2
src/babel/visitor.ts
View File

@@ -42,7 +42,7 @@ export const visitor: Visitor<VisitorState> = {
state.hasStyleSheetImport ||= hasNamedImport( state.hasStyleSheetImport ||= hasNamedImport(
path, path,
"StyleSheet", "RNStyleSheet",
"react-native" "react-native"
); );