Logo Windi CSS

История от @voorjaar

После двух месяцев разработки я очень рад сообщить вам, что Windi CSS перешла в стадию стабильной версии. С этого момента никаких деструктивных улучшений не будет, будьте уверены, что воспользуйтесь им.

На данный момент мы реализовали следующие функции:

Начало

Итак, теперь я думаю, мне следует поговорить о том, почему я делаю этот проект.

Всегда приятно использовать Tailwind для разработки интерфейса. Я пробовал другие интерфейсные фреймворки, но когда я встретил Tailwind, я никогда не оглядывался назад. Компонентизация - самая привлекательная часть для меня. Вы знаете, вы можете легко реализовать компонент html и поделиться им с другими.

Но когда я использовал sapper и Tailwind вместе, проблема возникла, прежде всего, в скорости. Когда мой проект стал больше и в нем было около десятков компонентов, начальная скорость компиляции достигла 3с, а скорость горячего обновления - более 1с. Это был очень неприятный опыт. Когда вы внесете изменения и поймете задержку, я верю, что вы сойдете с ума, как и я.

После этого я создал сообщение на Reddit и обнаружил, что кого-то интересует то же самое, и проект запустился. Так получилось, что я только что изучил TypeScript в ту ночь, поэтому решил принять его. Даже сейчас, когда я думаю об этом, это все еще кажется невероятным. Это первый проект TypeScript, который я сделал. Это действительно потрясающе.

Разработка

Я никогда не читал исходный код Tailwind CSS, по крайней мере, внимательно. Я просто посмотрел документацию Tailwind и задумался, как я могу решить ту же проблему и решить ее лучше. Вы знаете, философия Tailwind состоит в том, чтобы дать вам большой набор инструментов, вы выбираете инструменты, которые хотите использовать в нем, настраиваете его, а затем не забываете очищать его после использования. Вопрос в том, с таким количеством наборов инструментов, как мне узнать, что я использовал, какие результаты будут получены и действительно ли это будет устранено в конце? Итак, ответ очевиден: вы должны дать мне то, что я хочу. Это облегчит отладку, даже если что-то не так.

Я могу примерно рассказать о принципе windicss, который на самом деле является очень простым принципом синтаксического анализа. Вы даже можете понять это как простой язык программирования. Предположим, вы вводите имя класса, например, bg-green-300, Windi CSS сначала сопоставит bg-green-300 в статическом словаре. Если он существует, он вернет соответствующий css, а если он не существует, продолжит динамическое сопоставление. Во-первых, Windi CSS извлечет bg как ключ, чтобы определить, включен ли ключ в динамическую утилиту. Если это так, введите все className, чтобы узнать, будет ли сгенерирован css. В противном случае className будет проигнорирован и возвращен. Динамические утилиты используют методы обработки, совершенно отличные от Tailwind, то есть неограниченную сборку. Windicss будет основан на вашем вводе. Прежде всего, проверьте, является ли это статическим значением, указанным в конфигурации. Если нет, он угадает, какой тип основан на регулярных выражениях, а затем сгенерирует соответствующий CSS.

Что касается того, как работать с базовыми стилями, мы заранее выполнили некоторую обработку CSS, чтобы его можно было быстро отфильтровать с помощью тегов html, чтобы мы могли каждый раз создавать минимизированную предварительную проверку. Для базовых стилей, добавленных сторонними плагинами, мы, очевидно, не можем этого сделать, потому что это обременит разработчиков, поэтому мы используем css-selected для очистки стилей для базовых стилей сторонних плагинов. Поскольку это быстрая и небольшая очистка, она может быть выполнена в режиме реального времени.

Конечно, есть более подробные вопросы, вам нужно прочитать наш исходный код.

Будущее

Никогда не думал о замене Tailwind CSS. Помимо моего личного интереса, развитие этого проекта также является личной потребностью. Tailwind CSS сейчас можно считать гигантом, поскольку он имеет более 3000 коммитов и более 100 участников. Но когда такое достижение достигнуто, изменить трек - непростое дело. Tailwind CSS использует такие библиотеки, как lodash и postcss, и я думаю, что это не изменится. Перейти на машинописный текст? Не уверен, я думаю, им все равно должен нравиться их рабочий процесс.

В любом случае, я хотел бы поблагодарить разработчиков, которые разработали Tailwind, за такой хороший интерфейсный инструмент. Но я также надеюсь, что, когда вы столкнетесь с узким местом в скорости или захотите испытать некоторые новые функции, попробуйте Windi CSS.

Если вам нравится проект, поставьте ему звезду ⭐️, это будет для меня большим воодушевлением.