Add CLI module

Author: Jaiheravi

cli/commands/compile.js

@@ -0,0 +1,31 @@
+const fs = require('fs');
+const postcss = require('postcss');
+const autoprefixer = require('autoprefixer');
+const nested = require('postcss-nested');
+const ifMedia = require('postcss-if-media');
+const scssSyntax = require('postcss-scss');
+const stripComments = require('postcss-strip-inline-comments');
+const mediaMinMax = require('postcss-media-minmax');
+const customMedia = require('postcss-custom-media');
+const imports = require('postcss-easy-import');
+const postcssFor = require('postcss-for');
+
+const lh = require('./lib/lh');
+const typeScale = require('./lib/type-scale');
+
+module.exports = file => {
+  const ccss = fs.readFileSync(file, 'utf8');
+
+  return postcss()
+    .use(imports())
+    .use(postcssFor())
+    .use(stripComments())
+    .use(ifMedia())
+    .use(nested())
+    .use(customMedia())
+    .use(mediaMinMax())
+    .use(lh())
+    .use(typeScale())
+    .use(autoprefixer())
+    .process(ccss, { parser: scssSyntax, from: file });
+}

cli/index.js

@@ -0,0 +1,32 @@
+#!/usr/bin/env node
+
+const cliparse = require('cliparse');
+const pkg = require('./package.json');
+const fs = require('fs');
+
+const compile = require('./commands/compile');
+
+cliparse.parse(cliparse.cli({
+  name: 'concise-cli',
+  description: 'Command-line Interface for Concise CSS',
+  version: pkg.version,
+  commands: [
+    cliparse.command(
+      'compile', {
+        description: 'Compile code from Concise CSS',
+        args: [
+          cliparse.argument('input', { description: 'File to compile' }),
+          cliparse.argument('output', { description: 'Output CSS file' })
+        ]
+      }, (params) => {
+        fs.writeFile(params.args[1], compile(params.args[0]), (err) => {
+          if (err) {
+            throw err;
+          }
+
+          console.log(`File written: ${params.args[1]}\nFrom: ${params.args[0]}`);
+        })
+      }
+    )
+  ]
+}));

cli/lib/lh.js

@@ -0,0 +1,45 @@
+const postcss = require('postcss')
+
+const defaults = {
+    rootSelector: ':root',
+    unit: 'lh',
+    lineHeight: 1.5
+}
+
+module.exports = postcss.plugin('lh', (opts = defaults) => {
+    const options = Object.assign(defaults, opts)
+
+    return css => {
+        const lineHeight = getLineHeight(css, options)
+        const lhReg = new RegExp('\\d*\\.?\\d+' + options.unit, 'gi')
+
+        css.replaceValues(lhReg, { fast: options.unit }, (val) => {
+            return lhToRem(parseFloat(val), lineHeight)
+        })
+    }
+})
+
+function getLineHeight (css, opts) {
+    // Start with the default line-height
+    let lineHeight = opts.lineHeight
+
+    // Walk over all the root selectors
+    css.walkRules(opts.rootSelector, rule => {
+        // Omit the process if the selector is inside a print media query
+        if (rule.parent && rule.parent.params === 'print') return
+
+        // Walk over all the font or line-height properties
+        rule.walkDecls(/font$|line-height/, decl => {
+            // Matches {$1:font-size}{$2:unit}/{$3:line-height} when the property is 'font'
+            const fontProps = decl.value.match(/(\d+|\d+?\.\d+)(r?em|px|%)(?:\s*\/\s*)(\d+|\d+?\.\d+)\s+/) || []
+
+            lineHeight = fontProps[3] || decl.value
+        })
+    })
+
+    return lineHeight
+}
+
+function lhToRem(val, lineHeight) {
+    return parseFloat((lineHeight * val).toFixed(3)) + 'rem'
+}

cli/lib/type-scale.js

@@ -0,0 +1,43 @@
+const postcss = require('postcss')
+
+const defaults = {
+    rootSelector: ':root',
+    typeRatio: 1.2,
+    ratioProperty: '--type-ratio'
+}
+
+module.exports = postcss.plugin('type-scale', (opts = defaults) => {
+    const options = Object.assign(defaults, opts)
+
+    return css => {
+        const typeRatio = getTypeRatio(css, options)
+
+        css.walkDecls('font-size', decl => {
+            // Replace only if it's a unitless value
+            if (/\d+$/.test(decl.value)) decl.value = getSize(decl.value, typeRatio)
+        })
+    }
+})
+
+function getTypeRatio (css, opts) {
+    // Start with the default ratio
+    let typeRatio = opts.typeRatio
+
+    // Walk over all the root selectors
+    css.walkRules(opts.rootSelector, rule => {
+
+        // Omit the process if the selector is inside a print media query
+        if (rule.parent && rule.parent.params === 'print') return
+
+        // Walk over all the font-size rules
+        rule.walkDecls(opts.ratioProperty, decl => {
+            typeRatio = parseFloat(decl.value)
+        })
+    })
+
+    return typeRatio
+}
+
+function getSize(val, ratio) {
+    return parseFloat(Math.pow(ratio, parseInt(val) - 2).toFixed(4)) + 'rem'
+}

cli/test/fixtures/customMedia/customMedia.css

@@ -0,0 +1,23 @@
+@media (max-width: 768px) {
+  .element {
+    width: 20%;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 992px) {
+  .element {
+    width: 30%;
+  }
+}
+
+@media (min-width: 992px) and (max-width: 1200px) {
+  .element {
+    width: 40%;
+  }
+}
+
+@media (min-width: 1200px) {
+  .element {
+    width: 50%;
+  }
+}

cli/test/fixtures/customMedia/customMedia.scss

@@ -0,0 +1,28 @@
+@custom-media --only-extra-small (width <= 768px);
+@custom-media --only-small (768px <= width <= 992px);
+@custom-media --only-medium (992px <= width <= 1200px);
+@custom-media --only-large (width >= 1200px);
+
+@media (--only-extra-small) {
+  .element {
+    width: 20%;
+  }
+}
+
+@media (--only-small) {
+  .element {
+    width: 30%;
+  }
+}
+
+@media (--only-medium) {
+  .element {
+    width: 40%;
+  }
+}
+
+@media (--only-large) {
+  .element {
+    width: 50%;
+  }
+}

cli/test/fixtures/input-range/input-range.css

@@ -0,0 +1,29 @@
+::-moz-range-track {
+    background: #3071a9;
+    width: 100%
+}
+
+::-ms-track {
+    background: #3071a9;
+    width: 100%
+}
+
+::-webkit-slider-runnable-track {
+    background: #3071a9;
+    width: 100%
+}
+
+::-moz-range-thumb {
+    border-radius: 3px;
+    cursor: pointer
+}
+
+::-ms-thumb {
+    border-radius: 3px;
+    cursor: pointer
+}
+
+::-webkit-slider-thumb {
+    border-radius: 3px;
+    cursor: pointer
+}

cli/test/fixtures/input-range/input-range.scss

@@ -0,0 +1,9 @@
+::range-track {
+    background: #3071a9;
+    width: 100%;
+}
+
+::range-thumb {
+    border-radius: 3px;
+    cursor: pointer;
+}

cli/test/fixtures/mediaMinMax/mediaMinMax.css

@@ -0,0 +1,3 @@
+@media (max-width: 30em) {
+  .element {
+    width: 50%; } }

cli/test/fixtures/mediaMinMax/mediaMinMax.scss

@@ -0,0 +1,9 @@
+@custom-media --small-viewport (width <= 30em);
+
+$width: 50%;
+
+@media (--small-viewport) {
+  .element {
+    width: $width;
+  }
+}

cli/test/fixtures/verticalRhythm/verticalRhythm.css

@@ -0,0 +1,20 @@
+:root {
+  font: 16px / 1.5 "Helvetica", "Arial", sans-serif;
+}
+
+@media (max-width: 500px) {
+  :root {
+    font-size: 14px;
+  }
+}
+
+@media print {
+  :root {
+    font: 11pt / 1.3 "Georgia", "Times New Roman", "Times", serif;
+  }
+}
+
+p {
+  margin-bottom: 1.5rem;
+  padding-top: 0.75rem;
+}

cli/test/fixtures/verticalRhythm/verticalRhythm.scss

@@ -0,0 +1,18 @@
+:root {
+  font: 16px / 1.5 "Helvetica", "Arial", sans-serif;
+
+  @media (max-width: 500px) {
+    font-size: 14px;
+  }
+}
+
+@media print {
+  :root {
+    font: 11pt / 1.3 "Georgia", "Times New Roman", "Times", serif;
+  }
+}
+
+p {
+  margin-bottom: 1lh;
+  padding-top: .5lh;
+}

cli/test/index.js

@@ -0,0 +1,43 @@
+const fs = require("fs");
+const test = require("tape");
+const compile = require('../lib/compile');
+
+const actual = (file) => {
+  return compile(`test/fixtures/${file}/${file}.scss`).replace(/\s+/g, '');
+};
+
+const expected = (file) => {
+  return fs.readFileSync(`test/fixtures/${file}/${file}.css`, 'utf8').replace(/\s+/g, '');
+};
+
+test('@media', (t) => {
+  t.equal(
+    actual('customMedia'),
+    expected('customMedia'),
+    'should transform custom media queries');
+
+  t.equal(
+    actual('mediaMinMax'),
+    expected('mediaMinMax'),
+    'should transform ranges in media queries');
+
+  t.end();
+});
+
+test('units', (t) => {
+  t.equal(
+    actual('verticalRhythm'),
+    expected('verticalRhythm'),
+    'should be added');
+
+  t.end();
+});
+
+test('range input', (t) => {
+  t.equal(
+    actual('input-range'),
+    expected('input-range'),
+    'should be transformed');
+
+  t.end();
+});