fix: convert scss to css (#759)

* fix: convert scss to css

* refactor: apply PR feedbacks

Author: jungeun-cho

apps/calendar/.storybook/main.js

@@ -1,31 +1,12 @@
 const path = require('path');
 const postcssPrefixer = require('postcss-prefixer');
 const prefix = 'toastui-calendar-';
+const custom = require('../webpack.dev.config.js')({}, {});
 
 module.exports = {
-  stories: ['../stories/**/*.stories.@(ts|tsx)'],
+  stories: ['@stories/**/*.stories.@(ts|tsx)'],
   webpackFinal: async (config) => {
-    config.module.rules.push({
-      test: /\.(ts|tsx)$/,
-      use: [
-        {
-          loader: require.resolve('ts-loader'),
-        },
-      ],
-    });
-
-    config.module.rules.push({
-      test: /\.s[ac]ss$/i,
-      use: [
-        'style-loader',
-        'css-loader',
-        {
-          loader: 'postcss-loader',
-          options: { plugins: [postcssPrefixer({ prefix })] },
-        },
-        'sass-loader',
-      ],
-    });
+    config.module.rules = custom.module.rules;
 
     config.resolve.alias = {
       ...config.resolve.alias,

apps/calendar/.storybook/preview.js

@@ -1 +1 @@
-import '../src/sass/index.scss';
+import '@src/css/index.css';

apps/calendar/babel.config.js

@@ -8,7 +8,7 @@ module.exports = {
         shippedProposals: true,
       },
     ],
-    '@babel/preset-typescript',
+    ['@babel/preset-typescript', { jsxPragma: 'h' }],
     '@babel/preset-react',
   ],
   plugins: [

apps/calendar/package-lock.json

@@ -93,22 +93,18 @@
     "karma-webpack": "^3.0.0",
     "mini-css-extract-plugin": "^0.9.0",
     "moment-timezone": "^0.5.27",
-    "node-sass": "^4.12.0",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
-    "postcss-loader": "^3.0.0",
+    "postcss-loader": "^4.2.0",
     "postcss-prefixer": "^2.1.1",
     "preact": "^10.3.2",
     "preact-markup": "^2.1.1",
     "preact-render-to-string": "^5.1.0",
     "prettier": "^2.2.1",
-    "safe-umd-webpack-plugin": "^4.0.0",
-    "sass-loader": "^8.0.0",
     "storybook": "^6.1.18",
     "style-loader": "^1.0.0",
-    "stylelint": "^13.11.0",
+    "stylelint": "^13.12.0",
     "stylelint-config-recommended": "^3.0.0",
-    "stylelint-scss": "^3.11.0",
-    "stylelint-webpack-plugin": "^0.10.5",
+    "stylelint-webpack-plugin": "^2.1.1",
     "terser-webpack-plugin": "^2.3.4",
     "timezone-mock": "^1.0.16",
     "ts-loader": "^8.0.17",

apps/calendar/package.json

@@ -0,0 +1,4 @@
+.holiday {
+  color: red;
+  font-size: 15px;
+}

apps/calendar/src/css/common.css

@@ -0,0 +1 @@
+.event-background { position: absolute; }

apps/calendar/src/css/events/background.css

@@ -0,0 +1,2 @@
+@import './background.css';
+@import './time.css';

apps/calendar/src/css/events/index.css

@@ -1,17 +1,14 @@
 .event-time {
   position: absolute;
   overflow: hidden;
-
   cursor: pointer;
-
-  .travel-time,
-  .event-time-content {
-    overflow: hidden;
-    padding: 1px 0 0 3px;
-    font-size: 12px;
-  }
 }
-
+.event-time .travel-time,
+.event-time .event-time-content {
+  overflow: hidden;
+  padding: 1px 0 0 3px;
+  font-size: 12px;
+}
 .resize-handler-x {
   position: absolute;
   right: 0;
@@ -21,6 +18,5 @@
   text-align: center;
   color: #fff;
   cursor: row-resize;
-
-  background: url(./image/handler-x.png) no-repeat center center;
+  background: url("../image/handler-x.png") no-repeat center center;
 }

apps/calendar/src/sass/events/time.scss apps/calendar/src/css/events/time.css

@@ -0,0 +1,26 @@
+.icon {
+  width: 14px;
+  height: 14px;
+  display: inline-block;
+  vertical-align: middle;
+}
+.icon.ic-title { background: url("./image/ic-subject.png") no-repeat; }
+.icon.ic-location { background: url("./image/ic-location.png") no-repeat; }
+.icon.ic-date { background: url("./image/ic-date.png") no-repeat; }
+.icon.ic-state { background: url("./image/ic-state.png") no-repeat; }
+.icon.ic-private { background: url("/image/ic-lock.png") no-repeat; }
+.icon.ic-public { background: url("./image/ic-unlock.png") no-repeat; }
+.icon.ic-close { background: url("./image/ic-close.png") no-repeat; }
+.icon.ic-user-b { background-image: url("./image/ic-user-b.png"); }
+.icon.ic-edit { background-image: url("./image/ic-edit.png"); }
+.icon.ic-delete { background-image: url("./image/ic-delete.png"); }
+.icon.ic-arrow-solid-top { background: url("./image/ic-arrow-solid-top.png") no-repeat; }
+.icon.ic-milestone { background: url("./image/ic-milestone.png") no-repeat; }
+.icon.ic-arrow-left { background: url("./image/ic-arrow-left.png") no-repeat; }
+.icon.ic-arrow-right { background: url("./image/ic-arrow-right.png") no-repeat; }
+
+.ic-location-b { background: url("./image/ic-location-b.png"); }
+
+.ic-state-b { background: url("./image/ic-state-b.png"); }
+
+.ic-repeat-b { background: url("./image/ic-repeat-b.png"); }

apps/calendar/src/css/icons.css

@@ -0,0 +1,5 @@
+@import './common.css';
+@import './layout.css';
+@import './icons.css';
+@import './timegrid/index.css';
+@import './events/index.css';

apps/calendar/src/sass/image/handler-x.png apps/calendar/src/css/image/handler-x.png

@@ -0,0 +1,17 @@
+.layout {
+  box-sizing: border-box;
+  position: relative;
+  white-space: nowrap;
+}
+.layout * { box-sizing: border-box; }
+.layout .panel-resizer { user-select: none; }
+.layout .panel-resizer:hover { border-color: #999; }
+.layout .panel-resizer-guide { position: absolute; }
+.layout .dragging { position: absolute; }
+
+.layout.horizontal .panel,
+.layout.horizontal .panel-resizer,
+.layout.horizontal .draggable {
+  display: inline-block;
+  vertical-align: middle;
+}

apps/calendar/src/sass/image/[email protected] apps/calendar/src/css/image/[email protected]

@@ -0,0 +1,39 @@
+.column {
+  position: relative;
+  border-right: 1px solid #e5e5e5;
+}
+.column .gridline {
+  position: relative;
+  height: 52px;
+  border-bottom: 1px solid #e5e5e5;
+}
+.column .gridline .gridline-half {
+  position: absolute;
+  width: 100%;
+  height: 26px;
+  border-bottom: 1px dotted #f9f9f9;
+}
+.column .guide-creation {
+  position: absolute;
+  right: 10px;
+  left: 1px;
+  padding: 3px;
+  background-color: rgba(81, 92, 230, 0.05);
+  border: 1px solid #515ce6;
+}
+.column .guide-creation .creation-label {
+  color: #515ce6;
+  font-size: 11px;
+  font-weight: bold;
+}
+.column .guide-creation .creation-label.creation-label-bottom {
+  position: absolute;
+  bottom: 3px;
+}
+.column .events {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+}

apps/calendar/src/sass/image/handler-y.png apps/calendar/src/css/image/handler-y.png

@@ -0,0 +1,3 @@
+@import './times.css';
+@import './column.css';
+@import './timegrid.css';

apps/calendar/src/sass/image/[email protected] apps/calendar/src/css/image/[email protected]

@@ -0,0 +1,69 @@
+.timegrid {
+  user-select: none;
+  position: relative;
+  height: 100%;
+}
+.timegrid .timegrid-scroll-area {
+  overflow: hidden;
+  overflow-y: auto;
+  position: relative;
+  height: 100%;
+}
+.timegrid .columns {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.timegrid .columns .column { display: inline-block; }
+.timegrid .timegrid-current-time-line {
+  position: absolute;
+  left: 0;
+  right: 0;
+}
+.timegrid .timegrid-current-time-line .timegrid-current-time-line-left {
+  position: absolute;
+}
+.timegrid .timegrid-current-time-line .timegrid-current-time-line-marker {
+  position: absolute;
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  margin: -4px 0 0 -5px;
+}
+.timegrid .timegrid-current-time-line .timegrid-current-time-line-today {
+  position: absolute;
+}
+.timegrid .timegrid-current-time-line .timegrid-current-time-line-right {
+  position: absolute;
+  right: 0;
+}
+.timegrid-sticky {
+  position: absolute;
+  top: 0;
+  border-bottom: 1px solid #e5e5e5;
+  background-color: white;
+  font-size: 11px;
+  user-select: none;
+}
+.timegrid-sticky .timegrid-timezone-label {
+  display: inline-block;
+  text-align: right;
+  padding-right: 5px;
+  border-right: 1px solid #e5e5e5;
+  height: 40px;
+  line-height: 40px;
+}
+.timegrid-sticky .timegrid-collapse-button {
+  cursor: pointer;
+  position: absolute;
+  text-align: center;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  top: 2px;
+  bottom: 2px;
+  width: 10px;
+  border-left: none;
+}
+.timegrid-sticky .timegrid-collapse-button .icon {
+  width: 5px;
+}

apps/calendar/src/sass/image/ic-arrow-left.png apps/calendar/src/css/image/ic-arrow-left.png

@@ -0,0 +1,35 @@
+.timegrid-times {
+  display: inline-block;
+  position: relative;
+  border-right: 1px solid #e5e5e5;
+  font-size: 11px;
+ }
+.timegrid-times .timegrid-time {
+  height: 52px;
+  text-align: right;
+  position: relative;
+  line-height: 52px;
+  top: -26px;
+  right: 5px;
+  color: #333;
+}
+.timegrid-times .timegrid-time.timegrid-time-past {
+  color: #bbb;
+}
+.timegrid-times .timegrid-time.timegrid-time-first {
+  top: 5px;
+  line-height: normal;
+}
+.timegrid-times .timegrid-time.timegrid-time-last {
+  height: 0;
+  top: -36px;
+}
+.timegrid-times .timegrid-time-hidden {
+  visibility: hidden;
+}
+.timegrid-times .timegrid-current-time {
+  position: absolute;
+  text-align: right;
+  right: 5px;
+  color: #515ce6;
+}