Migrate to Next PostCss default config

components/application/activity-select/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import styles from './styles.css'
+import styles from './styles.module.css'
 
 import { Icon, Drawer } from 'design'
 import { navigation } from 'texts'

components/application/index.jsx

@@ -6,7 +6,7 @@ import RepositorySelect from './repository-select'
 import ActivitySelect from './activity-select'
 import Head from './head'
 import Logout from './logout'
-import styles from './styles.css'
+import styles from './styles.module.css'
 
 import activities from 'store/activities'
 

components/application/logout.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { AppBar } from '@oacore/design'
 
-import styles from './logout.css'
+import styles from './logout.module.css'
 
 import { withGlobalStore } from 'store'
 

components/application/repository-select.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { AppBar } from '@oacore/design'
 
-import styles from './repository-select.css'
+import styles from './repository-select.module.css'
 
 import { withGlobalStore } from 'store'
 import { Select } from 'design'

components/document-link/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import styles from './styles.css'
+import styles from './styles.module.css'
 
 import { Button, Icon } from 'design'
 

components/layout/app-bar.jsx

@@ -3,7 +3,7 @@ import { AppBar } from '@oacore/design'
 import { classNames } from '@oacore/design/lib/utils'
 
 import LayoutContext from './context'
-import styles from './styles.css'
+import styles from './styles.module.css'
 
 import { AppBarToggle, Logo } from 'design'
 

components/layout/container.jsx

@@ -2,7 +2,7 @@ import React, { useReducer } from 'react'
 import { classNames } from '@oacore/design/lib/utils'
 
 import { Provider } from './context'
-import styles from './styles.css'
+import styles from './styles.module.css'
 
 const reducer = (state, action) => {
   switch (action.type) {

components/layout/main.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { classNames } from '@oacore/design/lib/utils'
 
-import styles from './styles.css'
+import styles from './styles.module.css'
 
 const Main = ({ children }) => {
   const child = React.Children.only(children)

components/layout/side-bar.jsx

@@ -3,7 +3,7 @@ import { AppBar } from '@oacore/design'
 import { classNames } from '@oacore/design/lib/utils'
 
 import LayoutContext from './context'
-import styles from './styles.css'
+import styles from './styles.module.css'
 
 import { Logo, CloseIcon } from 'design'
 

components/layout/styles.css → components/layout/styles.module.css

@@ -1,12 +1,10 @@
-:root {
-  --side-bar-width: 13rem;
-  --app-bar-skip: 3.5rem;
-}
-
 @custom-media --screen-at-least-desktop (min-width: 728px);
 @custom-media --screen-until-desktop (max-width: 727px);
 
 .container {
+  --side-bar-width: 13rem;
+  --app-bar-skip: 3.5rem;
+
   display: flex;
   flex-direction: column;
   min-height: 100%;

components/loading-bar/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { classNames } from '@oacore/design/lib/utils'
 
-import styles from './styles.css'
+import styles from './styles.module.css'
 
 const LoadingBar = ({ className, tag: Tag = 'div' }) => (
   <Tag className={classNames.use(styles.container).join(className)} />

components/table/Sidebar.jsx

@@ -1,7 +1,7 @@
 import React, { useRef } from 'react'
 import { classNames } from '@oacore/design/lib/utils'
 
-import tableClassNames from './index.css'
+import tableClassNames from './index.module.css'
 
 import { CloseIcon } from 'design'
 

components/table/TableRow.jsx

@@ -3,7 +3,7 @@ import { Table } from '@oacore/design'
 import { classNames } from '@oacore/design/lib/utils'
 import { observer } from 'mobx-react'
 
-import tableClassNames from './index.css'
+import tableClassNames from './index.module.css'
 
 const TableRow = props => {
   const { id, index, columns, context, isClickable } = props

components/table/index.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { classNames } from '@oacore/design/lib/utils'
 
 import LoadMoreRow from './LoadMoreRow'
-import tableClassNames from './index.css'
+import tableClassNames from './index.module.css'
 import NoDataFoundRow from './NoDataFoundRow'
 import TableRow from './TableRow'
 import Sidebar from './Sidebar'

components/table/index.css → components/table/index.module.css

@@ -1,8 +1,21 @@
-:root {
+@custom-media --screen-at-least-desktop (min-width: 1200px);
+
+.container {
   --table-sidebar-width: 30rem;
-}
 
-@custom-media --screen-at-least-desktop (min-width: 1200px);
+  &:not(.open) > .sidebar {
+    box-shadow: none;
+    transform: translateX(100%);
+  }
+
+  &.open > .table {
+    right: 0;
+
+    @media (--screen-at-least-desktop) {
+      margin-right: var(--table-sidebar-width);
+    }
+  }
+}
 
 /* TODO: handle this in design library perhaps */
 .table-select > input {
@@ -67,21 +80,6 @@
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
 }
 
-.container {
-  &:not(.open) > .sidebar {
-    box-shadow: none;
-    transform: translateX(100%);
-  }
-
-  &.open > .table {
-    right: 0;
-
-    @media (--screen-at-least-desktop) {
-      margin-right: var(--table-sidebar-width);
-    }
-  }
-}
-
 .clickable {
   cursor: pointer;
 }

components/takedown/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import styles from './styles.css'
+import styles from './styles.module.css'
 
 import { Button, Icon } from 'design'
 

components/time-lag-chart/index.jsx

@@ -13,7 +13,7 @@ import { nest } from 'd3-collection'
 import { sum, mean } from 'd3-array'
 
 import CustomTooltip from './tooltip'
-import styles from './index.css'
+import styles from './index.module.css'
 
 const customTicks = {
   ...Object.fromEntries(

components/time-lag-chart/tooltip.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import styles from './index.css'
+import styles from './index.module.css'
 
 const Tooltip = ({ active, payload, label, aggregationSize }) => {
   const index = parseInt(label, 10) * aggregationSize

design/alert/index.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { classNames } from '@oacore/design/lib/utils'
 
 import Card from '../card'
-import styles from './index.css'
+import styles from './index.module.css'
 
 const Alert = React.memo(({ children, variant }) => (
   <Card

design/app-bar/toggle.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { AppBarItem } from '@oacore/design'
 import { classNames } from '@oacore/design/lib/utils'
 
-import styles from './toggle.css'
+import styles from './toggle.module.css'
 
 const Toggle = React.memo(({ className, tag = 'button', ...restProps }) => (
   <AppBarItem

design/avatar/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { classNames } from '@oacore/design/lib/utils'
 
-import styles from './index.css'
+import styles from './index.module.css'
 
 const Avatar = React.memo(
   ({ className, src = '/avatar.png', alt = 'User', ...restProps }) => (

design/card/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { classNames } from '@oacore/design/lib/utils'
 
-import styles from './index.css'
+import styles from './index.module.css'
 
 const Card = ({ children, className, tag: Tag = 'div', ...restProps }) => (
   <Tag

design/card/index.css → design/card/index.module.css

@@ -1,12 +1,10 @@
-:root {
+.container {
   --card-padding-x: var(--component-padding-x, 1rem);
   --card-padding-y: var(--component-padding-y, 1rem);
   --card-background: var(--white, #fff);
   --card-corner-radius: var(--component-corner-radius, 2px);
   --card-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
-}
 
-.container {
   min-width: var(--card-min-width, 18rem);
   padding: var(--card-padding-y) var(--card-padding-x);
   background: var(--card-background);

design/close-icon/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { classNames } from '@oacore/design/lib/utils'
 
-import styles from './index.css'
+import styles from './index.module.css'
 
 const CloseIcon = React.forwardRef(
   ({ className, tag: Tag = 'span', ...restProps }, ref) => (

design/detail-list/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { classNames } from '@oacore/design/lib/utils'
 
-import styles from './styles.css'
+import styles from './styles.module.css'
 
 const DetailList = React.memo(({ children, className, ...passProps }) => (
   <ul

design/drawer/item.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { classNames } from '@oacore/design/lib/utils'
 
-import styles from './styles.css'
+import styles from './styles.module.css'
 
 const FlatItem = ({
   children,

design/drawer/list.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { classNames } from '@oacore/design/lib/utils'
 
-import styles from './styles.css'
+import styles from './styles.module.css'
 
 const List = ({ children, className, tag: Tag = 'ul', ...restProps }) => (
   <Tag className={classNames.use(styles.list).join(className)} {...restProps}>

design/drawer/styles.css → design/drawer/styles.module.css

@@ -1,12 +1,10 @@
-:root {
+.list {
   --drawer-list-padding-y: calc(var(--component-padding-y, 1rem) / 2);
   --drawer-list-padding-x: calc(var(--component-padding-x, 1rem) / 2);
   --drawer-item-padding-y: calc(var(--component-padding-y, 1rem) / 2);
   --drawer-item-padding-x: calc(var(--component-padding-x, 1rem) / 2);
   --drawer-item-spacing: calc(var(--component-padding-x, 1rem) / 2);
-}
 
-.list {
   padding: var(--drawer-list-padding-y) var(--drawer-list-padding-x);
   margin: 0;
   line-height: 1;

design/logo/index.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { classNames } from '@oacore/design/lib/utils'
 
 import logoPath from './core-symbol.svg'
-import styles from './index.css'
+import styles from './index.module.css'
 
 const Logo = React.memo(
   ({

design/numeral/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { classNames } from '@oacore/design/lib/utils'
 
-import styles from './styles.css'
+import styles from './styles.module.css'
 
 const Numeral = React.memo(
   ({ children, className, size, tag: Tag = 'div', ...restProps }) => (

design/numeral/styles.css → design/numeral/styles.module.css

@@ -1,11 +1,9 @@
-:root {
+.container {
   --numeral-value-sm-size: 2em;
   --numeral-value-md-size: 3em;
   --numeral-value-lg-size: 4em;
   --numeral-value-size: var(--numeral-value-md-size);
-}
 
-.container {
   /* For the future */
 }
 

design/overlay/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { classNames } from '@oacore/design/lib/utils'
 
-import styles from './index.css'
+import styles from './index.module.css'
 
 const Overlay = ({
   children,

design/select/index.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useRef, useCallback } from 'react'
 import classNames from 'classnames'
 
-import styles from './styles.css'
+import styles from './styles.module.css'
 
 // TODO: Taken from @oacore/design
 const generateId = () =>

design/select/styles.css → design/select/styles.module.css

@@ -1,9 +1,7 @@
-:root {
-  --select-background: var(--gray-50);
-}
-
 /* TODO: Better name, it's a div shown on top of input when not hovered */
 .input-container {
+  --select-background: var(--gray-50);
+
   position: absolute;
   top: 0;
   right: 0;