refactor: SCSS를 전부 CSS in JS로 마이그레이션 (#123)

.storybook/preview.js

@@ -1,4 +1,3 @@
-import '../src/sass/index.scss';
 import React from 'react';
 import { LubyconUIKitProvider, Container } from 'src';
 

.yarn/build-state.yml

@@ -3,7 +3,7 @@
 
 # @lubycon/ui-kit@workspace:.
 "89e6f5396cad5f9e76a8f8f663ee9bec9593a9910960e2ef97f85e4b1a1e83a4cd81a2f62b8ffa71ab87a9e7f80a70427f020a47eee9290a5ab341ceaf8973d8":
-  6b21d0cbf035aa249c55f7e69ba547ff927fb10222f668000c333908c2be6efa4756cf6bbf74173b6507147cf152c9fd70962d874753bb79ed2128a0a7d85ab9
+  39cbf3dc0bd5474da1a4cc3e29b94cc793daf52ed0d3ebf6dd0f2cc64ddfe06bba48785ba2e276308a3e3041b7a9753217c559466a21528e784dc7e4092b22c0
 
 # core-js-pure@npm:3.15.2
 "2b9d54bed09edbafda0a9ce9f0deda44bf0efa20a7b5f95fe23989dc8c819b47060dc585fe847db1ac1bd37446f744ace40b4f278c3dd220a77dbead039008ef":

package.json

@@ -103,7 +103,6 @@
     "@types/react-dom": "^16.9.8",
     "@typescript-eslint/eslint-plugin": "^4.6.1",
     "@typescript-eslint/parser": "^4.6.1",
-    "autoprefixer": "^9.0.0",
     "babel-loader": "^8.2.1",
     "classnames": "^2.2.6",
     "eslint": "^7.14.0",
@@ -123,7 +122,6 @@
     "remark-codesandbox": "^0.10.0",
     "rollup": "^2.33.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^3.1.8",
     "rollup-plugin-typescript2": "^0.29.0",
     "sass": "^1.29.0",
     "semantic-release": "^17.2.4",

rollup.config.js

@@ -1,23 +1,12 @@
 import path from 'path';
-import autoprefixer from 'autoprefixer';
 import commonjs from '@rollup/plugin-commonjs';
 import resolve from '@rollup/plugin-node-resolve';
-import postcss from 'rollup-plugin-postcss';
 import typescript from 'rollup-plugin-typescript2';
 import babel from '@rollup/plugin-babel';
 
 const extensions = ['.js', '.jsx', '.ts', '.tsx'];
 
-export default [
-  buildCJS('src/index.ts'),
-  buildESM('src/index.ts'),
-  buildCSS('src/sass/index.scss', 'css/lubycon-ui-kit.css'),
-  buildCSS('src/sass/index.scss', 'css/lubycon-ui-kit.min.css', {
-    minimize: {
-      preset: ['default'],
-    },
-  }),
-];
+export default [buildCJS('src/index.ts'), buildESM('src/index.ts')];
 
 function buildJS(input, output, format) {
   return {
@@ -41,26 +30,10 @@ function buildJS(input, output, format) {
 
 function buildCJS(input) {
   const filename = path.parse(input).name;
-
   return buildJS(input, `dist/${filename}.js`, 'cjs');
 }
 
 function buildESM(input) {
   const filename = path.parse(input).name;
   return buildJS(input, `dist/esm/${filename}.js`, 'es');
 }
-
-function buildCSS(inputFile, outputFile, postCSSOptions = {}) {
-  return {
-    input: inputFile,
-    output: { file: `dist/${outputFile}`, format: 'cjs' }, // format is not used.
-    plugins: [
-      postcss({
-        plugins: [autoprefixer],
-        extract: true,
-        extensions: ['.scss', '.css'],
-        ...postCSSOptions,
-      }),
-    ],
-  };
-}

src/components/Container/index.tsx

@@ -1,24 +1,23 @@
 import { HTMLAttributes } from 'react';
-import classnames from 'classnames';
+import { isMatchedSM } from 'src/utils/mediaQuery';
 interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
   fluid?: boolean;
 }
 
 export default function Container({
   children,
   fluid = false,
-  className,
   ...props
 }: ContainerProps): JSX.Element {
+  const maxWidth = isMatchedSM() ? '1200px' : fluid ? 'auto' : 'none';
+
   return (
     <div
-      className={classnames(
-        'lubycon-container',
-        {
-          'lubycon-container--fluid': fluid === true,
-        },
-        className
-      )}
+      css={{
+        width: '100%',
+        maxWidth,
+        margin: '0 auto',
+      }}
       {...props}
     >
       {children}

src/components/Grid/Column.tsx

@@ -1,7 +1,8 @@
 import { ElementType, useMemo, forwardRef } from 'react';
 import { ColumnSize, ColumnResponsive, DEFAULT_ELEMENT } from './types';
 import { OverridableProps } from '../../types/OverridableProps';
-import classNames from 'classnames';
+import { gridGutter, maxColumns } from './constants';
+import { mediaQuery } from '../../utils/mediaQuery';
 
 const sizes: ColumnResponsive[] = ['xl', 'lg', 'md', 'sm', 'xs'];
 
@@ -15,14 +16,29 @@ type ColumnProps<T extends ElementType = typeof DEFAULT_ELEMENT> = OverridablePr
 >;
 
 const Column = <T extends React.ElementType = typeof DEFAULT_ELEMENT>(
-  { as, className, ...props }: ColumnProps<T>,
+  { as, ...props }: ColumnProps<T>,
   ref: React.Ref<any>
 ) => {
-  const spanClasses = useMemo(
+  const spanStyles = useMemo(
     () =>
       sizes.map((size) => {
         const { [size]: sizeValue } = props;
-        return sizeValue ? `lubycon-grid__column--${size}--${sizeValue}` : '';
+
+        if (sizeValue == null) {
+          return {};
+        }
+
+        return mediaQuery(
+          size,
+          sizeValue === 'auto'
+            ? {
+                flex: '0 0 auto',
+              }
+            : {
+                flex: `0 0 ${(sizeValue / maxColumns) * 100}%`,
+                width: `${(sizeValue / maxColumns) * 100}%`,
+              }
+        );
       }),
     []
   );
@@ -33,7 +49,19 @@ const Column = <T extends React.ElementType = typeof DEFAULT_ELEMENT>(
   return (
     <Component
       ref={ref}
-      className={classNames(`lubycon-grid__column`, className, ...spanClasses)}
+      css={[
+        {
+          position: 'relative',
+          paddingRight: gridGutter / 2,
+          paddingLeft: gridGutter / 2,
+          flexBasis: 0,
+          flexGrow: 1,
+          minWidth: 0,
+          maxWidth: '100%',
+          boxSizing: 'border-box',
+        },
+        ...spanStyles,
+      ]}
       {...props}
     />
   );

src/components/Grid/Row.tsx

@@ -1,7 +1,7 @@
 import { ElementType, Ref, forwardRef } from 'react';
 import { DEFAULT_ELEMENT } from './types';
-import classnames from 'classnames';
 import { OverridableProps } from '../../types/OverridableProps';
+import { gridGutter } from './constants';
 
 type BaseAlign = 'flex-start' | 'center' | 'flex-end';
 interface RowBaseProps {
@@ -17,7 +17,6 @@ const Row = <T extends ElementType = typeof DEFAULT_ELEMENT>(
     direction = 'row',
     justify = 'flex-start',
     alignItems = 'flex-start',
-    className,
     ...props
   }: RowProps<T>,
   ref: Ref<any>
@@ -27,13 +26,15 @@ const Row = <T extends ElementType = typeof DEFAULT_ELEMENT>(
   return (
     <Component
       ref={ref}
-      className={classnames(
-        'lubycon-grid__row',
-        `lubycon-grid__row--direction-${direction}`,
-        `lubycon-grid__row--justify-${justify}`,
-        `lubycon-grid__row--align-items-${alignItems}`,
-        className
-      )}
+      css={{
+        display: 'flex',
+        flexDirection: direction,
+        justifyContent: justify,
+        alignItems: alignItems,
+        margin: `0 ${gridGutter / 2}px`,
+        flexWrap: 'wrap',
+        boxSizing: 'border-box',
+      }}
       {...props}
     />
   );

src/components/Grid/constants.ts

@@ -0,0 +1,2 @@
+export const gridGutter = 12;
+export const maxColumns = 12;