Git Product home page Git Product logo

css-in-js's Introduction

Autocomplete for React Native and css-in-js for Atom and VS Code

Star on GitHubTweet PRs Welcome Version MIT License

Now get Autocomplete for CSSinJS libraries using object styles. Sponsor

Installation

apm install css-in-js

Or go to Settings โ†’ Install and search for css-in-js

Usage

const btnA = css({ /* styles */ });
const btnB = glamorous.div({ /* styles */ });
const btnC = StyleSheet.create({ /* styles */ });

Only works for these keywords by default you can edit in settings for more.

glamorous | css | StyleSheet.create

ReactNative

Autocomplete

Does not work for general objects

let styles = {
  /* styles */
}

This is basically a fork of autocomplete-css

CSS in JS for VS Code

Provides CSS in JS autocompletion and converts kebab-case CSS to camelCase CSS and vice versa

  • Provides autocompletion options for CSS styles as a style object for use in CSS in JS (like glamorous!)
  • Converts CSS between regular CSS syntax (strings) and CSS-in-JS syntax (style objects)

Autocomplete

autocomplete

Convert CSS in JS

demo

How to Use CSS Conversion

Select some block of text in a javascript or typescript file and use cmd+shift+p to bring up the command palette, then select Convert CSS-in-JS.

Or use the keyboard shortcut cmd+shift+j (ctrl+shift+j on Windows).


Coming Soon

Codemods for easy shifting between css-in-js libraries

css-in-js's People

Contributors

ansumanshah avatar mfunkie avatar paulmolluzzo avatar zachgibson avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.