From 952e960b43785eeccac53715ae49f481a32e40f8 Mon Sep 17 00:00:00 2001 From: garthdb Date: Tue, 6 Sep 2016 14:24:27 -0600 Subject: [PATCH] feat(Build): improved build process Added semantic-release and greenkeeper to keep things working Also added tests to verify that at least variable syntax is correct. --- .cz-config.js | 20 ++++ .gitignore | 2 + .npmignore | 2 + .travis.yml | 4 + README.md | 9 +- package.json | 32 +++++- src/variables-dark.css | 187 ++++++++++++++++-------------------- test/example.expected.css | 22 +++++ test/example.fixture.css | 86 +++++++++++++++++ test/variables-dark.test.js | 16 +++ 10 files changed, 270 insertions(+), 110 deletions(-) create mode 100644 .cz-config.js create mode 100644 .gitignore create mode 100644 .npmignore create mode 100644 .travis.yml create mode 100644 test/example.expected.css create mode 100644 test/example.fixture.css create mode 100644 test/variables-dark.test.js diff --git a/.cz-config.js b/.cz-config.js new file mode 100644 index 0000000..7d9cfd4 --- /dev/null +++ b/.cz-config.js @@ -0,0 +1,20 @@ +'use strict'; + +module.exports = { + + types: [ + {value: 'feat', name: 'feat: A new feature'}, + {value: 'fix', name: 'fix: A bug fix'}, + {value: 'docs', name: 'docs: Documentation only changes'}, + {value: 'style', name: 'style: Changes that do not affect the meaning of the code\n (white-space, formatting, missing semi-colons, etc)'}, + {value: 'refactor', name: 'refactor: A code change that neither fixes a bug nor adds a feature'}, + {value: 'perf', name: 'perf: A code change that improves performance'}, + {value: 'test', name: 'test: Adding missing tests'}, + {value: 'chore', name: 'chore: Changes to the build process or auxiliary tools\n and libraries such as documentation generation'}, + {value: 'revert', name: 'revert: Revert to a commit'}, + {value: 'WIP', name: 'WIP: Work in progress'} + ], + + allowBreakingChanges: ['feat', 'fix', 'perf'] + +}; diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..fd4f2b0 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +node_modules +.DS_Store diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..2c630f1 --- /dev/null +++ b/.npmignore @@ -0,0 +1,2 @@ +test +.* diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 0000000..0760cfb --- /dev/null +++ b/.travis.yml @@ -0,0 +1,4 @@ +language: node_js +node_js: "6" +after_success: + - npm run semantic-release diff --git a/README.md b/README.md index f6d00ea..229a08b 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,7 @@ -Topcoat Variables Dark -====================== +# Topcoat Variables Dark -Dark variables for theme. +[![Build Status](https://travis-ci.org/topcoat/variables-dark.svg?branch=master)](https://travis-ci.org/topcoat/variables-dark) [![npm version](https://badge.fury.io/js/topcoat-variables-dark.svg)](https://badge.fury.io/js/topcoat-variables-dark) + +--- -[![NPM](https://nodei.co/npm/topcoat-variables-dark.png)](https://nodei.co/npm/topcoat-variables-dark/) +Dark variables for theme. diff --git a/package.json b/package.json index fa28c15..b16c85d 100644 --- a/package.json +++ b/package.json @@ -1,15 +1,15 @@ { "name": "topcoat-variables-dark", - "version": "0.1.5", "description": "Dark variables for theme.", "main": "index.html", "style": "src/variables-dark.css", "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" + "test": "ava", + "semantic-release": "semantic-release pre && npm publish && semantic-release post" }, "repository": { "type": "git", - "url": "git://github.com/topcoat/variables-dark.git" + "url": "https://github.com/topcoat/variables-dark.git" }, "keywords": [ "topcoat", @@ -20,5 +20,31 @@ "license": "Apache2", "bugs": { "url": "https://github.com/topcoat/variables-dark/issues" + }, + "ava": { + "require": [ + "babel-register" + ], + "babel": "inherit" + }, + "babel": { + "presets": [ + "es2015" + ] + }, + "devDependencies": { + "ava": "^0.16.0", + "babel-cli": "^6.14.0", + "babel-core": "^6.14.0", + "babel-preset-es2015": "^6.14.0", + "babel-register": "^6.14.0", + "cz-customizable": "^4.0.0", + "resin": "^1.1.0", + "semantic-release": "^4.3.5" + }, + "config": { + "commitizen": { + "path": "./node_modules/cz-customizable" + } } } diff --git a/src/variables-dark.css b/src/variables-dark.css index 9a00c12..57ea143 100644 --- a/src/variables-dark.css +++ b/src/variables-dark.css @@ -1,105 +1,86 @@ -/** -* -* Copyright 2012 Adobe Systems Inc.; -* -* Licensed under the Apache License, Version 2.0 (the "License"); -* you may not use this file except in compliance with the License. -* You may obtain a copy of the License at -* -* http://www.apache.org/licenses/LICENSE-2.0 -* -* Unless required by applicable law or agreed to in writing, software -* distributed under the License is distributed on an "AS IS" BASIS, -* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -* See the License for the specific language governing permissions and -* limitations under the License. -* -*/ - :root { - var-color : hsla(180, 2%, 78%, 1); - var-background-color : hsla(180, 1%, 35%, 1); - var-background--body : hsla(200, 2%, 30%, 1); - var-highlight-color : hsla(0, 100%, 100%, 1); - var-shadow-color : hsla(0, 0%, 0%, 1); - var-color--cta : hsla(0, 100%, 100%, 1); - var-notification-color: hsla(1, 81%, 62%, 1); - var-background-color--cta: hsla(207, 74%, 52%, 1); - - var-border-thickness : 1px; - - var-box-shadow--highlight : 0 -1px hsla(0, 0%, 0%, 0.69); - var-border-color : hsla(180, 1%, 20%, 1); - var-background-color--down : hsla(210, 2%, 25%, 1); - var-background-color--hover : hsla(200, 2%, 39%, 1); - var-border : var(border-thickness) solid var(border-color); - var-box-shadow : inset 0 var(border-thickness) hsla(0, 0%, 45%, 1); - var-box-shadow--down : inset 0 var(border-thickness) hsla(0, 0%, 0%, 0.05); - var-text-shadow : var(box-shadow--highlight); - var-background-color--input : hsla(180, 1%, 27%, 1); - var-border--cta: 1px solid hsla(207, 74%, 29%, 1); - var-background-color--cta--down: hsla(206, 74%, 45%, 1); - var-background-color--cta--hover: hsla(206, 74%, 60%, 1); - var-box-shadow--cta: inset 0 1px hsla(0, 100%, 100%, 0.36); - var-box-shadow--cta--down: inset 0 1px hsla(0, 0%, 0%, 0.12); - - var-text-shadow--cta: 0 -1px hsla(0, 0%, 0%, 0.36); - - var-border--focus: 1px solid hsla(227, 100%, 50%, 1); - var-box-shadow--focus: 0 0 0 2px hsla(208, 82%, 69%, 1); - var-border--invalid: 1px solid var(notification-color); - - var-bg-color--notification: var(notification-color); - - var-color--placeholder: hsla(180, 2%, 78%, 1); - var-color--focus: hsla(0, 0%, 0%, 1); - var-menu-stack-icon : url("../img/hamburger_light.svg"); - - var-color--navigation-bar : var(highlight-color); - var-box-shadow--navigation-bar : inset 0 -1px var(border-color), 0 var(border-thickness) hsla(180, 1%, 27%, 1); - - var-color--focus : var(highlight-color); - var-background-color--text-input : var(background-color--input); - var-background-color--text-input--focus : var(background-color); - var-box-shadow--text-input : inset 0 var(border-thickness) 0 hsla(0, 0%, 0%, 0.23); - - var-background-color--list : hsla(180, 1%, 27%, 1); - var-border-top--list-container : var(border); - var-border-top--list : var(border); - var-border-bottom--list : var(border-thickness) solid hsla(180, 1%, 38%, 1); - var-border-top--list-item--first : var(border-thickness) solid hsla(0, 0%, 0%, 0.05); - var-border-top--list-item : var(border-bottom--list); - var-border-bottom--list-item : var(border); - var-color--list-header : var(color); - var-text-shadow--list-header : 0 var(border-thickness) 0 hsla(0, 100%, 100%, 0.1); - var-border-top--list-header : var(border-thickness) solid hsla(0, 100%, 100%, 0.1); - var-border-bottom--list-header : var(border-thickness) solid hsla(0, 100%, 100%, 0.05); - var-background-color--list-header : var(background-color--down); - - var-modal-bg-color : var(background-color); - var-overlay__header-border : var(border); - - var-bar-bg-color : var(background-color--down); - var-progress-bg-color : var(background-color); - - var-border--checkmark : 7px solid var(color); - - var-range-background : var(background-color--down); - var-range__slider-border : var(border); - var-range__slider-background : var(background-color); - var-range__slider-bg-size : 7px 18px; - var-range__slider-box-shadow : inset 0 var(border-thickness) 0 hsla(0, 0%, 0%, 0.05); - - var-border--radio-button : var(border-thickness) solid hsla(0, 0%, 0%, 0.05); - var-background--radio-button : var(color); - var-box-shadow--radio-button : 0 var(border-thickness) hsla(0, 100%, 100%, 0.1); - - var-color--tab-bar--active : var(background-color--cta); - var-background-color--tab-bar--active : var(background-color--down); - var-box-shadow--tab-bar--active : inset 0 0 var(border-thickness); - - var-color--switch__label--left : var(background-color--cta); - var-background-color--switch__label--left : var(background-color--down); - var-background-color--switch__label--right : var(background-color--down); + --color : hsla(180, 2%, 78%, 1); + --background-color : hsla(180, 1%, 35%, 1); + --background--body : hsla(200, 2%, 30%, 1); + --highlight-color : hsla(0, 100%, 100%, 1); + --shadow-color : hsla(0, 0%, 0%, 1); + --color--cta : hsla(0, 100%, 100%, 1); + --notification-color: hsla(1, 81%, 62%, 1); + --background-color--cta: hsla(207, 74%, 52%, 1); + + --border-thickness : 1px; + + --box-shadow--highlight : 0 -1px hsla(0, 0%, 0%, 0.69); + --border-color : hsla(180, 1%, 20%, 1); + --background-color--down : hsla(210, 2%, 25%, 1); + --background-color--hover : hsla(200, 2%, 39%, 1); + --border : var(--border-thickness) solid var(--border-color); + --box-shadow : inset 0 var(--border-thickness) hsla(0, 0%, 45%, 1); + --box-shadow--down : inset 0 var(--border-thickness) hsla(0, 0%, 0%, 0.05); + --text-shadow : var(--box-shadow--highlight); + --background-color--input : hsla(180, 1%, 27%, 1); + --border--cta: 1px solid hsla(207, 74%, 29%, 1); + --background-color--cta--down: hsla(206, 74%, 45%, 1); + --background-color--cta--hover: hsla(206, 74%, 60%, 1); + --box-shadow--cta: inset 0 1px hsla(0, 100%, 100%, 0.36); + --box-shadow--cta--down: inset 0 1px hsla(0, 0%, 0%, 0.12); + + --text-shadow--cta: 0 -1px hsla(0, 0%, 0%, 0.36); + + --border--focus: 1px solid hsla(227, 100%, 50%, 1); + --box-shadow--focus: 0 0 0 2px hsla(208, 82%, 69%, 1); + --border--invalid: 1px solid var(--notification-color); + + --bg-color--notification: var(--notification-color); + + --color--placeholder: hsla(180, 2%, 78%, 1); + --color--focus: hsla(0, 0%, 0%, 1); + --menu-stack-icon : url("../img/hamburger_light.svg"); + + --color--navigation-bar : var(--highlight-color); + --box-shadow--navigation-bar : inset 0 -1px var(--border-color), 0 var(--border-thickness) hsla(180, 1%, 27%, 1); + + --color--focus : var(--highlight-color); + --background-color--text-input : var(--background-color--input); + --background-color--text-input--focus : var(--background-color); + --box-shadow--text-input : inset 0 var(--border-thickness) 0 hsla(0, 0%, 0%, 0.23); + + --background-color--list : hsla(180, 1%, 27%, 1); + --border-top--list-container : var(--border); + --border-top--list : var(--border); + --border-bottom--list : var(--border-thickness) solid hsla(180, 1%, 38%, 1); + --border-top--list-item--first : var(--border-thickness) solid hsla(0, 0%, 0%, 0.05); + --border-top--list-item : var(--border-bottom--list); + --border-bottom--list-item : var(--border); + --color--list-header : var(--color); + --text-shadow--list-header : 0 var(--border-thickness) 0 hsla(0, 100%, 100%, 0.1); + --border-top--list-header : var(--border-thickness) solid hsla(0, 100%, 100%, 0.1); + --border-bottom--list-header : var(--border-thickness) solid hsla(0, 100%, 100%, 0.05); + --background-color--list-header : var(--background-color--down); + + --modal-bg-color : var(--background-color); + --overlay__header-border : var(--border); + + --bar-bg-color : var(--background-color--down); + --progress-bg-color : var(--background-color); + + --border--checkmark : 7px solid var(--color); + + --range-background : var(--background-color--down); + --range__slider-border : var(--border); + --range__slider-background : var(--background-color); + --range__slider-bg-size : 7px 18px; + --range__slider-box-shadow : inset 0 var(--border-thickness) 0 hsla(0, 0%, 0%, 0.05); + + --border--radio-button : var(--border-thickness) solid hsla(0, 0%, 0%, 0.05); + --background--radio-button : var(--color); + --box-shadow--radio-button : 0 var(--border-thickness) hsla(0, 100%, 100%, 0.1); + + --color--tab-bar--active : var(--background-color--cta); + --background-color--tab-bar--active : var(--background-color--down); + --box-shadow--tab-bar--active : inset 0 0 var(--border-thickness); + + --color--switch__label--left : var(--background-color--cta); + --background-color--switch__label--left : var(--background-color--down); + --background-color--switch__label--right : var(--background-color--down); } - diff --git a/test/example.expected.css b/test/example.expected.css new file mode 100644 index 0000000..983ad11 --- /dev/null +++ b/test/example.expected.css @@ -0,0 +1,22 @@ +:root { + color: hsla(180, 2%, 78%, 1); + background: hsla(180, 1%, 35%, 1); + highlight-color: hsla(0, 100%, 100%, 1); + shadow-color: hsla(0, 0%, 0%, 1); + notification-color: hsla(1, 81%, 62%, 1); + border-thickness: 1px; + border-color: hsla(180, 1%, 20%, 1); + border: 1px solid hsla(180, 1%, 20%, 1); + box-shadow: inset 0 1px hsla(0, 0%, 45%, 1); + text-shadow: 0 -1px hsla(0, 0%, 0%, .69); + menu-stack-icon: url("../img/hamburger_light.svg"); + modal-bg-color: hsla(180, 1%, 35%, 1); + overlay__header-border: 1px solid hsla(180, 1%, 20%, 1); + bar-bg-color: hsla(210, 2%, 25%, 1); + progress-bg-color: hsla(180, 1%, 35%, 1); + range-background: hsla(210, 2%, 25%, 1); + range__slider-border: 1px solid hsla(180, 1%, 20%, 1); + range__slider-background: hsla(180, 1%, 35%, 1); + range__slider-bg-size: 7px 18px; + range__slider-box-shadow: inset 0 1px 0 hsla(0, 0%, 0%, .05); +} diff --git a/test/example.fixture.css b/test/example.fixture.css new file mode 100644 index 0000000..b37b9e6 --- /dev/null +++ b/test/example.fixture.css @@ -0,0 +1,86 @@ +:root { + color: var(--color); + background: var(--background-color); + background--body: var(--background--body); + highlight-color: var(--highlight-color); + shadow-color: var(--shadow-color); + color--cta: var(--color--cta); + notification-color: var(--notification-color); + background-color--cta: var(--background-color--cta); + + border-thickness: var(--border-thickness); + + box-shadow--highlight: var(--box-shadow--highlight); + border-color: var(--border-color); + background-color--down: var(--background-color--down); + background-color--hover: var(--background-color--hover); + border: var(--border); + box-shadow: var(--box-shadow); + box-shadow--down: var(--box-shadow--down); + text-shadow: var(--text-shadow); + background-color--input: var(--background-color--input); + border--cta: var(--border--cta); + background-color--cta--down: var(--background-color--cta--down); + background-color--cta--hover: var(--background-color--cta--hover); + box-shadow--cta: var(--box-shadow--cta); + box-shadow--cta--down: var(--box-shadow--cta--down); + + text-shadow--cta: var(--text-shadow--cta); + + border--focus: var(--border--focus); + box-shadow--focus: var(--box-shadow--focus); + border--invalid: var(--border--invalid); + + bg-color--notification: var(--bg-color--notification); + + color--placeholder: var(--color--placeholder); + color--focus: var(--color--focus); + menu-stack-icon: var(--menu-stack-icon); + + color--navigation-bar: var(--color--navigation-bar); + box-shadow--navigation-bar: var(--box-shadow--navigation-bar); + + color--focus: var(--color--focus); + background-color--text-input: var(--background-color--text-input); + background-color--text-input--focus: var(--background-color--text-input--focus); + box-shadow--text-input: var(--box-shadow--text-input); + + background-color--list: var(--background-color--list); + border-top--list-container: var(--border-top--list-container); + border-top--list: var(--border-top--list ); + border-bottom--list: var(--border-bottom--list); + border-top--list-item--first: var(--border-top--list-item--first); + border-top--list-item: var(--border-top--list-item); + border-bottom--list-item: var(--border-bottom--list-item ); + color--list-header: var(--color--list-header); + text-shadow--list-header: var(--text-shadow--list-header); + border-top--list-header: var(--border-top--list-header); + border-bottom--list-header: var(--border-bottom--list-header); + background-color--list-header: var(--background-color--list-header); + + modal-bg-color: var(--modal-bg-color); + overlay__header-border: var(--overlay__header-border); + + bar-bg-color: var(--bar-bg-color); + progress-bg-color: var(--progress-bg-color); + + border--checkmark: var(--border--checkmark); + + range-background: var(--range-background); + range__slider-border: var(--range__slider-border); + range__slider-background: var(--range__slider-background); + range__slider-bg-size: var(--range__slider-bg-size); + range__slider-box-shadow: var(--range__slider-box-shadow); + + border--radio-button: var(--border--radio-button); + background--radio-button: var(--background--radio-button); + box-shadow--radio-button: var(--box-shadow--radio-button); + + color--tab-bar--active: var(--color--tab-bar--active); + background-color--tab-bar--active: var(--background-color--tab-bar--active); + box-shadow--tab-bar--active: var(--box-shadow--tab-bar--active); + + color--switch__label--left: var(--color--switch__label--left); + background-color--switch__label--left: var(--background-color--switch__label--left); + background-color--switch__label--right: var(--background-color--switch__label--right); +} diff --git a/test/variables-dark.test.js b/test/variables-dark.test.js new file mode 100644 index 0000000..171d44e --- /dev/null +++ b/test/variables-dark.test.js @@ -0,0 +1,16 @@ +import test from 'ava'; +import resin from 'resin'; +import fs from 'fs'; + +test('compilation', t => { + const input = './example.fixture.css'; + const expected = fs.readFileSync('./example.expected.css','utf-8').trim(); + return resin({ + src: input, + vars: true, + extend: true, + prepend: '../src/variables-dark.css' + }).then(result => { + t.is(result.css.trim(), expected); + }); +});