@atomic-layout/emotion: Adds "cjs" build

kettanaito · Dec 17, 2019 · 08feb63 · 08feb63
1 parent 89a067e
commit 08feb63
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 28 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -202,6 +202,21 @@ jobs:
   ##
   # Emotion
   ##
+  emotion-build-cjs:
+    <<: *node-env
+    steps:
+      - attach_workspace: *workspace
+      - restore_cache: *yarn-cache
+      - run:
+          name: Building CJS module (emotion)
+          command: yarn build:cjs
+          working_directory: packages/atomic-layout-emotion
+      - run:
+          name: Chechking CJS bundle size
+          command: yarn bundlesize:cjs
+          working_directory: packages/atomic-layout-emotion
+      - persist_to_workspace: *persist-build
+
   emotion-build-umd:
     <<: *node-env
     steps:
@@ -258,6 +273,10 @@ workflows:
             - styled-build-esm
 
       # emotion
+       emotion-build-cjs:
+          requires:
+            - bootstrap
+
       - emotion-build-umd:
           requires:
             - bootstrap
diff --git a/packages/atomic-layout-emotion/babel.config.js b/packages/atomic-layout-emotion/babel.config.js
@@ -1,7 +1,14 @@
 const path = require('path')
 
+const rootConfigPath = path.resolve(__dirname, '../..', 'babel.config.js')
+
+console.log(
+  '@atomic-layout/emotion: loading babel config at "%s"',
+  rootConfigPath,
+)
+
 module.exports = {
   // Resolve the path otherwise it gets resolved relatively
   // to Storybook main entry module during the Storybook build.
-  extends: path.resolve(__dirname, '../..', 'babel.config.js'),
+  extends: rootConfigPath,
 }
diff --git a/packages/atomic-layout-emotion/package.json b/packages/atomic-layout-emotion/package.json
@@ -10,14 +10,20 @@
     "start": "rollup -c -w",
     "storybook": "cross-env PACKAGE=packages/atomic-layout-emotion MODULE_TYPE=umd start-storybook -p 6020 -c ../../.storybook",
     "lint": "tslint -c tslint.json 'src/**/*.{ts,tsx}'",
+    "build:cjs": "rollup -c --environment NODE_ENV:production,TARGET:cjs",
     "build:umd": "rollup -c --environment NODE_ENV:production,TARGET:umd",
     "build:storybook:umd": "cross-env PACKAGE=packages/atomic-layout-emotion MODULE_TYPE=umd build-storybook -c ../../.storybook",
     "bundlesize": "bundlesize",
+    "bundlesize:cjs": "bundlesize -f lib/cjs/index.js",
     "bundlesize:umd": "bundlesize -f lib/umd/index.js",
     "cypress": "(cd ../../ && cypress open --env envName=dev)",
     "test:e2e": "(cd ../../ && cypress run --spec ./examples/all.test.js --browser chrome --env envName=ci,package=packages/atomic-layout-emotion)"
   },
   "bundlesize": [
+    {
+      "path": "lib/cjs/index.js",
+      "maxSize": "10 kB"
+    },
     {
       "path": "lib/umd/index.js",
       "maxSize": "10 kB"
@@ -31,8 +37,13 @@
   "dependencies": {
     "@atomic-layout/core": "^0.11.0"
   },
+  "devDependencies": {
+    "@emotion/core": "10.0.22",
+    "@emotion/styled": "10.0.23"
+  },
   "files": [
     "lib",
+    "LICENSE",
     "README.md"
   ],
   "author": {
@@ -58,9 +69,5 @@
     "css grid",
     "react",
     "emotion"
-  ],
-  "devDependencies": {
-    "@emotion/core": "10.0.22",
-    "@emotion/styled": "10.0.23"
-  }
+  ]
 }
diff --git a/packages/atomic-layout-emotion/rollup.config.js b/packages/atomic-layout-emotion/rollup.config.js
@@ -7,12 +7,13 @@ import {
   getEnv,
   babel,
   resolve,
+  external,
   typescript,
   warnOnMissingDependency,
 } from '../atomic-layout/rollup.config'
 import packageJson from './package.json'
 
-const { nodeEnv, PRODUCTION, TARGET } = getEnv(process.env)
+const { nodeEnv, TARGET, PRODUCTION } = getEnv(process.env)
 
 const BUILD_DIR = '.'
 const getPath = (filepath) => {
@@ -21,6 +22,35 @@ const getPath = (filepath) => {
 
 const input = packageJson.esnext
 
+const buildCjs = {
+  input,
+  external,
+  output: {
+    file: getPath(packageJson.main),
+    format: 'cjs',
+    exports: 'named',
+    sourcemap: PRODUCTION,
+  },
+  plugins: [
+    resolve(),
+    typescript(),
+    replace({
+      'process.env.NODE_ENV': JSON.stringify(nodeEnv),
+    }),
+    PRODUCTION && sourceMaps(),
+    PRODUCTION &&
+      terser({
+        ecma: 5,
+        sourcemap: true,
+        output: {
+          comments: false,
+        },
+        warnings: true,
+        toplevel: true,
+      }),
+  ],
+}
+
 const buildUmd = {
   input,
   external: Object.keys(packageJson.peerDependencies),
@@ -32,7 +62,9 @@ const buildUmd = {
     sourcemap: PRODUCTION,
     globals: {
       react: 'React',
-      /** @TODO add emotion */
+      /**
+       * @TODO add "@emotion/core" and "@emotion/styled" as globals.
+       */
     },
   },
   plugins: [
@@ -62,8 +94,11 @@ const buildUmd = {
   onwarn: warnOnMissingDependency,
 }
 
-const targets = {
+const buildTargets = {
+  cjs: buildCjs,
   umd: buildUmd,
 }
 
-module.exports = TARGET ? targets[TARGET] : Object.values(targets)
+console.log('@atomic-layout/emotion: building "%s" module type', TARGET)
+
+export default TARGET ? buildTargets[TARGET] : Object.values(buildTargets)
diff --git a/packages/atomic-layout-emotion/src/components/Visible.tsx b/packages/atomic-layout-emotion/src/components/Visible.tsx
@@ -6,7 +6,7 @@ import {
   mergeAreaRecords,
 } from '@atomic-layout/core'
 import Box from './Box'
-import { useMediaQuery } from '../index'
+import { useMediaQuery } from '../'
 import {
   OnlyProps,
   resolveBreakpoint,

diff --git a/packages/atomic-layout/package.json b/packages/atomic-layout/package.json
@@ -84,6 +84,7 @@
   },
   "files": [
     "lib",
+    "LICENSE",
     "README.md"
   ],
   "author": {

diff --git a/packages/atomic-layout/rollup.config.js b/packages/atomic-layout/rollup.config.js
@@ -18,18 +18,18 @@ const getPath = (filepath) => {
   return path.resolve(BUILD_DIR, filepath)
 }
 
-const { TARGET: target } = process.env
 const input = packageJson.esnext
 
 export const getEnv = (env) => {
-  const { NODE_ENV: nodeEnv } = env
+  const { NODE_ENV: nodeEnv = 'development', TARGET } = env
   return {
     nodeEnv,
+    TARGET,
     PRODUCTION: nodeEnv === 'production',
   }
 }
 
-const { nodeEnv, PRODUCTION } = getEnv(process.env)
+const { nodeEnv, TARGET, PRODUCTION } = getEnv(process.env)
 
 export const external = (moduleName) => {
   return !moduleName.startsWith('.') && !path.isAbsolute(moduleName)
@@ -83,8 +83,7 @@ export const warnOnMissingDependency = (message) => {
   }
 }
 
-// CommonJS module
-const buildCjs = () => ({
+const buildCjs = {
   input,
   external,
   output: {
@@ -111,12 +110,11 @@ const buildCjs = () => ({
         toplevel: true,
       }),
   ],
-})
+}
 
-// UMD module
-const buildUmd = () => ({
+const buildUmd = {
   input,
-  external: ['react', 'styled-components'],
+  external: Object.keys(packageJson.peerDependencies),
   output: {
     name: 'AtomicLayout',
     format: 'umd',
@@ -148,10 +146,9 @@ const buildUmd = () => ({
       }),
   ],
   onwarn: warnOnMissingDependency,
-})
+}
 
-// ECMAScript module
-const buildEsm = () => ({
+const buildEsm = {
   input,
   external,
   output: {
@@ -167,12 +164,12 @@ const buildEsm = () => ({
     babel(),
     PRODUCTION && sourceMaps(),
   ],
-})
+}
 
 const buildTargets = {
-  cjs: buildCjs(),
-  umd: buildUmd(),
-  esm: buildEsm(),
+  cjs: buildCjs,
+  umd: buildUmd,
+  esm: buildEsm,
 }
 
-export default target ? buildTargets[target] : Object.values(buildTargets)
+export default TARGET ? buildTargets[TARGET] : Object.values(buildTargets)