output style file

config/playwright/rollup.config.js

@@ -6,7 +6,7 @@ const rollupPluginServe = require('rollup-plugin-serve');
 
 const createRollupConfig = require('../rollup/rollup.config');
 const rollupPluginHtml = require('./rollup.pluginHtml');
-const rollupAdditionalWatchFiles = require('./rollup.pluginAdditionalWatchFiles');
+// const rollupAdditionalWatchFiles = require('./rollup.pluginAdditionalWatchFiles');
 
 const portRange = {
   min: 20000,
@@ -38,6 +38,7 @@ module.exports = (testDir, onListening = null) => {
       minified: false,
       module: false,
     },
+    extractStyle: false,
     rollup: {
       input: path.resolve(testDir, meta.input),
       context: 'this',
@@ -52,7 +53,7 @@ module.exports = (testDir, onListening = null) => {
         ),
         ...(onListening
           ? [
-              rollupAdditionalWatchFiles([htmlFilePath]),
+              // rollupAdditionalWatchFiles([htmlFilePath]),
               rollupPluginServe({
                 contentBase: dist,
                 historyApiFallback: `/${htmlName}`,

config/rollup/defaultOptions.js

@@ -10,6 +10,7 @@ module.exports = {
     minified: true,
     module: true,
   },
+  extractStyle: false,
   alias: {},
   rollup: {
     input: './src/index',

config/rollup/pipeline.build.js

@@ -5,7 +5,12 @@ const rollupTs = require('rollup-plugin-ts');
 
 const babelConfigUmd = require('./babel.config.umd');
 const babelConfigEsm = require('./babel.config.esm');
-const { rollupCommonjs, rollupResolve, rollupAlias } = require('./pipeline.common.plugins');
+const {
+  rollupCommonjs,
+  rollupResolve,
+  rollupAlias,
+  rollupScss,
+} = require('./pipeline.common.plugins');
 const { extensions } = require('../../resolve.config.json');
 
 const createOutputWithMinifiedVersion = (output, esm, buildMinifiedVersion) =>
@@ -38,8 +43,8 @@ const createOutputWithMinifiedVersion = (output, esm, buildMinifiedVersion) =>
       : []
   );
 
-module.exports = (esm, options, declarationFiles = false) => {
-  const { rollup, paths, versions, alias } = options;
+module.exports = (esm, options, { declarationFiles = false, outputStyle = false } = {}) => {
+  const { rollup, paths, versions, alias, extractStyle } = options;
   const { output: rollupOutput, input, plugins = [], ...rollupOptions } = rollup;
   const { name, file, globals, exports, sourcemap: rawSourcemap, ...outputConfig } = rollupOutput;
   const { minified: buildMinifiedVersion } = versions;
@@ -66,9 +71,14 @@ module.exports = (esm, options, declarationFiles = false) => {
   return {
     input,
     output,
+    treeshake: {
+      propertyReadSideEffects: false,
+      moduleSideEffects: false,
+    },
     ...rollupOptions,
     plugins: [
       rollupAlias(alias),
+      rollupScss(extractStyle, outputStyle),
       rollupTs({
         tsconfig: (resolvedConfig) => ({
           ...resolvedConfig,
@@ -109,6 +119,6 @@ module.exports = (esm, options, declarationFiles = false) => {
         extensions,
       }),
       ...plugins,
-    ],
+    ].filter(Boolean),
   };
 };

config/rollup/pipeline.common.plugins.js

@@ -1,4 +1,8 @@
+const postcss = require('postcss');
+const autoprefixer = require('autoprefixer');
 const { nodeResolve: rollupPluginResolve } = require('@rollup/plugin-node-resolve');
+const rollupPluginScss = require('rollup-plugin-scss');
+const rollupPluginIgnoreImport = require('rollup-plugin-ignore-import');
 const rollupPluginCommonjs = require('@rollup/plugin-commonjs');
 const rollupPluginAlias = require('@rollup/plugin-alias');
 const { extensions, directories } = require('../../resolve.config.json');
@@ -20,4 +24,17 @@ module.exports = {
       moduleDirectories: directories,
       extensions,
     }),
+  rollupScss: (extractStyleOption, output) => {
+    if (extractStyleOption) {
+      return output
+        ? rollupPluginScss({
+            output,
+            processor: () => postcss([autoprefixer()]),
+          })
+        : rollupPluginIgnoreImport({
+            extensions: ['.scss', '.sass', '.css'],
+            body: 'export default undefined;',
+          });
+    }
+  },
 };

config/rollup/pipeline.dev.js

@@ -1,9 +1,14 @@
 const path = require('path');
 const { default: rollupEsBuild } = require('rollup-plugin-esbuild');
-const { rollupCommonjs, rollupResolve, rollupAlias } = require('./pipeline.common.plugins');
+const {
+  rollupCommonjs,
+  rollupResolve,
+  rollupAlias,
+  rollupScss,
+} = require('./pipeline.common.plugins');
 
 module.exports = (options) => {
-  const { rollup, paths, alias } = options;
+  const { rollup, paths, alias, extractStyle } = options;
   const { output: rollupOutput, input, plugins = [], ...rollupOptions } = rollup;
   const { file, sourcemap: rawSourcemap, ...outputConfig } = rollupOutput;
   const { src: srcPath, dist: distPath } = paths;
@@ -22,6 +27,7 @@ module.exports = (options) => {
     output,
     ...rollupOptions,
     plugins: [
+      rollupScss(extractStyle),
       rollupAlias(alias),
       rollupResolve(srcPath),
       rollupEsBuild({
@@ -32,6 +38,6 @@ module.exports = (options) => {
       }),
       rollupCommonjs(sourcemap),
       ...plugins,
-    ],
+    ].filter(Boolean),
   };
 };

config/rollup/rollup.config.js

@@ -11,12 +11,19 @@ const pipelineDev = require('./pipeline.dev');
 const repoRoot = path.resolve(__dirname, '../../');
 
 const appendExtension = (file) =>
-  path.extname(file) === '' ? file + resolve.extensions.find((ext) => fs.existsSync(path.resolve(`${file}${ext}`))) : file;
+  path.extname(file) === ''
+    ? file + resolve.extensions.find((ext) => fs.existsSync(path.resolve(`${file}${ext}`)))
+    : file;
 
-const normalizePath = (pathName) => (pathName ? pathName.split(path.sep).join(path.posix.sep) : pathName);
+const normalizePath = (pathName) =>
+  pathName ? pathName.split(path.sep).join(path.posix.sep) : pathName;
 
 const resolvePath = (basePath, pathToResolve, appendExt) => {
-  const result = pathToResolve ? (path.isAbsolute(pathToResolve) ? pathToResolve : path.resolve(basePath, pathToResolve)) : null;
+  const result = pathToResolve
+    ? path.isAbsolute(pathToResolve)
+      ? pathToResolve
+      : path.resolve(basePath, pathToResolve)
+    : null;
   return normalizePath(result && appendExt ? appendExtension(result) : result);
 };
 
@@ -32,19 +39,38 @@ const getWorkspaceAliases = () =>
       } catch {}
 
       obj[`@/${path.basename(absolutePath)}`] = `${normalizePath(
-        path.resolve(absolutePath, projTsConfig?.compilerOptions?.baseUrl || defaultOptions.paths.src)
+        path.resolve(
+          absolutePath,
+          projTsConfig?.compilerOptions?.baseUrl || defaultOptions.paths.src
+        )
       )}`;
       return obj;
     }, {});
 
 const mergeAndResolveOptions = (userOptions) => {
-  const { mode: defaultMode, paths: defaultPaths, versions: defaultVersions, alias: defaultAlias, rollup: defaultRollup } = defaultOptions;
-  const { project, mode: rawMode, paths: rawPaths = {}, versions: rawVersions = {}, alias: rawAlias = {}, rollup: rawRollup = {} } = userOptions;
+  const {
+    mode: defaultMode,
+    paths: defaultPaths,
+    versions: defaultVersions,
+    alias: defaultAlias,
+    rollup: defaultRollup,
+    extractStyle: defaultExtractStyle,
+  } = defaultOptions;
+  const {
+    project,
+    mode: rawMode,
+    paths: rawPaths = {},
+    versions: rawVersions = {},
+    alias: rawAlias = {},
+    rollup: rawRollup = {},
+    extractStyle: rawExtractStyle,
+  } = userOptions;
   const projectPath = process.cwd();
   const mergedOptions = {
     project: project || path.basename(projectPath),
     mode: rawMode || defaultMode,
     repoRoot,
+    extractStyle: rawExtractStyle ?? defaultExtractStyle,
     paths: {
       ...defaultPaths,
       ...rawPaths,
@@ -67,12 +93,11 @@ const mergeAndResolveOptions = (userOptions) => {
       },
     },
   };
-  const { src, dist, types, tests } = mergedOptions.paths;
+  const { src, dist, types } = mergedOptions.paths;
 
   mergedOptions.paths.src = resolvePath(projectPath, src);
   mergedOptions.paths.dist = resolvePath(projectPath, dist);
   mergedOptions.paths.types = resolvePath(projectPath, types);
-  mergedOptions.paths.tests = resolvePath(projectPath, tests);
 
   mergedOptions.rollup.input = resolvePath(projectPath, mergedOptions.rollup.input, true);
   mergedOptions.rollup.output = {
@@ -95,13 +120,13 @@ const createConfig = (userOptions = {}) => {
     console.log('PROJECT : ', project);
     console.log('OPTIONS : ', options);
 
-    const umd = pipelineBuild(false, options, true);
+    const umd = pipelineBuild(false, options, { declarationFiles: true, outputStyle: true });
     const esm = buildModuleVersion ? pipelineBuild(true, options) : null;
 
     return [umd, esm].filter((build) => !!build);
   }
 
-  return pipelineDev(options);
+  return [pipelineDev(options)];
 };
 
 module.exports = createConfig;