Update SASS module import

website/src/components/accordion.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 import Link from './link'
-import classes from '../styles/accordion.module.sass'
+import * as classes from '../styles/accordion.module.sass'
 
 export default function Accordion({ title, id, expanded = false, spaced = false, children }) {
     const [isExpanded, setIsExpanded] = useState(true)

website/src/components/alert.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 import Icon from './icon'
-import classes from '../styles/alert.module.sass'
+import * as classes from '../styles/alert.module.sass'
 
 export default function Alert({ title, icon, variant, closeOnClick = true, children }) {
     const [visible, setVisible] = useState(true)

website/src/components/aside.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import classes from '../styles/aside.module.sass'
+import * as classes from '../styles/aside.module.sass'
 
 export default function Aside({ title, children }) {
     return (

website/src/components/button.js

@@ -4,7 +4,7 @@ import classNames from 'classnames'
 
 import Link from './link'
 import Icon from './icon'
-import classes from '../styles/button.module.sass'
+import * as classes from '../styles/button.module.sass'
 
 export default function Button({
     to,

website/src/components/card.js

@@ -4,7 +4,7 @@ import classNames from 'classnames'
 
 import Link from './link'
 import { H5 } from './typography'
-import classes from '../styles/card.module.sass'
+import * as classes from '../styles/card.module.sass'
 
 export default function Card({ title, to, image, header, small, onClick, children }) {
     return (

website/src/components/code.js

@@ -11,7 +11,7 @@ import CUSTOM_TYPES from '../../meta/type-annotations.json'
 import { isString, htmlToReact } from './util'
 import Link, { OptionalLink } from './link'
 import GitHubCode from './github'
-import classes from '../styles/code.module.sass'
+import * as classes from '../styles/code.module.sass'
 
 const WRAP_THRESHOLD = 30
 const CLI_GROUPS = ['init', 'debug', 'project', 'ray', 'huggingface-hub']

website/src/components/copy.js

@@ -1,7 +1,7 @@
 import React, { useState, useRef } from 'react'
 
 import Icon from './icon'
-import classes from '../styles/copy.module.sass'
+import * as classes from '../styles/copy.module.sass'
 
 export function copyToClipboard(ref, callback) {
     const isClient = typeof window !== 'undefined'

website/src/components/dropdown.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { navigate } from 'gatsby'
 
-import classes from '../styles/dropdown.module.sass'
+import * as classes from '../styles/dropdown.module.sass'
 
 export default function Dropdown({ defaultValue, className, onChange, children }) {
     const defaultOnChange = ({ target }) => {

website/src/components/embed.js

@@ -7,7 +7,7 @@ import Button from './button'
 import { InlineCode } from './code'
 import { markdownToReact } from './util'
 
-import classes from '../styles/embed.module.sass'
+import * as classes from '../styles/embed.module.sass'
 
 const YouTube = ({ id, ratio = '16x9', className }) => {
     const embedClassNames = classNames(classes.root, classes.responsive, className, {

website/src/components/footer.js

@@ -7,7 +7,7 @@ import Link from './link'
 import Grid from './grid'
 import Newsletter from './newsletter'
 import ExplosionLogo from '-!svg-react-loader!../images/explosion.svg'
-import classes from '../styles/footer.module.sass'
+import * as classes from '../styles/footer.module.sass'
 
 export default function Footer({ wide = false }) {
     return (

website/src/components/github.js

@@ -5,7 +5,7 @@ import highlightCode from 'gatsby-remark-prismjs/highlight-code.js'
 
 import Icon from './icon'
 import Link from './link'
-import classes from '../styles/code.module.sass'
+import * as classes from '../styles/code.module.sass'
 
 const defaultErrorMsg = `Can't fetch code example from GitHub :(
 

website/src/components/grid.js

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import classes from '../styles/grid.module.sass'
+import * as classes from '../styles/grid.module.sass'
 
 export default function Grid({
     cols = 1,

website/src/components/icon.js

@@ -26,7 +26,7 @@ import DownloadIcon from '-!svg-react-loader!../images/icons/download.svg'
 import PackageIcon from '-!svg-react-loader!../images/icons/package.svg'
 
 import { isString } from './util'
-import classes from '../styles/icon.module.sass'
+import * as classes from '../styles/icon.module.sass'
 
 const icons = {
     github: GitHubIcon,

website/src/components/infobox.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 import Icon from './icon'
-import classes from '../styles/infobox.module.sass'
+import * as classes from '../styles/infobox.module.sass'
 
 export default function Infobox({
     title,

website/src/components/landing.js

@@ -14,7 +14,7 @@ import Button from './button'
 import CodeBlock from './code'
 import { H1, H2, H3 } from './typography'
 import Link from './link'
-import classes from '../styles/landing.module.sass'
+import * as classes from '../styles/landing.module.sass'
 
 function getPattern(nightly, legacy) {
     if (nightly) return { pattern: patternNightly, overlay: overlayNightly }

website/src/components/link.js

@@ -4,7 +4,7 @@ import { Link as GatsbyLink } from 'gatsby'
 import classNames from 'classnames'
 
 import Icon from './icon'
-import classes from '../styles/link.module.sass'
+import * as classes from '../styles/link.module.sass'
 import { isString, isImage } from './util'
 
 const internalRegex = /(http(s?)):\/\/(prodi.gy|spacy.io|irl.spacy.io|explosion.ai|course.spacy.io)/gi

website/src/components/list.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import classNames from 'classnames'
 
-import classes from '../styles/list.module.sass'
+import * as classes from '../styles/list.module.sass'
 import { replaceEmoji } from './icon'
 
 export const Ol = props => <ol className={classes.ol} {...props} />

website/src/components/main.js

@@ -7,7 +7,7 @@ import patternGreen from '../images/pattern_green.jpg'
 import patternPurple from '../images/pattern_purple.jpg'
 import patternNightly from '../images/pattern_nightly.jpg'
 import patternLegacy from '../images/pattern_legacy.jpg'
-import classes from '../styles/main.module.sass'
+import * as classes from '../styles/main.module.sass'
 
 const patterns = {
     blue: patternBlue,

website/src/components/navigation.js

@@ -8,7 +8,7 @@ import Icon from './icon'
 import Dropdown from './dropdown'
 import { github } from './util'
 import Logo from '-!svg-react-loader!../images/logo.svg'
-import classes from '../styles/navigation.module.sass'
+import * as classes from '../styles/navigation.module.sass'
 
 const NavigationDropdown = ({ items = [], section }) => {
     const active = items.find(({ text }) => text.toLowerCase() === section)

website/src/components/newsletter.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import classes from '../styles/newsletter.module.sass'
+import * as classes from '../styles/newsletter.module.sass'
 
 export default function Newsletter({ user, id, list }) {
     const action = `//${user}.list-manage.com/subscribe/post?u=${id}&id=${list}`

website/src/components/progress.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react'
 import { document, window } from 'browser-monads'
 
-import classes from '../styles/progress.module.sass'
+import * as classes from '../styles/progress.module.sass'
 
 function getOffset() {
     const height = Math.max(

website/src/components/quickstart.js

@@ -7,7 +7,7 @@ import Section from './section'
 import Icon from './icon'
 import { H2 } from './typography'
 import { copyToClipboard } from './copy'
-import classes from '../styles/quickstart.module.sass'
+import * as classes from '../styles/quickstart.module.sass'
 
 function getNewChecked(optionId, checkedForId, multiple) {
     if (!multiple) return [optionId]

website/src/components/readnext.js

@@ -5,7 +5,7 @@ import Icon from './icon'
 import Link from './link'
 import { Label } from './typography'
 
-import classes from '../styles/readnext.module.sass'
+import * as classes from '../styles/readnext.module.sass'
 
 export default function ReadNext({ title, to }) {
     return (

website/src/components/search.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { window } from 'browser-monads'
 
 import Icon from './icon'
-import classes from '../styles/search.module.sass'
+import * as classes from '../styles/search.module.sass'
 
 export default function Search({ id = 'docsearch', placeholder = 'Search docs', settings = {} }) {
     const { apiKey, indexName, appId } = settings

website/src/components/section.js

@@ -4,7 +4,7 @@ import classNames from 'classnames'
 import { useInView } from 'react-intersection-observer'
 import { window } from 'browser-monads'
 
-import classes from '../styles/section.module.sass'
+import * as classes from '../styles/section.module.sass'
 
 export default function Section({ id, className, ...props }) {
     const sectionClassNames = classNames(classes.root, className)

website/src/components/sidebar.js

@@ -6,7 +6,7 @@ import { window } from 'browser-monads'
 import Link from './link'
 import Tag from './tag'
 import Dropdown from './dropdown'
-import classes from '../styles/sidebar.module.sass'
+import * as classes from '../styles/sidebar.module.sass'
 
 function getActiveHeading(items, slug) {
     if (/^\/?universe/.test(slug)) return 'Universe'

website/src/components/table.js

@@ -3,7 +3,7 @@ import classNames from 'classnames'
 
 import { replaceEmoji } from './icon'
 import { isString } from './util'
-import classes from '../styles/table.module.sass'
+import * as classes from '../styles/table.module.sass'
 
 const FOOT_ROW_REGEX = /^(RETURNS|YIELDS|CREATES|PRINTS|EXECUTES|UPLOADS|DOWNLOADS)/
 

website/src/components/tag.js

@@ -4,7 +4,7 @@ import classNames from 'classnames'
 
 import { isString } from './util'
 import Icon from './icon'
-import classes from '../styles/tag.module.sass'
+import * as classes from '../styles/tag.module.sass'
 
 const MIN_VERSION = 3
 

website/src/components/title.js

@@ -9,7 +9,7 @@ import { InlineCode } from './code'
 import { H1, Label, InlineList, Help } from './typography'
 import Icon from './icon'
 
-import classes from '../styles/title.module.sass'
+import * as classes from '../styles/title.module.sass'
 
 const MetaItem = ({ label, url, children, help }) => (
     <span>

website/src/components/typography.js

@@ -6,7 +6,7 @@ import Tag from './tag'
 import Button from './button'
 import Icon from './icon'
 import { isString, github, headingTextClassName } from './util'
-import classes from '../styles/typography.module.sass'
+import * as classes from '../styles/typography.module.sass'
 
 export const H1 = ({ Component = 'h1', className, ...props }) => (
     <Headline