Use code splitting for default and no-important builds

rollup.config.js

@@ -35,9 +35,9 @@ function distBuild(options) {
 
 const externals = new Set(Object.keys(pkg.dependencies));
 
-function standardBuilds(filename) {
+function standardBuilds() {
     return {
-        input: `src/${filename}.js`,
+        input: ['src/index.js', 'src/no-important.js'],
         external: (id /*: string */) => {
             if (externals.has(id)) {
                 return true;
@@ -47,22 +47,22 @@ function standardBuilds(filename) {
             return /^inline-style-prefixer\//.test(id);
         },
         output: [
-            { file: `lib/${filename}.js`, format: 'cjs' },
-            { file: `es/${filename}.js`, format: 'es' },
+            { dir: 'lib', format: 'cjs' },
+            { dir: 'es', format: 'es' },
         ],
         plugins: [
             babel({
                 exclude: ['node_modules/**'],
             }),
             commonjs(), // so rollup can convert node modules to ESM if needed
-        ]
+        ],
+        experimentalCodeSplitting: true,
     };
 }
 
 export default [
     distBuild({ filename: 'aphrodite.umd.js', format: 'umd', sourcemap: true, minify: false }),
     distBuild({ filename: 'aphrodite.umd.min.js', format: 'umd', sourcemap: true, minify: true }),
     distBuild({ filename: 'aphrodite.js', format: 'cjs', sourcemap: false, minify: false }),
-    standardBuilds('index'),
-    standardBuilds('no-important'),
+    standardBuilds(),
 ];

src/exports.js

@@ -2,10 +2,15 @@
 import {hashString} from './util';
 import {
     injectAndGetClassName,
-    reset, startBuffering, flushToString,
-    addRenderedClassNames, getRenderedClassNames,
+    reset,
+    startBuffering,
+    flushToString,
+    flushToStyleTag,
+    addRenderedClassNames,
+    getRenderedClassNames,
     getBufferedStyles,
 } from './inject';
+import {defaultSelectorHandlers} from './generate';
 
 /* ::
 import type { SelectorHandler } from './generate.js';
@@ -132,7 +137,7 @@ const StyleSheetTestUtils = process.env.NODE_ENV === 'production'
  */
 export default function makeExports(
     useImportant /* : boolean */,
-    selectorHandlers /* : SelectorHandler[] */
+    selectorHandlers /* : SelectorHandler[] */ = defaultSelectorHandlers,
 ) {
     return {
         StyleSheet: {
@@ -158,8 +163,7 @@ export default function makeExports(
                 const extensionSelectorHandlers = extensions
                     // Pull out extensions with a selectorHandler property
                     .map(extension => extension.selectorHandler)
-                    // Remove nulls (i.e. extensions without a selectorHandler
-                    // property).
+                    // Remove nulls (i.e. extensions without a selectorHandler property).
                     .filter(handler => handler);
 
                 return makeExports(
@@ -180,5 +184,9 @@ export default function makeExports(
             return injectAndGetClassName(
                 useImportant, styleDefinitions, selectorHandlers);
         },
+
+        flushToStyleTag,
+        injectAndGetClassName,
+        defaultSelectorHandlers,
     };
 }

src/index.js

@@ -1,20 +1,18 @@
-import {defaultSelectorHandlers} from './generate';
 import makeExports from './exports';
-import {flushToStyleTag, injectAndGetClassName} from './inject';
 
 const useImportant = true; // Add !important to all style definitions
 
-const Aphrodite = makeExports(
-    useImportant,
-    defaultSelectorHandlers
-);
+const Aphrodite = makeExports(useImportant);
 
 const {
     StyleSheet,
     StyleSheetServer,
     StyleSheetTestUtils,
     css,
     minify,
+    flushToStyleTag,
+    injectAndGetClassName,
+    defaultSelectorHandlers,
 } = Aphrodite;
 
 export {

src/no-important.js

@@ -2,23 +2,21 @@
 // Module with the same interface as the core aphrodite module,
 // except that styles injected do not automatically have !important
 // appended to them.
-import {defaultSelectorHandlers} from './generate';
 import makeExports from './exports';
-import {flushToStyleTag, injectAndGetClassName} from './inject';
 
 const useImportant = false; // Don't add !important to style definitions
 
-const Aphrodite = makeExports(
-    useImportant,
-    defaultSelectorHandlers
-);
+const Aphrodite = makeExports(useImportant);
 
 const {
     StyleSheet,
     StyleSheetServer,
     StyleSheetTestUtils,
     css,
-    minify
+    minify,
+    flushToStyleTag,
+    injectAndGetClassName,
+    defaultSelectorHandlers,
 } = Aphrodite;
 
 export {