Update with-style-sheet example (#13323)
This commit is contained in:
parent
f3ea363df7
commit
73c8b8ca92
6 changed files with 46 additions and 16 deletions
|
@ -1,8 +0,0 @@
|
|||
{
|
||||
"presets": [
|
||||
"next/babel"
|
||||
],
|
||||
"plugins": [
|
||||
"style-sheet/babel"
|
||||
]
|
||||
}
|
23
examples/with-style-sheet/babel.config.js
Normal file
23
examples/with-style-sheet/babel.config.js
Normal file
|
@ -0,0 +1,23 @@
|
|||
const path = require('path')
|
||||
|
||||
module.exports = {
|
||||
presets: [
|
||||
[
|
||||
'next/babel',
|
||||
{
|
||||
'preset-react': {
|
||||
pragma: 'createElement',
|
||||
},
|
||||
},
|
||||
],
|
||||
],
|
||||
plugins: [
|
||||
[
|
||||
'style-sheet/babel',
|
||||
{
|
||||
stylePropName: 'css',
|
||||
stylePropPackageName: path.resolve('./lib/styleSheet.js'),
|
||||
},
|
||||
],
|
||||
],
|
||||
}
|
5
examples/with-style-sheet/lib/styleSheet.js
Normal file
5
examples/with-style-sheet/lib/styleSheet.js
Normal file
|
@ -0,0 +1,5 @@
|
|||
const StyleSheet = require('style-sheet')
|
||||
const setup = require('style-sheet/lib/cjs/createElement')
|
||||
|
||||
const stylePropName = 'css'
|
||||
module.exports.createElement = setup(StyleSheet, stylePropName)
|
|
@ -3,9 +3,8 @@ const { RawSource } = require('webpack-sources')
|
|||
|
||||
class StyleSheetPlugin {
|
||||
apply(compiler) {
|
||||
compiler.plugin('emit', (compilation, cb) => {
|
||||
compiler.hooks.emit.tap('StyleSheetPlugin', (compilation) => {
|
||||
compilation.assets['static/bundle.css'] = new RawSource(getCss())
|
||||
cb()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
"next": "latest",
|
||||
"react": "^16.7.0",
|
||||
"react-dom": "^16.7.0",
|
||||
"style-sheet": "^3.0.1"
|
||||
"style-sheet": "^4.0.4"
|
||||
},
|
||||
"author": "Giuseppe Gurgone",
|
||||
"license": "ISC"
|
||||
|
|
|
@ -1,9 +1,21 @@
|
|||
import React from 'react'
|
||||
import { StyleSheet, StyleResolver } from 'style-sheet'
|
||||
const cls = StyleResolver.resolve
|
||||
|
||||
export default function Home() {
|
||||
const [color, setColor] = React.useState('#111')
|
||||
React.useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setColor('#00f')
|
||||
}, 2000)
|
||||
})
|
||||
return (
|
||||
<div className={cls([styles.root, styles.color])}>
|
||||
<div
|
||||
className={cls([styles.root, styles.another])}
|
||||
css={{
|
||||
color,
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
Hello from <span className={cls(styles.brand)}>Next.js</span>
|
||||
</div>
|
||||
|
@ -13,7 +25,7 @@ export default function Home() {
|
|||
|
||||
const styles = StyleSheet.create({
|
||||
root: {
|
||||
fontSize: 30,
|
||||
fontSize: 16,
|
||||
fontFamily: 'sans-serif',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
|
@ -23,9 +35,8 @@ const styles = StyleSheet.create({
|
|||
'radial-gradient(circle, #D7D7D7, #D7D7D7 1px, #FFF 1px, #FFF)',
|
||||
backgroundSize: '1em 1em',
|
||||
},
|
||||
color: {
|
||||
// showcasing dynamic styles
|
||||
color: Math.random() > 0.5 ? '#111' : '#222',
|
||||
another: {
|
||||
fontSize: 30,
|
||||
},
|
||||
brand: {
|
||||
fontWeight: 'bold',
|
||||
|
|
Loading…
Reference in a new issue