React で CSS カプセル化の可能性を考える
3 likes4,265 views
2016/10/15 秋の JavaScript 祭 in mixi でのスライドです。 https://vwxyutarooo.github.io/slide-js-fes_161015/#/
![Emulated
@Component({
selector: 'my-app',
encapsulation: ViewEncapsulation.Emulated,
styles: [`
.test { padding: 10px; }
`],
template: `
<div class="test">Test</div>
`
})
<body>
<my-app _nghost-cmy-1="">
<div _ngcontent-cmy-1="" class="test">Test</div>
</my-app>
</body>
.test[_ngcontent-cmy-1] {
padding: 10px;
}](https://image.slidesharecdn.com/reveal-161016032321/85/React-CSS-15-320.jpg)
![<style scoped>
.example {
color: red;
}
</style>
<template>
<div class="example">hi</div>
</template>
↓
<style>
.example[_v-f3f3eg9] {
color: red;
}
</style>
<template>
<div class="example" _v-f3f3eg9>hi</div>
</template>](https://image.slidesharecdn.com/reveal-161016032321/85/React-CSS-20-320.jpg)
![var Radium = require('radium');
var React = require('react');
var color = require('color');
@Radium
class Button extends React.Component {
render() {
return (
<button style={[ styles.base, styles[this.props.kind] ]}></button>
);
}
}
var styles = {
base: {
color: '#fff',
':hover': {
background: color('#0074d9').lighten(0.2).hexString()
}
},
...
};](https://image.slidesharecdn.com/reveal-161016032321/85/React-CSS-45-320.jpg)
![Webpack
{
test: /.css$/,
loaders: [
'style',
'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]
'postcss-loader',
]
}
Browserify
modularify
postcss‑modules](https://image.slidesharecdn.com/reveal-161016032321/85/React-CSS-55-320.jpg)
React で CSS カプセル化の可能性を考える
- 1. 秋のJavaScript 祭in mixi React で CSS カプセル化の可能性を考える
- 10. フロントエンド意外お断り
- 12. ShadowDOM(ShadowBoundary) <div> <style> .title { color: #444; } </style> <h3 class="title">Item name</h3> </div>
- 13. ScopedCSS <div> <style scoped> .title { color: #444; } </style> <h3 class="title">Item name</h3> </div>
- 15. Emulated @Component({ selector: 'my-app', encapsulation: ViewEncapsulation.Emulated, styles: [` .test { padding: 10px; } `], template: ` <div class="test">Test</div> ` }) <body> <my-app _nghost-cmy-1=""> <div _ngcontent-cmy-1="" class="test">Test</div> </my-app> </body> .test[_ngcontent-cmy-1] { padding: 10px; }
- 16. Native =ShadowDOM <body> <my-app> ▾ #shadow-root <style> .test { padding: 10px; } </style> <div class="test"> <div>Test</div> </div> </my-app> </body>
- 17. <my-tag> <h3>{ opts.title }</h3> <style scoped> :scope { display: block; border: 2px } h3 { color: blue } </style> </my-tag> ↓ <style> my-tag { display: block; border: 2px } my-tag h3 { color: blue } </style>
- 19. vue‑loader
- 20. <style scoped> .example { color: red; } </style> <template> <div class="example">hi</div> </template> ↓ <style> .example[_v-f3f3eg9] { color: red; } </style> <template> <div class="example" _v-f3f3eg9>hi</div> </template>
- 25. 可能性その1 CSSinJS
- 26. CSS in JS const styles = { root: { color: color || avatar.color, backgroundColor: backgroundColor || avatar.backgroundColor, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: size / 2, borderRadius: '50%', height: size, width: size } }; return( <div style={ styles.root }></div> );
- 28. ない
- 29. ない
- 30. ない
- 31. ない
- 32. ない
- 33. ない
- 34. ない
- 35. ない
- 36. ない
- 37. ない
- 38. キモい
- 39. 嫌だ
- 40. ない
- 41. ごめん
- 42. 言いすぎた
- 43. CSS in JS の問題 擬似クラス(:hover,:before,:after) メディアクエリ CSSアニメーション シンタックス
- 44. CSS in JS 系リポジトリ cssinjs/jss cssinjs/react‑jss FormidableLabs/radium martinandert/react‑inline smyte/jsxstyle
- 45. var Radium = require('radium'); var React = require('react'); var color = require('color'); @Radium class Button extends React.Component { render() { return ( <button style={[ styles.base, styles[this.props.kind] ]}></button> ); } } var styles = { base: { color: '#fff', ':hover': { background: color('#0074d9').lighten(0.2).hexString() } }, ... };
- 48. (因みに) こうなった @charset 'utf-8'; @import 'core/config'; .datepicker, .timepicker { font-size: 12px !important; display: block !important; overflow: hidden; width: 100px !important; height: auto !important; border-width: 0 !important; > div { &:first-child { line-height: inherit !important; width: auto !important; height: auto !important; } } input { line-height: 2 !important; height: 36px !important; padding: 0 10px !important; text-align: center; color: $colorFont !important; border: 1px solid #ccc !important; background-color: #fff !important; }
- 49. 可能性その2 CSSModule
- 51. /* volume-slide.scss */ .slider { position: relative; height: 100%; &__track { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; margin: auto 0; background-color: rgba(255,255,255, .2); } &__handle { position: absolute; top: 0; bottom: 0; left: 0; margin: auto; cursor: pointer; border-radius: 50px; background-color: #fff; &:before { position: absolute; top: 0; bottom: 0;
- 52. // volume-slider.react.js import styles from './volume-slider.scss'; render: <slider className={ styles.slider }> <div className={ styles.slider__track + ' ' + styles.black }></div> <div className={ classnames(styles.slider__handle, styles.black) }></div </slider> 出力: <slider class="volume-slider__slider___2qmBE"> <div class="volume-slider__slider__track___1Okwk volume-slider__black___3-0A8" <div class="volume-slider__slider__handle___X_x8Q volume-slider__black___3-0A8" </slider> ファイル名__クラス名__5桁のハッシュ
- 59. React CSS Modules は クラス名はスネークケースもいけるよ classNameにstyleオブジェクト付けなくていいよ グローバル,ローカルスコープのクラスが一目瞭然だよ 定義してないクラスにエラー吐くよ
- 60. // volume-slider.react.js import CSSModules from 'react-css-modules'; import styles from './volume-slider.scss'; render: <div styleName="slider"> <div styleName="slider__track"></div> <div styleName="slider__handle"> </div> </div> export default CSSModules(VolumeSlider, styles); 出力: <div class="volume-slider__slider___2qmBE"> <div class="volume-slider__slider__track___1Okwk volume-slider__black___3-0A8" <div class="volume-slider__slider__handle___X_x8Q"></div> </div>
- 61. グローバルなクラス=className render: <div className="global-css-class" styleName="slider"> <div styleName="slider__track"></div> <div styleName="slider__handle"> </div> </div>
- 62. ES7Decoratorがおすすめ @CSSModules(styles, { allowMultiple: true }) export default class VolumeSlider extends React.Component {}
- 67. 結論 Reactには無い
- 68. ただし
- 70. import Select from 'react-select'; // Be sure to include styles at some point, probably during your bootstrapping import 'react-select/dist/react-select.css'; react‑select・react‑spinner・react‑slider
- 73. まとめ: React で CSS カプセル化は... 実用レベルであり 配布する時はCustomElement風 末端での利用ならばreact-css-module