Skip to content

Commit

Permalink
Set up rollup and package json for SCSS (#1491)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
sungik-choi authored Jul 13, 2023
1 parent c406f6b commit c32ac6d
Show file tree
Hide file tree
Showing 6 changed files with 686 additions and 22 deletions.
5 changes: 5 additions & 0 deletions .changeset/tall-maps-lick.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@channel.io/bezier-react": major
---

Export the css style sheet for the new design system.
11 changes: 10 additions & 1 deletion packages/bezier-react/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand All @@ -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",
Expand Down
13 changes: 13 additions & 0 deletions packages/bezier-react/rollup.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -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
Expand Down
2 changes: 2 additions & 0 deletions packages/bezier-react/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import '~/src/styles/index.scss'

/* Provider */
export { default as BezierProvider } from '~/src/providers/BezierProvider'

Expand Down
2 changes: 1 addition & 1 deletion packages/bezier-react/src/styles/_reset.scss
Original file line number Diff line number Diff line change
@@ -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";

* {
Expand Down
Loading

0 comments on commit c32ac6d

Please sign in to comment.