Improve build tooling, update tachyons

build.js

@@ -9,10 +9,16 @@ glob('./node_modules/tachyons/src/**/*.css', (err, files) => {
     throw err
   }
 
+  var baseFile = ''
   files.forEach(file => {
     var css = fs.readFileSync(file, 'utf8')
     var fileName = file.replace(/(\.\/node_modules\/tachyons\/src\/|\.css)/g, '')
 
-    fs.writeFileSync(fileName + '.scss', cssScss(css))
+    if (fileName !== 'tachyons') {
+      fs.writeFileSync('scss/' + fileName + '.scss', cssScss(css))
+      baseFile += '@import "scss/' + fileName + '";\n'
+    }
   })
+
+  fs.writeFileSync('tachyons.scss', baseFile)
 })

package.json

@@ -1,9 +1,9 @@
 {
   "name": "tachyons-sass",
-  "description": "[Alpha] Transpiled Sass partials for Tachyons.",
+  "description": "Transpiled Sass partials for Tachyons",
   "author": "John Otander",
-  "version": "0.1.0",
-  "style": "sass/tachyons.scss",
+  "version": "4.0.0-beta.12",
+  "style": "tachyons.scss",
   "scripts": {
     "start": "node build.js",
     "test": "ava"
@@ -18,12 +18,12 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "tachyons": "^3.0.3"
+    "tachyons": "^4.0.0-beta.12"
   },
   "devDependencies": {
-    "ava": "^0.10.0",
+    "ava": "^0.13.0",
     "css-scss": "^0.1.0",
-    "glob": "^6.0.4",
+    "glob": "^7.0.3",
     "node-sass": "^3.4.2"
   }
 }

scss/_background-size.scss

@@ -0,0 +1,42 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+   BACKGROUND SIZE
+
+   Base:
+    bg = background-size
+
+   Modifiers:
+    cv = cover
+    cn = contain
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
+
+  .bg-cv  {               background-size: cover; }
+  .bg-cn  {               background-size: contain; }
+
+@media #{$breakpoint-not-small} {
+  .bg-cv-ns {             background-size: cover; }
+  .bg-cn-ns {             background-size: contain; }
+}
+
+@media #{$breakpoint-medium} {
+  .bg-cv-m {              background-size: cover; }
+  .bg-cn-m {              background-size: contain; }
+}
+
+@media #{$breakpoint-large} {
+  .bg-cv-l {              background-size: cover; }
+  .bg-cn-l {              background-size: contain; }
+}

scss/_base.scss

@@ -0,0 +1,18 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+  BASE
+
+*/
+
+html,
+body {
+  height: 100%;
+}
+

scss/_border-colors.scss

@@ -0,0 +1,101 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+   BORDER COLORS
+
+   Use in cobmination with the _borders.css module
+   Or for more flexibility the _border-styles.css and _border-widths.css modules
+
+   Base:
+     b-- = border
+
+   Modifiers:
+     Add a border color. There is a one to one mapping of color values
+     in the _colors.css module.
+
+ */
+
+.b--black {        border-color: $black; }
+.b--near-black {   border-color: $near-black; }
+.b--dark-gray {    border-color: $dark-gray; }
+.b--mid-gray {     border-color: $mid-gray; }
+.b--gray {         border-color: $gray; }
+.b--silver {       border-color: $silver; }
+.b--light-silver { border-color: $light-silver; }
+.b--light-gray {   border-color: $light-gray; }
+.b--near-white {   border-color: $near-white; }
+.b--white {        border-color: $white; }
+
+.b--white-10 {   border-color: hsla(0, 0, 100%, .1); }
+.b--white-20 {   border-color: hsla(0, 0, 100%, .2); }
+.b--white-25 {   border-color: hsla(0, 0, 100%, .25); }
+.b--white-30 {   border-color: hsla(0, 0, 100%, .3); }
+.b--white-40 {   border-color: hsla(0, 0, 100%, .4); }
+.b--white-50 {   border-color: hsla(0, 0, 100%, .5); }
+.b--white-60 {   border-color: hsla(0, 0, 100%, .6); }
+.b--white-70 {   border-color: hsla(0, 0, 100%, .7); }
+.b--white-75 {   border-color: hsla(0, 0, 100%, .75); }
+.b--white-80 {   border-color: hsla(0, 0, 100%, .8); }
+.b--white-90 {   border-color: hsla(0, 0, 100%, .9); }
+
+.b--black-0125 {   border-color: hsla(0, 0, 0,  .0125); }
+.b--black-025 {   border-color: hsla(0, 0, 0,   .025); }
+.b--black-05 {   border-color: hsla(0, 0, 0,    .05); }
+.b--black-10 {   border-color: hsla(0, 0, 0,    .1); }
+.b--black-20 {   border-color: hsla(0, 0, 0,    .2); }
+.b--black-25 {   border-color: hsla(0, 0, 0,    .25); }
+.b--black-30 {   border-color: hsla(0, 0, 0,    .3); }
+.b--black-40 {   border-color: hsla(0, 0, 0,    .4); }
+.b--black-50 {   border-color: hsla(0, 0, 0,    .5); }
+.b--black-60 {   border-color: hsla(0, 0, 0,    .6); }
+.b--black-70 {   border-color: hsla(0, 0, 0,    .7); }
+.b--black-75 {   border-color: hsla(0, 0, 0,    .75); }
+.b--black-80 {   border-color: hsla(0, 0, 0,    .8); }
+.b--black-90 {   border-color: hsla(0, 0, 0,    .9); }
+
+.b--blue { border-color: $blue; }
+.b--light-blue { border-color: $light-blue; }
+.b--lightest-blue { border-color: $lightest-blue; }
+.b--dark-blue { border-color: $dark-blue; }
+.b--darkest-blue { border-color: $darkest-blue; }
+.b--yellow { border-color: $yellow; }
+.b--light-yellow { border-color: $light-yellow; }
+.b--lightest-yellow { border-color: $lightest-yellow; }
+.b--dark-yellow { border-color: $dark-yellow; }
+.b--darkest-yellow { border-color: $darkest-yellow; }
+.b--orange { border-color: $orange; }
+.b--light-orange { border-color: $light-orange; }
+.b--lightest-orange { border-color: $lightest-orange; }
+.b--dark-orange { border-color: $dark-orange; }
+.b--darkest-orange { border-color: $darkest-orange; }
+.b--red { border-color: $red; }
+.b--light-red { border-color: $light-red; }
+.b--lightest-red { border-color: $lightest-red; }
+.b--dark-red { border-color: $dark-red; }
+.b--darkest-red { border-color: $darkest-red; }
+.b--teal { border-color: $teal; }
+.b--light-teal { border-color: $light-teal; }
+.b--lightest-teal { border-color: $lightest-teal; }
+.b--dark-teal { border-color: $dark-teal; }
+.b--darkest-teal { border-color: $darkest-teal; }
+.b--green { border-color: $green; }
+.b--light-green { border-color: $light-green; }
+.b--lightest-green { border-color: $lightest-green; }
+.b--dark-green { border-color: $dark-green; }
+.b--darkest-green { border-color: $darkest-green; }
+.b--pink { border-color: $pink; }
+.b--light-pink { border-color: $light-pink; }
+.b--lightest-pink { border-color: $lightest-pink; }
+.b--dark-pink { border-color: $dark-pink; }
+.b--darkest-pink { border-color: $darkest-pink; }
+.b--purple { border-color: $purple; }
+.b--light-purple { border-color: $light-purple; }
+.b--lightest-purple { border-color: $lightest-purple; }
+.b--dark-purple { border-color: $dark-purple; }
+.b--darkest-purple { border-color: $darkest-purple; }

scss/_border-radius.scss

@@ -0,0 +1,68 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+   BORDER RADIUS
+
+   Base:
+     br   = border-radius
+
+   Modifiers:
+     n    = none
+     1    = 1st step in scale
+     2    = 2nd step in scale
+     3    = 3rd step in scale
+     4    = 4th step in scale
+     5    = 5th step in scale
+     circ = circle
+     -100 = 100%
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
+
+  .brn {        border-radius: 0; }
+  .br1 {        border-radius: .125rem; }
+  .br2 {        border-radius: .25rem; }
+  .br3 {        border-radius: .5rem; }
+  .br4 {        border-radius: 1rem; }
+  .br5 {        border-radius: 2rem; }
+  .br-100 {     border-radius: 100%; }
+
+@media #{$breakpoint-not-small} {
+  .brn-ns {     border-radius: 0; }
+  .br1-ns {     border-radius: .125rem; }
+  .br2-ns {     border-radius: .25rem; }
+  .br3-ns {     border-radius: .5rem; }
+  .br4-ns {     border-radius: 1rem; }
+  .br5-ns {     border-radius: 2rem; }
+  .br-100-ns {  border-radius: 100%; }
+}
+
+@media #{$breakpoint-medium} {
+  .brn-m {     border-radius: 0; }
+  .br1-m {     border-radius: .125rem; }
+  .br2-m {     border-radius: .25rem; }
+  .br3-m {     border-radius: .5rem; }
+  .br4-m {     border-radius: 1rem; }
+  .br5-m {     border-radius: 2rem; }
+  .br-100-m {  border-radius: 100%; }
+}
+
+@media #{$breakpoint-large} {
+  .brn-l {     border-radius: 0; }
+  .br1-l {     border-radius: .125rem; }
+  .br2-l {     border-radius: .25rem; }
+  .br3-l {     border-radius: .5rem; }
+  .br4-l {     border-radius: 1rem; }
+  .br5-l {     border-radius: 2rem; }
+  .br-100-l {  border-radius: 100%; }
+}

scss/_border-style.scss

@@ -0,0 +1,47 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+   BORDER STYLES
+
+   Base:
+     bs = border-style
+
+   Modifiers:
+     none   = none
+     dotted = dotted
+     solid  = solid
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+ */
+
+.bs-none {   border-style: none; }
+.bs-dotted { border-style: dotted; }
+.bs-solid {  border-style: solid; }
+
+@media #{$breakpoint-not-small} {
+  .bs-none-ns {   border-style: none; }
+  .bs-dotted-ns { border-style: dotted; }
+  .bs-solid-ns {  border-style: solid; }
+}
+
+@media #{$breakpoint-medium} {
+  .bs-none-m {   border-style: none; }
+  .bs-dotted-m { border-style: dotted; }
+  .bs-solid-m {  border-style: solid; }
+}
+
+@media #{$breakpoint-large} {
+  .bs-none-l {   border-style: none; }
+  .bs-dotted-l { border-style: dotted; }
+  .bs-solid-l {  border-style: solid; }
+}

scss/_border-widths.scss

@@ -0,0 +1,62 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+   BORDER WIDTHS
+
+   Base:
+     bw = border-width
+
+   Modifiers:
+     0 = 0 width border
+     1 = 1st step in border-width scale
+     2 = 2nd step in border-width scale
+     3 = 3rd step in border-width scale
+     4 = 4th step in border-width scale
+     5 = 5th step in border-width scale
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
+
+.bw0 { border-width: 0; }
+.bw1 { border-width: .125rem; }
+.bw2 { border-width: .25rem; }
+.bw3 { border-width: .5rem; }
+.bw4 { border-width: 1rem; }
+.bw5 { border-width: 2rem; }
+
+@media #{$breakpoint-not-small} {
+  .bw0-ns { border-width: 0; }
+  .bw1-ns { border-width: .125rem; }
+  .bw2-ns { border-width: .25rem; }
+  .bw3-ns { border-width: .5rem; }
+  .bw4-ns { border-width: 1rem; }
+  .bw5-ns { border-width: 2rem; }
+}
+
+@media #{$breakpoint-medium} {
+  .bw0-m { border-width: 0; }
+  .bw1-m { border-width: .125rem; }
+  .bw2-m { border-width: .25rem; }
+  .bw3-m { border-width: .5rem; }
+  .bw4-m { border-width: 1rem; }
+  .bw5-m { border-width: 2rem; }
+}
+
+@media #{$breakpoint-large} {
+  .bw0-l { border-width: 0; }
+  .bw1-l { border-width: .125rem; }
+  .bw2-l { border-width: .25rem; }
+  .bw3-l { border-width: .5rem; }
+  .bw4-l { border-width: 1rem; }
+  .bw5-l { border-width: 2rem; }
+}