Next 9.3 Sass Modules

Makefile

@@ -15,3 +15,6 @@ deploy-dev-from-local:
 
 update:
  npm run fetch-data
+
+build-size:
+ npm run size

components/admin/AdminLayout.js

@@ -1,17 +1,19 @@
-import './admin.scss';
-
 import React from 'react';
 import PropTypes from 'prop-types';
+import bem from 'bem-css-modules';
+import styles from './admin.module.scss';
 
 import AdminSidebar from './AdminSidebar';
 
+const b = bem(styles);
+
 const AdminLayout = ({ children }) => (
- <div className="admin-panel">
- <div className="admin-panel-grid">
- <div className="admin-panel-grid__aside">
+ <div className={b()}>
+ <div className={b('grid')}>
+ <div className={b('grid-aside')}>
  <AdminSidebar />
  </div>
- <div className="admin-panel-grid__main">{children}</div>
+ <div className={b('grid-main')}>{children}</div>
  </div>
  </div>
 );

components/admin/AdminSidebar.js

@@ -1,7 +1,6 @@
-import './admin-sidebar.scss';
-
 import React from 'react';
 import { useRouter } from 'next/router';
+import bem from 'bem-css-modules';
 
 import Link from 'components/common/Link';
 import Text from 'components/common/Text';
@@ -10,14 +9,16 @@ import Dispatcher from 'lib/components/Dispatcher';
 
 import { authActions } from 'redux/ducks/auth';
 import { ADMIN_ROUTES, ROUTES_NAMES } from 'routes';
+import styles from './admin-sidebar.module.scss';
 
+const b = bem(styles);
 const IGNORE_ROUTES = ['login', 'preview'].map(page => ROUTES_NAMES.admin[page]);
 
 const AdminSidebar = () => {
  const router = useRouter();
  return (
- <div className="admin-sidebar">
- <ul className="admin-sidebar-nav-list">
+ <div>
+ <ul className={b('nav-list')}>
  {ADMIN_ROUTES.filter(({ name }) => !IGNORE_ROUTES.includes(name)).map(({ name, page }) => (
  <li key={name}>
  {/* FIXME: active */}

components/admin/admin-sidebar.scss → components/admin/admin-sidebar.module.scss

@@ -1,5 +1,5 @@
 .admin-sidebar {
- &-nav-list {
+ &__nav-list {
  list-style-type: none;
  margin: 0 0 30px;
  padding: 0;

components/admin/admin.scss → components/admin/admin.module.scss

@@ -1,16 +1,16 @@
 .admin-panel {
  padding: 0 90px 60px;
 
- &-grid {
+ &__grid {
  display: flex;
 
- &__aside {
+ &-aside {
  flex: 0 0 auto;
  padding-right: 20px;
  width: 100px;
  }
 
- &__main {
+ &-main {
  flex: 1 1 auto;
  font-size: 0.9rem;
  }

components/articles/Article.js

@@ -1,8 +1,8 @@
-import 'styles/pages/article.scss';
-
 import React from 'react';
 import { useRouter } from 'next/router';
 import flatten from 'lodash/flatten';
+import cn from 'classnames';
+import bem from 'bem-css-modules';
 
 import {
  MetaTitle,
@@ -23,8 +23,11 @@ import { renderNodeList } from 'utils/formatters';
 import fiberyRenderer from 'utils/fibery/renderer';
 import host from 'utils/host';
 
+import styles from './article.module.scss';
+
 import CollectionNote from './CollectionNote';
 
+const b = bem(styles);
 const COVER_SIZES = [1200, 1000, 770, 640, 360];
 
 const Article = ({
@@ -45,7 +48,7 @@ const Article = ({
 }) => {
  const router = useRouter();
  const { brands, authors, ...tagsObject } = tagsByTopic;
- const renderTagImage = getTagImageRenderer({ className: 'article-page__tag-image' });
+ const renderTagImage = getTagImageRenderer({ className: b('tag-image') });
  const imageUrl = images.page || images.horizontal;
  // https://caniuse.com/#feat=array-flat
  const tags = flatten(Object.values(tagsObject));
@@ -59,31 +62,31 @@ const Article = ({
  <MetaArticleItems name="author" list={authors.map(renderTag)} />
  <MetaArticleItems name="tag" list={tags.map(renderTag)} />
  <MetaArticleItems name="published_time" value={publishAt} />
- <div className="article-page">
- <div className="wir-content-padding article-page-content">
- <div className="article-page__subtitle">{subtitle}</div>
+ <div>
+ <div className={cn('wir-content-padding', styles['article-page-content'])}>
+ <div className={b('subtitle')}>{subtitle}</div>
  </div>
  {type === 'text' && (
  <Image
- className="article-page__cover"
+ className={b('cover')}
  alt={title}
  sourceSizes={COVER_SIZES}
  baseUrl={images.page}
  />
  )}
  </div>
- <div className="wir-content-padding article-page__header">
+ <div className={cn('wir-content-padding', b('header'))}>
  {/* TODO: hover corresponding image and title simultaneously */}
  {(!!brands.length || !!authors.length) && (
- <div className="article-page__tags">
+ <div className={b('tags')}>
  {brands.concat(authors).map(tag =>
  getTagLink({
- className: 'article-page__tag-image-link',
+ className: b('tag-image-link'),
  render: renderTagImage,
  tag,
  })
  )}
- <div className="article-page__tag-titles">
+ <div className={b('tag-titles')}>
  <span>
  {renderNodeList(brands.map(tag => getTagLink({ tag })))}
  {!!brands.length && !!authors.length && ','}
@@ -92,24 +95,24 @@ const Article = ({
  </div>
  </div>
  )}
- <div className="article-page__title">{title}</div>
+ <div className={b('title')}>{title}</div>
  </div>
 
  <div className="wir-content-padding">
- <div className="article-page-content">
+ <div className={styles['article-page-content']}>
  {type === 'audio' && <AudioPlayer trackId={audio.id} />}
  {type === 'video' && <VideoPlayer videoId={video.id} />}
  {collection && collection.articles.length > 1 && (
  <CollectionNote data={collection} locale={locale} />
  )}
  {fiberyRenderer(text.content)}
  </div>
- <div className="article-page__share">
+ <div className={b('share')}>
  <ShareButtons urlPath={router.asPath} basicText={title} />
  </div>
- <div className="article-page__other-tags">
+ <div className={b('other-tags')}>
  {tags.map(tag => (
- <div key={tag.slug} className="article-page__other-tag">
+ <div key={tag.slug} className={b('other-tag')}>
  {getTagLink({ tag })}
  </div>
  ))}

components/articles/CollectionNote.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import bem from 'bem-css-modules';
 
 import { localize } from 'components/common/Text';
 import Link from 'components/common/Link';
@@ -9,8 +10,12 @@ import { CollectionShape, LangType } from 'utils/customPropTypes';
 
 import { ROUTES_NAMES } from 'routes';
 
-const CollectionNoteItem = ({ hideLink, text, slug }) => (
- <div className="article-page__collection-item">
+import styles from './article.module.scss';
+
+const b = bem(styles);
+
+const CollectionNoteItem = ({ className, hideLink, text, slug }) => (
+ <div className={className}>
  {hideLink ? (
  text
  ) : (
@@ -22,32 +27,34 @@ const CollectionNoteItem = ({ hideLink, text, slug }) => (
 );
 
 CollectionNoteItem.propTypes = {
+ className: PropTypes.string.isRequired,
  hideLink: PropTypes.bool.isRequired,
  text: PropTypes.string.isRequired,
  slug: PropTypes.string.isRequired,
 };
 
 const CollectionNote = ({ locale, data: { cover, articleIndex = 0, name, articles } }) => (
- <div className="article-page__collection">
+ <div className={b('collection')}>
  {cover && (
  <Image
- className="article-page__collection-cover"
+ className={b('collection-cover')}
  alt={name}
  sourceSizes={[70]}
  baseUrl={cover}
  mode="x"
  />
  )}
- <div className="article-page__collection-items">
- <div className="article-page__collection-item">
+ <div className={b('collection-items')}>
+ <div className={b('collection-item')}>
  {localize('article.this-is-the', locale)} {` ${articleIndex + 1} `}
  {localize('article.of-collection', locale)}
  <br />
- <span className="article-page__collection-name">{name}</span>
+ <span className={b('collection-name')}>{name}</span>
  </div>
  {articles.map(({ _id, slug, title }, i) => (
  <CollectionNoteItem
  key={_id}
+ className={b('collection-item')}
  hideLink={articleIndex === i}
  text={`${i + 1}. ${title}`}
  slug={slug}