claxed

Занятия с таким же стилем стиля компонентов
Просмотр демонстрации · Ошибка отчета · Функция запроса

О проекте

Идея рождается при использовании Tailwind CSS, который является очень полезным Framewrok, который дает нам все классы CSS для размеров, цветов, размахов. Однако это может быть грязно, если у вас есть много классов для печати внутри компонента. И не говоря уже о том, когда вы хотите условный класс на основе опоры?

Благодаря Claxed, сильно вдохновленным стилями-компонентами, мы можем сохранить наш DOM немного чище с помощью некоторых коммунальных услуг, таких как интерполяция реквизита внутри строки шаблона.

Установка

npm install claxed

или

yarn add claxed

Использование

Если вы знаете, стилизованные компоненты, этот синтаксис может быть вам уже знаком. Все, что вы вводите в строке шаблона, будет напечатано в атрибуте class HTML компонента. В следующем примере каждая строка является классом CSS.

 const Button = claxed . button `
  px-3
  py-2
` ;

const ButtonRed = claxed ( Button ) `
  ${ ( { border } ) => border && 'border' }
  text-red-500
` ;

const App = ( ) => (
  < div >
    < Button > Click me </ Button >
    < ButtonRed border > Click me </ ButtonRed >
  </ div >
) ;

// Note: All the falsy values are stripped from the output 

Дорожная карта

Смотрите открытые проблемы для списка предлагаемых функций (и известных вопросов).

Внося

Вклад - это то, что делает сообщество с открытым исходным кодом такой удивительной формой места, где учиться, быть вдохновленным и создавать. Любой вклад, которые вы вносите, высоко ценится .

1. Форк проект
2. Создайте филиал своей функции ( git checkout -b feature/AmazingFeature )
3. Сделайте свои изменения ( git commit -m 'Add some AmazingFeature' )
4. Толкайте к ветке ( git push origin feature/AmazingFeature )
5. Откройте запрос на тягу

Часто задаваемые вопросы

Соответствует ли порядок, в котором я вводите классы с Claxed для их специфики CSS?

Нет. Claxed отвечает только за сочетание классов CSS и поместить результат в атрибут HTML `класса` компонента. Если у вас есть проблема с спецификой, вы должны посмотреть, как классы определены в файле CSS

Лицензия

Распределено по лицензии MIT. Смотрите LICENSE для получения дополнительной информации.

Контакт

Томмазо Полетти - @Tomma5o

Ссылка проекта: https://github.com/tomma5o/claxed