ether-code 0.3.8 → 0.3.9

package/cli/ether.js

@@ -6,7 +6,7 @@ const http = require('http')
 const { EtherCompiler } = require('./compiler')
 const { Watcher } = require('./watcher')
 
-const VERSION = '0.3.8'
+const VERSION = '0.3.9'
 
 const COLORS = {
   reset: '\x1b[0m',
@@ -76,330 +76,282 @@ const FAVICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 499 50
   <path fill="url(#f3)" d="M213.282,235.909c14.12-20.019,28.129-36.342,31.945-40.798c5.362-6.26,5.762-5.197,8.629-5.197c2.869,0,132.714,0.003,132.714,0.003s2.916-0.469,4.863,1.864c1.029,1.235-0.298,5.654-0.298,5.654l-9.552,40.332c0,0-1.318,5.72-6.366,5.649C334.696,242.847,208.748,250.903,213.282,235.909"/>
 </svg>`
 
-const STYLES_CSS = `:root {
-  --color-primary: #6366f1;
-  --color-secondary: #8b5cf6;
-  --color-accent: #06b6d4;
-  --color-bg: #16162a;
-  --color-bg-light: #1e1e3a;
-  --color-surface: #252545;
-  --color-text: #e2e8f0;
-  --color-text-muted: #94a3b8;
-}
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  font-family: 'Inter', system-ui, -apple-system, sans-serif;
-  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-light) 50%, var(--color-bg) 100%);
-  color: var(--color-text);
-  line-height: 1.6;
-  min-height: 100vh;
-}
-
-.hero {
-  min-height: 100vh;
-  position: relative;
-  overflow: hidden;
-}
-
-.hero::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: 
-    radial-gradient(ellipse at 20% 20%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
-    radial-gradient(ellipse at 80% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
-    radial-gradient(ellipse at 50% 50%, rgba(6, 182, 212, 0.05) 0%, transparent 70%);
-  pointer-events: none;
-}
-
-.navbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1.25rem 5%;
-  position: fixed;
-  width: 100%;
-  top: 0;
-  z-index: 100;
-  background: rgba(22, 22, 42, 0.85);
-  backdrop-filter: blur(12px);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-}
-
-.logo {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: var(--color-text);
-  text-decoration: none;
-}
-
-.logo-icon {
-  width: 2.5rem;
-  height: 2.5rem;
-}
-
-.nav-links {
-  display: flex;
-  list-style: none;
-  gap: 2.5rem;
-  margin-left: auto;
-  padding-right: 1rem;
-}
-
-.nav-links a {
-  color: var(--color-text-muted);
-  text-decoration: none;
-  font-weight: 500;
-  font-size: 0.95rem;
-  transition: color 0.2s ease;
-}
-
-.nav-links a:hover {
-  color: var(--color-accent);
-}
-
-.hero-content {
-  position: relative;
-  text-align: center;
-  padding: 10rem 5% 6rem;
-  max-width: 900px;
-  margin: 0 auto;
-}
-
-.hero-title {
-  font-size: 4rem;
-  font-weight: 800;
-  margin-bottom: 1.5rem;
-  line-height: 1.1;
-  letter-spacing: -0.02em;
-}
-
-.gradient-text {
-  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 50%, var(--color-secondary) 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-.hero-subtitle {
-  font-size: 1.25rem;
-  color: var(--color-text-muted);
-  margin-bottom: 2.5rem;
-  max-width: 600px;
-  margin-left: auto;
-  margin-right: auto;
-  line-height: 1.7;
-}
-
-.hero-buttons {
-  display: flex;
-  gap: 1rem;
-  justify-content: center;
-  flex-wrap: wrap;
-}
-
-.btn {
-  display: inline-flex;
-  align-items: center;
-  padding: 0.9rem 2rem;
-  border-radius: 0.75rem;
-  font-size: 1rem;
-  font-weight: 600;
-  text-decoration: none;
-  transition: all 0.2s ease;
-  border: none;
-  cursor: pointer;
-}
-
-.btn-primary {
-  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
-  color: white;
-  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
-}
-
-.btn-primary:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
-}
-
-.btn-secondary {
-  background: rgba(255, 255, 255, 0.05);
-  color: var(--color-text);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.btn-secondary:hover {
-  background: rgba(255, 255, 255, 0.1);
-  border-color: rgba(255, 255, 255, 0.2);
-}
-
-.features {
-  padding: 6rem 5%;
-  position: relative;
-}
-
-.section-title {
-  text-align: center;
-  font-size: 2.5rem;
-  font-weight: 700;
-  margin-bottom: 3.5rem;
-  letter-spacing: -0.01em;
-}
-
-.features-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 1.5rem;
-  max-width: 1200px;
-  margin: 0 auto;
-}
-
-.feature-card {
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  padding: 2rem;
-  border-radius: 1rem;
-  text-align: center;
-  transition: all 0.3s ease;
-}
-
-.feature-card:hover {
-  transform: translateY(-4px);
-  background: rgba(255, 255, 255, 0.05);
-  border-color: rgba(99, 102, 241, 0.3);
-  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
-}
-
-.feature-icon {
-  font-size: 2.5rem;
-  margin-bottom: 1rem;
-}
-
-.feature-card h3 {
-  margin-bottom: 0.75rem;
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: var(--color-text);
-}
-
-.feature-card p {
-  color: var(--color-text-muted);
-  font-size: 0.95rem;
-  line-height: 1.6;
-}
-
-.examples {
-  padding: 6rem 5%;
-  background: var(--color-bg-light);
-}
-
-.code-comparison {
-  display: flex;
-  align-items: stretch;
-  justify-content: center;
-  gap: 1.5rem;
-  max-width: 900px;
-  margin: 0 auto;
-}
-
-.code-block {
-  background: var(--color-bg);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 1rem;
-  overflow: hidden;
-  flex: 1;
-  max-width: 400px;
-}
-
-.code-header {
-  background: rgba(99, 102, 241, 0.15);
-  padding: 0.75rem 1rem;
-  font-weight: 600;
-  font-size: 0.85rem;
-  color: var(--color-accent);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-}
-
-.code-block pre {
-  padding: 1.25rem;
-  margin: 0;
-  overflow-x: auto;
-}
-
-.code-block code {
-  font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
-  font-size: 0.8rem;
-  line-height: 1.6;
-  color: var(--color-text-muted);
-  white-space: pre;
-  display: block;
-}
-
-.code-arrow {
-  display: flex;
-  align-items: center;
-  font-size: 1.5rem;
-  color: var(--color-primary);
-  padding: 0 0.5rem;
-}
-
-.footer {
-  text-align: center;
-  padding: 3rem 5%;
-  background: var(--color-bg);
-  border-top: 1px solid rgba(255, 255, 255, 0.05);
-}
-
-.footer p {
-  color: var(--color-text-muted);
-}
-
-.heart {
-  color: #ef4444;
-}
-
-.copyright {
-  margin-top: 0.5rem;
-  font-size: 0.875rem;
-  opacity: 0.7;
-}
-
-@media (max-width: 768px) {
-  .hero-title {
-    font-size: 2.5rem;
-  }
-  
-  .nav-links {
-    display: none;
-  }
-  
-  .code-comparison {
-    flex-direction: column;
-    align-items: center;
-  }
-  
-  .code-block {
-    max-width: 100%;
-    width: 100%;
-  }
-  
-  .code-arrow {
-    transform: rotate(90deg);
-    padding: 1rem 0;
-  }
-}
+const STYLES_ETH = `// cible: css
+
+:root
+  color-primary: #6366f1
+  color-secondary: #8b5cf6
+  color-accent: #06b6d4
+  color-bg: #16162a
+  color-bg-light: #1e1e3a
+  color-surface: #252545
+  color-text: #e2e8f0
+  color-text-muted: #94a3b8
+
+*
+  marge: 0
+  remplissage: 0
+  modele-boite: border-box
+
+corps
+  famille-police: Inter, system-ui, -apple-system, sans-serif
+  fond: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-light) 50%, var(--color-bg) 100%)
+  couleur: var(--color-text)
+  hauteur-ligne: 1.6
+  min-hauteur: 100vh
+
+.hero
+  min-hauteur: 100vh
+  position: relative
+  debordement: hidden
+
+.hero::before
+  contenu: ""
+  position: absolute
+  haut: 0
+  gauche: 0
+  droite: 0
+  bas: 0
+  fond: radial-gradient(ellipse at 20% 20%, rgba(99, 102, 241, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(6, 182, 212, 0.05) 0%, transparent 70%)
+  evenements-pointeur: none
+
+.navbar
+  affichage: flex
+  justifier-contenu: space-between
+  aligner-elements: center
+  remplissage: 1.25rem 5%
+  position: fixed
+  largeur: 100%
+  haut: 0
+  z-index: 100
+  fond: rgba(22, 22, 42, 0.85)
+  flou-fond: blur(12px)
+  bordure-bas: 1px solid rgba(255, 255, 255, 0.05)
+
+.logo
+  affichage: flex
+  aligner-elements: center
+  ecart: 0.75rem
+  taille-police: 1.5rem
+  poids-police: 700
+  couleur: var(--color-text)
+  decoration-texte: none
+
+.logo-icon
+  largeur: 2.5rem
+  hauteur: 2.5rem
+
+.nav-links
+  affichage: flex
+  liste-style: none
+  ecart: 2.5rem
+  marge-gauche: auto
+  remplissage-droite: 1rem
+
+.nav-links lien
+  couleur: var(--color-text-muted)
+  decoration-texte: none
+  poids-police: 500
+  taille-police: 0.95rem
+  transition: color 0.2s ease
+
+.nav-links lien:hover
+  couleur: var(--color-accent)
+
+.hero-content
+  position: relative
+  alignement-texte: center
+  remplissage: 10rem 5% 6rem
+  max-largeur: 900px
+  marge: 0 auto
+
+.hero-title
+  taille-police: 4rem
+  poids-police: 800
+  marge-bas: 1.5rem
+  hauteur-ligne: 1.1
+  espacement-lettres: -0.02em
+
+.gradient-text
+  fond: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 50%, var(--color-secondary) 100%)
+  decoupe-fond: text
+  couleur-remplissage-texte: transparent
+
+.hero-subtitle
+  taille-police: 1.25rem
+  couleur: var(--color-text-muted)
+  marge-bas: 2.5rem
+  max-largeur: 600px
+  marge-gauche: auto
+  marge-droite: auto
+  hauteur-ligne: 1.7
+
+.hero-buttons
+  affichage: flex
+  ecart: 1rem
+  justifier-contenu: center
+  enveloppe-flex: wrap
+
+.btn
+  affichage: inline-flex
+  aligner-elements: center
+  remplissage: 0.9rem 2rem
+  rayon-bordure: 0.75rem
+  taille-police: 1rem
+  poids-police: 600
+  decoration-texte: none
+  transition: all 0.2s ease
+  bordure: none
+  curseur: pointer
+
+.btn-primary
+  fond: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%)
+  couleur: white
+  ombre-boite: 0 4px 15px rgba(99, 102, 241, 0.3)
+
+.btn-primary:hover
+  transformation: translateY(-2px)
+  ombre-boite: 0 8px 25px rgba(99, 102, 241, 0.4)
+
+.btn-secondary
+  fond: rgba(255, 255, 255, 0.05)
+  couleur: var(--color-text)
+  bordure: 1px solid rgba(255, 255, 255, 0.1)
+
+.btn-secondary:hover
+  fond: rgba(255, 255, 255, 0.1)
+  couleur-bordure: rgba(255, 255, 255, 0.2)
+
+.features
+  remplissage: 6rem 5%
+  position: relative
+
+.section-title
+  alignement-texte: center
+  taille-police: 2.5rem
+  poids-police: 700
+  marge-bas: 3.5rem
+  espacement-lettres: -0.01em
+
+.features-grid
+  affichage: grid
+  colonnes-grille: repeat(auto-fit, minmax(280px, 1fr))
+  ecart: 1.5rem
+  max-largeur: 1200px
+  marge: 0 auto
+
+.feature-card
+  fond: rgba(255, 255, 255, 0.03)
+  bordure: 1px solid rgba(255, 255, 255, 0.06)
+  remplissage: 2rem
+  rayon-bordure: 1rem
+  alignement-texte: center
+  transition: all 0.3s ease
+
+.feature-card:hover
+  transformation: translateY(-4px)
+  fond: rgba(255, 255, 255, 0.05)
+  couleur-bordure: rgba(99, 102, 241, 0.3)
+  ombre-boite: 0 20px 40px rgba(0, 0, 0, 0.2)
+
+.feature-icon
+  taille-police: 2.5rem
+  marge-bas: 1rem
+
+.feature-card titre3
+  marge-bas: 0.75rem
+  taille-police: 1.25rem
+  poids-police: 600
+  couleur: var(--color-text)
+
+.feature-card paragraphe
+  couleur: var(--color-text-muted)
+  taille-police: 0.95rem
+  hauteur-ligne: 1.6
+
+.examples
+  remplissage: 6rem 5%
+  fond: var(--color-bg-light)
+
+.code-comparison
+  affichage: flex
+  aligner-elements: stretch
+  justifier-contenu: center
+  ecart: 1.5rem
+  max-largeur: 900px
+  marge: 0 auto
+
+.code-block
+  fond: var(--color-bg)
+  bordure: 1px solid rgba(255, 255, 255, 0.08)
+  rayon-bordure: 1rem
+  debordement: hidden
+  flex: 1
+  max-largeur: 400px
+
+.code-header
+  fond: rgba(99, 102, 241, 0.15)
+  remplissage: 0.75rem 1rem
+  poids-police: 600
+  taille-police: 0.85rem
+  couleur: var(--color-accent)
+  bordure-bas: 1px solid rgba(255, 255, 255, 0.05)
+
+.code-block pre
+  remplissage: 1.25rem
+  marge: 0
+  debordement-x: auto
+
+.code-block code
+  famille-police: "Fira Code", Monaco, Consolas, monospace
+  taille-police: 0.8rem
+  hauteur-ligne: 1.6
+  couleur: var(--color-text-muted)
+  espace-blanc: pre
+  affichage: block
+
+.code-arrow
+  affichage: flex
+  aligner-elements: center
+  taille-police: 1.5rem
+  couleur: var(--color-primary)
+  remplissage: 0 0.5rem
+
+.footer
+  alignement-texte: center
+  remplissage: 3rem 5%
+  fond: var(--color-bg)
+  bordure-haut: 1px solid rgba(255, 255, 255, 0.05)
+
+.footer paragraphe
+  couleur: var(--color-text-muted)
+
+.heart
+  couleur: #ef4444
+
+.copyright
+  marge-haut: 0.5rem
+  taille-police: 0.875rem
+  opacite: 0.7
+
+@media (max-width: 768px)
+  .hero-title
+    taille-police: 2.5rem
+  
+  .nav-links
+    affichage: none
+  
+  .code-comparison
+    direction-flex: column
+    aligner-elements: center
+  
+  .code-block
+    max-largeur: 100%
+    largeur: 100%
+  
+  .code-arrow
+    transformation: rotate(90deg)
+    remplissage: 1rem 0
 `
 
 function log(msg, color) {
@@ -719,14 +671,14 @@ document
 
   const appContent = `// cible: js
 
-console.log("Ether v0.3.5 ready!")
+console.log("Ether v0.3.8 ready!")
 `
 
   const packageContent = '{\n  "name": "mon-projet-ether",\n  "version": "1.0.0",\n  "scripts": {\n    "dev": "ether dev",\n    "build": "ether build"\n  }\n}\n'
 
   fs.writeFileSync(path.join(projectDir, 'ether.config.js'), configContent)
   fs.writeFileSync(path.join(srcDir, 'index.eth'), indexContent)
-  fs.writeFileSync(path.join(distDir, 'styles.css'), STYLES_CSS)
+  fs.writeFileSync(path.join(srcDir, 'styles.eth'), STYLES_ETH)
   fs.writeFileSync(path.join(srcDir, 'app.eth'), appContent)
   fs.writeFileSync(path.join(projectDir, 'package.json'), packageContent)
   
@@ -734,8 +686,8 @@ console.log("Ether v0.3.5 ready!")
   console.log('')
   logInfo('Structure creee:')
   console.log('  src/index.eth')
+  console.log('  src/styles.eth')
   console.log('  src/app.eth')
-  console.log('  dist/styles.css')
   console.log('  public/images/logo.svg')
   console.log('  public/favicon.svg')
   console.log('  public/videos/')

package/generators/css-generator.js

@@ -244,6 +244,7 @@ class CSSGenerator {
       'attachement-fond': 'background-attachment',
       'origine-fond': 'background-origin',
       'decoupe-fond': 'background-clip',
+      'couleur-remplissage-texte': '-webkit-text-fill-color',
       'selection-utilisateur': 'user-select',
       'evenements-pointeur': 'pointer-events',
       'accrochage-defilement': 'scroll-snap-type',
@@ -554,6 +555,18 @@ class CSSGenerator {
       value += ' !important'
     }
 
+    const needsWebkitPrefix = [
+      'background-clip',
+      'box-decoration-break',
+      'text-stroke',
+      'text-stroke-width',
+      'text-stroke-color'
+    ]
+
+    if (needsWebkitPrefix.includes(property) && !property.startsWith('-webkit-')) {
+      this.writeLine(`-webkit-${property}: ${value};`)
+    }
+
     this.writeLine(`${property}: ${value};`)
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ether-code",
-  "version": "0.3.8",
+  "version": "0.3.9",
   "description": "Ether - Le langage intentionnel",
   "main": "cli/compiler.js",
   "bin": {