@snailycfx/stylesheet 1.0.13 → 1.0.14

package/out/core/engine/init.luau

@@ -50,7 +50,7 @@ function runLayoutImmediate(node)
 	layoutNode(node, absSize.X, absSize.Y)
 end
 -- ── Layout recursivo ──────────────────────────────────────────────────────────
-local computeBlockLayout, writeLayout, reparentIfNeeded
+local computeBlockLayout, writeLayout
 function layoutNode(node, containerWidth, containerHeight)
 	if not node.layoutDirty then
 		return nil
@@ -103,7 +103,6 @@ function layoutNode(node, containerWidth, containerHeight)
 		child.computedY = abs.y
 		child.computedWidth = abs.width
 		child.computedHeight = abs.height
-		reparentIfNeeded(child, abs.containingBlock)
 		writeLayout(child.instance, abs.x, abs.y, abs.width, abs.height)
 		if sizeChanged then
 			child.layoutDirty = true
@@ -141,11 +140,6 @@ function writeLayout(instance, x, y, w, h)
 	instance.Position = UDim2.new(0, x, 0, y)
 	instance.Size = UDim2.new(0, w, 0, h)
 end
-function reparentIfNeeded(node, containingBlock)
-	if node.instance.Parent ~= containingBlock.instance then
-		node.instance.Parent = containingBlock.instance
-	end
-end
 exports.setEngineRoot = setEngineRoot
 exports.getEngineRoot = getEngineRoot
 exports.runLayout = runLayout

package/out/core/writer/init.luau

@@ -213,16 +213,39 @@ function writeText(instance, style, prev)
 		return nil
 	end
 	local text = instance
+	-- Defaults CSS: left + top cuando no se especifica
+	local _condition = style.textAlign == nil
+	if _condition then
+		local _result = prev
+		if _result ~= nil then
+			_result = _result.textAlign
+		end
+		_condition = _result == nil
+	end
+	if _condition then
+		text.TextXAlignment = Enum.TextXAlignment.Left
+	end
+	local _condition_1 = style.verticalAlign == nil
+	if _condition_1 then
+		local _result = prev
+		if _result ~= nil then
+			_result = _result.verticalAlign
+		end
+		_condition_1 = _result == nil
+	end
+	if _condition_1 then
+		text.TextYAlignment = Enum.TextYAlignment.Top
+	end
 	local _exp = style.color
 	local _result = prev
 	if _result ~= nil then
 		_result = _result.color
 	end
-	local _condition = _exp ~= _result
-	if _condition then
-		_condition = style.color ~= nil
+	local _condition_2 = _exp ~= _result
+	if _condition_2 then
+		_condition_2 = style.color ~= nil
 	end
-	if _condition then
+	if _condition_2 then
 		text.TextColor3 = parseColor(style.color)
 	end
 	local _exp_1 = style.fontSize
@@ -230,11 +253,11 @@ function writeText(instance, style, prev)
 	if _result_1 ~= nil then
 		_result_1 = _result_1.fontSize
 	end
-	local _condition_1 = _exp_1 ~= _result_1
-	if _condition_1 then
-		_condition_1 = style.fontSize ~= nil
+	local _condition_3 = _exp_1 ~= _result_1
+	if _condition_3 then
+		_condition_3 = style.fontSize ~= nil
 	end
-	if _condition_1 then
+	if _condition_3 then
 		text.TextSize = style.fontSize
 	end
 	local _exp_2 = style.fontFamily
@@ -242,11 +265,11 @@ function writeText(instance, style, prev)
 	if _result_2 ~= nil then
 		_result_2 = _result_2.fontFamily
 	end
-	local _condition_2 = _exp_2 ~= _result_2
-	if _condition_2 then
-		_condition_2 = style.fontFamily ~= nil
+	local _condition_4 = _exp_2 ~= _result_2
+	if _condition_4 then
+		_condition_4 = style.fontFamily ~= nil
 	end
-	if _condition_2 then
+	if _condition_4 then
 		text.Font = style.fontFamily
 	end
 	local _exp_3 = style.textTransparency
@@ -254,11 +277,11 @@ function writeText(instance, style, prev)
 	if _result_3 ~= nil then
 		_result_3 = _result_3.textTransparency
 	end
-	local _condition_3 = _exp_3 ~= _result_3
-	if _condition_3 then
-		_condition_3 = style.textTransparency ~= nil
+	local _condition_5 = _exp_3 ~= _result_3
+	if _condition_5 then
+		_condition_5 = style.textTransparency ~= nil
 	end
-	if _condition_3 then
+	if _condition_5 then
 		text.TextTransparency = style.textTransparency
 	end
 	local _exp_4 = style.textScaled
@@ -266,11 +289,11 @@ function writeText(instance, style, prev)
 	if _result_4 ~= nil then
 		_result_4 = _result_4.textScaled
 	end
-	local _condition_4 = _exp_4 ~= _result_4
-	if _condition_4 then
-		_condition_4 = style.textScaled ~= nil
+	local _condition_6 = _exp_4 ~= _result_4
+	if _condition_6 then
+		_condition_6 = style.textScaled ~= nil
 	end
-	if _condition_4 then
+	if _condition_6 then
 		text.TextScaled = style.textScaled
 	end
 	local _exp_5 = style.textWrapped
@@ -278,11 +301,11 @@ function writeText(instance, style, prev)
 	if _result_5 ~= nil then
 		_result_5 = _result_5.textWrapped
 	end
-	local _condition_5 = _exp_5 ~= _result_5
-	if _condition_5 then
-		_condition_5 = style.textWrapped ~= nil
+	local _condition_7 = _exp_5 ~= _result_5
+	if _condition_7 then
+		_condition_7 = style.textWrapped ~= nil
 	end
-	if _condition_5 then
+	if _condition_7 then
 		text.TextWrapped = style.textWrapped
 	end
 	local _exp_6 = style.lineHeight
@@ -290,11 +313,11 @@ function writeText(instance, style, prev)
 	if _result_6 ~= nil then
 		_result_6 = _result_6.lineHeight
 	end
-	local _condition_6 = _exp_6 ~= _result_6
-	if _condition_6 then
-		_condition_6 = style.lineHeight ~= nil
+	local _condition_8 = _exp_6 ~= _result_6
+	if _condition_8 then
+		_condition_8 = style.lineHeight ~= nil
 	end
-	if _condition_6 then
+	if _condition_8 then
 		text.LineHeight = style.lineHeight
 	end
 	local _exp_7 = style.textAlign
@@ -302,11 +325,11 @@ function writeText(instance, style, prev)
 	if _result_7 ~= nil then
 		_result_7 = _result_7.textAlign
 	end
-	local _condition_7 = _exp_7 ~= _result_7
-	if _condition_7 then
-		_condition_7 = style.textAlign ~= nil
+	local _condition_9 = _exp_7 ~= _result_7
+	if _condition_9 then
+		_condition_9 = style.textAlign ~= nil
 	end
-	if _condition_7 then
+	if _condition_9 then
 		text.TextXAlignment = TEXT_X[style.textAlign] or Enum.TextXAlignment.Left
 	end
 	local _exp_8 = style.verticalAlign
@@ -314,11 +337,11 @@ function writeText(instance, style, prev)
 	if _result_8 ~= nil then
 		_result_8 = _result_8.verticalAlign
 	end
-	local _condition_8 = _exp_8 ~= _result_8
-	if _condition_8 then
-		_condition_8 = style.verticalAlign ~= nil
+	local _condition_10 = _exp_8 ~= _result_8
+	if _condition_10 then
+		_condition_10 = style.verticalAlign ~= nil
 	end
-	if _condition_8 then
+	if _condition_10 then
 		text.TextYAlignment = TEXT_Y[style.verticalAlign] or Enum.TextYAlignment.Center
 	end
 end

package/out/provider/index.d.ts

@@ -5,18 +5,6 @@ interface StyleSheetProviderProps {
     target: Frame;
     children?: React.ReactNode;
 }
-/**
- * Raíz del engine de layout. Debe envolver toda la UI.
- * Crea un Frame invisible que ocupa el 100% del target
- * y actúa como el "body" del que cuelgan todos los elementos.
- *
- * @example
- * export = (target: Frame) => {
- *     const root = createRoot(target)
- *     root.render(<StyleSheetProvider target={target}><App /></StyleSheetProvider>)
- *     return () => root.unmount()
- * }
- */
 export declare function StyleSheetProvider(props: StyleSheetProviderProps): React.ReactElement;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/out/provider/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/provider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,cAAc,CAAA;AACvD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAKzC,eAAO,MAAM,WAAW,uCAAyD,CAAA;AAIjF,UAAU,uBAAuB;IAChC,MAAM,EAAE,KAAK,CAAA;IACb,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,GAAG,KAAK,CAAC,YAAY,CAsDrF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/provider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,cAAc,CAAA;AACjE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAGzC,eAAO,MAAM,WAAW,uCAAyD,CAAA;AAEjF,UAAU,uBAAuB;IAChC,MAAM,EAAE,KAAK,CAAA;IACb,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,GAAG,KAAK,CAAC,YAAY,CA8DrF"}

package/out/provider/init.luau

@@ -4,55 +4,50 @@ local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local React = _react
 local useEffect = _react.useEffect
 local useRef = _react.useRef
+local useState = _react.useState
 local _core = TS.import(script, script.Parent, "core")
-local createNode = _core.createNode
 local setEngineRoot = _core.setEngineRoot
 local runLayoutImmediate = _core.runLayoutImmediate
--- ── Context ───────────────────────────────────────────────────────────────────
 local NodeContext = React.createContext(nil)
--- ── StyleSheetProvider ────────────────────────────────────────────────────────
---[[
-	*
-	 * Raíz del engine de layout. Debe envolver toda la UI.
-	 * Crea un Frame invisible que ocupa el 100% del target
-	 * y actúa como el "body" del que cuelgan todos los elementos.
-	 *
-	 * @example
-	 * export = (target: Frame) => {
-	 *     const root = createRoot(target)
-	 *     root.render(<StyleSheetProvider target={target}><App /></StyleSheetProvider>)
-	 *     return () => root.unmount()
-	 * }
-	 
-]]
 local function StyleSheetProvider(props)
 	local bodyRef = useRef()
-	local rootNodeRef = useRef()
+	-- Crear el nodo raíz ANTES del primer render de los hijos
+	-- usando useState con initializer para que esté disponible inmediatamente
+	local rootNode = useState(function()
+		-- Nodo placeholder — la instancia se asigna cuando bodyRef está disponible
+		return {
+			instance = nil,
+			style = {
+				display = "flex",
+				flexDirection = "column",
+			},
+			children = {},
+			parent = nil,
+			computedWidth = props.target.AbsoluteSize.X,
+			computedHeight = props.target.AbsoluteSize.Y,
+			computedX = 0,
+			computedY = 0,
+			layoutDirty = true,
+			visualDirty = false,
+			lastVisualStyle = nil,
+		}
+	end)
 	useEffect(function()
 		local body = bodyRef.current
 		if not body then
 			return nil
 		end
-		-- Crear el nodo raíz — sin padre, es la raíz del árbol
-		local rootNode = createNode(body, {
-			width = "100%",
-			height = "100%",
-			display = "flex",
-			flexDirection = "column",
-		})
-		rootNodeRef.current = rootNode
+		-- Asignar la instancia real ahora que el Frame existe
+		rootNode.instance = body
 		setEngineRoot(rootNode)
-		-- Ejecutar layout inmediato con el tamaño real del target
 		local doLayout = function()
 			local size = props.target.AbsoluteSize
-			body.Size = UDim2.fromOffset(size.X, size.Y)
 			rootNode.computedWidth = size.X
 			rootNode.computedHeight = size.Y
 			rootNode.layoutDirty = true
 			runLayoutImmediate(rootNode)
 		end
 		doLayout()
-		-- Escuchar resize del target — un solo listener para todo el árbol
 		local conn = (props.target):GetPropertyChangedSignal("AbsoluteSize"):Connect(doLayout)
 		return function()
 			conn:Disconnect()
@@ -60,7 +55,7 @@ local function StyleSheetProvider(props)
 		end
 	end, {})
 	return React.createElement(NodeContext.Provider, {
-		value = rootNodeRef.current,
+		value = rootNode,
 	}, React.createElement("frame", {
 		ref = bodyRef,
 		Size = UDim2.fromScale(1, 1),

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@snailycfx/stylesheet",
-    "version": "1.0.13",
+    "version": "1.0.14",
     "description": "CSS-inspired StyleSheet system for roblox-ts and @rbxts/react",
     "main": "out/init.lua",
     "types": "out/index.d.ts",