govau / pancake Goto Github PK
View Code? Open in Web Editor NEWMaking npm work for the front end and the Australian Government Design System.
Home Page: http://designsystem.gov.au
License: MIT License
Making npm work for the front end and the Australian Government Design System.
Home Page: http://designsystem.gov.au
License: MIT License
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"
},
I expected the side-nav to open and close when I click it
Steps to reproduce:
As an example, run uikit-starter project on ie8 and try to open/close the accordion
Then try setting the minified
option to false
We need to add the settings.json into the files
array of our package.json.
Right now running:
npm i @gov.au/pancake-js @gov.au/pancake-sass @gov.au/testmodule3
is faster than
npm i @gov.au/testmodule3
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 app should run alone and have pancake as a dependency.
Code can be copied from older implementation
When running pancake on a package.json
with the pancake
object, pancake will overwrite the settings with the default. It needs to merge instead.
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?
Windows is the new IE for node devs.
Areas that need attention from looking at initial tests:
Should include infos of what modules are using the conflicting module and what can be done about it.
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.
Should work with node 0.12.x
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.
The output can be a bit annoying when pancake runs inside a container that doesn't understand ansi escape sequences.
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.
The plugin should move svgs, create PNG fallbacks and a svg sprit
package.json has the old pancake command still listed... tz tz tz π°
That way users will have control over what browsers they support.
node_modules
foldernode_modules
and package.json
filenode_modules
but no package.json
filenode_modules
but existing package.json
filenode_modules
lockedpackage.json
lockedthings like:
@dominikwilkowski suggested using ava.js
4.9.0 release of node-sass includes bindings for node 10
https://github.com/sass/node-sass/releases/tag/v4.9.0
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.
The loading seems to stop for the loading and start when it finishes... bad!
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!
Loading is not running as we can't update a foreign stdout.
Check for package.json
settings first though
Not sure how yet. Maybe check automatically for sass-versioning inside the node_modules folder? Or add a flag to overwrite?
Let's see how many node version we can support without babel.
Moved from govau/design-system-components#42
package.json
where to save itPlugins 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
.
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"
}
}
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
.
Write tests for each section:
batter
syrup
cream
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.
1.9.4
8.12.0
3.4.0
A possible cause might be to do with this:
pancake/packages/pancake-sass/src/pancake.js
Line 110 in 21d154d
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/*"
],
...
}
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.
When auto-save
is enabled (default) the the json settings that are saved are:
"json": {}
Sass versioning needs a final check after all partials have been imported.
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.
Currently all it says is: unable to save settings... Not helpful really.
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.
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
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
.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.