Skip to content
This repository has been archived by the owner on Nov 1, 2022. It is now read-only.

Latest commit

 

History

History
113 lines (72 loc) · 4.44 KB

README.md

File metadata and controls

113 lines (72 loc) · 4.44 KB
Raw

SnapCss!

feature X Realtime editing style in a snap!

Link: video demo

chrome extension link

vscode extension link

Idea behind, there is _nghost-${COMPONENT_VARIABLE} in every component in Angular. I Create websocket that listen to the chrome extension, the chrome seek COMPONENT_VARIABLE then send it to vscode. After that, vscode mix it that component variable with style and send it to chrome extension. then it will update it.

Requirements

you need install for this plugin to work with:

  • Chrome Browser HERE
  • My chrome extension HERE

Install

  1. Open Extensions sideBar panel in Visual Studio Code. View → Extensions
  2. Search for SnapCss then Click Install, Click Reload, if required
  3. install chrome extension HERE if you not install yet

Features

Imagine no more file saving or page reloading just to see how single update affects web page, realtime update style in browser immediately, as you type... How many time you can save? how fast we can build our application?

No need to waiting for JS framework build time to see your new style apply. Just type your new style and see the magic happen.

Base on this idea Livestyle. I'm writing an extension for VS code and Chrome that can help Angular developer (or frontend developer) can style faster. It call SnapCss that can updates CSS in browser immediately, as you type. No more file saving or page reloading just to see how single update affects web page.

feature X

Youtube video click on below image:

SnapCss

Known Issues

why my Console in Chrome browser keep yelling Error: GET http://localhost:1995/socket.io/?EIO=3&transport=polling&t=MmnbD6d net::ERR_CONNECTION_REFUSED ???

  • answer: Because you not open VSCode editor. You just open it and it will shut up or disable SnapCss chrome plugin.
  • Still notworking if have @import() or ::ng-deep

Release Notes

[0.0.9] - 2020-02-18

Fixed

  • Project work perfect, dont know why it not crash anymore. Enable tracking by default

[0.0.8] - 2019-08-15

Fixed

  • project error crash 3: CHANGED: change from sass.js to PostCss. Start working normally

Feature Implement Process

  • Webpack bundle to make plugin faster.
  • Multi workspace SnapCss editing.

Framework Implement Process

  • normal html/css website
  • Angular 2+
  • Ionic Angular
  • Ionic Stencil
  • React
  • VueJS
  • .NET
  • PHP (lavarel)
  • Wordpress

Note

Give me the feedback, your request framework or new feature in here or email me: hiepxanh@gmail.com