Super CSS React

React Super CSS es una pequeña librería que te permite dar soporte a tus componentes para manejar propiedades dinámicas y responsivas de una manera muy facil.

Dynamic Props

Con propiedades dinámicas me refiero a que solo se renderizan las propiedades utilizadas en tiempo de ejecución y no todas las definidas en tu componente, por ejemplo:

Imagina que tienes un componente en tu código como el siguiente:

...tu contneido

La propiedad width siempre estará visible en tu inspector de estilos mientras que la propiedad lgWidth solo sera renderizada en el momento en que la condición de un breakpoint especifico se cumpla.

Responsive props

Estas propiedades son aplicables a tu componente en el que integres Super CSS React, con propiedades responsivas me refiero a aquellas propiedades que se aplican a diferentes resoluciones de pantalla de una manera muy sencilla, antes de ver un ejemplo completo hay que comenzar por lo más importante: definir los breakpoint para que la librería funcione:

$3

en la configuración inicial necesitas definir 2 propiedades de la siguiente manera:

const customConfig = {
breakpoints: [390, 768, 1200] / Breakpoints numericos /,
breakpointsPrefix: ["xs", "sm", "md"] / Prefijos para las propiedades responsivas /
};

const SuperCSSProps = new SuperCSSProps(customConfig);

En el ejemplo anterior se define en la configuración la propiedad breakpoints que corresponde a la medida numérica del breakpoint responsivo, la segunda propiedad es breakpointsPrefix que corresponde al prefijo que antecede a cada propiedad que se va a poder definir en los componentes.

Nota que ambos arreglos tienen la misma longitud y el orden de breakpoints corresponde en cuanto a índice al orden de su prefijo en breakpointsPrefix

Ahora veamos un ejemplo de como usar los 3 breakpoints definidos en el componente del ejemplo inicial:

... tu contenido

En el ejemplo anterior puedes observar varias cosas:

1. Las propiedades responsivas se definen en formato CamelCase

2. el prefijo antecede al nombre de cada propiedad esto es importante.

3. las propiedades aceptan valores de tipo string y numérico.

En los ejemplos anteriores hemos utilizado la propiedad width para explicar cómo funciona, pero la librería tiene soporte para cualquier propiedad CSS definida en la especificación siempre que las anteceda un prefijo para aplicarlo de manera responsiva o sin el para aplicarlo de forma general y siempre que dicha propiedad CSS este escrita en CamelCase, veamos un ejemplo más completo:

xsWidth="90%"
lgWidth="80%"
backgroundColor="white"
xsBackgroundColor="red"
xsDirection="specialcolumn"
mdDirection="row"
>
Hola Mundo

En el ejemplo anterior hay 2 nuevos conceptos: Shortcuts de propiedades y Shortcuts de valores

En la configuración inicial de la librería hay 2 nuevas propiedades que se pueden configurar:

1. alias (Objeto en el que puedes definir tus propios shortcuts) por ejemplo:

en lugar de escribir una propiedad CSS demasiado extensa puedes definir tu shortcut de la siguiente manera:

const customConfig = {
alias: {
brtop: "border-top-radius"
},
values: {}
};
const SuperCSSProps = new SuperCSSProps(customConfig);

El shortcut definido como brtop al renderizar tu CSS se reemplazara por border-top-radius

ahora en tu componente puedes usarlo de esta manera:

...tu contenido

2. values

Con los valores pasa excatamente lo mismo, imagina que no quieres definir en el caso de flexbox el valor space-between

puedes crear un shortcut en el objeto de values de la configuración de esta manera:

const customConfig = {
alias: {},
values: {
between: "space-between"
}
};
const SuperCSSProps = new SuperCSSProps(customConfig);

y de igual manera usar este shortcut en tus valores de propiedades de esta forma:

...tu contenido

$3

puedes definir un shortcut para multiples propiedades CSS como cuando necesitas definir al mismo tiempo un width y un min-width puedes hacer los siguiente:

const customConfig = {
alias: {
w: ["width", "min-width"],
svgSize: ["width", "min-width", "height", "min-height"]
},
values: {} / sin soporte para esta caracteristica /
};
const SuperCSSProps = new SuperCSSProps(customConfig);

Imagina este ejemplo de componente para un icono:

Tu CSS resultante sería el siguiente:

{
width: 40px;
min-width: 40px;
height: 40px;
min-height: 40px;
}

$3

Primero que nada tomar en cuenta que React va a identificar las propiedades como no validas y las va a renderizar en el DOM final, lo que desencadena varios warnings en consola, para evitar este comportamiento a partir de la version 0.0.6 se añadio soporte de propiedades que comienzan con $

Si utilizamos este componente de ejemplo:

className="nav"
justifyContent="between"
xsDirection="column"
lgJustify="center"
>
...tu contenido

El codigo HTML renderizado por react se va a ver algo así:

class="nav"
justifycontent="between"
xs-direction="column"
lg-justify="center">
...tu contenido

En cambio, sí cada propiedad es declarada al inicio con un $ le estamos indicando a React que ignore esas propiedades en el renderizado final de HTML quedando de esta manera:

...tu contenido

y con un CSS compilado de esta forma:

element {
justify-content: space-between;
flex-direction: column;
}

@media screen and (min-width: 320px) {
element {
flex-direction:column;
}
}
@media screen and (min-width: 320px) {
element {
justify-content: center;
}
}

Ahora veamos 2 ejemplos completos, uno utilizando Styled Components y uno sin Utilizar Styled Components:

$3



		${(props) => SuperCSS.hydrate(props)}

;

const MyComponent = () => {
return (
width={900}
mdWidth="90%"
createBorder="black"
>
{/ Contenido del componente /}

);
};

export default MyComponent;

$3

import React from 'react';
import styled from 'styled-components';
import SuperCSSProps from '@digitalbooting/react-super-css';

const customConfig = {
breakpoints: [576, 768, 992, 1200],
breakpointsPrefix: ['xs', 'sm', 'md', 'lg'],
alias: {
createBorder: "border"
direction: 'flex-direction'
},
values: {
black: "1px solid #000000"
}
};

const SuperCSS = new SuperCSSProps(customConfig);

const MyComponent = () => {
const styles = SuperCSS.hydrate({
createBorder: 'black',
width: '100%',
mdWidth: '80%',
display: 'flex'
xsDirection: 'column',
mdDirection: 'row'
})

return (

{/ Contenido del componente /}

);
};

export default MyComponent;

La función utilizada para generar el CSS resultante de las propiedades hydrate retorna un String con el CSS generado.

$3

Hay 2 propiedades adicionales en la configuración: supportCSSProps y reservedProps

#### supportCSSProps

esta propiedad es un arreglo de propiedades CSS validas ue pueden ser renderizables en los componentes.

por defecto se incluyen todas las propiedades CSS admitidas por la especificación actual, si alguna propiedad no funciona puedes probar a agregarla en la configuración, si el problema persiste puedes reportarla.

dejo a continuación como referencia el listado de propiedades soportadas.

básicamente cualquier propiedad que definas en tus componentes que no esté en este Arreglo de propiedades no será renderizado en el CSS final.

const CSS_PROPS = [
"align-content",
"align-self",
"align-items",
"align-self",
"animation",
"animation-delay",
"animation-direction",
"animation-duration",
"animation-fill-mode",
"animation-iteration-count",
"animation-name",
"animation-play-state",
"animation-timing-function",
"backface-visibility",
"background",
"background-attachment",
"background-blend-mode",
"background-clip",
"background-color",
"background-image",
"background-origin",
"background-position",
"background-repeat",
"background-size",
"border",
"border-bottom",
"border-bottom-color",
"border-bottom-left-radius",
"border-bottom-right-radius",
"border-bottom-style",
"border-bottom-width",
"border-collapse",
"border-color",
"border-image",
"border-image-outset",
"border-image-repeat",
"border-image-slice",
"border-image-source",
"border-image-width",
"border-left",
"border-left-color",
"border-left-style",
"border-left-width",
"border-radius",
"border-right",
"border-right-color",
"border-right-style",
"border-right-width",
"border-spacing",
"border-style",
"border-top",
"border-top-color",
"border-top-left-radius",
"border-top-right-radius",
"border-top-style",
"border-top-width",
"border-width",
"bottom",
"box-decoration-break",
"box-shadow",
"box-sizing",
"break-after",
"break-before",
"break-inside",
"caption-side",
"caret-color",
"clear",
"clip",
"color",
"column-count",
"column-fill",
"column-gap",
"column-rule",
"column-rule-color",
"column-rule-style",
"column-rule-width",
"column-span",
"column-width",
"columns",
"content",
"counter-increment",
"counter-reset",
"cursor",
"direction",
"display",
"empty-cells",
"filter",
"flex",
"flex-basis",
"flex-direction",
"flex-flow",
"flex-grow",
"flex-shrink",
"flex-wrap",
"float",
"font",
"font-family",
"font-feature-settings",
"font-kerning",
"font-language-override",
"font-size",
"font-size-adjust",
"font-stretch",
"font-style",
"font-synthesis",
"font-variant",
"font-variant-alternates",
"font-variant-caps",
"font-variant-east-asian",
"font-variant-ligatures",
"font-variant-numeric",
"font-variant-position",
"font-weight",
"gap",
"grid",
"grid-area",
"grid-auto-columns",
"grid-auto-flow",
"grid-auto-rows",
"grid-column",
"grid-column-end",
"grid-column-gap",
"grid-column-start",
"grid-gap",
"grid-row",
"grid-row-end",
"grid-row-gap",
"grid-row-start",
"grid-template",
"grid-template-areas",
"grid-template-columns",
"grid-template-rows",
"hanging-punctuation",
"height",
"hyphens",
"image-orientation",
"image-rendering",
"image-resolution",
"inline-size",
"justify-content",
"justify-items",
"justify-self",
"left",
"letter-spacing",
"line-break",
"line-height",
"list-style",
"list-style-image",
"list-style-position",
"list-style-type",
"margin",
"margin-bottom",
"margin-left",
"margin-right",
"margin-top",
"margin-block",
"margin-inline",
"max-height",
"max-width",
"min-height",
"min-width",
"mix-blend-mode",
"object-fit",
"object-position",
"opacity",
"order",
"outline",
"outline-color",
"outline-offset",
"outline-style",
"outline-width",
"overflow",
"overflow-wrap",
"overflow-x",
"overflow-y",
"padding",
"padding-bottom",
"padding-left",
"padding-right",
"padding-top",
"padding-block",
"padding-inline",
"page-break-after",
"page-break-before",
"page-break-inside",
"perspective",
"perspective-origin",
"place-content",
"place-items",
"place-self",
"pointer-events",
"position",
"quotes",
"resize",
"right",
"row-gap",
"scroll-behavior",
"scroll-margin",
"scroll-margin-block",
"scroll-margin-block-end",
"scroll-margin-block-start",
"scroll-margin-bottom",
"scroll-margin-inline",
"scroll-margin-inline-end",
"scroll-margin-inline-start",
"scroll-margin-left",
"scroll-margin-right",
"scroll-margin-top",
"scroll-padding",
"scroll-padding-block",
"scroll-padding-block-end",
"scroll-padding-block-start",
"scroll-padding-bottom",
"scroll-padding-inline",
"scroll-padding-inline-end",
"scroll-padding-inline-start",
"scroll-padding-left",
"scroll-padding-right",
"scroll-padding-top",
"scroll-snap-align",
"scroll-snap-stop",
"scroll-snap-type",
"shape-image-threshold",
"shape-margin",
"shape-outside",
"tab-size",
"table-layout",
"text-align",
"text-align-last",
"text-combine-upright",
"text-decoration",
"text-decoration-color",
"text-decoration-line",
"text-decoration-style",
"text-emphasis",
"text-emphasis-color",
"text-emphasis-position",
"text-emphasis-style",
"text-indent",
"text-justify",
"text-orientation",
"text-overflow",
"text-rendering",
"text-shadow",
"text-transform",
"text-underline-position",
"top",
"touch-action",
"transform",
"transform-box",
"transform-origin",
"transform-style",
"transition",
"transition-delay",
"transition-duration",
"transition-property",
"transition-timing-function",
"unicode-bidi",
"user-select",
"vertical-align",
"visibility",
"white-space",
"width",
"will-change",
"word-break",
"word-spacing",
"word-wrap",
"writing-mode",
"backdrop-filter",
"z-index",
];

#### ReservedProps

En React JS existen propiedades propias del marco o framework que pueden ocsionar un renderizado innecesario en el CSS tales como las siguientes:

const REACT_RESERVED_PROPS = [
"key",
"ref",
"dangerouslySetInnerHTML",
"style",
"children",
"className",
"htmlFor",
"id",
];

Si hay alguna propiedad extra puedes definirla en la configuración.

Te dejo un ejemplo de cómo configurar estas propiedades en la configuración inicial

const customConfig = {
alias: {},
values: {},
supportCSSProps: [
"scroll-behavior",
...more css props
],
reservedProps: [
"children",
"className",
...more reserved props
]
};

const SuperCSSProps = new SuperCSSProps(customConfig);

Contribuir

Eres libre de contribuir a este proyecto, para hacerlo envíanos un correo a hola@digitalbooting.com

Somos una agencia creativa de Marketing y Desarrollo.

Digital Booting | Agencia Creativa de Marketing Digital