Skip to content

Commit 1823f81

Browse files
committed
feat: radial gradient
1 parent 73cc7d0 commit 1823f81

File tree

5 files changed

+29
-16
lines changed

5 files changed

+29
-16
lines changed

.config/cspell.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
],
1212
"words": [
1313
"colorjs",
14+
"oklab",
1415
"prebuild"
1516
]
1617
}

src/compiler/declarations.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -973,6 +973,7 @@ export function parseUnparsed(
973973
case "hsl":
974974
case "hsla":
975975
case "linear-gradient":
976+
case "radial-gradient":
976977
return unparsedFunction(tokenOrValue, builder);
977978
case "hairlineWidth":
978979
return [{}, tokenOrValue.value.name, []];

src/metro/index.ts

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,20 @@ import connect from "connect";
66
import debug from "debug";
77
import type { MetroConfig } from "metro-config";
88

9+
import type { CompilerOptions } from "../compiler";
910
import { compile } from "../compiler/compiler";
1011
import { getNativeInjectionCode, getWebInjectionCode } from "./injection-code";
1112
import { nativeResolver, webResolver } from "./resolver";
1213
import { setupTypeScript } from "./typescript";
1314

14-
export interface WithReactNativeCSSOptions {
15+
export interface WithReactNativeCSSOptions extends CompilerOptions {
1516
/* Specify the path to the TypeScript environment file. Defaults types-env.d.ts */
1617
typescriptEnvPath?: string;
1718
/* Disable generation of the types-env.d.ts file. Defaults false */
1819
disableTypeScriptGeneration?: boolean;
1920
/** Add className to all React Native primitives. Defaults false */
2021
globalClassNamePolyfill?: boolean;
22+
hexColors?: boolean;
2123
}
2224

2325
const defaultLogger = debug("react-native-css:metro");
@@ -165,7 +167,12 @@ export function withReactNativeCSS<
165167

166168
// The CSS file has changed, we need to recompile the injection file
167169
if (next !== last) {
168-
nativeCSSFiles.set(filePath, [next, compile(next, {})]);
170+
nativeCSSFiles.set(filePath, [
171+
next,
172+
compile(next, {
173+
hexColors: options?.hexColors,
174+
}),
175+
]);
169176

170177
watcher.emit("change", {
171178
eventsQueue: nativeInjectionFilepaths.map((filePath) => ({

src/runtime/native/__tests__/colors.test.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ describe("hsl", () => {
4444
expect(component.type).toBe("View");
4545
expect(component.props).toStrictEqual({
4646
children: undefined,
47-
style: { color: "hsl(0,84.2%,60.2%)" },
47+
style: { color: "hsl(0, 84.2%, 60.2%)" },
4848
testID,
4949
});
5050
});
@@ -61,7 +61,7 @@ describe("hsl", () => {
6161
expect(component.type).toBe("View");
6262
expect(component.props).toStrictEqual({
6363
children: undefined,
64-
style: { color: "hsl(0,84.2%,60.2%)" },
64+
style: { color: "hsl(0, 84.2%, 60.2%)" },
6565
testID,
6666
});
6767
});
@@ -112,7 +112,7 @@ describe("hsla", () => {
112112
expect(component.type).toBe("View");
113113
expect(component.props).toStrictEqual({
114114
children: undefined,
115-
style: { color: "hsla(0,84.2%,60.2%,60%)" },
115+
style: { color: "hsla(0, 84.2%, 60.2%, 60%)" },
116116
testID,
117117
});
118118
});
@@ -129,7 +129,7 @@ describe("hsla", () => {
129129
expect(component.type).toBe("View");
130130
expect(component.props).toStrictEqual({
131131
children: undefined,
132-
style: { color: "hsla(0,84.2%,60.2%,60%)" },
132+
style: { color: "hsla(0, 84.2%, 60.2%, 60%)" },
133133
testID,
134134
});
135135
});

src/runtime/native/styles/resolve.ts

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -129,9 +129,6 @@ export function resolveValue(
129129
// @translate, @rotate, @scale, etc.
130130
return { [name.slice(1)]: simpleResolve(value[2], castToArray)[0] };
131131
} else {
132-
if (name === "linear-gradient") {
133-
debugger;
134-
}
135132
let args = simpleResolve(value[2], castToArray);
136133

137134
if (args === undefined) {
@@ -141,14 +138,21 @@ export function resolveValue(
141138
args = args[0];
142139
}
143140

144-
const joinedArgs = args.map((arg: unknown) => {
145-
if (Array.isArray(arg)) {
146-
return arg.flat().join(" ");
147-
}
148-
return arg;
149-
});
141+
let joinedArgs = args
142+
.map((arg: unknown) => {
143+
if (Array.isArray(arg)) {
144+
return arg.flat().join(" ");
145+
}
146+
return arg;
147+
})
148+
.join(", ");
149+
150+
if (name === "radial-gradient") {
151+
// Nativewind / Tailwind CSS hack which can force the 'in oklab' color space
152+
joinedArgs = joinedArgs.replace("in oklab, ", "");
153+
}
150154

151-
value = `${name}(${joinedArgs.join(", ")})`;
155+
value = `${name}(${joinedArgs})`;
152156
} else {
153157
value = `${name}(${args})`;
154158
}

0 commit comments

Comments
 (0)