sc5 / sc5-styleguide Goto Github PK

Parsing error: Please check the validity of the block starting from line #1

1*| $fontsize-1: 14px;

Binary downloaded and installed at /Users/pete.nellius/.nvm/v0.11.14/lib/node_modules/sc5-styleguide/node_modules/kss/node_modules/node-sass/vendor/darwin-x64/binding.node

> [email protected] postinstall /Users/pete.nellius/.nvm/v0.11.14/lib/node_modules/sc5-styleguide/node_modules/kss/node_modules/node-sass
> node scripts/build.js

`darwin-x64` exists; testing
module.js:355
  Module._extensions[extension](this, filename);
                               ^
Error: Module did not self-register.
    at Error (native)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Users/pete.nellius/.nvm/v0.11.14/lib/node_modules/sc5-styleguide/node_modules/kss/node_modules/node-sass/lib/index.js:181:15)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)

npm ERR! Darwin 14.0.0
npm ERR! argv "/Users/pete.nellius/.nvm/v0.11.14/bin/node" "/Users/pete.nellius/.nvm/v0.11.14/bin/npm" "install" "-g" "sc5-styleguide"
npm ERR! node v0.11.14
npm ERR! npm  v2.0.0
npm ERR! code ELIFECYCLE
npm ERR! [email protected] postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is most likely a problem with the node-sass package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node scripts/build.js
npm ERR! You can get their info via:
npm ERR!     npm owner ls node-sass
npm ERR! There is likely additional logging output above.

// Side nav item
//
// markup:
// <li><a class="">Item</a></li>
//
// sg-wrapper:
// <nav class="sg side-nav" style="background: green">
//   <ul>
//    <sg-wrapper-content/>
//   </ul>
// </nav>
// sg-wrapper:
// <nav class="sg side-nav" style="background: green">
//   <ul>
//    <sg-wrapper-content/>
//   </ul>
// </nav>
//
// Styleguide 1

// $main-font-color - main font color
//
// markup:
// <p style="color: $main-font-color">Sample Text</p>

<p style="color: $dark-grey">Sample Text</p>

// Modal Sizes
//
// .tiny - Sets the width of modal to 30%.
// .small - Sets the width of modal to 40%.
// .medium - Sets the width of modal to 60%.
// .large - Sets the width of modal to 70%.
// .xlarge - Sets the width of modal to 95%.
// .full - Sets the width AND height of modal to 100%.
//
// markup:
// <a href="#" data-reveal-id="sizeModal{$modifiers}">Click Me For A Different Sized Modal</a>
// <div id="sizeModal{$modifers}" class="reveal-modal {$modifiers}" data-reveal>
//  <h2>Modal Title</h2>
//  <p class="lead">This is a special decorated paragraph.</p>
//  <p>This is a generic paraphrah inside a modal for display to the user</p>
//  <a class="close-reveal-modal">&#215;</a>
// </div>
//
// Styleguide 4.4.3

    // Block Name
    // 
    // Description OR Classes
    // 
    // markup:
    // markup code here
    // 
    // Styleguide 1.0

// Button Group Advanced - Four Buttons
//
// .button-group.even-4 - Even division of four buttons.
//
// markup:
// <ul class="{$modifiers}">
//  <li><a href="#" class="button">Button 1</a></li>
//  <li><a href="#" class="button">Button 2</a></li>
//  <li><a href="#" class="button">Button 3</a></li>
//  <li><a href="#" class="button">Button 4</a></li>
// </ul>
//
// Styleguide 3.10.2.3

// Button Group Advanced - Even Buttons
//
// .button-group.even-2/count:2 - Even division of two buttons
// .button-group.even-3/count:3 - Even division of three buttons
// .button-group.even-4/count:4 - Even division of four buttons
// .button-group.even-5/count:5 - Even division of five buttons
// .button-group.even-6/count:6 - Even division of six buttons
// .button-group.even-7/count:7 - Even division of seven buttons
// .button-group.even-8/count:8 - Even division of eight buttons
//
// markup:
// <ul class="{$modifiers}">
//  {$count-print}<li><a href="#" class="button">Button {$count}</a></li>
// </ul>
//
// Styleguide 3.10.2

116 | @mixin flex-direction($value: row) {
118*|     $value-2009: $value;
119 |     $value-2011: $value;
120 |     $direction: "normal";

@mixin flex-direction($value: row) {

    $value-2009: $value;
    $value-2011: $value;
    $direction: "normal";

    @if $value == row {
        $value-2009: horizontal;
    }

    @elseif $value == "row-reverse" {
        $value-2009: horizontal;
        $direction: reverse;
    }

    @elseif $value == column {
        $value-2009: vertical;
    }

    @elseif $value == "column-reverse" {
        $value-2009: vertical;
        $direction: reverse;
    }

// Colors
//
// Markup: <div style="background: {$modifiers}" class="styleguide-color">{$modifiers}</div>
//
// $color-white - white
//
// Styleguide 1.0

'use strict';

var gulp;
var gutil = require('gulp-util');
var gonzales = require("gonzales-pe");
var minimist = require("minimist");
var through = require("through2");

module.exports = function registerTasks(g) {
    gulp = g;
    Object.keys(tasks).forEach(function(task) {
        gulp.task(task, tasks[task]);
    });
}

var tasks = {

    'styleguide:new-section': newSection

}

function newSection() {
    var args = minimist(process.argv.slice(2));

    var params = {
      name: args['name'] || args['n'],
      order: args['order'] || args['o']
    };

    var sourcePath = "public_html/scss";
    var source = sourcePath + "/**/*.scss";

    if (!params.name) {
      gutil.beep();
      gutil.log(gutil.colors.red('Define name with --name=my-name'));
      return;
    }

    if (!params.order) {
      gutil.beep();
      gutil.log(gutil.colors.red('Define name with --order=1.2.3'));
      return;
    }

    params.order = params.order.toString();

    // TODO: if order is not given, place into the last one
    // TODO: Check ref number parameter with regexp

    function getPreviousSection(section) {
      var previousSectionArray = section.split('.');
      previousSectionArray[previousSectionArray.length - 1] -= 1;
      if (previousSectionArray[previousSectionArray.length - 1] === 0) {
        previousSectionArray.pop();
      }
      return previousSectionArray.join('.');
    }

    function changeNumber(section) {

        var filesBuffer = {};

        var stream = through.obj(function(file, enc, cb) {

            var content = file.contents.toString('utf8');
            var syntax = 'scss';
            var ast = gonzales.parse(content, { syntax: syntax });
            var isKssMarkupBlock = /Styleguide [0-9]+/;

            function isLess(left, right) {
                left = left.split('.');
                right = right.split('.');

                var l = false;

                for(var i = 0; i< Math.max(left.length, right.length); i++ ) {
                    if (parseInt(left[i]) < parseInt(right[i])) {
                        l = true;
                        break;
                    }
                    if (parseInt(left[i]) > parseInt(right[i])) {
                        l = false;
                        break;
                    }
                }
                return l;

            }

            function ifBelongsToParent(parentSection, section) {

                var belongs = true;

                parentSection = parentSection && parentSection.split('.');
                section = section.split('.');

                parentSection && parentSection.forEach(function(val, n) {
                    if (val !== section[n]) {
                        belongs = false;
                    }
                });

                return belongs;

            }

            function increaseSection(section, diff) {
                section = section.split('.');
                var last = section.pop();
                section.push(parseInt(last) + diff);
                return section.join('.');
            }

            function newStream(content) {
             var stream = through();
             stream.write(content);
             return stream;
            }

            ast.map(function(declaration){
                // Take only comments
                if (
                    declaration.type !== 'commentSL' &&
                    declaration.type !== 'commentML'
                  ) return;
                // Skip everything which is not Styleguide reference
                if (!isKssMarkupBlock.test(declaration.content))
                   return;

                // Increase all the sections after the given one
                var matchRegexp = /(Styleguide )([0-9]+(\.[0-9]+)*)/;
                var match = declaration.content.match(matchRegexp);
                var currentNumber = match[2];

                // Skip sections with less reference number
                if (isLess(currentNumber, section))
                    return;

                // Skip everything which does not belong parent section
                var parentSection = section.split('.');
                parentSection.pop();
                parentSection = parentSection.join('.');

                if (!ifBelongsToParent(parentSection, currentNumber))
                    return;

                // Skip parent section itself
                if (parentSection === currentNumber)
                    return;

                // Increase everything with +1
                var newVal = increaseSection(currentNumber, 1);

                declaration.content = declaration.content.replace(matchRegexp, '$1' + newVal);

            });

            var newContent = new Buffer(ast.toCSS(syntax));
            file.contents = Buffer.concat([newContent]);

            this.push(file);
            cb();
        });

        return stream;
    }

    function insertSection(name, reference) {
        var inserted = false;
        var stream = through.obj(function(file, enc, cb) {
            // Content of the new Section
            var sectionContent =[
                '// ' + params.name,
                '//',
                '// Styleguide ' + params.order
            ];

            var previousSection = getPreviousSection(params.order);
            // Paste new section after a blog of previous section
            var content = file.contents.toString('utf8');
            var syntax = 'scss';
            var ast = gonzales.parse(content, { syntax: syntax });

            var isKssMarkupBlock = /Styleguide [0-9]+/;
            var commentBlockStarted = false;
            var startLookForSection = false;

            ast.map(function(declaration) {
                if (inserted) {
                    return;
                }
                if (declaration.type === 'commentSL' && declaration.content === ' Styleguide ' + previousSection) {
                    startLookForSection = true;
                    return;
                }
                if (!startLookForSection) {
                    return;
                }
                if (declaration.type === 'commentSL' && commentBlockStarted === false) {
                    commentBlockStarted = declaration;
                }
                if (
                    declaration.type !== 'commentSL'
                    && commentBlockStarted
                    && declaration.content !== '\n'
                    && declaration.content !== '\n\n'
                    ) {
                    commentBlockStarted = false;
                }
                if (
                      commentBlockStarted &&
                      declaration.type === 'commentSL' &&
                      isKssMarkupBlock.test(declaration.content)
                    ) {
                    // So, this was a KSS block, we need to place before commentBlockStarted

                    // TODO: rewrite normally when ast.insert is implemented
                    commentBlockStarted.content = '\n\n\n' + sectionContent.join('\n') + '\n\n//' + commentBlockStarted.content;
                    inserted = true;
                }
            });

            var endOfFile = ''
            if (inserted === false && startLookForSection === true) {
                // need to add by the end of the file
                endOfFile = '\n\n' + sectionContent.join('\n');
            }

            var newContent = new Buffer(ast.toCSS(syntax));
            endOfFile = new Buffer(endOfFile);
            file.contents = Buffer.concat([newContent, endOfFile]);
            this.push(file);
            cb();

        });
        return stream;
    }

    // Change all the numbers after giving one
    gulp.src(source)
        .pipe(changeNumber(params.order))
        .pipe(insertSection(params.name, params.order))
        .pipe(gulp.dest(sourcePath));
}

myapp
  - styles
      - *.scss
  - module1
      - styles
           - *.scss
  - module2
      - styles
           - *.scss
  - module3
      - styles
           - *.scss
      - submodule
          - styles
               - *.scss

.pipe(gulp.dest(output)

// Equalizer Basics
//
// data-equalizer - This attribute is used on the parent to identify the container which contents need to be equalized.
// data-equalizer-watch - This attribute is used on children within the parent container to identify the columns that need equalized.
//
// markup:
// <div class="row" data-equalizer>
//  <div class="large-6 columns panel" data-equalizer-watch>
//      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget neque non dui blandit fermentum. Proin dictum metus sit amet pulvinar congue. In lectus justo, interdum a libero viverra, iaculis pretium nulla. Nunc sed volutpat sem. Ut dolor urna, congue ac lobortis pretium, maximus eget felis. Maecenas vitae luctus ante, a luctus libero. Nam volutpat dui libero, sed faucibus mauris rhoncus eu. Quisque iaculis, urna id vulputate vehicula, magna lorem tempus nulla, a semper dui neque vitae neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget arcu eu velit dictum sollicitudin nec vitae lectus. Phasellus tempor bibendum sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
//  </div>
//  <div class="large-6 columns panel" data-equalizer-watch>
//      <p>Morbi molestie a nulla ut congue. Ut finibus vestibulum vestibulum. Nam eget mauris elit. Curabitur arcu orci, semper at accumsan vitae, condimentum sagittis lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus in ipsum dictum mi sodales dignissim ac non neque. Aliquam at dignissim urna. Fusce id nunc fermentum, commodo arcu nec, blandit mi. Sed suscipit odio accumsan nibh iaculis dapibus. Vivamus vel condimentum tellus. Quisque commodo turpis ultrices lorem sodales, sed pellentesque lorem volutpat. Donec nibh nibh, sodales sed accumsan sit amet, placerat eu ipsum. Nunc nulla ligula, gravida et tempor volutpat, porta quis nunc. Sed ligula lectus, faucibus ut ligula ac, mollis sodales purus. Suspendisse vitae viverra leo. Proin suscipit diam est, non bibendum nisi porta non. </p>
//  </div>
// </div>
//
// Styleguide 6.4.1