feat: to module css

r.ts

@@ -1,14 +1,8 @@
 import { Glob } from 'bun'
-import { convertSassToCss } from './plugins/scratchCSS'
 import path from 'node:path'
 import { bundle } from 'lightningcss'
+import * as fs from 'node:fs/promises'
 
 for await (const entry of new Glob('src/**/*.css').scan()) {
-  const code = await Bun.file(entry).text()
-  const css = convertSassToCss(code)
-  console.log(entry)
-  await Bun.write(entry, css, {createPath: true})
-  const transformed = bundle({
-    filename: path.join('p', entry)
-  }).code
+  await fs.rename(entry, entry.replace('.css', '.module.css'))
 }

src/components/action-menu/action-menu.jsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import bindAll from 'lodash.bindall';
 import ReactTooltip from 'react-tooltip';
 
-import styles from './action-menu.css?module';
+import styles from './action-menu.module.css';
 
 const CLOSE_DELAY = 300; // ms
 

src/components/alerts/alert.jsx

@@ -8,7 +8,7 @@ import CloseButton from '../close-button/close-button.jsx';
 import Spinner from '../spinner/spinner.jsx';
 import {AlertLevels} from '../../lib/alerts/index.jsx';
 
-import styles from './alert.css?module';
+import styles from './alert.module.css';
 
 const closeButtonColors = {
     [AlertLevels.SUCCESS]: CloseButton.COLOR_GREEN,

src/components/alerts/alerts.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import Box from '../box/box.jsx';
 import Alert from '../../containers/alert.jsx';
 
-import styles from './alerts.css?module';
+import styles from './alerts.module.css';
 
 const AlertsComponent = ({
     alertsList,

src/components/alerts/inline-message.jsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import Spinner from '../spinner/spinner.jsx';
 import {AlertLevels} from '../../lib/alerts/index.jsx';
 
-import styles from './inline-message.css?module';
+import styles from './inline-message.module.css';
 
 const InlineMessageComponent = ({
     content,

src/components/asset-panel/asset-panel.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import Box from '../box/box.jsx';
 import Selector from './selector.jsx';
-import styles from './asset-panel.css?module';
+import styles from './asset-panel.module.css';
 
 const AssetPanel = props => (
     <Box className={styles.wrapper}>

src/components/asset-panel/selector.jsx

@@ -8,7 +8,7 @@ import SortableAsset from './sortable-asset.jsx';
 import SortableHOC from '../../lib/sortable-hoc.jsx';
 import DragConstants from '../../lib/drag-constants';
 
-import styles from './selector.css?module';
+import styles from './selector.module.css';
 
 const Selector = props => {
     const {

src/components/audio-trimmer/audio-selector.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 import Box from '../box/box.jsx';
-import styles from './audio-trimmer.css?module';
+import styles from './audio-trimmer.module.css';
 import SelectionHandle from './selection-handle.jsx';
 import Playhead from './playhead.jsx';
 

src/components/audio-trimmer/audio-trimmer.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 import Box from '../box/box.jsx';
-import styles from './audio-trimmer.css?module';
+import styles from './audio-trimmer.module.css';
 import SelectionHandle from './selection-handle.jsx';
 import Playhead from './playhead.jsx';
 

src/components/audio-trimmer/playhead.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
-import styles from './audio-trimmer.css?module';
+import styles from './audio-trimmer.module.css';
 
 const Playhead = props => (
     <div className={styles.playheadContainer}>

src/components/audio-trimmer/selection-handle.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 import Box from '../box/box.jsx';
-import styles from './audio-trimmer.css?module';
+import styles from './audio-trimmer.module.css';
 import handleIcon from './icon--handle.svg';
 
 const SelectionHandle = props => (

src/components/backpack/backpack.jsx

@@ -5,7 +5,7 @@ import {FormattedMessage, defineMessages, injectIntl, intlShape} from 'react-int
 import DragConstants from '../../lib/drag-constants';
 import {ComingSoonTooltip} from '../coming-soon/coming-soon.jsx';
 import SpriteSelectorItem from '../../containers/sprite-selector-item.jsx';
-import styles from './backpack.css?module';
+import styles from './backpack.module.css';
 
 // TODO make sprite selector item not require onClick
 const noop = () => {};

src/components/blocks/blocks.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import React from 'react';
 import Box from '../box/box.jsx';
-import styles from './blocks.css?module';
+import styles from './blocks.module.css';
 
 const BlocksComponent = props => {
     const {

src/components/box/box.jsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import stylePropType from 'react-style-proptype';
-import styles from './box.css?module';
+import styles from './box.module.css';
 
 const getRandomColor = (function () {
     // In "DEBUG" mode this is used to output a random background color for each

src/components/browser-modal/browser-modal.jsx

@@ -4,7 +4,7 @@ import ReactModal from 'react-modal';
 import Box from '../box/box.jsx';
 import {defineMessages, injectIntl, intlShape, FormattedMessage} from 'react-intl';
 
-import styles from './browser-modal.css?module';
+import styles from './browser-modal.module.css';
 import unhappyBrowser from './unsupported-browser.svg';
 
 const messages = defineMessages({

src/components/button/button.jsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import styles from './button.css?module';
+import styles from './button.module.css';
 
 const ButtonComponent = ({
     className,

src/components/cards/cards.jsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import {FormattedMessage} from 'react-intl';
 import Draggable from 'react-draggable';
 
-import styles from './card.css?module';
+import styles from './card.module.css';
 
 import shrinkIcon from './icon--shrink.svg';
 import expandIcon from './icon--expand.svg';

src/components/close-button/close-button.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 
-import styles from './close-button.css?module';
+import styles from './close-button.module.css';
 import closeIcon from './icon--close.svg';
 import closeIconOrange from './icon--close-orange.svg';
 import backIcon from '../../lib/assets/icon--back.svg';

src/components/coming-soon/coming-soon.jsx

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import ReactTooltip from 'react-tooltip';
 
-import styles from './coming-soon.css?module';
+import styles from './coming-soon.module.css';
 
 import awwCatIcon from './aww-cat.png';
 import coolCatIcon from './cool-cat.png';

src/components/connection-modal/auto-scanning-step.jsx

@@ -16,7 +16,7 @@ import enterUpdateIcon from './icons/enter-update.svg';
 import radarIcon from './icons/searching.png';
 import warningIcon from './icons/warning.svg';
 
-import styles from './connection-modal.css?module';
+import styles from './connection-modal.module.css';
 
 const PHASES = keyMirror({
     prescan: null,

src/components/connection-modal/connected-step.jsx

@@ -5,7 +5,7 @@ import React from 'react';
 import Box from '../box/box.jsx';
 import Dots from './dots.jsx';
 import bluetoothIcon from './icons/bluetooth-white.svg';
-import styles from './connection-modal.css?module';
+import styles from './connection-modal.module.css';
 import classNames from 'classnames';
 
 const ConnectedStep = props => (

src/components/connection-modal/connecting-step.jsx

@@ -9,7 +9,7 @@ import Dots from './dots.jsx';
 import bluetoothIcon from './icons/bluetooth-white.svg';
 import closeIcon from '../close-button/icon--close.svg';
 
-import styles from './connection-modal.css?module';
+import styles from './connection-modal.module.css';
 
 const ConnectingStep = props => (
     <Box className={styles.body}>

src/components/connection-modal/connection-modal.jsx

@@ -13,7 +13,7 @@ import ErrorStep from './error-step.jsx';
 import UnavailableStep from './unavailable-step.jsx';
 import UpdatePeripheralStep from './update-peripheral-step.jsx';
 
-import styles from './connection-modal.css?module';
+import styles from './connection-modal.module.css';
 
 const PHASES = keyMirror({
     scanning: null,

src/components/connection-modal/dots.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 import Box from '../box/box.jsx';
-import styles from './connection-modal.css?module';
+import styles from './connection-modal.module.css';
 
 const Dots = props => (
     <Box

src/components/connection-modal/error-step.jsx

@@ -8,7 +8,7 @@ import Dots from './dots.jsx';
 import helpIcon from './icons/help.svg';
 import backIcon from './icons/back.svg';
 
-import styles from './connection-modal.css?module';
+import styles from './connection-modal.module.css';
 
 const ErrorStep = props => (
     <Box className={styles.body}>

src/components/connection-modal/peripheral-tile.jsx

@@ -5,7 +5,7 @@ import React from 'react';
 import bindAll from 'lodash.bindall';
 import Box from '../box/box.jsx';
 
-import styles from './connection-modal.css?module';
+import styles from './connection-modal.module.css';
 
 class PeripheralTile extends React.Component {
     constructor (props) {

src/components/connection-modal/scanning-step.jsx

@@ -13,7 +13,7 @@ import radarIcon from './icons/searching.png';
 import refreshIcon from './icons/refresh.svg';
 import warningIcon from './icons/warning.svg';
 
-import styles from './connection-modal.css?module';
+import styles from './connection-modal.module.css';
 
 const ScanningStep = props => {
     const showUpdate = !!(props.onUpdatePeripheral && !props.scanning);

src/components/connection-modal/unavailable-step.jsx

@@ -10,7 +10,7 @@ import backIcon from './icons/back.svg';
 import bluetoothIcon from './icons/bluetooth.svg';
 import scratchLinkIcon from './icons/scratchlink.svg';
 
-import styles from './connection-modal.css?module';
+import styles from './connection-modal.module.css';
 
 const UnavailableStep = props => (
     <Box className={styles.body}>

src/components/connection-modal/update-peripheral-step.jsx

@@ -14,7 +14,7 @@ import backIcon from './icons/back.svg';
 import sendUpdateIcon from './icons/send-update.svg';
 import sendUpdateGlyph from './icons/send-update-white.svg';
 
-import styles from './connection-modal.css?module';
+import styles from './connection-modal.module.css';
 
 /** @enum{string} UPDATE_ACTIVITY */
 const UPDATE_ACTIVITY = keyMirror({

src/components/context-menu/context-menu.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import {ContextMenu, MenuItem} from 'react-contextmenu';
 import classNames from 'classnames';
 
-import styles from './context-menu.css?module';
+import styles from './context-menu.module.css';
 
 const StyledContextMenu = props => (
     <ContextMenu

src/components/controls/controls.jsx

@@ -7,7 +7,7 @@ import GreenFlag from '../green-flag/green-flag.jsx';
 import StopAll from '../stop-all/stop-all.jsx';
 import TurboMode from '../turbo-mode/turbo-mode.jsx';
 
-import styles from './controls.css?module';
+import styles from './controls.module.css';
 
 const messages = defineMessages({
     goTitle: {

src/components/crash-message/crash-message.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import Box from '../box/box.jsx';
 import {FormattedMessage} from 'react-intl';
 
-import styles from './crash-message.css?module';
+import styles from './crash-message.module.css';
 import reloadIcon from './reload.svg';
 
 const CrashMessage = props => (

src/components/custom-procedures/custom-procedures.jsx

@@ -8,7 +8,7 @@ import booleanInputIcon from './icon--boolean-input.svg';
 import textInputIcon from './icon--text-input.svg';
 import labelIcon from './icon--label.svg';
 
-import styles from './custom-procedures.css?module';
+import styles from './custom-procedures.module.css';
 
 const messages = defineMessages({
     myblockModalTitle: {

src/components/debug-modal/debug-modal.jsx

@@ -5,7 +5,7 @@ import ReactModal from 'react-modal';
 import classNames from 'classnames';
 import {sections} from './sections/sections';
 
-import styles from './debug-modal.css?module';
+import styles from './debug-modal.module.css';
 import debugIcon from './icons/icon--debug.svg';
 import debugIconInverted from './icons/icon--debug-inverted.svg';
 import closeIcon from './icons/icon--close.svg';

src/components/delete-button/delete-button.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 
-import styles from './delete-button.css?module';
+import styles from './delete-button.module.css';
 import deleteIcon from './icon--delete.svg';
 
 const DeleteButton = props => (

src/components/delete-confirmation-prompt/delete-confirmation-prompt.jsx

@@ -10,7 +10,7 @@ import undoIcon from './icon--undo.svg';
 import arrowLeftIcon from './icon--arrow-left.svg';
 import arrowRightIcon from './icon--arrow-right.svg';
 
-import styles from './delete-confirmation-prompt.css?module';
+import styles from './delete-confirmation-prompt.module.css';
 
 // TODO: Parametrize from outside if we want more custom messaging
 const messages = defineMessages({

src/components/direction-picker/dial.jsx

@@ -3,7 +3,7 @@ import bindAll from 'lodash.bindall';
 import React from 'react';
 import {getEventXY} from '../../lib/touch-utils';
 
-import styles from './dial.css?module';
+import styles from './dial.module.css';
 
 import dialFace from './icon--dial.svg';
 import dialHandle from './icon--handle.svg';

src/components/direction-picker/direction-picker.jsx

@@ -9,7 +9,7 @@ import BufferedInputHOC from '../forms/buffered-input-hoc.jsx';
 import ToggleButtons from '../toggle-buttons/toggle-buttons.jsx';
 import Dial from './dial.jsx';
 
-import styles from './direction-picker.css?module';
+import styles from './direction-picker.module.css';
 
 import allAroundIcon from './icon--all-around.svg';
 import leftRightIcon from './icon--left-right.svg';

src/components/divider/divider.jsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import styles from './divider.css?module';
+import styles from './divider.module.css';
 
 const Divider = ({className}) => (
     <div className={classNames(styles.divider, className)} />

src/components/drag-layer/drag-layer.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styles from './drag-layer.css?module';
+import styles from './drag-layer.module.css';
 
 /* eslint no-confusing-arrow: ["error", {"allowParens": true}] */
 const DragLayer = ({dragging, img, currentOffset}) => (dragging ? (

src/components/filter/filter.jsx

@@ -4,7 +4,7 @@ import React from 'react';
 
 import filterIcon from './icon--filter.svg';
 import xIcon from './icon--x.svg';
-import styles from './filter.css?module';
+import styles from './filter.module.css';
 
 const FilterComponent = props => {
     const {

src/components/forms/input.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 
-import styles from './input.css?module';
+import styles from './input.module.css';
 
 const Input = props => {
     const {small, ...componentProps} = props;

src/components/forms/label.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import styles from './label.css?module';
+import styles from './label.module.css';
 
 const Label = props => (
     <label className={props.above ? styles.inputGroupColumn : styles.inputGroup}>