diff --git a/lib/core/prodTemplate.ejs b/lib/core/prodTemplate.ejs index 9c8cdbc09d..2c11428a73 100644 --- a/lib/core/prodTemplate.ejs +++ b/lib/core/prodTemplate.ejs @@ -5,7 +5,7 @@ <%- title %> <% css.forEach(function(file){ %> - + <% }); %> diff --git a/lib/theme/Layout.js b/lib/theme/Layout.js index 3ba873691e..259b8c37dc 100644 --- a/lib/theme/Layout.js +++ b/lib/theme/Layout.js @@ -1,8 +1,9 @@ import React from 'react'; +import style from './layout.css'; export default class Layout extends React.Component { render() { const {children} = this.props; - return
{children}
; + return
{children}
; } } diff --git a/lib/theme/layout.css b/lib/theme/layout.css new file mode 100644 index 0000000000..5a96e80c85 --- /dev/null +++ b/lib/theme/layout.css @@ -0,0 +1,10 @@ +.mainContainer { + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin-top: 40px; + margin-bottom: 30px; + margin-left: auto; + margin-right: auto; + justify-content: center; +} \ No newline at end of file diff --git a/lib/webpack/base.js b/lib/webpack/base.js index 294593fdf1..db3eec401e 100644 --- a/lib/webpack/base.js +++ b/lib/webpack/base.js @@ -1,4 +1,5 @@ const Config = require('webpack-chain'); +const CSSExtractPlugin = require('mini-css-extract-plugin'); const path = require('path'); const mdLoader = require.resolve('./loader/markdown'); @@ -71,5 +72,30 @@ module.exports = function createBaseConfig(props) { .loader(mdLoader) .options({siteConfig}); + const cssRule = config.module.rule('css').test(/\.css$/); + if (isProd) { + cssRule.use('extract-css-loader').loader(CSSExtractPlugin.loader); + } else { + cssRule.use('style-loader').loader('style-loader'); + } + cssRule + .use('css-loader') + .loader('css-loader') + .options({ + modules: true, + importLoaders: 1, + localIdentName: `[local]_[hash:base64:8]`, + sourceMap: !isProd, + minimize: true + }); + + // mini-css-extract plugin + config.plugin('extract-css').use(CSSExtractPlugin, [ + { + filename: isProd ? '[name].[chunkhash].css' : '[name].css', + chunkFilename: isProd ? '[id].[chunkhash].css' : '[id].css' + } + ]); + return config; }; diff --git a/lib/webpack/dev.js b/lib/webpack/dev.js index 0956603f76..dcdc3a6e51 100644 --- a/lib/webpack/dev.js +++ b/lib/webpack/dev.js @@ -18,11 +18,7 @@ module.exports = function createDevConfig(props) { title: siteConfig.title } ]); - config.plugin('WebpackNiceLog').use(webpackNiceLog, [ - { - name: 'Development' - } - ]); + config.plugin('niceLog').use(webpackNiceLog, [{name: 'Development'}]); return config; }; diff --git a/package.json b/package.json index bd61bc7a1f..0382d8cc67 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,7 @@ "chokidar": "^2.0.4", "commander": "^2.16.0", "connect-history-api-fallback": "^1.5.0", + "css-loader": "^1.0.0", "ejs": "^2.6.1", "front-matter": "^2.3.0", "fs-extra": "^7.0.0", @@ -59,6 +60,7 @@ "koa-range": "^0.3.0", "koa-static": "^5.0.0", "loader-utils": "^1.1.0", + "mini-css-extract-plugin": "^0.4.1", "portfinder": "^1.0.13", "prismjs": "^1.15.0", "react": "^16.4.1", @@ -68,6 +70,7 @@ "remarkable": "^1.7.1", "semver": "^5.5.0", "static-site-generator-webpack-plugin": "^3.4.1", + "style-loader": "^0.22.1", "webpack": "^4.16.3", "webpack-chain": "^4.8.0", "webpack-nicelog": "^2.2.1", diff --git a/website/pages/tictactoe.css b/website/pages/tictactoe.css new file mode 100644 index 0000000000..4a1a102c6e --- /dev/null +++ b/website/pages/tictactoe.css @@ -0,0 +1,41 @@ +.boardRow:after { + clear: both; + content: ""; + display: table; +} + +.status { + margin-bottom: 10px; +} + +.square { + background: #fff; + border: 1px solid #999; + float: left; + font-size: 24px; + font-weight: bold; + line-height: 34px; + height: 34px; + margin-right: -1px; + margin-top: -1px; + padding: 0; + text-align: center; + width: 34px; +} + +.square:focus { + outline: none; +} + +.game { + display: flex; + flex-direction: row; +} + +.gameInfo { + margin-left: 20px; +} + +.gameBoard { + margin-left: 10px; +} \ No newline at end of file diff --git a/website/pages/tictactoe.js b/website/pages/tictactoe.js index b5af6ad4e0..b102b7d1fe 100644 --- a/website/pages/tictactoe.js +++ b/website/pages/tictactoe.js @@ -1,34 +1,9 @@ import React from 'react'; - -const square = { - background: '#fff', - border: '1px solid #999', - float: 'left', - fontSize: '24px', - fontWeight: 'bold', - lineHeight: '34px', - height: '34px', - marginright: '-1px', - marginTop: '-1px', - padding: '0', - textAlign: 'center', - width: '34px' -}; - -const boardRow = { - clear: 'both', - content: '', - display: 'table' -}; - -const game = { - display: 'flex', - flexDirection: 'row' -}; +import style from './tictactoe.css'; function Square(props) { return ( - ); @@ -67,17 +42,17 @@ class Board extends React.Component { render() { return (
-
+
{this.renderSquare(0)} {this.renderSquare(1)} {this.renderSquare(2)}
-
+
{this.renderSquare(3)} {this.renderSquare(4)} {this.renderSquare(5)}
-
+
{this.renderSquare(6)} {this.renderSquare(7)} {this.renderSquare(8)} @@ -149,11 +124,11 @@ class Game extends React.Component { } return ( -
-
+
+
this.handleClick(i)} />
-
+
{status}
    {moves}
diff --git a/yarn.lock b/yarn.lock index 84b6abf339..e614af14c8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1777,6 +1777,23 @@ crypto-random-string@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-1.0.0.tgz#a230f64f568310e1498009940790ec99545bca7e" +css-loader@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-1.0.0.tgz#9f46aaa5ca41dbe31860e3b62b8e23c42916bf56" + dependencies: + babel-code-frame "^6.26.0" + css-selector-tokenizer "^0.7.0" + icss-utils "^2.1.0" + loader-utils "^1.0.2" + lodash.camelcase "^4.3.0" + postcss "^6.0.23" + postcss-modules-extract-imports "^1.2.0" + postcss-modules-local-by-default "^1.2.0" + postcss-modules-scope "^1.1.0" + postcss-modules-values "^1.3.0" + postcss-value-parser "^3.3.0" + source-list-map "^2.0.0" + css-select@^1.1.0, css-select@~1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/css-select/-/css-select-1.2.0.tgz#2b3a110539c5355f1cd8d314623e870b121ec858" @@ -1786,10 +1803,22 @@ css-select@^1.1.0, css-select@~1.2.0: domutils "1.5.1" nth-check "~1.0.1" +css-selector-tokenizer@^0.7.0: + version "0.7.0" + resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.7.0.tgz#e6988474ae8c953477bf5e7efecfceccd9cf4c86" + dependencies: + cssesc "^0.1.0" + fastparse "^1.1.1" + regexpu-core "^1.0.0" + css-what@2.1: version "2.1.0" resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd" +cssesc@^0.1.0: + version "0.1.0" + resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4" + cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0": version "0.3.4" resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.4.tgz#8cd52e8a3acfd68d3aed38ee0a640177d2f9d797" @@ -2585,6 +2614,10 @@ fast-levenshtein@~2.0.4: version "2.0.6" resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917" +fastparse@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8" + faye-websocket@~0.11.0: version "0.11.1" resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.11.1.tgz#f0efe18c4f56e4f40afc7e06c719fd5ee6188f38" @@ -3178,6 +3211,16 @@ iconv-lite@^0.4.17, iconv-lite@^0.4.4, iconv-lite@~0.4.13: dependencies: safer-buffer ">= 2.1.2 < 3" +icss-replace-symbols@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded" + +icss-utils@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-2.1.0.tgz#83f0a0ec378bf3246178b6c2ad9136f135b1c962" + dependencies: + postcss "^6.0.1" + ieee754@^1.1.11, ieee754@^1.1.4: version "1.1.12" resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.12.tgz#50bf24e5b9c8bb98af4964c941cdb0918da7b60b" @@ -4256,6 +4299,10 @@ lodash.bind@^4.1.4: version "4.2.1" resolved "https://registry.yarnpkg.com/lodash.bind/-/lodash.bind-4.2.1.tgz#7ae3017e939622ac31b7d7d7dcb1b34db1690d35" +lodash.camelcase@^4.3.0: + version "4.3.0" + resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6" + lodash.debounce@^4.0.8: version "4.0.8" resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af" @@ -4537,6 +4584,14 @@ mimic-fn@^1.0.0: version "1.2.0" resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022" +mini-css-extract-plugin@^0.4.1: + version "0.4.1" + resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.4.1.tgz#d2bcf77bb2596b8e4bd9257e43d3f9164c2e86cb" + dependencies: + "@webpack-contrib/schema-utils" "^1.0.0-beta.0" + loader-utils "^1.1.0" + webpack-sources "^1.1.0" + minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7" @@ -5234,6 +5289,45 @@ posix-character-classes@^0.1.0: version "0.1.1" resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab" +postcss-modules-extract-imports@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.2.0.tgz#66140ecece38ef06bf0d3e355d69bf59d141ea85" + dependencies: + postcss "^6.0.1" + +postcss-modules-local-by-default@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.2.0.tgz#f7d80c398c5a393fa7964466bd19500a7d61c069" + dependencies: + css-selector-tokenizer "^0.7.0" + postcss "^6.0.1" + +postcss-modules-scope@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-1.1.0.tgz#d6ea64994c79f97b62a72b426fbe6056a194bb90" + dependencies: + css-selector-tokenizer "^0.7.0" + postcss "^6.0.1" + +postcss-modules-values@^1.3.0: + version "1.3.0" + resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-1.3.0.tgz#ecffa9d7e192518389f42ad0e83f72aec456ea20" + dependencies: + icss-replace-symbols "^1.1.0" + postcss "^6.0.1" + +postcss-value-parser@^3.3.0: + version "3.3.0" + resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz#87f38f9f18f774a4ab4c8a232f5c5ce8872a9d15" + +postcss@^6.0.1, postcss@^6.0.23: + version "6.0.23" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324" + dependencies: + chalk "^2.4.1" + source-map "^0.6.1" + supports-color "^5.4.0" + prelude-ls@~1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54" @@ -5616,6 +5710,14 @@ regexpp@^1.0.1: version "1.1.0" resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-1.1.0.tgz#0e3516dd0b7904f413d2d4193dce4618c3a689ab" +regexpu-core@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-1.0.0.tgz#86a763f58ee4d7c2f6b102e4764050de7ed90c6b" + dependencies: + regenerate "^1.2.1" + regjsgen "^0.2.0" + regjsparser "^0.1.4" + regexpu-core@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-2.0.0.tgz#49d038837b8dcf8bfa5b9a42139938e6ea2ae240" @@ -6267,6 +6369,13 @@ strip-json-comments@~2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a" +style-loader@^0.22.1: + version "0.22.1" + resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.22.1.tgz#901ea28aac78fcc00c5075585ac07d7ef3f87a52" + dependencies: + loader-utils "^1.1.0" + schema-utils "^0.4.5" + supports-color@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7" @@ -6277,7 +6386,7 @@ supports-color@^3.1.2: dependencies: has-flag "^1.0.0" -supports-color@^5.3.0: +supports-color@^5.3.0, supports-color@^5.4.0: version "5.4.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.4.0.tgz#1c6b337402c2137605efe19f10fec390f6faab54" dependencies: