swl-core 1.2.0

package/README.md

@@ -0,0 +1,182 @@
+# SWLS Core v1.2.0
+**Stellar Web Language Styling** — Linguagem de estilização em português que compila para CSS.
+
+```
+npm install -g swl-core
+swls build meusite.swls
+```
+
+---
+
+## Sintaxe
+
+Arquivos `.swls` usam parênteses para delimitar blocos e espaço como separador de propriedade/valor. Sem chaves, sem ponto-e-vírgula.
+
+```swls
+// Variáveis
+@cor-primaria: #0066FF
+@raio: 8px
+
+// Seletor com aninhamento
+(div.container:
+  largura 100%
+  max-w 1200px
+  margem auto
+
+  (button:
+    fundo @cor-primaria
+    cor branco
+    borda-raio @raio
+    cursor ponteiro
+
+    &:pairado
+      opacidade 0.85
+  )
+)
+
+// Componente reutilizável
+@componente cartao
+  fundo branco
+  padding 24px
+  borda-raio @raio
+  sombra 0 4px 12px rgba(0,0,0,0.15)
+
+// Animação
+@animar pulsar
+de:
+  opacidade 1
+para:
+  opacidade 0.5
+
+// Tema
+@tema escuro
+  @fundo #121212
+  @texto #f4f4f7
+
+// Media query
+@media (max-width: 768px)
+  (div.container:
+    padding 16px
+  )
+```
+
+---
+
+## CLI
+
+| Comando | Descrição |
+|---|---|
+| `swls build arquivo.swls` | Compila para CSS |
+| `swls build arquivo.swls -o saida.css` | Compila com saída definida |
+| `swls dev arquivo.swls` | Modo dev com HMR (porta 3000) |
+| `swls doctor` | Diagnóstico do ambiente |
+| `swls version` | Versão atual |
+
+---
+
+## Instalação
+
+```bash
+# Via npm (global)
+npm install -g swl-core
+
+# Via repositório
+git clone https://github.com/swls-lang/swl-core
+cd swl-core
+npm install
+npm link
+```
+
+---
+
+## Extensão VS Code
+
+A extensão está em `vscode-extension/`. Para instalar localmente:
+
+```bash
+cd vscode-extension
+npm install -g @vscode/vsce
+vsce package
+code --install-extension swls-language-support-1.2.0.vsix
+```
+
+A extensão inclui:
+- Syntax highlighting completo
+- Autocomplete de propriedades, valores e pseudo-estados
+- Hover com equivalente CSS
+- Snippets para blocos comuns
+- Ícone de arquivo `.swls`
+- Auto-indentação de blocos
+
+---
+
+## Dicionário de Propriedades
+
+| SWLS | CSS |
+|---|---|
+| `fundo` / `bg` | `background-color` |
+| `cor` | `color` |
+| `largura` / `w` | `width` |
+| `altura` / `h` | `height` |
+| `margem` / `m` | `margin` |
+| `padding` / `p` | `padding` |
+| `tamanho` | `font-size` |
+| `peso` | `font-weight` |
+| `familia` | `font-family` |
+| `exibicao` | `display` |
+| `posicao` | `position` |
+| `borda-raio` | `border-radius` |
+| `sombra` | `box-shadow` |
+| `opacidade` | `opacity` |
+| `transicao` | `transition` |
+| `transformacao` | `transform` |
+| `cursor` | `cursor` |
+| `colunas` | `grid-template-columns` |
+| `justificacao` | `justify-content` |
+| `alinhamento-item` | `align-items` |
+| `direcao` | `flex-direction` |
+| `indice-z` / `z` | `z-index` |
+
+**Valores traduzidos:** `centro`, `inicio`, `fim`, `distribuido`, `esticado`, `linha`, `coluna`, `relativa`, `absoluta`, `fixa`, `pegajosa`, `ponteiro`, `suave`, `linear`, `nenhum`, `visivel`, `escondido`, `bloco`, `inline`, `flex`, `grid`...
+
+**Cores:** `branco`, `preto`, `cinza`, `vermelho`, `azul`, `verde`, `amarelo`, `laranja`, `roxo`, `rosa`, `marrom`, `ouro`, `transparente`...
+
+**Pseudo-estados:** `&:pairado` (hover), `&:ativo` (active), `&:focado` (focus), `&:desabilitado` (disabled), `&:primeiro-filho`, `&:ultimo-filho`, `&:modo-escuro`, `&:antes`, `&:depois`...
+
+---
+
+## API (Node.js)
+
+```js
+const SWLSFramework = require("swl-core");
+
+const fw = new SWLSFramework("./estilos.swls");
+fw.build();               // produção
+fw.dev();                 // desenvolvimento com HMR
+
+// Plugin API
+fw.use({
+  beforeParse: (src) => src,
+  afterParse:  (ast) => ast,
+  afterGenerate: (css) => css,
+});
+```
+
+---
+
+## Publicação
+
+- **npm:** `npm publish`
+- **GitHub:** `https://github.com/swls-lang/swl-core`
+- **VS Code Marketplace:** `vsce publish` (requer conta Publisher)
+
+---
+
+## Limitações v1.2
+
+- Operações matemáticas inline (`@tamanho * 2`) não são calculadas
+- Prefixos de vendor (`-webkit-`, `-moz-`) devem ser escritos manualmente
+- Sem suporte a `calc()` nativo com variáveis SWLS
+
+## Licença
+MIT

package/bin/swls.js

@@ -0,0 +1,55 @@
+#!/usr/bin/env node
+
+const fs = require("fs");
+const path = require("path");
+const SWLSFramework = require("../lib/framework");
+
+const [,, command, ...rest] = process.argv;
+
+function resolveFile(arg) {
+  if (!arg) { console.error("❌ Arquivo não informado."); process.exit(1); }
+  const full = path.resolve(arg);
+  if (!fs.existsSync(full)) { console.error(`❌ Arquivo não encontrado: ${arg}`); process.exit(1); }
+  return full;
+}
+
+switch (command) {
+  case "build": {
+    const file = resolveFile(rest[0]);
+    const outIdx = rest.indexOf("-o");
+    const output = outIdx !== -1 ? rest[outIdx + 1] : null;
+    new SWLSFramework(file).build(output);
+    break;
+  }
+  case "dev": {
+    const file = resolveFile(rest[0]);
+    new SWLSFramework(file).dev();
+    break;
+  }
+  case "doctor": {
+    console.log("━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━");
+    console.log("🩺 SWLS Doctor — v1.2.0");
+    console.log("━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━");
+    [
+      ["Node.js", process.version],
+      ["Plataforma", process.platform],
+      ["Compilador", "OK"],
+      ["Dev Server", "OK"],
+    ].forEach(([k, v]) => console.log(` ✔ ${k.padEnd(20)} ${v}`));
+    console.log("━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━");
+    break;
+  }
+  case "version":
+    console.log("SWLS Core v1.2.0");
+    break;
+  default:
+    console.log(`
+SWLS Core — Stellar Web Language Styling v1.2.0
+
+Uso:
+  swls build <arquivo.swls> [-o saida.css]   Compila para CSS
+  swls dev   <arquivo.swls>                  Modo desenvolvimento com HMR
+  swls doctor                                Diagnóstico do ambiente
+  swls version                               Versão atual
+`);
+}

package/examples/completo.css

@@ -0,0 +1,138 @@
+:root[data-tema="escuro"] {
+}
+
+.cartao {
+  background-color: #FFFFFF;
+  padding: 24px;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+  box-sizing: border-box;
+}
+
+.cartao-destaque {
+  border-top: 4px solid #0066FF;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  background-color: #13141c;
+  color: #f4f4f7;
+  font: Arial, sans-serif;
+  font-size: 16px;
+  line-height: 1.6;
+}
+
+div.container {
+  width: 100%;
+  max-width: 1200px;
+  margin: auto;
+  padding: 0 24px;
+}
+
+nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 24px;
+  background-color: #1b1d2a;
+  border-bottom: 1px solid #2e3248;
+}
+
+a.nav-link {
+  color: #f4f4f7;
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 500;
+  transition: cor 0.2s ease;
+}
+
+a.nav-link:hover {
+  color: #0066FF;
+}
+
+section.hero {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 80px 24px;
+  text-align: center;
+}
+
+h1 {
+  font-size: 48px;
+  font-weight: 700;
+  color: #f4f4f7;
+  margin-bottom: 16px;
+}
+
+p.subtitulo {
+  font-size: 20px;
+  color: #a2a6b8;
+  max-width: 600px;
+  margin-bottom: 32px;
+}
+
+button.btn-primario {
+  background-color: #0066FF;
+  color: #FFFFFF;
+  padding: 14px 32px;
+  border: none;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: 0.2s ease;
+  box-shadow: 0 4px 14px rgba(0,102,255,0.4);
+}
+
+button.btn-primario:hover {
+  opacity: 0.85;
+  transform: scale(1.03);
+}
+
+button.btn-primario:active {
+  transform: scale(0.98);
+}
+
+button.btn-primario:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+@keyframes aparecer {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+div.animado {
+  animation: aparecer 0.4s ease-out;
+}
+
+@media (max-width: 768px) {
+  nav {
+    flex-direction: column;
+    gap: 16px;
+  }
+
+}
+
+section.hero {
+  padding: 40px 16px;
+}
+
+h1 {
+  font-size: 32px;
+}
+

package/examples/completo.swls

@@ -0,0 +1,142 @@
+// SWLS Core v1.2 — Exemplo Completo da Linguagem
+
+// ── Variáveis ─────────────────────────────────────────────────────────────────
+@cor-primaria: #0066FF
+@cor-fundo: #13141c
+@cor-texto: #f4f4f7
+@raio: 8px
+@sombra-padrao: 0 4px 12px rgba(0,0,0,0.2)
+
+// ── Tema Escuro ───────────────────────────────────────────────────────────────
+@tema escuro
+  @fundo #121212
+  @texto #f4f4f7
+  @superficie #1e1e2e
+
+// ── Componentes ───────────────────────────────────────────────────────────────
+@componente cartao
+  fundo branco
+  padding 24px
+  borda-raio @raio
+  sombra @sombra-padrao
+  conteudo-caixa borda
+
+@componente cartao-destaque herda cartao
+  borda-topo 4px solida @cor-primaria
+
+// ── Regras de Seletor ─────────────────────────────────────────────────────────
+(*:
+  margem 0
+  padding 0
+  conteudo-caixa borda
+)
+
+(body:
+  fundo @cor-fundo
+  cor @cor-texto
+  fonte Arial, sans-serif
+  tamanho 16px
+  altura-linha 1.6
+)
+
+(div.container:
+  largura 100%
+  max-w 1200px
+  margem auto
+  padding 0 24px
+)
+
+(nav:
+  exibicao flex
+  justificacao distribuido
+  alinhamento-item centro
+  padding 16px 24px
+  fundo #1b1d2a
+  borda-inferior 1px solida #2e3248
+
+  (a.nav-link:
+    cor @cor-texto
+    decoracao nenhuma
+    tamanho 14px
+    peso 500
+    transicao cor 0.2s suave
+
+    &:pairado
+      cor @cor-primaria
+  )
+)
+
+(section.hero:
+  exibicao flex
+  direcao coluna
+  alinhamento-item centro
+  justificacao centro
+  padding 80px 24px
+  alinhamento-texto centro
+
+  (h1:
+    tamanho 48px
+    peso 700
+    cor @cor-texto
+    margem-inferior 16px
+  )
+
+  (p.subtitulo:
+    tamanho 20px
+    cor #a2a6b8
+    max-w 600px
+    margem-inferior 32px
+  )
+
+  (button.btn-primario:
+    fundo @cor-primaria
+    cor branco
+    padding 14px 32px
+    borda nenhuma
+    borda-raio @raio
+    tamanho 16px
+    peso 600
+    cursor ponteiro
+    transicao 0.2s suave
+    sombra 0 4px 14px rgba(0,102,255,0.4)
+
+    &:pairado
+      opacidade 0.85
+      transformacao scale(1.03)
+
+    &:ativo
+      transformacao scale(0.98)
+
+    &:desabilitado
+      opacidade 0.5
+      cursor nao-permitido
+  )
+)
+
+// ── Animação ──────────────────────────────────────────────────────────────────
+@animar aparecer
+de:
+  opacidade 0
+  transformacao translateY(20px)
+para:
+  opacidade 1
+  transformacao translateY(0)
+
+(div.animado:
+  animar aparecer 0.4s suave-saida
+)
+
+// ── Responsividade ────────────────────────────────────────────────────────────
+@media (max-width: 768px)
+  (nav:
+    direcao coluna
+    gap 16px
+  )
+
+  (section.hero:
+    padding 40px 16px
+
+    (h1:
+      tamanho 32px
+    )
+  )

package/icons/swls.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
+  <defs>
+    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#0044cc"/>
+      <stop offset="100%" style="stop-color:#0066FF"/>
+    </linearGradient>
+  </defs>
+  <rect width="64" height="64" rx="10" fill="url(#bg)"/>
+  <text x="32" y="42" font-family="monospace" font-weight="bold" font-size="22" fill="white" text-anchor="middle">SW</text>
+  <rect x="8" y="48" width="48" height="3" rx="1.5" fill="rgba(255,255,255,0.4)"/>
+</svg>

package/index.js

@@ -0,0 +1 @@
+module.exports = require("./lib/framework");