fix: always try to extract styles

This commit is contained in:
Mark Lawlor
2022-05-31 10:32:44 +10:00
parent 199e23e967
commit 17c450e7eb
4 changed files with 44 additions and 12 deletions

View File

@@ -30,6 +30,22 @@ exports[`Styled - Base Class Name can set base classNames 1`] = `
/>
`;
exports[`Styled - Default props can render with default props 1`] = `
<Text
accessibilityRole="header"
style={
Array [
Object {
"paddingBottom": 16,
"paddingLeft": 16,
"paddingRight": 16,
"paddingTop": 16,
},
]
}
/>
`;
exports[`Styled - Props can style custom props 1`] = `
Array [
<View

View File

@@ -1,5 +1,11 @@
import { render } from "@testing-library/react-native";
import { ActivityIndicator, View, ViewProps, ViewStyle } from "react-native";
import {
ActivityIndicator,
Text,
View,
ViewProps,
ViewStyle,
} from "react-native";
import { styled } from "../../src";
import { TestProvider } from "../tailwindcss/runner";
@@ -74,3 +80,22 @@ describe("Styled - Base Class Name", () => {
expect(tree).toMatchSnapshot();
});
});
describe("Styled - Default props", () => {
const StyledText = styled(Text, {
baseClassName: "p-4",
});
StyledText.defaultProps = {
accessibilityRole: "header",
};
test("can render with default props", () => {
const tree = render(
<TestProvider css="p-4">
<StyledText />
</TestProvider>
).toJSON();
expect(tree).toMatchSnapshot();
});
});

View File

@@ -70,7 +70,6 @@ export default function rootVisitor(
mode: "compileAndTransform",
blockModuleTransform: [],
hasStyledComponentImport: false,
hasClassNames: false,
canCompile,
canTransform,
...state,
@@ -92,16 +91,10 @@ export default function rootVisitor(
hasStyleSheetImport,
hasProvider,
hasStyledComponentImport,
hasClassNames,
hmr,
} = visitorState;
if (hmr) {
// There are no classNames so skip this file
if (!hasClassNames) {
return;
}
/**
* Override tailwind to only process the classnames in this file
*/

View File

@@ -20,7 +20,6 @@ export interface VisitorState
cwd: string;
allowRelativeModules: AllowPathOptions;
blockList: Set<string>;
hasClassNames: boolean;
hasStyledComponentImport: boolean;
hasProvider: boolean;
hasStyleSheetImport: boolean;
@@ -63,9 +62,8 @@ export const visitor: Visitor<VisitorState> = {
return;
}
if (someAttributes(path, ["className", "tw", "fill", "stroke"])) {
if (canTransform) toStyledComponent(path);
state.hasClassNames = true;
if (someAttributes(path, ["className", "tw"]) && canTransform) {
toStyledComponent(path);
}
},
};