@DenisIzmaylov почему PreJSS и PostJSS это два разных проекта? ? кажется одни и те же проблемы решают, ну prejss чуть больше

Уже по сути один :) В какой-то момент у нас на секунду было разное видение, но позже мыс Артуром на PreJSS сфокусировались. Он написал крутую штуку https://github.com/lttb/prejss-styles-loader для того, чтобы реализовать основную идею - подключение CSS-файлов в виде CSS-in-JS, используя PreJSS. На самом деле PreJSS - это платформа плюс экосистема. Ядро состоит из трёх элементров - PreJSS Styles Declaration, парсер CSS (по умолчанию PostCSS) и адаптер (по умолчанию CSS в JSS). Декларация стилей PreJSS - это как раз тот самый способ задавать стили через Literal Template Strings. Задача парсера - быстро распарсить блок CSS в JSS-объект. Задача PreJSS-адаптера - позволить сделать: 1. Препроцессинг CSS для любых, необходимых проекту, кастомизацияй - например, можно, на этом уровне применить конфигурацию приложения или обработать свой кастомный синтаксис. 2. Парсинг CSS в JSS, используя встроенные или любой кастомный парсер (их ведь на самом деле много). 3. Обработать полученные JSS для дальнейшего использования в любой JSS-библиотеки. Поэтому появились такие инструменты, которые используя PreJSS могут делать любую трансформацию любого CSS в любой CSS-in-JS: + prejss-loader для загрузки CSS стилей через webpack + prejss-cli для конвертации CSS-файлов в JS с JSS-объектами + babel-plugin-transform-prejss для трансформации сборки PreJSS-сигнатур в CSS-in-JS

суть в том, что мне хотелось бы знать, что какой-то StyledComponent предоставляет мне возможность изменять свойство color у кнопки primary, когда она hovered и не хочется при этом, создавая этот компонент, тратить много времени на это ну и кажется, что это возможно)

Вот это была бы очень позелная фича! Другой момент, что это сильно зависит от хост-системы рендеринга (конкретный браузер - например, с поддержкой или без поддержки Flex, React Native iOS, React Native Android, React Native Desktop, etc). Но опеделённо в эту сторону стоит поразвиваться - как правильно сделать систему инспекции стилей.

случайно в дискуссии (https://github.com/facebookincubator/create-react-app/issues/90#issuecomment-234637675) наткнулся на слова Абрамова ... we might want to migrate away from webpack in the future

@DenisIzmaylov я хочу погрузиться в PreJSS, но при первом взгляде мне не понравился boilerplate, много дефолт-кода, нельзя просто взять и подключить как те же styled, например

Вот это была бы очень позелная фича! Другой момент, что это сильно зависит от хост-системы рендеринга (конкретный браузер - например, с поддержкой или без поддержки Flex, React Native iOS, React Native Android, React Native Desktop, etc). Но опеделённо в эту сторону стоит поразвиваться - как правильно сделать систему инспекции стилей.

Когда снова в родной город приедешь? :)

о, крутой коммент в той же дискуссии в сторону Абрамова! I regret bringing this to your attention.

@DenisIzmaylov я хочу погрузиться в PreJSS, но при первом взгляде мне не понравился boilerplate, много дефолт-кода, нельзя просто взять и подключить как те же styled, например

Да на самом деле даже меньше, чем в styled, его вообще минимум: import preJSS from 'prejss' const mySexyStyles = preJSS` .sexy-button { color: super-sexy; } `; That's all. Ты в клубе. :)

Да на самом деле даже меньше, чем в styled, его вообще минимум: import preJSS from 'prejss' const mySexyStyles = preJSS` .sexy-button { color: super-sexy; } `; That's all. Ты в клубе. :)

а дальше?)

А дальше классический JSS API в зависимости от выбранной библиотеки :) Пока самая крутая - jss

Но если это React Native, то даже библиотека не нужна

возможно, вы имели в виду *прейсс*

Ну я вот не использовал jss, только css-modules, они очень меня устраивали, потому что это чистый сильный css, в котором и @media, и все тебе привычное. Хотел сразу на PreJSS прийти) а там загрузка, подключение, использование, вставка.

..

Ну я вот не использовал jss, только css-modules, они очень меня устраивали, потому что это чистый сильный css, в котором и @media, и все тебе привычное. Хотел сразу на PreJSS прийти) а там загрузка, подключение, использование, вставка.

с css-modules самый-самый простой переход - это заменить styles-лоадеры на prejss-styles-loader, а компоненты обернуть в injectSheet из react-jss. и в пропсах ты получишь те же classes, что были при css-modules, грубо говоря как-то так: было: import styles from './styles.css' const Comp = () => <div className={styles.app} /> export default Comp __ стало: import injectSheet from 'react-jss' import styles from './styles.css' const Comp = ({ classes }) => <div className={classes.app} /> export default injectSheet(styles)(Comp)

с css-modules самый-самый простой переход - это заменить styles-лоадеры на prejss-styles-loader, а компоненты обернуть в injectSheet из react-jss. и в пропсах ты получишь те же classes, что были при css-modules, грубо говоря как-то так: было: import styles from './styles.css' const Comp = () => <div className={styles.app} /> export default Comp __ стало: import injectSheet from 'react-jss' import styles from './styles.css' const Comp = ({ classes }) => <div className={classes.app} /> export default injectSheet(styles)(Comp)

Like a rock :)

Тут единственная проблема - сервер. У нас все приложения изоморфные с полной поддержкой SSR. Мало кто так делает, конечно, но для тех, кто делает - этот подход будет не совсем правильным, посольку нода не умеет работать с CSS семантически. Это можно хакать через require-hook или babel-runtime, но правильней будет сконвертить стили в JS. Для этого мы сделали: + https://github.com/axept/prejss-cli

с css-modules самый-самый простой переход - это заменить styles-лоадеры на prejss-styles-loader, а компоненты обернуть в injectSheet из react-jss. и в пропсах ты получишь те же classes, что были при css-modules, грубо говоря как-то так: было: import styles from './styles.css' const Comp = () => <div className={styles.app} /> export default Comp __ стало: import injectSheet from 'react-jss' import styles from './styles.css' const Comp = ({ classes }) => <div className={classes.app} /> export default injectSheet(styles)(Comp)

Только это немного противоречит документации. Там const Buttons = ({ button, ctaButton }) => ( и export default injectSheet(styles)(Buttons)

Блин, надо уже обновить доки :)

что именно делает injectSheet? какое свойство он добавляет?

что именно делает injectSheet? какое свойство он добавляет?

https://github.com/cssinjs/react-jss

и как это работает с остальными пропсами?

он рендерит стили при маунте компонента, гарантируя таким образом рендер только критикал цсс

https://github.com/cssinjs/react-jss

спасибо! там дока правильнее

хороший у вас репозиторий Денис

но вот от этой картинки мне стало плохо

я уже не успеваю учить все иконки)

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

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

я собстенно не против пока не попрбую критиковать права не имею)

ну я не про непосредственно jss, а современный фронтенд)

аа, ок)

но jss в том числе содействует, ибо стилизация становится еще проще)

ну субъективно я бы не сказал

я привык к post css в нем как-то все вкусно и привычно

я привык к post css в нем как-то все вкусно и привычно

для такого и делался prejss)) все тот же postcss, и можно вообще ничего не менять в воркфлоу, но при этом под капотом бенефиты jss)

но вот от этой картинки мне стало плохо

Боль от воспоминаний всех этих LESS, Bootstrap или что можно улучшить? :)

привеееет Failed to compile. Error in ./~/prejss/lib/index.js Module not found: 'prejss-postcss-parser' in ***/node_modules/prejss/lib @ ./~/prejss/lib/index.js 16:27-59

)))

Это при npm install?

модуль, конечно же, есть

yarn

это в CRA, установил сначала react-jss, потом решил и prejss наконец вставить. инсталл, старт — и вот

Блин, мы кажется с Yarn не тестили :)

нужно сделать фоллбэк на postjss)))

что-нибудь да сработает

Разве у Yarn есть какая-то особенность при установке зависимостей для пакетов?

https://github.com/axept/prejss/blob/master/package.json#L45

Он вот такие не умеет зависимости ставить?

Разве у Yarn есть какая-то особенность при установке зависимостей для пакетов?

сейчас жду, пока npm закончит свою доооолгую работу. у yarn вроде бы есть проблемы с кастомными пакетами типа прямых линков

Да, оно

Сейчас подправлю тогда

люди, которые живут на npm, скажите мне, пожалуйста, КАК ВЫ ТЕРПИТЕ??

Он вот такие не умеет зависимости ставить?

у меня норм ставит, у вас просто в репозитории lib нет

люди, которые живут на npm, скажите мне, пожалуйста, КАК ВЫ ТЕРПИТЕ??

изи

вводмшь npm i и идeшь курить

вводмшь npm i и идeшь курить

я не курю

я не курю

Идешь пить

я не курю

хорошая причина начать

Идешь пить

нe, это ужe можeт закончиться нe так радужно

а выглядит как "да"

ERROR: S client not available

блин. 10 минут ждать. результат тот же. @DenisIzmaylov

блин. 10 минут ждать. результат тот же. @DenisIzmaylov

скачай этот пакет из нпм) с пакетом из репо проблема в том, что в репо нет lib

$ ls node_modules/prejss-postcss-parser/ CHANGELOG.md LICENSE README.md package.json

очень смешно

сейчас жду, пока npm закончит свою доооолгую работу. у yarn вроде бы есть проблемы с кастомными пакетами типа прямых линков

fixed! :)

fixed! :)

и правда! спасибо)

$ ls node_modules/prejss-postcss-parser/ CHANGELOG.md LICENSE README.md package.json

Глюк при билде от Yarn :)

Глюк при билде от Yarn :)

так я потом npm'ом прошелся с нуля

Глюк при билде от Yarn :)

там была проблема не с ярн, а с тем, что выкачивался пакет из репозитория, в котором lib нет)

Проблема в конфиге travis - https://travis-ci.org/axept/prejss-postcss-parser

Failed to compile. Error in ./~/deasync/test.js Module not found: 'child_process' in ***/node_modules/deasync @ ./~/deasync/test.js 2:9-33 Error in ./~/require-from-string/index.js Module not found: 'module' in ***/node_modules/require-from-string @ ./~/require-from-string/index.js 3:13-30

Проблема в конфиге travis - https://travis-ci.org/axept/prejss-postcss-parser

Fixed :) Новая сборка пошла ttps://travis-ci.org/axept/prejss-postcss-parser

node 7.4.0 почему вообще test.js где-то в сборке используется... и почему не находит child_process... а про module вообще дикость

$ ls node_modules/prejss-postcss-parser/ CHANGELOG.md LICENSE README.md package.json

fixed: $ ls node_modules/prejss-postcss-parser CHANGELOG.md LICENSE README.md lib package.json

node 7.4.0 почему вообще test.js где-то в сборке используется... и почему не находит child_process... а про module вообще дикость

Там есть штука для "выпрямления" на сервере асинхронного PostCSS - deasync

Там есть штука для "выпрямления" на сервере асинхронного PostCSS - deasync

я так понимаю, проблема может быть в ноде, сейчас обновлюсь. но 7.4.0 — ни разу не старая версия) попробуйте на ней проверить

Не лакшери, конечно, но для большинства случаев работает. Для того, чтобы всё было совсем красиво - https://github.com/axept/prejss#performance-matters

но вот от этой картинки мне стало плохо

fixed :)

ЧТО ЗА НОЧЬ??? сломался eslint со standard'ом

Его мы не трогали :)

там было что-то странное с версиями и с ярном

люди, которые живут на npm, скажите мне, пожалуйста, КАК ВЫ ТЕРПИТЕ??

:)

Так, вроде всё пофиксил по PreJSS? :)

Или что-то ещё осталось?

Или что-то ещё осталось?

Я тут тоже ради любопытства поставил)

Увидел ошибку. Это было на странице basic example?

Увидел ошибку. Это было на странице basic example?

reply, please

Не, я в пет проект ставил

Удалил, потому что увиде, что и так обсуждали это выше)