feat(v2): support non-css modules when loading styles (#1069)

This commit is contained in:
Yangshun Tay 2018-10-25 21:43:31 -07:00 committed by GitHub
parent 13b23edd12
commit c7336462ec
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
24 changed files with 439 additions and 430 deletions

View file

@ -12,7 +12,7 @@ import Helmet from 'react-helmet';
import classnames from 'classnames';
import Layout from '@theme/Layout'; // eslint-disable-line
import styles from './styles.css';
import styles from './styles.module.css';
export default class BlogPost extends React.Component {
renderPostHeader() {
const {metadata, siteConfig} = this.props;

View file

@ -15,7 +15,7 @@ import Footer from '@theme/Footer'; // eslint-disable-line
import Navbar from '@theme/Navbar'; // eslint-disable-line
import Sidebar from '@theme/Sidebar'; // eslint-disable-line
import styles from './styles.css';
import styles from './styles.module.css';
class Doc extends React.Component {
render() {
@ -36,7 +36,6 @@ class Doc extends React.Component {
{language && <html lang={language} />}
{language && <meta name="docsearch:language" content={language} />}
{version && <meta name="docsearch:version" content={version} />}
<link rel="stylesheet" type="text/css" href="/css/main.css" />
</Helmet>
<Navbar docsMetadatas={docsMetadatas} />
<Sidebar

View file

@ -8,7 +8,7 @@
import React from 'react';
import {Link} from 'react-router-dom';
import styles from './styles.css';
import styles from './styles.module.css';
export default class DocsPaginator extends React.Component {
render() {

View file

@ -8,7 +8,7 @@
import React from 'react';
import {Link} from 'react-router-dom';
import styles from './styles.css';
import styles from './styles.module.css';
function Footer(props) {
return (

View file

@ -6,7 +6,6 @@
*/
import React from 'react';
import Helmet from 'react-helmet';
import Footer from '@theme/Footer'; // eslint-disable-line
import Navbar from '@theme/Navbar'; // eslint-disable-line
@ -24,9 +23,6 @@ export default class Layout extends React.Component {
} = this.props;
return (
<div>
<Helmet>
<link rel="stylesheet" type="text/css" href="/css/main.css" />
</Helmet>
<Navbar docsMetadatas={docsMetadatas} />
{children}
<Footer

View file

@ -5,7 +5,392 @@
* LICENSE file in the root directory of this source tree.
*/
:global(body) {
/* Reset */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
border: 0;
font: inherit;
font-size: 100%;
margin: 0;
padding: 0;
vertical-align: baseline;
}
/* Base scaffolding taken from Markswatch theme */
body {
color: #24292e;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
font-size: 16px;
line-height: 1.5;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
word-wrap: break-word;
}
* {
box-sizing: border-box;
}
strong {
font-weight: 600;
}
input[type='checkbox'] {
box-sizing: border-box;
padding: 0;
}
a {
color: #25c2a0;
text-decoration: none;
}
a:hover {
color: #25c2a0;
text-decoration: none;
}
a:active,
a:hover {
outline-width: 0;
}
a:not([href]) {
color: inherit;
text-decoration: none;
}
p {
margin-bottom: 1em;
margin-top: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: inherit;
font-weight: 600;
line-height: 1.25;
margin-bottom: 16px;
margin-top: 1.5em;
}
h1 {
font-size: 32px;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 20px;
}
h4 {
font-size: 16px;
}
h5 {
font-size: 14px;
}
h6 {
font-size: 13.6px;
}
ul,
ol {
margin-bottom: 1em;
margin-top: 0;
padding-left: 2em;
}
ol ol,
ul ol {
list-style-type: lower-roman;
}
ul ul,
ul ol,
ol ol,
ol ul {
margin-bottom: 0;
margin-top: 0;
}
ul ul ol,
ul ol ol,
ol ul ol,
ol ol ol {
list-style-type: lower-alpha;
}
li {
word-wrap: break-all;
}
li > p {
margin-top: 1em;
}
li + li {
margin-top: 0.25em;
}
img {
background-color: #fff;
border-style: none;
box-sizing: content-box;
max-width: 100%;
}
img[align='right'] {
padding-left: 1.25em;
}
img[align='left'] {
padding-right: 1.25em;
}
table {
border-collapse: collapse;
border-spacing: 0;
display: block;
margin-bottom: 16px;
margin-top: 0;
overflow: auto;
width: 100%;
}
table tr {
background-color: transparent;
border-top: 1px solid #dfe2e5;
}
table tr:nth-child(2n) {
background-color: #f6f8fa;
}
table th,
table td {
border: 1px solid #dfe2e5;
padding: 6px 13px;
}
table th {
background-color: inherit;
color: inherit;
font-weight: 600;
}
table td {
color: inherit;
}
blockquote {
color: #6a737d;
font-size: 16px;
margin: 0;
margin-bottom: 16px;
padding: 0 1em;
}
blockquote > :first-child {
margin-top: 0;
}
blockquote > :last-child {
margin-bottom: 0;
}
code {
background-color: rgba(27, 31, 35, 0.05);
border-radius: 3px;
color: inherit;
font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
'Courier New', monospace;
font-size: 85%;
margin: 0;
padding: 3.2px 6.4px;
}
pre {
margin-bottom: 16px;
}
pre code {
background-color: transparent;
border: 0;
display: inline;
font-size: 85%;
line-height: inherit;
margin: 0;
max-width: auto;
overflow: visible;
padding: 0;
white-space: pre;
word-break: normal;
word-wrap: normal;
}
kbd {
background-color: #fafbfc;
border: solid 1px #d1d5da;
border-bottom-color: #c6cbd1;
border-radius: 3px;
box-shadow: inset 0 -1px 0 #c6cbd1;
color: #444d56;
display: inline-block;
font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
'Courier New', monospace;
font-size: 68.75%;
line-height: 10px;
padding: 3px 5px;
vertical-align: middle;
}
hr {
border-color: #dfe2e5;
border-style: solid;
border-width: 1px;
box-sizing: content-box;
margin: 1.5em 0;
overflow: hidden;
padding: 0;
}
hr:before {
content: '';
display: table;
}
hr:after {
clear: both;
content: '';
display: table;
}
/* GitHub Markdown theme styles */
h1,
h2 {
padding-bottom: 0.3em;
}
h6 {
color: #6a737d;
}
blockquote {
background-color: rgb(37, 194, 160, 0.1);
border-left: 0.5em solid #25c2a0;
color: #000;
padding: 1em 2em 1em 1em;
}
hr {
background-color: #e1e4e8;
border: 0;
border-bottom: 1px solid #dfe2e5;
border-bottom-color: #eee;
height: 0.25em;
}
/* Docusaurus v2 styles */
h1 .hash-link,
h2 .hash-link,
h3 .hash-link,
h4 .hash-link,
h5 .hash-link,
h6 .hash-link {
display: none;
margin-left: 0.1em;
}
h1:hover .hash-link,
h2:hover .hash-link,
h3:hover .hash-link,
h4:hover .hash-link,
h5:hover .hash-link,
h6:hover .hash-link {
display: inline;
}
.hljs.hljs {
/* Specificity hack */
padding: 1.25rem 1.5rem;
}

View file

@ -8,7 +8,7 @@
import React from 'react';
import {NavLink} from 'react-router-dom';
import styles from './styles.css';
import styles from './styles.module.css';
function Navbar() {
return (

View file

@ -8,7 +8,7 @@
import React from 'react';
import classnames from 'classnames';
import styles from './styles.css';
import styles from './styles.module.css';
export default function SidebarCategory({
label,

View file

@ -9,7 +9,7 @@ import React from 'react';
import {NavLink} from 'react-router-dom';
import classnames from 'classnames';
import styles from './styles.css';
import styles from './styles.module.css';
export default function SidebarLink({href, label}) {
const isExternal = /^(https?:|\/\/)/.test(href);

View file

@ -9,7 +9,7 @@ import React from 'react';
import SidebarLink from './SidebarLink';
import SidebarCategory from './SidebarCategory';
import styles from './styles.css';
import styles from './styles.module.css';
function Sidebar(props) {
const {metadata, docsSidebars, docsMetadatas} = props;

View file

@ -12,6 +12,27 @@ const path = require('path');
const mdLoader = require.resolve('./loader/markdown');
const CSS_REGEX = /\.css$/;
const CSS_MODULE_REGEX = /\.module\.css$/;
// Utility method to add styling-related rule to Webpack config.
function applyStyle(styleRule, {cssOptions, isServer, isProd}) {
if (!isServer) {
if (isProd) {
styleRule.use('extract-css-loader').loader(CSSExtractPlugin.loader);
} else {
styleRule.use('style-loader').loader('style-loader');
}
}
styleRule
.use('css-loader')
.loader(isServer ? 'css-loader/locals' : 'css-loader')
.options(cssOptions);
return styleRule;
}
module.exports = function createBaseConfig(props, isServer) {
const {
siteConfig,
@ -81,13 +102,10 @@ module.exports = function createBaseConfig(props, isServer) {
return /node_modules/.test(filepath);
})
.end();
applyBabel(jsRule);
const mdRule = config.module.rule('markdown').test(/\.md$/);
applyBabel(mdRule);
mdRule
.use('markdown-loader')
.loader(mdLoader)
@ -99,25 +117,32 @@ module.exports = function createBaseConfig(props, isServer) {
sourceToMetadata,
});
const cssRule = config.module.rule('css').test(/\.css$/);
if (!isServer) {
if (isProd) {
cssRule.use('extract-css-loader').loader(CSSExtractPlugin.loader);
} else {
cssRule.use('style-loader').loader('style-loader');
}
}
applyStyle(config.module.rule('css'), {
cssOptions: {
importLoaders: 1,
sourceMap: !isProd,
minimize: true,
},
isProd,
isServer,
})
.test(CSS_REGEX)
.exclude.add(CSS_MODULE_REGEX)
.end();
cssRule
.use('css-loader')
.loader(isServer ? 'css-loader/locals' : 'css-loader')
.options({
// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
// using the extension .module.css
applyStyle(config.module.rule('css-module'), {
cssOptions: {
modules: true,
importLoaders: 1,
localIdentName: `[local]_[hash:base64:8]`,
sourceMap: !isProd,
minimize: true,
});
},
isProd,
isServer,
}).test(CSS_MODULE_REGEX);
// mini-css-extract plugin
config.plugin('extract-css').use(CSSExtractPlugin, [

View file

@ -7,7 +7,7 @@
import React from 'react';
import Square from './square';
import styles from './styles.css';
import styles from './styles.module.css';
export default class Board extends React.Component {
renderSquare(i) {

View file

@ -9,7 +9,7 @@ import React from 'react';
import Helmet from 'react-helmet';
import Layout from '@theme/Layout';
import Board from './board';
import styles from './styles.css';
import styles from './styles.module.css';
class Game extends React.Component {
constructor(props) {

View file

@ -6,7 +6,7 @@
*/
import React from 'react';
import styles from './styles.css';
import styles from './styles.module.css';
export default props => {
return (

View file

@ -10,7 +10,7 @@ import Helmet from 'react-helmet';
import classnames from 'classnames';
import styles from './styles.css';
import styles from './styles.module.css';
const FEATURES = [
{

View file

@ -1,396 +0,0 @@
/**
* Copyright (c) 2017-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/* Reset */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
border: 0;
font: inherit;
font-size: 100%;
margin: 0;
padding: 0;
vertical-align: baseline;
}
/* Base scaffolding taken from Markswatch theme */
body {
color: #24292e;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
font-size: 16px;
line-height: 1.5;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
word-wrap: break-word;
}
* {
box-sizing: border-box;
}
strong {
font-weight: 600;
}
input[type='checkbox'] {
box-sizing: border-box;
padding: 0;
}
a {
color: #25c2a0;
text-decoration: none;
}
a:hover {
color: #25c2a0;
text-decoration: none;
}
a:active,
a:hover {
outline-width: 0;
}
a:not([href]) {
color: inherit;
text-decoration: none;
}
p {
margin-bottom: 1em;
margin-top: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: inherit;
font-weight: 600;
line-height: 1.25;
margin-bottom: 16px;
margin-top: 1.5em;
}
h1 {
font-size: 32px;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 20px;
}
h4 {
font-size: 16px;
}
h5 {
font-size: 14px;
}
h6 {
font-size: 13.6px;
}
ul,
ol {
margin-bottom: 1em;
margin-top: 0;
padding-left: 2em;
}
ol ol,
ul ol {
list-style-type: lower-roman;
}
ul ul,
ul ol,
ol ol,
ol ul {
margin-bottom: 0;
margin-top: 0;
}
ul ul ol,
ul ol ol,
ol ul ol,
ol ol ol {
list-style-type: lower-alpha;
}
li {
word-wrap: break-all;
}
li > p {
margin-top: 1em;
}
li + li {
margin-top: 0.25em;
}
img {
background-color: #fff;
border-style: none;
box-sizing: content-box;
max-width: 100%;
}
img[align='right'] {
padding-left: 1.25em;
}
img[align='left'] {
padding-right: 1.25em;
}
table {
border-collapse: collapse;
border-spacing: 0;
display: block;
margin-bottom: 16px;
margin-top: 0;
overflow: auto;
width: 100%;
}
table tr {
background-color: transparent;
border-top: 1px solid #dfe2e5;
}
table tr:nth-child(2n) {
background-color: #f6f8fa;
}
table th,
table td {
border: 1px solid #dfe2e5;
padding: 6px 13px;
}
table th {
background-color: inherit;
color: inherit;
font-weight: 600;
}
table td {
color: inherit;
}
blockquote {
color: #6a737d;
font-size: 16px;
margin: 0;
margin-bottom: 16px;
padding: 0 1em;
}
blockquote > :first-child {
margin-top: 0;
}
blockquote > :last-child {
margin-bottom: 0;
}
code {
background-color: rgba(27, 31, 35, 0.05);
border-radius: 3px;
color: inherit;
font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
'Courier New', monospace;
font-size: 85%;
margin: 0;
padding: 3.2px 6.4px;
}
pre {
margin-bottom: 16px;
}
pre code {
background-color: transparent;
border: 0;
display: inline;
font-size: 85%;
line-height: inherit;
margin: 0;
max-width: auto;
overflow: visible;
padding: 0;
white-space: pre;
word-break: normal;
word-wrap: normal;
}
kbd {
background-color: #fafbfc;
border: solid 1px #d1d5da;
border-bottom-color: #c6cbd1;
border-radius: 3px;
box-shadow: inset 0 -1px 0 #c6cbd1;
color: #444d56;
display: inline-block;
font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
'Courier New', monospace;
font-size: 68.75%;
line-height: 10px;
padding: 3px 5px;
vertical-align: middle;
}
hr {
border-color: #dfe2e5;
border-style: solid;
border-width: 1px;
box-sizing: content-box;
margin: 1.5em 0;
overflow: hidden;
padding: 0;
}
hr:before {
content: '';
display: table;
}
hr:after {
clear: both;
content: '';
display: table;
}
/* GitHub Markdown theme styles */
h1,
h2 {
padding-bottom: 0.3em;
}
h6 {
color: #6a737d;
}
blockquote {
background-color: rgb(37, 194, 160, 0.1);
border-left: 0.5em solid #25c2a0;
color: #000;
padding: 1em 2em 1em 1em;
}
hr {
background-color: #e1e4e8;
border: 0;
border-bottom: 1px solid #dfe2e5;
border-bottom-color: #eee;
height: 0.25em;
}
/* Docusaurus v2 styles */
h1 .hash-link,
h2 .hash-link,
h3 .hash-link,
h4 .hash-link,
h5 .hash-link,
h6 .hash-link {
display: none;
margin-left: 0.1em;
}
h1:hover .hash-link,
h2:hover .hash-link,
h3:hover .hash-link,
h4:hover .hash-link,
h5:hover .hash-link,
h6:hover .hash-link {
display: inline;
}
.hljs.hljs {
/* Specificity hack */
padding: 1.25rem 1.5rem;
}