├── .gitignore
├── package.json
├── index.js
└── readme.md


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | scss
3 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "drupal-breakpoints-scss",
 3 |   "version": "1.2.0",
 4 |   "description": "Convert Drupal 8:s breakpoints (*.breakpoints.yml) to scss $variables.",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "standard"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/jenslind/drupal-breakpoints-scss.git"
12 |   },
13 |   "author": "Jens Lind",
14 |   "license": "ISC",
15 |   "bugs": {
16 |     "url": "https://github.com/jenslind/drupal-breakpoints-scss/issues"
17 |   },
18 |   "homepage": "https://github.com/jenslind/drupal-breakpoints-scss#readme",
19 |   "devDependencies": {
20 |     "standard": "^5.4.1"
21 |   },
22 |   "dependencies": {
23 |     "through2": "^2.0.0",
24 |     "yamljs": "^0.2.4"
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | var YAML = require('yamljs')
 3 | var fs = require('fs')
 4 | var stream = require('stream')
 5 | var through = require('through2')
 6 | 
 7 | var drupalBreakpointsScss = {}
 8 | var defaultOpts = {
 9 |   vars: true,
10 |   map: false,
11 |   mapName: 'drupal-breakpoints',
12 |   varsPrefix: ''
13 | }
14 | 
15 | function jsonToScssVars (obj, opts) {
16 |   var scssVars = ''
17 | 
18 |   for (var i in obj) {
19 |     scssVars += '$' + opts.varsPrefix + obj[i].label + ': \'' + obj[i].mediaQuery + '\';\n'
20 |   }
21 | 
22 |   return scssVars
23 | }
24 | 
25 | function jsonToScssMap (obj, opts) {
26 |   var scssMap = '$' + opts.mapName + ': (\n'
27 | 
28 |   for (var i in obj) {
29 |     scssMap += '  ' + obj[i].label + ': \'' + obj[i].mediaQuery + '\',\n'
30 |   }
31 | 
32 |   scssMap += ');'
33 | 
34 |   return scssMap
35 | }
36 | 
37 | function generateScss (breakpoints, opts) {
38 |   var opts = Object.assign(defaultOpts, opts)
39 | 
40 |   var output = ''
41 |   if (opts.vars) output += jsonToScssVars(breakpoints, opts) + '\n'
42 |   if (opts.map) output += jsonToScssMap(breakpoints, opts) + '\n'
43 | 
44 |   return output
45 | }
46 | 
47 | drupalBreakpointsScss.read = function (path, opts = {}) {
48 |   var rs = stream.Readable()
49 |   var breakpoints = YAML.load(path)
50 | 
51 |   rs._read = function () {
52 |     rs.push(generateScss(breakpoints, opts))
53 |     rs.push(null)
54 |   }
55 | 
56 |   return rs
57 | }
58 | 
59 | drupalBreakpointsScss.write = function (path) {
60 |   var scssFile = fs.createWriteStream(path)
61 |   return scssFile
62 | }
63 | 
64 | drupalBreakpointsScss.ymlToScss = function (opts = {}) {
65 |   return through.obj(function (file, enc, cb) {
66 |     var content = file.contents.toString('utf8')
67 |     var breakpoints = YAML.parse(content)
68 |     file.contents = new Buffer(String(generateScss(breakpoints, opts)))
69 |     cb(null, file)
70 |   })
71 | }
72 | 
73 | module.exports = drupalBreakpointsScss
74 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | # Drupal-breakpoints-scss
 2 | 
 3 | > Convert Drupal 8:s breakpoints (`*.breakpoints.yml`) to scss `$variables`.
 4 | 
 5 | [![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)
 6 | 
 7 | ## Install
 8 | ```
 9 | npm install --save drupal-breakpoints-scss
10 | ```
11 | 
12 | ## What it does
13 | Converts this:
14 | ```yml
15 | theme.small:
16 |   label: breakpoint-small
17 |   mediaQuery: 'all and (max-width: 500px)'
18 |   weight: 1
19 |   multipliers:
20 |     - 1x
21 | 
22 | theme.medium:
23 |   label: breakpoint-medium
24 |   mediaQuery: 'all and (max-width: 700px)'
25 |   weight: 1
26 |   multipliers:
27 |     - 1x
28 | ```
29 | into this:
30 | ```scss
31 | $breakpoint-small: all and (max-width: 500px);
32 | $breakpoint-medium: all and (max-width: 700px);
33 | 
34 | // Or..
35 | 
36 | $drupal-breakpoints: (
37 |   breakpoint-small: 'all and (max-width: 500px)',
38 |   breakpoint-medium: 'all and (max-width: 700px)',
39 | );
40 | ```
41 | 
42 | ## Usage
43 | ```javascript
44 | const drupalBreakpoints = require('drupal-breakpoints-scss')
45 | 
46 | drupalBreakpoints.read('./theme.breakpoints.yml', opts)
47 |   .pipe(drupalBreakpoints.write('./scss/_breakpoints.scss'))
48 | ```
49 | 
50 | ### Options
51 | ```javascript
52 | var defaultOpts = {
53 |   vars: true,  // Output breakpoints as vars
54 |   map: false, // Output as a sass map
55 |   mapName: 'drupal-breakpoints', // Name of the map
56 |   varsPrefix: '' // Prefix vars
57 | }
58 | ```
59 | 
60 | ### Usage with gulp
61 | ```javascript
62 | const gulp = require('gulp')
63 | const rename = require('gulp-rename')
64 | const drupalBreakpoints = require('drupal-breakpoints-scss')
65 | 
66 | gulp.task('task', function () {
67 |   return gulp.src('./breakpoints.yml')
68 |     .pipe(drupalBreakpoints.ymlToScss(opts))
69 |     .pipe(rename('_breakpoints.scss'))
70 |     .pipe(gulp.dest('./scss'))
71 | })
72 | ```
73 | 
74 | ### [Webpack](https://www.npmjs.com/package/@oddhill/drupal-breakpoints-scss-webpack-plugin)
75 | 


--------------------------------------------------------------------------------