fix(*): temp

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 block from 'bem-css-modules';
+import styles from './admin.module.scss';
 
 import AdminSidebar from './AdminSidebar';
 
+const b = block(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 block 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 = block(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 className={b()}>
+ <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,10 @@
-import 'styles/pages/article.scss';
+import styles from 'styles/pages/article.module.scss';
 
 import React from 'react';
 import { useRouter } from 'next/router';
 import flatten from 'lodash/flatten';
+import cn from 'classnames';
+import block from 'bem-css-modules';
 
 import {
  MetaTitle,
@@ -25,6 +27,7 @@ import host from 'utils/host';
 
 import CollectionNote from './CollectionNote';
 
+const b = block(styles);
 const COVER_SIZES = [1200, 1000, 770, 640, 360];
 
 const Article = ({
@@ -44,7 +47,7 @@ const Article = ({
 }) => {
  const router = useRouter();
  const { brands, authors, ...tagsObject } = tagsByTopic;
- const renderTagImage = getTagImageRenderer({ className: 'article-page__tag-image' });
+ const renderTagImage = getTagImageRenderer({ className: styles['article-page__tag-image'] });
  const imageUrl = images.page || images.horizontal;
  // https://caniuse.com/#feat=array-flat
  const tags = flatten(Object.values(tagsObject));
@@ -58,31 +61,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="wir-content-padding">
+ <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 && ','}
@@ -91,22 +94,22 @@ 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} />}
  {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,8 @@
+import styles from 'styles/pages/article.module.scss';
+
 import React from 'react';
 import PropTypes from 'prop-types';
+import block from 'bem-css-modules';
 
 import Text from 'components/common/Text';
 import Link from 'components/common/Link';
@@ -9,8 +12,10 @@ import { CollectionShape } from 'utils/customPropTypes';
 
 import { ROUTES_NAMES } from 'routes';
 
-const CollectionNoteItem = ({ hideLink, text, slug }) => (
- <div className="article-page__collection-item">
+const b = block(styles);
+
+const CollectionNoteItem = ({ className, hideLink, text, slug }) => (
+ <div className={className}>
  {hideLink ? (
  text
  ) : (
@@ -22,31 +27,33 @@ 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 = ({ 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')}>
  <Text id="article.this-is-the" /> {` ${articleIndex + 1} `}
  <Text id="article.of-collection" /> <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}

components/articles/blocks/ArticlesByTag2.js

@@ -1,8 +1,7 @@
-import './articlesByTag2.scss';
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
+import bem from 'bem-css-modules';
 
 import Text from 'components/common/Text';
 import ArticleCard from 'components/articles/cards/ArticleCard';
@@ -11,9 +10,12 @@ import { IdsArray } from 'utils/customPropTypes';
 import { getTagLink, getTopicLink, getTagImageRenderer } from 'utils/tags';
 
 import { TOPIC } from 'constants/misc';
+import styles from './articlesByTag2.module.scss';
 
 import BlockWrapper from './BlockWrapper';
 
+const b = bem(styles);
+
 const ArticlesByTag2 = ({ block, data }) => {
  const { tagId, articlesIds } = block;
  const { tags, articles } = data;
@@ -25,41 +27,33 @@ const ArticlesByTag2 = ({ block, data }) => {
  const topicLink = getTopicLink({ topic: topicSlug, dark: true });
 
  return (
- <BlockWrapper className="articles-by-tag-2" withBackground>
- <div
- className={cn('articles-by-tag-2__labels', {
- 'articles-by-tag-2__labels--right': isBrand,
- })}
- >
- <div className="articles-by-tag-2__top-mobile-labels">
+ <BlockWrapper className={b()} withBackground>
+ <div className={b('labels', { right: isBrand })}>
+ <div className={b('top-mobile-labels')}>
  {isBrand &&
  getTagImageRenderer({
  theme: 'dark',
- className: 'articles-by-tag-2__logo',
+ className: b('logo'),
  })(tag)}
- <div className="articles-by-tag-2__label">
+ <div className={b('label')}>
  <Text id={`topic.${topicSlug}_essentials`} />: {tagLink}
  </div>
  </div>
- <div className="articles-by-tag-2__label articles-by-tag-2__bottom-desktop-label">
- {topicLink}
- </div>
+ <div className={cn(b('label'), b('bottom-desktop-label'))}>{topicLink}</div>
  </div>
 
- <div className="articles-by-tag-2__cards">
- <div className="articles-by-tag-2__card-1">
+ <div className={b('cards')}>
+ <div className={b('card-1')}>
  <ArticleCard {...first} context={['articles-by-tag-2']} />
  </div>
 
- <div className="articles-by-tag-2__card-2">
+ <div className={b('card-2')}>
  <ArticleCard {...second} context={['articles-by-tag-2']} />
  </div>
  </div>
 
- <div className="articles-by-tag-2__bottom-labels">
- <div className="articles-by-tag-2__label articles-by-tag-2__bottom-mobile-label">
- {topicLink}
- </div>
+ <div className={b('bottom-labels')}>
+ <div className={cn(b('label'), b('bottom-mobile-label'))}>{topicLink}</div>
  </div>
  </BlockWrapper>
  );

components/articles/blocks/ArticlesByTag3.js

@@ -1,4 +1,4 @@
-import './articlesByTag3.scss';
+import './articlesByTag3.module.scss';
 
 import React from 'react';
 import PropTypes from 'prop-types';

components/articles/blocks/BannerBlock.js

@@ -1,4 +1,4 @@
-import './banner.scss';
+import './banner.module.scss';
 
 import React from 'react';
 import PropTypes from 'prop-types';

components/articles/blocks/BlockWrapper.js

@@ -1,4 +1,4 @@
-import './blockWrapper.scss';
+import './blockWrapper.module.scss';
 
 import React from 'react';
 import PropTypes from 'prop-types';

components/articles/blocks/DiaryBlock.js

@@ -1,4 +1,4 @@
-import './diary.scss';
+import './diary.module.scss';
 
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';

components/articles/blocks/TagPageBlockB.js

@@ -1,4 +1,4 @@
-import './tagPageBlockB.scss';
+import './tagPageBlockB.module.scss';
 
 import React from 'react';
 import PropTypes from 'prop-types';

components/articles/blocks/TagPageBlockCD.js

@@ -1,4 +1,4 @@
-import './tagPageBlockCD.scss';
+import './tagPageBlockCD.module.scss';
 
 import React from 'react';
 import PropTypes from 'prop-types';

components/articles/blocks/TagsByTopic.js

@@ -1,4 +1,4 @@
-import './tagsByTopic.scss';
+import './tagsByTopic.module.scss';
 
 import React from 'react';
 import PropTypes from 'prop-types';

components/articles/blocks/TwoArticlesInRow.js

@@ -1,4 +1,4 @@
-import './twoInRow.scss';
+import './twoInRow.module.scss';
 
 import React from 'react';
 import PropTypes from 'prop-types';

components/articles/blocks/articlesByTag2.scss → components/articles/blocks/articlesByTag2.module.scss

@@ -1,5 +1,5 @@
-@import 'responsiveness';
-@import 'variables';
+@import 'styles/responsiveness';
+@import 'styles/variables';
 
 .articles-by-tag-2 {
  display: flex;
@@ -127,7 +127,7 @@
  }
 
  // ALERT HACK.
- &__card1 {
+ &__card-1 {
  margin: 20px 0;
  }
 

components/articles/blocks/articlesByTag3.scss → components/articles/blocks/articlesByTag3.module.scss

@@ -1,5 +1,5 @@
-@import 'responsiveness';
-@import 'variables';
+@import 'styles/responsiveness';
+@import 'styles/variables';
 
 .articles-by-tag-3 {
  &__title {