✨ Full EsCSS Support

demos/demo-escss/estilos.escss

@@ -0,0 +1,109 @@
+/* EsCSS Demo - CSS con sintaxis en Español */
+
+* {
+  caja-dimensionamiento: caja-borde;
+  margen: 0;
+  relleno: 0;
+}
+
+cuerpo {
+  fuente-familia: sistema-ui, sans-serif;
+  linea-alto: 1.6;
+  fondo-color: humo-blanco;
+  color: gris-tenue;
+}
+
+.contenedor {
+  maximo-ancho: 1200px;
+  margen: 0 auto;
+  relleno: 2rem;
+}
+
+.titulo {
+  fuente-tamaño: 2.5rem;
+  fuente-peso: negrita;
+  margen-abajo: 0.5rem;
+  color: azul-real;
+}
+
+.descripcion {
+  fuente-tamaño: 1.25rem;
+  color: gris;
+  margen-abajo: 2rem;
+}
+
+/* Tarjeta con Flexbox */
+.tarjeta {
+  mostrar: flex;
+  flex-direccion: columna;
+  fondo-color: blanco;
+  borde-radio: 0.5rem;
+  relleno: 1.5rem;
+  caja-sombra: 0 4px 6px rgba(0, 0, 0, 0.1);
+  margen-abajo: 2rem;
+}
+
+.tarjeta-titulo {
+  fuente-tamaño: 1.5rem;
+  margen-abajo: 0.5rem;
+}
+
+.tarjeta-contenido {
+  color: gris;
+  margen-abajo: 1rem;
+}
+
+.boton {
+  mostrar: flex;
+  alinear-items: centro;
+  justificar-contenido: centro;
+  relleno: 0.75rem 1.5rem;
+  fondo-color: azul-real;
+  color: blanco;
+  borde: ninguno;
+  borde-radio: 0.25rem;
+  cursor: puntero;
+  fuente-tamaño: 1rem;
+  transicion: fondo-color 0.2s facilidad;
+  texto-decoracion: ninguno;
+}
+
+.boton:encima {
+  fondo-color: azul-medianoche;
+}
+
+/* Cuadrícula (Grid) */
+.cuadricula {
+  mostrar: cuadricula;
+  cuadricula-plantilla-columnas: repetir(auto-ajuste, minimo-maximo(200px, 1fr));
+  espacio: 1rem;
+}
+
+.cuadricula-elemento {
+  fondo-color: blanco;
+  relleno: 1.5rem;
+  texto-alinear: centro;
+  caja-sombra: 0 2px 4px rgba(0, 0, 0, 0.05);
+  transicion: transformar 0.2s facilidad;
+}
+.cuadricula-elemento:primer-hijo {
+  borde-radio: 0.5rem 0.5rem 0 0;
+}
+.cuadricula-elemento:ultimo-hijo {
+  borde-radio: 0 0 0.5rem 0.5rem;
+}
+
+.cuadricula-elemento:encima {
+  fondo-color: humo-blanco;
+}
+
+/* Media queries */
+@medios (maximo-ancho: 768px) {
+  .titulo {
+    fuente-tamaño: 2rem;
+  }
+
+  .contenedor {
+    relleno: 1rem;
+  }
+}

demos/demo-escss/fuente/indice.esjs

@@ -0,0 +1,24 @@
+// Ejemplo EsJS: fecha/hora actual y contador de clics en la cuadrícula
+
+const fechaActualElemento = document.getElementById('fecha-actual')
+
+funcion actualizarFecha() {
+  fechaActualElemento.textContent = crear Fecha().aCadenaLocalizada()
+}
+
+actualizarFecha()
+establecerIntervalo(actualizarFecha, 1000)
+
+// Contador de clics por elemento
+mut clics = { 'el-1': 0, 'el-2': 0, 'el-3': 0, 'el-4': 0 }
+
+const ids = ['el-1', 'el-2', 'el-3', 'el-4']
+ids.paraCada((id) => {
+  const elemento = document.getElementById(id)
+  const spanClicks = elemento.querySelector('.clicks')
+
+  elemento.addEventListener('click', () => {
+    clics[id]++
+    spanClicks.textContent = clics[id]
+  })
+})

demos/demo-escss/indice.eshtml

@@ -0,0 +1,45 @@
+<!TIPODOC eshtml>
+<eshtml idioma="es">
+  <cabecera>
+    <meta conjunto-caracteres="UTF-8">
+    <meta nombre="viewport" contenido="width=device-width, initial-scale=1.0">
+    <titulo>Demo EsCSS</titulo>
+    <recurso rel="stylesheet" referencia="./estilos.escss">
+  </cabecera>
+
+  <cuerpo>
+    <division clase="contenedor">
+      <t1 clase="titulo">EsCSS Demo</t1>
+      <parrafo clase="descripcion">
+        CSS con sintaxis en Español. Fecha y hora:
+        <negrita><segmento id="fecha-actual">—</segmento></negrita>
+      </parrafo>
+
+      <division clase="tarjeta">
+        <t2 clase="tarjeta-titulo">Tarjeta de Ejemplo</t2>
+        <parrafo clase="tarjeta-contenido">
+          Este es un ejemplo de EsCSS, donde puedes escribir CSS usando
+          propiedades en español.
+        </parrafo>
+        <enlace referencia="https://es.js.org/" objetivo="_blank" clase="boton">
+          Más información
+        </enlace>
+      </division>
+
+      <division clase="cuadricula">
+        <division clase="cuadricula-elemento" id="el-1">
+          Elemento 1 · <segmento clase="clicks">0</segmento> clics
+        </division>
+        <division clase="cuadricula-elemento" id="el-2">
+          Elemento 2 · <segmento clase="clicks">0</segmento> clics
+        </division>
+        <division clase="cuadricula-elemento" id="el-3">
+          Elemento 3 · <segmento clase="clicks">0</segmento> clics
+        </division>
+        <division clase="cuadricula-elemento" id="el-4">
+          Elemento 4 · <segmento clase="clicks">0</segmento> clics
+        </division>
+      </division>
+    </division>
+  </cuerpo>
+</eshtml>

demos/demo-escss/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@es-js/demo-escss",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite --host",
+    "build": "vite build",
+    "preview": "vite preview",
+    "format": "prettier --write ."
+  },
+  "dependencies": {
+    "@es-js/vite-plugin-escss": "workspace:^",
+    "@es-js/vite-plugin-eshtml": "workspace:^"
+  },
+  "devDependencies": {
+    "@es-js/vite-plugin-esjs": "0.1.0-beta.1",
+    "prettier": "^3.3.3",
+    "prettier-plugin-escss": "workspace:^",
+    "prettier-plugin-eshtml": "0.0.1-alpha.0",
+    "prettier-plugin-esjs": "0.1.0-beta.1",
+    "vite": "^5.3.3"
+  },
+  "prettier": {
+    "plugins": [
+      "prettier-plugin-escss",
+      "prettier-plugin-eshtml",
+      "prettier-plugin-esjs"
+    ],
+    "singleQuote": true,
+    "semi": false
+  }
+}