Initial Commit

.gitignore

@@ -0,0 +1,17 @@
+
+# dependencies
+node_modules
+
+# builds
+build
+dist
+.rpt2_cache
+
+# misc
+.DS_Store
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+example/app/css

README.md

@@ -0,0 +1,14 @@
+# CASS
+
+```bash
+npm i
+cd example
+npm i
+npm run start
+```
+
+Open - http://localhost:3000
+
+Edit - example/app/index.html
+
+refer - defaultConfig.js for prefix

compiler.js

@@ -0,0 +1,71 @@
+const jss = require('jss').default;
+const invariant = require('invariant');
+const { rules, breakpoints } = require('./defaultConfig');
+
+const createGenerateClassName = () => {
+    return (rule, sheet) => `${rule.key}`
+}
+
+jss.setup({ createGenerateClassName });
+
+const transformBreakpoint = breakpoint => {
+    invariant(breakpoints[breakpoint], `Invalid breakpoint given - ${breakpoint}`);
+
+    return `@media (min-width:${breakpoints[breakpoint]})`;
+};
+
+const transformRule = rule => {
+    invariant(rules[rule], `Invalid rule given - ${rule}`);
+
+    return rules[rule];
+};
+
+const transformType = type => (type === 'pe')? '%': type;
+
+module.exports = (className) => {
+
+    const validTypes = {'px':1, 'pe':1, 'em': 1, 'rem': 1};
+
+    const regex = /(?:(?<breakpoint>[a-z]*):)?(?<rule>[a-z]*)-(?:(?<color>#(?:(?:[0-9a-fA-F]{2}){3}|(?:[0-9a-fA-F]){3}))|(?<value>\d+(?:\.\d+)?)?(?<type>[a-z]*))/g;
+    const result = regex.exec(className);
+    if(result === null) {
+        invariant(false, `Invalid class given - ${className}`);
+    }
+    let { breakpoint, rule, value, type, color} = result.groups;
+
+    if(color) {
+        value = color;
+    }
+
+    if(!value) {
+        value = type;
+        type = null;
+    }    
+
+    invariant(rule, `No rule given for ${className}`);
+    invariant(value, `Invalid or no value given for ${className}`);
+    if(type) {
+        invariant(validTypes[type], `Invalid type given for ${className}`);  
+    }
+
+    rule = transformRule(rule);
+    type = transformType(type);
+
+    let style = {
+        [`${className}`]: {
+            [`${rule}`]: `${value}${type?type:''}`
+        }
+    };
+
+    let breakpointStyle = null;
+    if(breakpoint) {
+        breakpoint = transformBreakpoint(breakpoint);
+
+        breakpointStyle = {
+            [breakpoint]: style
+        };
+    }
+
+    const sheet = jss.createStyleSheet(breakpointStyle || style)
+    return sheet.toString();
+};

defaultConfig.js

@@ -0,0 +1,141 @@
+module.exports = {
+
+    breakpoints: {
+        'sm': '576px',
+        'md': '768px',
+        'lg': '992px',
+        'xl': '1200px'
+    },
+
+    rules: {
+        w: 'width',
+        h: 'height',
+        maw: 'max-width',
+        mah: 'max-height',
+        miw: 'min-width',
+        mih: 'min-height',
+        po: 'position',
+        fl: 'float',
+        cl: 'clear',
+        d: 'display',
+        t: 'top',
+        b: 'bottom',
+        l: 'left',
+        r: 'right',
+        o: 'opacity',
+        cus: 'cursor',
+
+        ovf: 'overflow',
+        ovfx: 'overflow-x',
+        ovfy: 'overflow-y',
+        ovfw: 'overflow-wrap',
+
+        p: 'padding',
+        pl: 'padding-left',
+        pr: 'padding-right',
+        pt: 'padding-top',
+        pb: 'padding-bottom',
+
+        m: 'margin',
+        ml: 'margin-left',
+        mr: 'margin-right',
+        mt: 'margin-top',
+        mb: 'margin-bottom',
+
+        co: 'color',
+        fo: 'font',
+        fost: 'font-style',
+        fov: 'font-variant',
+        fow: 'font-weight',
+        fosz: 'font-size',
+        fof: 'font-family ',
+        lh: 'line-height',
+        lb: 'line-break',
+
+        txta: 'text-align',
+        txti: 'text-indent',
+        txtj: 'text-justify',
+        txtor: 'text-orientation',
+        txtov: 'text-overflow',
+        txtr: 'text-rendering',
+        txtt: 'text-transform',
+        txte: 'text-emphasis',
+        txtec: 'text-emphasis-color',
+        txtep: 'text-emphasis-position',
+        txtes: 'text-emphasis-style',
+        txtd: 'text-decoration',
+        txtdc: 'text-decoration-color',
+        txtdl: 'text-decoration-line',
+        txtdw: 'text-decoration-style',
+
+        jc: 'justify-content',
+        ac: 'align-content',
+        ji: 'justify-items',
+        js: 'justify-self',
+        pi: 'place-items',
+        pc: 'place-content',
+        g: 'gap',
+        cg: 'column-gap',
+        gg: 'grid-gap',
+        rg: 'row-gap',
+        ord: 'order',
+        flx: 'flex',
+        flxb: 'flex-basis',
+        flxd: 'flex-direction',
+        flxf: 'flex-flow',
+        flxg: 'flex-grow',
+        flxd: 'flex-shrink',
+        flxw: 'flex-wrap',
+
+        bg: 'background',
+        bgcl: 'background-clip',
+        bgco: 'background-color',
+        bgi: 'background-image',
+        bgo: 'background-origin',
+        bgp: 'background-position',
+        bgpx: 'background-position-x',
+        bgpy: 'background-position-y',
+        bgr: 'background-repeat',
+        bgs: 'background-size',
+
+        out: 'outline',
+        outc: 'outline-color',
+        outs: 'outline-style',
+        outw: 'outline-width',
+        outo: 'outline-offset',
+
+        bo: 'border',
+        bos: 'border-style',
+        bow: 'border-width',
+        boc: 'border-color',
+        bora: 'border-radius',
+
+        bob: 'border-bottom',
+        bobs: 'border-bottom-style',
+        bobw: 'border-bottom-width',
+        bobc: 'border-bottom-color',
+        boblr: 'border-bottom-left-radius',
+        bobrr: 'border-bottom-right-radius',
+
+        bot: 'border-top',
+        bots: 'border-top-style',
+        botw: 'border-top-width',
+        botc: 'border-top-color',
+        botlr: 'border-top-left-radius',
+        botrr: 'border-top-right-radius',
+
+        bor: 'border-right',
+        bors: 'border-right-style',
+        borw: 'border-right-width',
+        borc: 'border-right-color',
+        borlr: 'border-right-left-radius',
+        borrr: 'border-right-right-radius',
+
+        bol: 'border-left',
+        bols: 'border-left-style',
+        bolw: 'border-left-width',
+        bolc: 'border-left-color',
+        bollr: 'border-left-left-radius',
+        bolrr: 'border-left-right-radius',
+    }
+}

example/app/index.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+
+    <style>
+        *,
+        :after,
+        :before {
+            border: 0 solid #dae1e7;
+        }
+    </style>
+
+    <link rel="stylesheet" href="css/index.css" />
+</head>
+
+<body>
+    <button class="bgco-#3490dc cus-pointer co-white sm:co-red md:co-yellow lg:co-green fow-bold pt-0.5rem pb-0.5rem pl-1rem pr-1rem bora-0.25rem">
+        Button
+    </button>
+
+    <div class="d-flex jc-center bg-#f1f5f8">
+        <div class="co-#606f7b txta-center bg-#dae1e7 pt-0.5rem pb-0.5rem pl-1rem pr-1rem m-0.5rem">1</div>
+        <div class="co-#606f7b txta-center bg-#dae1e7 pt-0.5rem pb-0.5rem pl-1rem pr-1rem m-0.5rem">2</div>
+        <div class="co-#606f7b txta-center bg-#dae1e7 pt-0.5rem pb-0.5rem pl-1rem pr-1rem m-0.5rem">3</div>
+    </div>
+</body>
+
+</html>

example/gulpfile.js

@@ -0,0 +1,51 @@
+'use strict';
+
+const gulp = require('gulp'),
+    browserSync = require("browser-sync"),
+    htmlInjector = require("bs-html-injector"),
+    runSequence = require('run-sequence'),
+    regen = require('../'),
+    del = require('del');
+
+// Start browserSync server
+gulp.task('browserSync', function () {
+    var settings = {
+        server: {
+            baseDir: 'app'
+        },
+    };
+    // we don't want to open the browser-sync server
+    // amok will open a browser through chrome's remote debugger
+    settings.open = false;
+    browserSync.use(htmlInjector);
+    return browserSync(settings);
+});
+
+var onError = function(error) {
+    const logError =  regen.logError.bind(this);
+    logError(error);
+    browserSync.notify(error.message);
+};
+
+gulp.task('regen', function () {
+    return gulp.src('app/*.html') // Gets all files ending with .html in app/ and children dirs
+        .pipe(regen().on('error', onError)) // Passes it through a regen, log errors to console
+        .pipe(gulp.dest('app/css'))
+        .pipe(browserSync.stream()); // Outputs it in the css folder
+});
+
+gulp.task('html-reload', ['regen'], function (done) {
+    htmlInjector();
+    done();
+});
+
+// Watchers
+gulp.task('watch', function () {
+    gulp.watch('app/*.html', ['regen', htmlInjector]);
+})
+
+gulp.task('default', function (callback) {
+    runSequence(['regen', 'browserSync'], 'watch',
+        callback
+    )
+})