DRY-фреймворк: продолжение

Особая благодарность автору идеи @akopyl Его статья по теме.

Идея нехитрая, но очень заманчивая — пишешь CSS, пишется и CSS и HTML одновременно. Это ускорит и упростит разработку, да и реализовать несложно — HTML очень простой язык, по большому счёту состоящий из тегов, атрибутов и текста. У него есть и некоторые специфические особенности, вроде карт импорта и shadow root, используемые нечасто, да и порой лишь с помощью скриптов, например, когда речь идёт о пользовательских элементах.
Попытка соединить функцию «разметки» и стилизации не выглядит сложной, уж очень простые языки.

Изначально идея имела реализации: раз, и даже две, но:

1. Одна (а то и обе, ибо ссылаются на API document), насколько я понял, работают исключительно в рамках веб‑страницы, то есть, не могут быть использованы, как самодостаточные библиотеки.

2. Криво реализуют текст в тегах — либо через псевдо‑элементы (sic!), либо через свойство content, что уже лучше, но не совсем валидно (теоретически, может произойти коллизия, по этой логике добавляли data-* атрибуты для HTML).

3. Писать атрибуты для элементов — сущий ад, ибо делается это только через селектор.

Автором статьи преследовалась цель создать улучшенный вариант библиотеки, которая работает вне рамок веб‑страницы (как отдельная библиотека), имеет усовершенствованные механизмы добавления тегов, текста… И по мелочи.

Что это и где достать

Проект на npm и GitHub.
Суть библиотеки в том, чтобы конвертировать это:

section#some-id {
  --text: 'Это текст, товарищ!';
  --attr-title: 'Заголовок';
  background: red;
  color: aliceblue;
}
section#some-id header[data-attribute='v'] {
  --text: 'Это текст шапки';
  color: blue;
}
section#some-id span {
  --text: 'Это внутренний текст';
  --text-after: 'А это текст после';
  color: peru;
}

В это:

<section id="some-id" title="Заголовок">
  Это текст, товарищ!
  <header data-attribute="v">Это текст шапки</header>
  <span> Это внутренний текст </span>А это текст после
</section>

Далее — принцип работы библиотеки невкратце.

Элементы

Создать элемент можно через селектор:

div.classname#id[attr-1][attr-2='v'] {
  /* Ни одна из частей селектора обязательной не является */
  /* Но хоть что-то нужно оставить */
}

div {}
div span {
  /* Поддерживается вложенность */
}

<div id="id" class="classname" attr-1 attr-2="v"></div>

<div>
  <span></span>
</div>

Впрочем, порой нужно добавить стили, но не добавлять элемент. Для этого добавьте в селектор одно из:

• Псевдо‑класс

• Псевдо‑элемент

• Один из этих селекторов: *, +, >, ||, |, ~

• Или оберните в @at-rule

Пример — эти селекторы будут проигнорированы:

> div.classname#id[attr-1][attr-2='v'] {
}
div span * {
}
div::before {
  /* Да, и этот тоже */
}
div:not(:has(span)) {
  /* И этот тоже! */
}
@container (width > 1440px) {
  span[data-a='Этот элемент будет проигнорирован тоже'] {}
}

Текст и атрибуты

Атрибуты можно задать через селектор (бывает полезно при стилизации), а можно через кастомные свойства --attr-* и --attrs

/* В селекторе */
a[title='Title!']{
  
  /* Точечно (внимание на то, что после attr-) */
  --attr-href:'./index.html';
  
  /* И массово! */
  --attrs:'target="_self" rel="noopener noreferrer"';
}

<a title="Title!"
   href="./index.html"
   target="_self"
   rel="noopener noreferrer"
></a>

Вписать текст в элемент не проблема - через специальное кастомное свойство:

div {
  --text: 'И вновь продолжается бой';
}

<div> И вновь продолжается бой </div>

Если нужно вставить тег посреди текста, придётся немного вывернуться.
Технически, можно просто вписать тег в переменную текста:

div { --text: 'Никогда <span>не</span> делайте так!'; }

Но, как и указано, лучше так не делать.
Для этого есть специальные кастомные свойства, позволяющие вписать текст до и после тега:

div {
  --text: 'Текст внутри div';
}
div span {
  --text: 'Это текст внутри';
  --text-before: '| до тега';
  --text-after: '| после тега';
}

<div>
  Текст внутри div | до тега<span> Это текст внутри </span>| после тега
</div>

API

Так‑с, с возможностями понятно, теперь об API.
Самый минимум для запуска выглядит так:

import { CssToHtml } from 'css2html'

let result = new CssToHtml({ css: "div{}", })
console.log(result.outputHTML)

Этот код выводит в терминал/консоль результат обработки простейшего CSS из одного тега.
Но это, конечно, не всё, это же минимум.

Для записи html непосредственно в файл, добавьте параметр write
(Внимание! Весь файл будет перезаписан)

new CssToHtml({
 ...,
  write: {
    in: "Ваш_путь_к_html_файлу",
  },
})

Однако, есть один нюанс. Дело в том, что html имеет некоторый функционал, который через css передать так трудно, что лучше не пытаться. Например — скрипты написанные прямо в HTML или карты импорта.

А по умолчанию файл перезаписывается полностью, что ведёт к утрате бесценного кода, который не описать нормально в рамках css. В таких случаях нужно указывать конкретно, куда писать, вместо перезаписи всего.
С помощью параметров after и before как раз это и можно сделать — указывается область, которая будет доступна для перезаписи.

new CssToHtml({
  ...,
  write: {
    in: "Ваш_путь_к_html_файлу",
    after: "<body>",
    before: "</body>",
  },
})

А ещё, HTML который создаёт библиотека кое‑как форматируется. За это отвечает плагин js‑beatify, которому можно передать параметры:

new CssToHtml({
  ...,
  formatterOptions: {
    indent_size: 2,
  },
})

Вот и всё!
Но мне есть о чём порассуждать помимо библиотеки, ибо идея совмещения возможностей языков заманчиво выгодна.

Нечто большее

Попытки объединить разметку, стилизацию и даже скрипты предпринимались неоднократно. JSX, описание стилей через JS‑объект, даже Tailwind по сути занимается встраиванием стилей в HTML, брр…
Tailwind достоин отдельных тёплых слов, а по поводу остальных — попытки достойные, но результат недостаточный — они не объединяют. Они, грубо говоря, позволяют написать всё «в одну кучу» за счёт разбиения на зоны того или иного языка внутри одного файла. Это как взять кирпичи, бетон, стекло и пытаться сделать из них цельную стену.

Эта библиотека— попытка свести к минимуму или вовсе отказаться от одного из инструментов фронт‑энд разработки — HTML, перенеся его функции на другой инструмент — CSS. Можно пойти ещё дальше (за пределами этой библиотеки, естественно), соединив функции разметки, стилизации и скриптов — получился бы этакий единый язык веб‑страниц (название временное, придумано на "ход"у).

Очень большой соблазн повторить JSX — он кажется подходящим, но нет. Помимо причин, описанных выше, он слишком «жёсткий» для стилизации (либо через строки, либо через объекты, где селекторы в кавычках — отдельный «шедевр»), а попытки впилить в него ещё и CSS в чистом виде сделают его ещё больше походящим на кучу стройматериала.

Как и автор идеи этой библиотеки, я приведу свои мысли. На этот раз — по поводу языка, которого ещё нет.

• Менять интернет из‑за нового языка никто не будет, ломать совместимость — последнее дело для таких больших структур. Лучше всего делать язык как препроцессор.

• Язык должен одновременно описывать стили, разметку и логику используя одну лексику и грамматику, без разбиения на «диалекты».

• Стоит вдохновиться чем-нибудь вроде 11l. Честно, C‑образные языки уже достали, да и громоздкие они для таких задач. Желательно без однобуквенных операторов.

Сейчас мне на такую задачу не хватит времени. Посмотрим, хватит ли у кого смелости, желания и умения.