Feature: CSS Selector, now with IE Compatibility mode!

[wlvstv]

Purpose

This feature request is proposed to solve a couple issues:

1. Solves IE Implementation? #40 , CSS Generation for IE
2. Adds features that resolve some discussion on Proposal: CSS nesting changes. #76 namely, the debate over showing vanilla CSS vs. SCSS syntax. We can now have our 🍰 and eat it too!

I would really love for someone who is much more of an expert on ms-grid to take a look at my css outputs and validate they are the way these should be implemented :).

Change Summary

• Added a Dropdown and data object control to select the CSS output type, CSS (Default), SCSS or IE Compatible.
• Added v-if conditions to change display for SCSS nesting of child components.
• Added IE Compatible CSS generation and accompanying conditional elements
• Added methods to compute ms-grid span and margin values
• Modified Vuex to add state objects for ms grid templates and modified mutations to populate the objects
• Modified grid component to pass grid values as an object into vuex for manipulation into ms-grid

Notes

I was trying to get creative with formatting to save screen real estate, very open to suggestions on how to pretty this up. I also took liberties with the styling for the dropdown menu for CSS selection. Please let me know how we can make these look better!

Examples

Here is an example of what the changes look like. Here is the example grid:

Vanilla CSS:

SCSS:

IE Compatibility:

[sdras]

Thanks for the PR! I'd be willling to take a PR for IE support but don't want a lang preprocessor switcher for CSS, I'm trying to keep the tool simple. We've already made it acceptable for CSS. I'm going to close this out, feel free to resubmit with a smaller PR that just addresses IE.