v0.10.0-alpha.5
Pre-releaseOverview
This alpha.5
release introduces a couple breaking changes but also provides the fallback for those by introducing three new plugins! In general, Greenwood wants to keep a lean core focused a very dedicated closeness to the web, and so for thins like being able to use import
for non standard things (like CSS) have now been moved out to plugins that Greenwood provides. You of course can make your own for these, but Greenwood does want to provide a balance between all these, you can expect more plugins for Greenwood to support going forward as well, like TypeScript and Babel.
It also introduced two new plugin types:
Note: Each
0.10.0-alpha.N
release will build upon itself release notes wise, with the sum all release notes being included in the final, actual0.10.0
release. Please read here for the previous release's release notes. For more high level details about this upgrade, you can check out or Request For Contributions Google doc to learn more about our current project Roadmap and direction. (please reach out if interested in helping!)
To test this upgrade, you can run the following
# npm
$ npm install @greenwood/[email protected] --save-dev
# yarn
$ yarn add @greenwood/[email protected] --dev
You can see an example of an upgrade in our Getting Started repo.
Breaking Changes
PostCSS
if you want to use PostCSS, you will now need to install a plugin and include that in your greenwood.config.js. You can then create your own postcss.config.js and the plugin will forward your config onto
- Install plugin
$ yarn add @greenwood/plugin-postcss --dev
- Include the plugin in your greenwood.config.js
const pluginPostcss = require('@greenwood/plugin-postcss'); module.exports = { plugins: [ pluginPostcss() ] }
- Provide your own postcss.config.js
module.exports = { plugins: [ require('postcss-nested') // as an example ] };
- Now you can use nested CSS
header { & nav { /* some styles */ } }
Import CSS
if you want to be able to import
your CSS, you will now need to install a plugin and include that in your greenwood.config.js. You can then use ESM import
syntax to get CSS as a string your JavaScript.
- Install plugin
$ yarn add @greenwood/plugin-import-css --dev
- Include the plugin in your greenwood.config.js
const pluginImportCss = require('@greenwood/plugin-import-css'); module.exports = { plugins: [ ...pluginImportCss() // notice the spread ... ! ] }
- Now you can
import
CSS in your JSimport css from './some-file.css'; console.log(css); // will be a string of the contents of your CSS file
Import CommonJS
if you want to be able to import
CommonJS modules (as are commonly found on NPM), you will now need to install a plugin and include that in your greenwood.config.js. You can then use ESM import
syntax to load these types of modules, like lodash, in your JavaScript.
- Install plugin
$ yarn add @greenwood/plugin-import-commonjs --dev
- Include the plugin in your greenwood.config.js
const pluginImportCommonjs = require('@greenwood/plugin-import-commonjs'); module.exports = { plugins: [ ...pluginImportCommonjs() // notice the spread ... ! ] }
- Now you can
import
CommonJS modules in your JSimport _ from 'lodash'; _.defaults({ 'a': 1 }, { 'a': 3, 'b': 2 }) // → { 'a': 1, 'b': 2 }
Please see the previous release notes for any previously documented breaking changes 👆
Key Changes
- Server Plugin API
- PostCSS and
import
CSS as plugins, and new Rollup Plugin - Support for
import
for CommonJS modules, as a plugin
Known Issues
A lot of features available in 0.9.0
of Greenwood are not available at this time in this release. The full list of outstanding items is here, with the main ones being captured below for quick reference:
- module cssnano not found
- Restore GraphQL support
<link>
tag detection is incorrect- top level HTML page builds without the page content
- Restore optimizations and SPA support
- Restore Babel / Browserslist support
Diff
$ git diff v0.10.0-alpha.4 v0.10.0-alpha.5 --stat
greenwood.config.js | 6 +-
lerna.json | 2 +-
netlify.toml | 5 +-
packages/cli/package.json | 16 +--
packages/cli/src/commands/develop.js | 27 +++--
packages/cli/src/config/postcss.config.js | 5 -
packages/cli/src/config/rollup.config.js | 183 ++++++++++++++++++++------------
packages/cli/src/lib/resource-interface.js | 51 +++++----
packages/cli/src/lib/server-interface.js | 18 ++++
packages/cli/src/lifecycles/config.js | 2 +-
packages/cli/src/lifecycles/graph.js | 5 +-
packages/cli/src/lifecycles/serialize.js | 5 +-
packages/cli/src/lifecycles/serve.js | 73 ++++++++-----
packages/cli/src/plugins/resource/plugin-node-modules.js | 158 +++++++++++++++++++++-------
packages/cli/src/plugins/resource/plugin-standard-css.js | 63 ++++++-----
packages/cli/src/plugins/resource/plugin-standard-html.js | 32 ++----
packages/cli/src/plugins/resource/plugin-standard-javascript.js | 2 +
packages/cli/src/plugins/resource/plugin-standard-json.js | 2 +
packages/cli/src/plugins/resource/plugin-user-workspace.js | 7 +-
packages/cli/src/plugins/server/plugin-livereload.js | 58 +++++++++++
.../build.default.import-node-modules.spec.js | 191 ++++++++++++++++++++++++++++++++++
packages/cli/test/cases/build.default.import-node-modules/package.json | 9 ++
.../cli/test/cases/build.default.import-node-modules/src/pages/index.html | 16 +++
.../cli/test/cases/build.default.import-node-modules/src/scripts/main.js | 9 ++
.../test/cases/build.plugins.error-type/build.plugins.error-type.spec.js | 2 +-
packages/plugin-google-analytics/README.md | 20 ++--
packages/plugin-google-analytics/package.json | 10 +-
packages/plugin-google-analytics/src/index.js | 9 +-
packages/plugin-import-commonjs/README.md | 45 ++++++++
packages/plugin-import-commonjs/package.json | 33 ++++++
packages/plugin-import-commonjs/src/index.js | 95 +++++++++++++++++
packages/plugin-import-commonjs/test/cases/default/default.spec.js | 88 ++++++++++++++++
packages/plugin-import-commonjs/test/cases/default/greenwood.config.js | 7 ++
packages/plugin-import-commonjs/test/cases/default/package.json | 6 ++
packages/plugin-import-commonjs/test/cases/default/src/pages/index.html | 13 +++
packages/plugin-import-commonjs/test/cases/default/src/scripts/main.js | 4 +
packages/plugin-import-css/README.md | 41 ++++++++
packages/plugin-import-css/package.json | 31 ++++++
packages/plugin-import-css/src/index.js | 56 ++++++++++
packages/plugin-import-css/test/cases/default/default.spec.js | 67 ++++++++++++
packages/plugin-import-css/test/cases/default/greenwood.config.js | 7 ++
packages/plugin-import-css/test/cases/default/src/main.js | 3 +
packages/plugin-import-css/test/cases/default/src/pages/index.html | 13 +++
packages/plugin-import-css/test/cases/default/src/styles.css | 3 +
packages/plugin-polyfills/README.md | 16 ++-
packages/plugin-polyfills/package.json | 10 +-
packages/plugin-polyfills/src/index.js | 8 +-
packages/plugin-postcss/README.md | 56 ++++++++++
packages/plugin-postcss/package.json | 28 +++++
packages/plugin-postcss/src/index.js | 79 ++++++++++++++
.../test/cases/default/default.spec.js} | 9 ++
packages/plugin-postcss/test/cases/default/greenwood.config.js | 7 ++
.../test/cases/default}/postcss.config.js | 0
.../test/cases/default}/src/pages/index.html | 0
.../test/cases/default}/src/styles/main.css | 0
www/package.json | 2 +-
www/pages/docs/build.md | 116 ---------------------
www/pages/docs/css-and-images.md | 2 +-
www/pages/docs/front-matter.md | 2 +-
www/pages/docs/markdown.md | 2 +-
www/pages/plugins/custom-plugins.md | 3 +
www/pages/plugins/index.md | 7 +-
www/pages/plugins/resource.md | 71 +++++++++----
www/pages/plugins/rollup.md | 32 ++++++
www/pages/plugins/server.md | 64 ++++++++++++
yarn.lock | 96 ++++++++++++++++-
66 files changed, 1687 insertions(+), 421 deletions(-)