Особая благодарность автору идеи @akopyl Его статья по теме.
Идея нехитрая, но очень заманчивая — пишешь CSS, пишется и CSS и HTML одновременно. Это ускорит и упростит разработку, да и реализовать несложно — HTML очень простой язык, по большому счёту состоящий из тегов, атрибутов и текста. У него есть и некоторые специфические особенности, вроде карт импорта и shadow root, используемые нечасто, да и порой лишь с помощью скриптов, например, когда речь идёт о пользовательских элементах.
Попытка соединить функцию «разметки» и стилизации не выглядит сложной, уж очень простые языки.
Изначально идея имела реализации: раз, и даже две, но:
Одна (а то и обе, ибо ссылаются на API
document), насколько я понял, работают исключительно в рамках веб‑страницы, то есть, не могут быть использованы, как самодостаточные библиотеки.Криво реализуют текст в тегах — либо через псевдо‑элементы (sic!), либо через свойство
content, что уже лучше, но не совсем валидно (теоретически, может произойти коллизия, по этой логике добавлялиdata-*атрибуты для HTML).Писать атрибуты для элементов — сущий ад, ибо делается это только через селектор.
Автором статьи преследовалась цель создать улучшенный вариант библиотеки, которая работает вне рамок веб‑страницы (как отдельная библиотека), имеет усовершенствованные механизмы добавления тегов, текста… И по мелочи.
Что это и где достать
Проект на 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‑образные языки уже достали, да и громоздкие они для таких задач. Желательно без однобуквенных операторов.
Сейчас мне на такую задачу не хватит времени. Посмотрим, хватит ли у кого смелости, желания и умения.
