Next 9.3 Sass Modules

components/articles/Article.js

@@ -1,5 +1,3 @@
-import styles from 'styles/pages/article.module.scss';
-
 import React from 'react';
 import { useRouter } from 'next/router';
 import flatten from 'lodash/flatten';
@@ -25,6 +23,8 @@ 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);
@@ -63,7 +63,7 @@ const Article = ({
  <MetaArticleItems name="tag" list={tags.map(renderTag)} />
  <MetaArticleItems name="published_time" value={publishAt} />
  <div>
- <div className="wir-content-padding">
+ <div className={cn('wir-content-padding', styles['article-page-content'])}>
  <div className={b('subtitle')}>{subtitle}</div>
  </div>
  {type === 'text' && (

components/articles/CollectionNote.js

@@ -1,5 +1,3 @@
-import styles from 'styles/pages/article.module.scss';
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import bem from 'bem-css-modules';
@@ -12,6 +10,8 @@ import { CollectionShape, LangType } from 'utils/customPropTypes';
 
 import { ROUTES_NAMES } from 'routes';
 
+import styles from './article.module.scss';
+
 const b = bem(styles);
 
 const CollectionNoteItem = ({ className, hideLink, text, slug }) => (

styles/pages/article.module.scss → components/articles/article.module.scss

@@ -1,6 +1,5 @@
 @import 'styles/responsiveness';
 @import 'styles/variables';
-/* stylelint-disable no-descending-specificity */
 
 $block-spacing: 60px;
 $paragraph-spacing: 24px;
@@ -305,46 +304,6 @@ $content-line-height: (
  }
 }
 
-.article-page-interactive {
- margin-top: 30px;
-
- @include screen-touch {
- margin-top: 40px;
- }
-
- @include screen-tablet {
- margin-top: 50px;
- }
-
- @include screen-tablet-large {
- margin-top: 60px;
- }
-
- @include screen-desktop {
- margin-top: 72px;
- }
-
- &__video {
- height: 200px;
-
- @include screen-touch {
- height: 200px;
- }
-
- @include screen-tablet {
- height: 300px;
- }
-
- @include screen-tablet-large {
- height: 400px;
- }
-
- @include screen-desktop {
- height: 600px;
- }
- }
-}
-
 .article-page-content {
  font-size: map-get($content-font-size, mobile);
  font-style: normal;
@@ -425,239 +384,3 @@ $content-line-height: (
  height: 48px;
  }
 }
-
-.article-ordered {
- margin: 0;
-
- li {
- margin-top: 24px;
- }
-}
-
-.right-element {
- display: inline-block;
- font-size: 14px;
- line-height: 21px;
- margin: 0;
- margin-bottom: 10px;
- margin-left: 30px;
- width: 240px;
-
- @include screen-touch {
- margin-left: 60px;
- }
-
- @include screen-tablet {
- float: right;
- margin-left: 30px;
- }
-
- @include screen-tablet-large {
- float: right;
- margin-left: 30px;
- }
-
- @include screen-desktop {
- float: right;
- margin-left: 30px;
- }
-
- .article-ordered {
- padding-left: 24px;
-
- li {
- margin-top: 0;
- }
- }
-
- &.article-table,
- &.article-image {
- margin-bottom: 0;
- margin-top: 0;
-
- @include mobile {
- margin-bottom: 20px;
- margin-top: 20px;
- }
-
- @include touch {
- margin-bottom: 20px;
- margin-top: 20px;
- }
- }
-}
-
-.article-note {
- line-height: 24px;
-
- th {
- text-align: left;
- }
-
- h1 {
- font-size: 72px;
- font-weight: bold;
- line-height: 72px;
- margin: 0;
- }
-
- p {
- margin: 0;
- }
-
- li {
- margin: 0;
- }
-}
-
-.article-image {
- display: block;
- margin-bottom: $block-spacing;
- margin-top: $block-spacing;
-
- &__image {
- object-position: 50% 0;
- width: 100%;
- }
-
- &__caption {
- font-size: 14px;
- line-height: 18px;
- margin-top: 9px;
- }
-}
-
-.article-quote {
- margin: $block-spacing 0;
-
- &__text {
- border-left: 1px solid #000000;
- font-size: 20px;
- line-height: 32px;
- padding-left: 20px;
-
- @include screen-touch {
- font-size: 24px;
- line-height: 36px;
- padding-left: 24px;
- }
-
- @include screen-tablet {
- font-size: 24px;
- line-height: 36px;
- padding-left: 24px;
- }
-
- @include screen-tablet-large {
- font-size: 30px;
- line-height: 42px;
- padding-left: 30px;
- }
-
- @include screen-desktop {
- font-size: 30px;
- line-height: 42px;
- padding-left: 30px;
- }
- }
-
- &__caption {
- font-size: 12px;
- line-height: 20px;
- margin-top: 8px;
-
- @include screen-touch {
- font-size: 14px;
- line-height: 22px;
- margin-top: 10px;
- }
-
- @include screen-tablet {
- font-size: 14px;
- line-height: 22px;
- margin-top: 10px;
- }
-
- @include screen-tablet-large {
- font-size: 16px;
- line-height: 24px;
- margin-top: 12px;
- }
-
- @include screen-desktop {
- font-size: 16px;
- line-height: 24px;
- margin-top: 12px;
- }
- }
-}
-
-.article-table {
- display: flex;
- margin: $block-spacing 0;
-
- th {
- border-bottom: 0.25px solid $primary-grey-article-table;
- padding-bottom: 17px;
- text-align: left;
- }
-
- td {
- border-bottom: 0.25px solid $primary-grey-article-table;
- padding: 17px 0;
- }
-
- p {
- margin: 0;
- padding: 0;
- }
-}
-
-.article-unordered {
- list-style: none;
- margin: 0;
-
- li {
- margin-top: 24px;
-
- &::before {
- content: '— ';
- margin-left: -25px;
- }
- }
-
- p {
- display: inline;
- margin: 0;
- padding: 0;
- }
-}
-
-.article-poem {
- margin-bottom: $block-spacing;
- width: 100%;
-
- p {
- margin: auto;
- text-align: left;
- width: 50%;
- }
-}
-
-.article-split {
- margin: $block-spacing 0;
-
- tr {
- display: flex;
- justify-content: flex-start;
- }
-
- td {
- width: 50%;
- }
-
- p {
- margin: 0;
- padding: 0;
- }
-}

components/articles/blocks/ArticlesByTag2.js

@@ -44,11 +44,11 @@ const ArticlesByTag2 = ({ block, data }) => {
 
  <div className={b('cards')}>
  <div className={b('card-1')}>
- <ArticleCard {...first} context={['articles-by-tag-2']} />
+ <ArticleCard {...first} blockContext={['articles-by-tag-2']} onBackground />
  </div>
 
  <div className={b('card-2')}>
- <ArticleCard {...second} context={['articles-by-tag-2']} />
+ <ArticleCard {...second} blockContext={['articles-by-tag-2']} onBackground />
  </div>
  </div>
 

components/articles/blocks/ArticlesByTag3.js

@@ -32,7 +32,7 @@ const ArticlesByTag3 = ({ block, data }) => {
  <div className={b('cards')}>
  {articlesIds.map((id, index) => (
  <div key={id} className={b(`card-${index + 1}`)}>
- <ArticleCard {...articles[id]} context={['articles-by-tag-3']} />
+ <ArticleCard {...articles[id]} blockContext={['articles-by-tag-3']} />
  </div>
  ))}
  </div>

components/articles/blocks/BannerBlock.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import bem from 'bem-css-modules';
 import cn from 'classnames';
 
-import Picture from 'components/common/Picture';
+import Picture from 'components/common/ui/Picture';
 import ExternalLink from 'components/common/ExternalLink';
 import { useLocalization } from 'components/common/Text';
 import styles from './banner.module.scss';

components/articles/blocks/BlockWrapper.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import bem from 'bem-css-modules';
+
 import styles from './blockWrapper.module.scss';
 
 const b = bem(styles);
@@ -10,11 +11,11 @@ const BlockWrapper = ({ className, withBackground, negativeTop, children }) => (
  <div
  className={cn(
  'wir-content-padding',
- {
- 'wir-with-background': withBackground,
- 'wir-no-background': !withBackground,
- },
- b({ 'negative-margin-top': negativeTop }),
+ b({
+ 'with-background': withBackground,
+ 'no-background': !withBackground,
+  'negative-margin-top': negativeTop,
+ }),
  className
  )}
  >

components/articles/blocks/FeaturedBlock.js

@@ -12,7 +12,7 @@ const FeaturedBlock = ({ block, data }) => {
  const articleData = frozen ? articles[articleId] : latestArticles[0];
  return (
  <BlockWrapper className="featured">
- <ArticleCard {...articleData} context={['featured']} />
+ <ArticleCard {...articleData} blockContext={['featured']} />
  </BlockWrapper>
  );
 };