Set up rollup and package json for SCSS (#1491)

* feat(styles): add rollup-postcss-plugin and set up build config

* chore(pkg): add css files to side effects and sub path module

* chore(changeset): add changeset

* build(rollup): add custom generate scoped name string

.changeset/tall-maps-lick.md

@@ -0,0 +1,5 @@
+---
+"@channel.io/bezier-react": major
+---
+
+Export the css style sheet for the new design system.

packages/bezier-react/package.json

@@ -15,9 +15,16 @@
       "types": "./dist/types/index.d.ts",
       "require": "./dist/cjs/index.js",
       "import": "./dist/esm/index.mjs"
+    },
+    "./style.css": {
+      "require": "./dist/cjs/style.css",
+      "import": "./dist/esm/style.css"
     }
   },
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
   "files": [
     "dist",
     "!dist/*.tsbuildinfo",
@@ -92,6 +99,7 @@
     "@types/react-dom": "^18.2.6",
     "@types/styled-components": "^5.1.26",
     "@types/uuid": "^9.0.2",
+    "autoprefixer": "^10.4.14",
     "babel-loader": "^9.1.2",
     "babel-plugin-styled-components": "^2.1.3",
     "babel-preset-react-app": "^10.0.1",
@@ -108,6 +116,7 @@
     "react-dom": "^18.2.0",
     "rollup": "^3.25.1",
     "rollup-plugin-node-externals": "^6.1.1",
+    "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-visualizer": "^5.9.2",
     "sass": "^1.63.6",
     "styled-components": "^5.3.11",

packages/bezier-react/rollup.config.mjs

@@ -8,8 +8,10 @@ import babel from '@rollup/plugin-babel'
 import commonjs from '@rollup/plugin-commonjs'
 import { nodeResolve } from '@rollup/plugin-node-resolve'
 import url from '@rollup/plugin-url'
+import autoprefixer from 'autoprefixer'
 import { defineConfig } from 'rollup'
 import nodeExternals from 'rollup-plugin-node-externals'
+import postcss from 'rollup-plugin-postcss'
 import { visualizer } from 'rollup-plugin-visualizer'
 
 const pkg = JSON.parse(
@@ -33,6 +35,17 @@ const generateConfig = ({
         replacement: rootDir,
       }],
     }),
+    postcss({
+      extract: 'style.css',
+      autoModules: true,
+      modules: {
+        /**
+         * ex. Bezier-Button__Button__1w3e4
+         */
+        generateScopedName: 'Bezier-[folder]__[local]__[hash:base64:5]',
+      },
+      plugins: [autoprefixer()],
+    }),
     /**
      * **IMPORTANT**: Order matters!
      * If you're also using @rollup/plugin-node-resolve, make sure this plugin comes before it in the plugins array

packages/bezier-react/src/index.ts

@@ -1,3 +1,5 @@
+import '~/src/styles/index.scss'
+
 /* Provider */
 export { default as BezierProvider } from '~/src/providers/BezierProvider'
 

packages/bezier-react/src/styles/_reset.scss

@@ -1,4 +1,4 @@
-// FIXME: Use absolute paths, change to resolve in bundler(rollup, webpack in storybook)
+// NOTE: Specify it as a relative path inside the monorepo so that both storybook and rollup can reference it without any setup.
 @use "../../node_modules/the-new-css-reset/css/reset.css";
 
 * {