feat: use vite as bundler (#3)

.eslintignore

@@ -1,5 +1,3 @@
 build
 dist
-public
-*.css
-*.css.map
+public

.gitignore

@@ -30,6 +30,3 @@ yarn-error.log*
 
 .cache
 
-# this project uses scss, so automatically generated css files should be ignored
-*.css
-*.css.map

README.md

@@ -29,12 +29,6 @@ cd my-project
 npm run dev
 ```
 
-# 🎨 Styles
-
-This project is using SASS for styles, but Remix requires css in runtime.
-So when `npm run dev` runs the first time, SASS will generate all css code for you. Please don't edit this automatic generated files.
-SASS will watch for changes in your scss files and will regenerate css when it is essential.
-
 # 📖 Learn More
 
 This package includes scripts and configuration used by [Remix](https://remix.run/).\

app/components/InfoButtons/InfoButtons.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import block from 'bem-cn-lite';
+import {block} from '../../utils';
 import {Button, Icon} from '@gravity-ui/uikit';
 import {BookOpen, CopyTransparent, ListUl, LogoTelegram} from '@gravity-ui/icons';
-import Figma from '~/components/icons/Figma';
-import Storybook from '~/components/icons/Storybook';
-import GitHub from '~/components/icons/GitHub';
+import Figma from '../icons/Figma';
+import Storybook from '../icons/Storybook';
+import GitHub from '../icons/GitHub';
 
-import './InfoButtons.css';
+import './InfoButtons.scss';
 
 const b = block('info-buttons');
 

app/components/Wrapper/Wrapper.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import block from 'bem-cn-lite';
+import {block} from '../../utils';
 import {Button, Icon, Theme, ThemeProvider} from '@gravity-ui/uikit';
 import {Moon, Sun} from '@gravity-ui/icons';
 
-import './Wrapper.css';
+import './Wrapper.scss';
 
 const b = block('wrapper');
 

app/root.tsx

@@ -1,4 +1,4 @@
-import type {LinksFunction, MetaFunction} from '@remix-run/node';
+import type {MetaFunction} from '@remix-run/node';
 import {
     Links,
     LiveReload,
@@ -7,17 +7,12 @@ import {
     Scripts,
     ScrollRestoration as ScrollRestorationRemix,
 } from '@remix-run/react';
-import {cssBundleHref} from '@remix-run/css-bundle';
 import {getInitialRootClassName} from '@gravity-ui/uikit';
 
-import '~/styles/globals.css';
+import './styles/globals.scss';
 import '@gravity-ui/uikit/styles/fonts.css';
 import '@gravity-ui/uikit/styles/styles.css';
 
-export const links: LinksFunction = () => [
-    ...(cssBundleHref ? [{rel: 'stylesheet', href: cssBundleHref}] : []),
-];
-
 export const meta: MetaFunction = () => [
     {
         charset: 'utf-8',

app/routes/_index.tsx

@@ -1,9 +1,5 @@
-import {InfoButtons} from '~/components/InfoButtons';
-import {Wrapper} from '~/components/Wrapper';
-
-// TODO: remove these imports
-import '@gravity-ui/uikit/build/esm/components/Button/Button.css';
-import '@gravity-ui/uikit/build/esm/components/Icon/Icon.css';
+import {InfoButtons} from '../components/InfoButtons';
+import {Wrapper} from '../components/Wrapper';
 
 const Index = () => {
     return (

app/utils.ts

@@ -0,0 +1,4 @@
+// eslint-disable-next-line no-restricted-imports
+import {withNaming} from '@bem-react/classname';
+
+export const block = withNaming({e: '__', m: '_'});

remix.env.d.ts → env.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="@remix-run/dev" />
+/// <reference types="vite/client" />
 /// <reference types="@remix-run/node" />