diff --git a/.changeset/rude-keys-eat.md b/.changeset/rude-keys-eat.md new file mode 100644 index 00000000..1a49c525 --- /dev/null +++ b/.changeset/rude-keys-eat.md @@ -0,0 +1,5 @@ +--- +"microbundle": minor +--- + +Add `--css inline` option. The default CSS output for all formats is now external files (as it was supposed to be). diff --git a/README.md b/README.md index b3f7bd7e..8af35828 100644 --- a/README.md +++ b/README.md @@ -163,16 +163,24 @@ Just point the input to a `.ts` file through either the cli or the `source` key Microbundle will generally respect your TypeScript config defined in a `tsconfig.json` file with notable exceptions being the "[target](https://www.typescriptlang.org/tsconfig#target)" and "[module](https://www.typescriptlang.org/tsconfig#module)" settings. To ensure your TypeScript configuration matches the configuration that Microbundle uses internally it's strongly recommended that you set `"module": "ESNext"` and `"target": "ESNext"` in your `tsconfig.json`. -### Using CSS Modules +### CSS and CSS Modules -By default any css file imported as `.module.css`, will be treated as a css-module. If you wish to treat all .css -imports as a module, specify the cli flag `--css-modules true`. If you wish to disable all css-module behaviours set the -flag to `false`. +Importing CSS files is supported via `import "./foo.css"`. By default, generated CSS output is written to disk. The `--css inline` command line option will inline generated CSS into your bundles as a string, returning the CSS string from the import: -The default scope name when css-modules is turned on will be, in watch mode `_[name]__[local]__[hash:base64:5]` and when -you build `_[hash:base64:5]`. This can be overriden by specifying the flag, eg -`--css-modules "_something_[hash:base64:7]"`. _Note:_ by setting this, it will be treated as a true, and thus, all .css -imports will be scoped. +```js +// with the default external CSS: +import './foo.css'; // generates a minified .css file in the output directory + +// with `microbundle --css inline`: +import css from './foo.css'; +console.log(css); // the generated minified stylesheet +``` + +**CSS Modules:** CSS files with names ending in `.module.css` are treated as a [CSS Modules](https://github.com/css-modules/css-modules). +To instead treat imported `.css` files as modules, run Microbundle with `--css-modules true`. To disable CSS Modules for your project, pass `--no-css-modules` or `--css-modules false`. + +The default scope name for CSS Modules is`_[name]__[local]__[hash:base64:5]` in watch mode, and `_[hash:base64:5]` for production builds. +This can be customized by passing the command line argument `--css-modules "[name]_[hash:base64:7]"`, using [these fields and naming conventions](https://github.com/webpack/loader-utils#interpolatename). | flag | import | is css module? | | ----- | ------------------------------ | :----------------: | @@ -265,6 +273,7 @@ Options --jsx A custom JSX pragma like React.createElement (default: h) --jsxImportSource Specify the automatic import source for JSX like preact --tsconfig Specify the path to a custom tsconfig.json + --css Where to output CSS: "inline" or "external" (default: "external") --css-modules Configures .css to be treated as modules (default: null) -h, --help Displays this message diff --git a/src/index.js b/src/index.js index 938aa440..672a6be3 100644 --- a/src/index.js +++ b/src/index.js @@ -445,7 +445,7 @@ function createConfig(options, entry, format, writeMeta) { modules: cssModulesConfig(options), // only write out CSS for the first bundle (avoids pointless extra files): inject: false, - extract: !!writeMeta, + extract: options.css !== 'inline', minimize: options.compress, }), moduleAliases.length > 0 && diff --git a/src/prog.js b/src/prog.js index a40a99c2..894a3f11 100644 --- a/src/prog.js +++ b/src/prog.js @@ -56,6 +56,7 @@ export default handler => { .option('--name', 'Specify name exposed in UMD builds') .option('--cwd', 'Use an alternative working directory', '.') .option('--sourcemap', 'Generate source map') + .option('--css', 'Where to output CSS: "inline" or "external"', 'external') .option( '--css-modules', 'Turns on css-modules for all .css imports. Passing a string will override the scopeName. eg --css-modules="_[hash]"', diff --git a/test/__snapshots__/index.test.js.snap b/test/__snapshots__/index.test.js.snap index 168a0273..078161e5 100644 --- a/test/__snapshots__/index.test.js.snap +++ b/test/__snapshots__/index.test.js.snap @@ -1696,8 +1696,8 @@ Build \\"inlineSourceMap\\" to dist: 138 B: inline-source-map.js.br 188 B: inline-source-map.esm.js.gz 139 B: inline-source-map.esm.js.br -279 B: inline-source-map.umd.js.gz -219 B: inline-source-map.umd.js.br" +278 B: inline-source-map.umd.js.gz +217 B: inline-source-map.umd.js.br" `; exports[`fixtures build inline-source-map with microbundle 2`] = `3`; @@ -1715,8 +1715,8 @@ exports[`fixtures build inline-source-map with microbundle 4`] = ` `; exports[`fixtures build inline-source-map with microbundle 5`] = ` -"!function(e,r){\\"object\\"==typeof exports&&\\"undefined\\"!=typeof module?module.exports=r():\\"function\\"==typeof define&&define.amd?define(r):(e=e||self).inlineSourceMap=r()}(this,function(){var e=function(){try{var e=arguments;return Promise.resolve([].slice.call(e).reduce(function(e,r){return e+r},0))}catch(e){return Promise.reject(e)}};return function(){try{var r=arguments,n=[].slice.call(r);return Promise.resolve(e.apply(void 0,n)).then(function(r){return Promise.resolve(e.apply(void 0,n)).then(function(e){return[r,e]})})}catch(e){return Promise.reject(e)}}}); -//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5saW5lLXNvdXJjZS1tYXAudW1kLmpzIiwic291cmNlcyI6WyIuLi9zcmMvdHdvLmpzIiwiLi4vc3JjL2luZGV4LmpzIl0sInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBhc3luYyBmdW5jdGlvbiB0d28oLi4uYXJncykge1xuXHRyZXR1cm4gYXJncy5yZWR1Y2UoKHRvdGFsLCB2YWx1ZSkgPT4gdG90YWwgKyB2YWx1ZSwgMCk7XG59XG4iLCJpbXBvcnQgeyB0d28gfSBmcm9tICcuL3R3byc7XG5cbmV4cG9ydCBkZWZhdWx0IGFzeW5jIGZ1bmN0aW9uKC4uLmFyZ3MpIHtcblx0cmV0dXJuIFthd2FpdCB0d28oLi4uYXJncyksIGF3YWl0IHR3byguLi5hcmdzKV07XG59XG4iXSwibmFtZXMiOlsidHdvIiwicmVkdWNlIiwidG90YWwiLCJ2YWx1ZSIsImFyZ3MiXSwibWFwcGluZ3MiOiI0TEFBc0JBLGlDQUNyQix1QkFBTyxpQkFBS0MsT0FBTyxTQUFDQyxFQUFPQyxVQUFVRCxFQUFRQyxHQUFPLElBRHJELDBFQ0VpQ0MsMENBQ2xCSixlQUFPSSw0Q0FBYUosZUFBT0kscUJBQXpDLE1BQU8sVUFEUiJ9 +"!function(e,n){\\"object\\"==typeof exports&&\\"undefined\\"!=typeof module?module.exports=n():\\"function\\"==typeof define&&define.amd?define(n):(e||self).inlineSourceMap=n()}(this,function(){var e=function(){try{var e=arguments;return Promise.resolve([].slice.call(e).reduce(function(e,n){return e+n},0))}catch(e){return Promise.reject(e)}};return function(){try{var n=arguments,r=[].slice.call(n);return Promise.resolve(e.apply(void 0,r)).then(function(n){return Promise.resolve(e.apply(void 0,r)).then(function(e){return[n,e]})})}catch(e){return Promise.reject(e)}}}); +//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5saW5lLXNvdXJjZS1tYXAudW1kLmpzIiwic291cmNlcyI6WyIuLi9zcmMvdHdvLmpzIiwiLi4vc3JjL2luZGV4LmpzIl0sInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBhc3luYyBmdW5jdGlvbiB0d28oLi4uYXJncykge1xuXHRyZXR1cm4gYXJncy5yZWR1Y2UoKHRvdGFsLCB2YWx1ZSkgPT4gdG90YWwgKyB2YWx1ZSwgMCk7XG59XG4iLCJpbXBvcnQgeyB0d28gfSBmcm9tICcuL3R3byc7XG5cbmV4cG9ydCBkZWZhdWx0IGFzeW5jIGZ1bmN0aW9uKC4uLmFyZ3MpIHtcblx0cmV0dXJuIFthd2FpdCB0d28oLi4uYXJncyksIGF3YWl0IHR3byguLi5hcmdzKV07XG59XG4iXSwibmFtZXMiOlsidHdvIiwicmVkdWNlIiwidG90YWwiLCJ2YWx1ZSIsImFyZ3MiXSwibWFwcGluZ3MiOiJzT0FBc0JBLGlDQUNyQix1QkFBTyxpQkFBS0MsT0FBTyxTQUFDQyxFQUFPQyxVQUFVRCxFQUFRQyxHQUFPLElBRHJELDBFQ0VpQ0MsMENBQ2xCSixlQUFPSSw0Q0FBYUosZUFBT0kscUJBQXpDLE1BQU8sVUFEUiJ9 " `;