refactor(bookshop-init): Refactored bookshop init code to save format…

[adon-cloudcannon]

Context

This came about from wanting to use .css files to style bookshop components over .scss. Changing the file extension manually works ok, but having the option when creating a new component would be nice.

That led to adding CSS as an option into bookshop/init - but THAT led to a consideration about whether or not a user would want to specify different formats (yml, toml, etc) per component, or just once across a project... which led to the addition of saving options into the bookshop config file.

THEN... exploring the code, it looked to be 90% set up to prompt the user for all options upon running --new or --component (e.g. project directory, component name, format, style)... so rather than erroring out if the user runs --new or --component without supplied arguments, it prompts them for the required value.

Changes

• Altered bookshop-config.ejs.t template to save component_directory, format and style along with engines.
• Added a css.ejs.t template for css files
• Added an option for CSS to templates.js
• In main.js
• • Check for format in config file before prompting when creating a new component
• • Check for style in config file before prompting when creating a new component
• • Save new options into config when creating new project
• • Added a bit of info text for when bookshop creates the Sample component on --new (it wasn't clear that it was about to do this, and asked the user to specify their component format etc... so just made it more explicit...)
• • Altered --new and --component functionality to allow user to specify these flags without arguments - bookshop will now prompt for the required info instead of just erroring out
• • Altered --new workflow to prompt user for their format and style choices up front (once per project) - they can choose "I'll decide later" which will then prompt per component. Note: user can at any time manually alter the bookshop.config file and (providing they specify a valid option) they won't be prompted in the future.

Testing (tester)

The reviewer should check on this branch:

• The code
• The script locally

[bglw]

Nice!

Re: the failing tests, you'll find these files in /javascript-modules/integration-tests/features/init/, and they should be intuitive enough to edit. To run the tests:

1. Navigate to /javascript-modules/integration-tests/
2. Run yarn run itest --name "Creating a new Jekyll Bookshop" (where name is the name of a Scenario from any file)
3. To run all the tests, run yarn run itest-slow in the same directory (as you might expect, it's slow)

First up — if we're prompting people that .css is a valid option for a component, we need the whole stack to understand CSS files as well as SCSS files. Currently if they pick CSS, their framework Bookshop integration won't pick it up.

Tests:

• The test Compiling simple component Sass could do with a Compiling simple component CSS test added below it, using a css file instead.
• The Jekyll and Hugo integration test suites don't actually have any SCSS tests — so we should probably add tests for them and then also add CSS tests. I can stub these out for you if you would prefer.
  • Jekyll does have some tests for SCSS here: output_spec.rb

Packages:

• Hugo loads SCSS files via this partial: bookshop_scss.html
• Bookshop's style loader is here: bookshopStylePlugin.js
• Jekyll loads styles here: style-tag.rb

[adon-cloudcannon]

@bglw Totally... agree with all the things...

Re: CSS in Bookshop - I do have a solution that I would love to run by you sometime using postCSS (processes SCSS or CSS or a combination with support for future CSS, etc, etc...) - would be great to get an opinion on it sometime when you have time (which I know is never....)

Re: this PR... would it be worth removing the CSS-specific stuff from the PR for now, but still retaining the 'save options into the config' part? Like the yml format stuff? Because that's useful on its own maybe?