@wapgear https://github.com/css-modules/css-modules-require-hook

Вот простой пример

const hook = require('css-modules-require-hook'); hook({ generateScopedName: process.env.NODE_ENV === 'production' ? '[hash:base64:5]' : '[name]__[local]___[hash:base64:5]', });

Работает на серверном рендеринге и тестах

import { shallow } from 'enzyme'; import Loading from './'; describe('Loading component', () => { const element = shallow(<Loading />); it('render', () => { expect(element.find('div')).to.have.length(1); }); });

то есть можно спокойно писать тесты

В hook({ просто должно совпадать тоже самое, что у тебя в вебпакконфиге

поэтому там проверка на продакшен или нет

Народ, вот такой вопрос. У нас есть кодер, который делает html+CSS по макету, и есть js программист, который это все потом натягивает на реакт, коннектит с бекендом и так далее. Это вообще нормально, или это должен делать один человек? И второй вопрос - если так продолжать, то как бы сделать полегче синхронизацию html, который сверстал первый, с jsx в компонентах, в случае изменений? Щаз первый кричит, что он что-то поменял, второй открывает html файлы и переносит изменения руками в свои компоненты.

т.к. конфиги тоже разные могут быть, как у меня

const hook = require('css-modules-require-hook'); hook({ generateScopedName: process.env.NODE_ENV === 'production' ? '[hash:base64:5]' : '[name]__[local]___[hash:base64:5]', });

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

для дева длинный класс, чтобы проще было понять какой это компонент

для продакшена обычный хеш

Народ, вот такой вопрос. У нас есть кодер, который делает html+CSS по макету, и есть js программист, который это все потом натягивает на реакт, коннектит с бекендом и так далее. Это вообще нормально, или это должен делать один человек? И второй вопрос - если так продолжать, то как бы сделать полегче синхронизацию html, который сверстал первый, с jsx в компонентах, в случае изменений? Щаз первый кричит, что он что-то поменял, второй открывает html файлы и переносит изменения руками в свои компоненты.

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

ну, это вкусовщина

[name]__[local]___[hash:base64:5]', Типа тут не только хеш, а еще и имя.

Если же для дева и прода одно юзается, то тогда не нужны условия

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

это я просто скопипастил)

И собственно сервер рендерит без них

Что посоветует?

Е

extractTextPlugin

он собирает тебе bundle.css

@wapgear Посмотри вот этот простой проектик https://github.com/anorudes/redux-easy-boilerplate там много комментов и максимально упрощенный код

Народ, вот такой вопрос. У нас есть кодер, который делает html+CSS по макету, и есть js программист, который это все потом натягивает на реакт, коннектит с бекендом и так далее. Это вообще нормально, или это должен делать один человек? И второй вопрос - если так продолжать, то как бы сделать полегче синхронизацию html, который сверстал первый, с jsx в компонентах, в случае изменений? Щаз первый кричит, что он что-то поменял, второй открывает html файлы и переносит изменения руками в свои компоненты.

очень грустно, если на простецкую работу у тебя два человека

>Это вообще нормально, или это должен делать один человек?

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

Верстальщик должен верстать сразу компонент

желательно с тестами

реакт сам по себе элементарный

Спасибо. А он, то есть, часть работы фпрнтендера берет на

Себя?

Но я понял, надо их мерджить )

Часть работы? да, верстку. Только он верстает сразу там где нужно.

А второй как я понимаю может уже логику прикрутить.

Если ваш верстальщик еще освоит https://github.com/kadirahq/react-storybook или подобное, то цены ему не будет.

А вообще лучше с тестами конечно, но это влажные мечты.

желательно с тестами

А можно простой пример, где можно тесты увидеть?

https://semaphoreci.com/community/tutorials/testing-react-components-with-enzyme-and-mocha Ну как то так

Плюс где то еще видел тесты где просто запекается содержание дерева внутри теста, и если тест меняется это видно.

От фейсбука вроде, ток найти не могу.

Спасибо

Главное чтобы фронтендер заложил под это базу и обучил верстальщика.

Ага

Понятно, куда двигаться

Круто

вот у меня тоже про css-modules вопрос. как-то можно удобно использовать classnames/bind и переданный извне className? cx(my, klass, names, props.className) может облажаться, если, например, my === props.className

че-то не понятно. В чем проблема? если "my === props.className", то и будет нужный класс

Может кто-то подсказать по relay, graphql - насколько я понимаю он позволяет вытаскивать вложенные связи только как свойства объекта а вот если нужно например получить плоский массив всех комментариев во всех постах во всех бордах конкретного пользователя?

че-то не понятно. В чем проблема? если "my === props.className", то и будет нужный класс

ну вот есть логотип. внутри он как-то выглядит и сам это определяет. снаружи его надо позиционировать. он внутри .logo и снаружи .logo, но это разные css модули

внутрь передается className=“logo”, но он мапится на внутреннее именование модуля, что нам не нужно

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

ну вот есть логотип. внутри он как-то выглядит и сам это определяет. снаружи его надо позиционировать. он внутри .logo и снаружи .logo, но это разные css модули

проблема в общем-то серьёзная достаточно https://medium.com/@taion/the-problem-with-css-in-js-circa-mid-2016-14060e69bf68#.vx7ui0kjp https://github.com/css-modules/css-modules/issues/147

Может у кого-то завалялся готовый алгоритм решения? https://jsfiddle.net/frenzzy/8pou3j9f/

проблема в общем-то серьёзная достаточно https://medium.com/@taion/the-problem-with-css-in-js-circa-mid-2016-14060e69bf68#.vx7ui0kjp https://github.com/css-modules/css-modules/issues/147

Сколько полезного текста! Спасибо большое

всем добрый вечер, ребятки кто-то сталкивался с ресурсом где предлагают идеи для опен сорса?

про экстракт и бандл цсски я знаю

вопрос не в этом

Просто при сервер рендере я получаю код по типу <div> <span>Blah</span> </div>

а должно рендерится <div className="block_dDtevxcD"> <span className="block_sub_Sdjlqg">Blah</span> </div>

css modules hook как раз для этого

Телефон поправил слово. Вернул правильное)

ага

спасибо

гляну

@wapgear ты главное не самый первый пример в репе юзай

ERROR: S client not available

он просто позволяет не упасть при импорте ксс модулей. Но у тебя классы не поставятся, т.к. будут пустые строки

да надо этот хук рядом с бабель-регистер хуком припихнуть :D

и получится как раз дивы без классов

Там далее идет норм пример

а

окей

спасибо

const hook = require('css-modules-require-hook'); hook({ generateScopedName: '[name]__[local]___[hash:base64:5]', });

а нет, он как раз первый

может изменили readme) давно смотрел

я помнится какой-то пример попробовал на последних нотах терпения

Он не сработал => я сгорел => код остался без классов

ваще все эти хуки крутая тема

require('asset-require-hook')({ extensions: ['jpg', 'png'], });

я еще такое юзаю

чтобы не падало на require картинок)

тоже попробую

ща хардкорю для бабеля

require.extention['css'] = () => return;

и так для всех расширений

Но чувствую что херня идея

Можешь еще под конец добавить babel-plugin-webpack-alias, чтобы совсем идеально было) Это для вебпакалиасов. Три основные проблемы при серверном рендеринге - картинки, вебпакалиасы и стили)

require.extention['css'] = () => return;

да зачем, заюзай тот хук. он же простой

да уже понял

завтра буду пробовать, опять заказчика обрадую

И элементы с классами будут. если тупо игнорить импорт стилей, то тогда без классов будет

:)

Бедолага

Купил себе курс какой-то по редаксу

чтобы сервер рендер запилить

А я с ним неделю не общался, сюрприз готовил

В итоге запушил ему сервер рендер, парень чуть от счастья не усцался