Write tests for each section:

batter

• with conflicts
• without conflicts
• no modules
• no node_modules

syrup

• sass only
• sass and js
• no assets at all
• no folder
• not writable folder
• all settings individually

cream

• mock uikit.json
• on empty folder
• on patch changes
• on minor changes
• on major changes
• on modules that don't exist anymore

As a user I don't want pancake to create a certain type of file as my project doesn't use it (sass/css/react/js).

Currently users have odd ways of doing this such as setting the "name" value in package.json to false. This works ok but it's not clear to the user that setting "name" to false stops the generation of files. It also doesn't work with the react plugin as that creates unique names per component.

There should be a new value (required) in the package.json pancake object which allows users to choose which types of files they want processed.

This may lead to a further conversation about component dependencies. It would be nice to npm install @gov.au/select and be able to choose if I would like to install pancake-sass, pancake-react which would then create the files.

The output can be a bit annoying when pancake runs inside a container that doesn't understand ansi escape sequences.

I'm not sure if it is specific to my work environment but pancake takes an extremely long time to run on Windows using latest LTS of node (currently 8.11.3).

If I use node 6.14.3 it is significantly faster but still a lot slower than on a mac.

Should work with node 0.12.x

When running pancake on a package.json with the pancake object, pancake will overwrite the settings with the default. It needs to merge instead.

The below pancake objects don't disable react. The second one creates a folder called false. 😭

"pancake": {
	"auto-save": false,
	"plugins": false,
	"ignore": [],
	"css": {
		"name": false
	},
	"sass": {
		"name": false
	},
	"js": {
		"name": false
	},
	"react": {
		"name": false
	},
	"json": {
		"enable": true,
		"location": "./_uikit/",
		"name": "uikit"
	}
}

"pancake": {
	"auto-save": false,
	"plugins": false,
	"ignore": [],
	"css": {
		"name": false
	},
	"sass": {
		"name": false
	},
	"js": {
		"name": false
	},
	"react": {
		"location": false
	},
	"json": {
		"enable": true,
		"location": "./_uikit/",
		"name": "uikit"
	}
}

We need to add the settings.json into the files array of our package.json.

When installing a component a user has to set "name": false and "location": false in the package.json file to stop the css file generation. Other components can be ignored with the ignore array.

Let's see how many node version we can support without babel.

The loading seems to stop for the loading and start when it finishes... bad!

Autoprefixer is adding in old flexbox spec properties for webkit "display: -webkit-box;" which breaks the layout on mobile devices.

Consider using the flexbox: "no-2009" option to stop this being added.

https://github.com/postcss/autoprefixer#disabling

things like:

• uikit.json URL
• npm org scope

Having a verbose toggle inside your local settings will help us with debugging and makes issues inside continues integration remotes easier to debug as well.

Not sure how yet. Maybe check automatically for sass-versioning inside the node_modules folder? Or add a flag to overwrite?

package.json has the old pancake command still listed... tz tz tz 😰

It has been noted that there are obvious performance differences between sass and node-sass. According to the sass-dart repository these issues shouldn't exist however replacing sass with node-sass see's huge performance improvements.

    "build:sass": "sass pancake/sass/pancake.scss sass/style.css --style compressed",
    "build:node-sass": "node-sass pancake/sass/pancake.scss sass/style.css --style compressed",

We originally moved to sass to fix corrupt dependencies. node-sass is nearly patched just waiting on node-gyp.

Should include infos of what modules are using the conflicting module and what can be done about it.

We're using pancake with the govau design systems modules over at https://github.com/terriajs/magda.

Magda is a lerna monorepo, with node_modules at the root and in each subdirectory.

I've been trying to switch over to using yarn instead of npm. Yarn puts most dependencies in the root node_modules directory, but our react web app lives in magda-web-client subdirectory. So when I run pancake from that directory, it says 🔔 INFO: No modules found because it can't find any modules in magda-web-client/node_modules, and doesn't know to recurse upwards.

Looking at the code, it looks like the directory where modules are found has to be process.cwd + 'node_modules' - could that be configurable, or know to keep recursing upwards adding modules until it can't find any more node_modules directories?

Check for package.json settings first though

Syrup's opt-out save functionality to will automatically save all it's setting inside the package.json. You can opt out via the command line with the --nosave flag. However since syrup runs automatically after batter we need an option to change that behaviour.
auto-save can sit next to the auto-syrup option in the package.json file.

That way users will have control over what browsers they support.

Idea: govau/design-system-components#48 (comment)

Loading is not running as we can't update a foreign stdout.

Pancake should only do the flat dependency check and then look into the package.json file of the module and see if there are plugins to run.

Windows is the new IE for node devs.
Areas that need attention from looking at initial tests:

• The bash script in each module won't work naturally
• Spawning new processes don't go down as they should. Need to look at that
• The Sass paths need to be adapted to each os
• Get folder creating to work

4.9.0 release of node-sass includes bindings for node 10
https://github.com/sass/node-sass/releases/tag/v4.9.0

• cli settings
• local settings
• global settings

Sass versioning needs a final check after all partials have been imported.

If we make the fixtures somewhat dynamic we can finally test sass output and don't have to fix the version per module into them.

Currently as a user I want to create a custom component in a folder and deploy it as an NPM package, following pancakes patterns. It is not related to the design system so I don't want to create a pull request and merge it back into the Uikit.

I would like to be able to add this NPM module to my pancake build, or choose the folder/folders I build my components from.

It seems that pancake fails when generating pancake.min.css using sass-versioning. This occurs when a user attempts to use yarn workspaces and lerna to hoist sub-packages into a root level node_modules folder.

Config:

• Yarn: 1.9.4
• Node: 8.12.0
• lerna: 3.4.0

A possible cause might be to do with this:

Steps:

git clone https://github.com/govau/uikit
cd uikit

Modify the following:

# lerna.json
{
	"lerna": "3.4.0",
	"packages": [
		"packages/*"
	],
	"npmClient": "yarn",
	"useWorkspaces": true,
	"version": "independent"
}

# package.json
{
...
	"private": true,
	"workspaces": [
		"packages/*"
	],
...
}

Error:

Infinite loop with:

The app should run alone and have pancake as a dependency.
Code can be copied from older implementation

Moved from govau/design-system-components#42

@dominikwilkowski suggested using ava.js

general

• no node_modules folder
• no node_modules and package.json file
• existing node_modules but no package.json file
• no node_modules but existing package.json file
• node_modules locked
• package.json locked
• output folder for syrup locked/unwritable
• folder exists already (called what the file name will be)

syrup

• uglify fail
• sass fail
• autoprefixer fail
• autoprefixer warnings

cream

• can't get json file / http fail
• can't install

The plugin should move svgs, create PNG fallbacks and a svg sprit

• Needs to get all modules from repo
• Needs to display radios
• Needs to pick up already installed packages
• Installs what has been selected

When we generate Sass inside pancake-sass via GenerateSass we have to look up all dependencies per module.

E.g. it fails when we build the sass file for breadcrumbs which is dependencies are:

.
├─ core
└─ link-list
   ├─ core
   └─ body
      └─ core

Plugins are currently silently installed. That means the build is still 100% reproducible by package.json but it won't be super fast. :)
If plugins are enabled and we install them we should default to --save.

Currently we are hardcoding the path to the sass files. There is a path inside the pancake object that we should use here:

pancake: {
	'pancake-module': {
		"version":"1.0.0",
		"plugins": [
			"@gov.au/pancake-sass",
			"@gov.au/pancake-js"
		],
		"sass": {
+ 			"path": "lib/sass/_module.scss",
			"sass-versioning": true
		},
		"js": {
			"path": "lib/js/module.js"
		}
	}
},

This should be used in GenerateSass.

What happened

When the JS is minified option is selected as true, the side-nav doesn't open or close in ie8 on smaller devices

"js": {
		"minified": true,
		"modules": false,
		"location": "docs/js/",
		"name": "script.js"
	},

What I expected to happen

I expected the side-nav to open and close when I click it

Reproducing

• Pancake version: v1.2.3

Steps to reproduce:

1. As an example, run uikit-starter project on ie8 and try to open/close the accordion

2. Then try setting the minified option to false

Currently all it says is: unable to save settings... Not helpful really.

• Needs to compile assets from installed modules
• Needs to pick up the settings from the package.json where to save it

When auto-save is enabled (default) the the json settings that are saved are:

"json": {}

There is some silliness going on here when when I enable auto-save and run pancake I get:

{
	"pancake": {
		"auto-save": true,
		"plugins": true,
		"ignore": [],
		"css": {
			"minified": true,
			"modules": false,
			"browsers": [
				"last 2 versions",
				"ie 8",
				"ie 9",
				"ie 10"
			],
			"location": "pancake/css/",
			"name": "pancake.min.css"
		},
		"sass": {
			"modules": false,
			"location": "pancake/sass/",
			"name": false
		},
		"js": {
			"minified": true,
			"modules": false,
			"location": "pancake/js/",
			"name": "pancake.min.js"
		},
		"json": {
			"enable": true,
			"location": "pancake/",
			"name": "pancake",
			"content": {
				"name": true,
				"version": true,
				"dependencies": true,
				"path": true,
				"settings": true
			}
		},
		"@gov.au/testmodule1": {
			"name": "@gov.au/testmodule1",
			"version": "11.0.1",
			"dependencies": {},
			"path": "/Users/dominikwilkowski/Sites/DTA/pancake/tests/test11/node_modules/@gov.au/testmodule1",
			"settings": {
				"version": "1.0.0",
				"plugins": [
					"@gov.au/pancake-sass",
					"@gov.au/pancake-js",
					"@gov.au/pancake-json"
				],
				"sass": {
					"path": "lib/sass/_module.scss",
					"sass-versioning": true
				},
				"js": {
					"path": "lib/js/module.js"
				}
			}
		},
		"@gov.au/testmodule2": {
			"name": "@gov.au/testmodule2",
			"version": "13.0.0",
			"dependencies": {
				"@gov.au/testmodule1": "^11.0.1"
			},
			"path": "/Users/dominikwilkowski/Sites/DTA/pancake/tests/test11/node_modules/@gov.au/testmodule2",
			"settings": {
				"version": "1.0.0",
				"plugins": [
					"@gov.au/pancake-sass",
					"@gov.au/pancake-js",
					"@gov.au/pancake-json"
				],
				"sass": {
					"path": "lib/sass/_module.scss",
					"sass-versioning": true
				},
				"js": {
					"path": "lib/js/module.js"
				}
			}
		}
	}
}

that's kinda fun but totally not cool!

Right now running:

npm i @gov.au/pancake-js @gov.au/pancake-sass @gov.au/testmodule3

is faster than

npm i @gov.au/testmodule3