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}