All Projects → ansumanshah → Css In Js

ansumanshah / Css In Js

Licence: mit
Autocomplete React Native / JS Styles and converting plain CSS to JS styles

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Css In Js

Css In Js Benchmarks
Stars: ✭ 360 (+87.5%)
Mutual labels:  styled-components, css-in-js, jss
Css In React
🍭 CSS in React - Learn the best CSS in JS frameworks by example
Stars: ✭ 101 (-47.4%)
Mutual labels:  styled-components, css-in-js, jss
Styled Tools
Useful interpolated functions for CSS-in-JS
Stars: ✭ 761 (+296.35%)
Mutual labels:  styled-components, css-in-js, jss
tsstyled
A small, fast, and simple CSS-in-JS solution for React.
Stars: ✭ 52 (-72.92%)
Mutual labels:  styled-components, css-in-js, jss
Postjss
Use the power of PostCSS in compiling with JSS
Stars: ✭ 40 (-79.17%)
Mutual labels:  styled-components, css-in-js, jss
Grid
This package has moved and renamed
Stars: ✭ 2,079 (+982.81%)
Mutual labels:  styled-components, css-in-js
Onno
Responsive style props for building themed design systems
Stars: ✭ 95 (-50.52%)
Mutual labels:  styled-components, css-in-js
Nanostyled
A <1kB library for styling React components as if with CSS-in-JS, without CSS-in-JS
Stars: ✭ 104 (-45.83%)
Mutual labels:  styled-components, css-in-js
Xstyled
A utility-first CSS-in-JS framework built for React. 💅👩‍🎤⚡️
Stars: ✭ 1,835 (+855.73%)
Mutual labels:  styled-components, css-in-js
Horror
😱 React HTML elements with CSS-in-JS
Stars: ✭ 78 (-59.37%)
Mutual labels:  styled-components, css-in-js
Styled Typography
Typograpy components for react and styled-components
Stars: ✭ 113 (-41.15%)
Mutual labels:  styled-components, css-in-js
Scoped Style
A tiny css in js library 🚀
Stars: ✭ 129 (-32.81%)
Mutual labels:  styled-components, css-in-js
React Usestyles
🖍 Style components using React hooks. Abstracts the styling library away.
Stars: ✭ 89 (-53.65%)
Mutual labels:  css-in-js, jss
Scale
The Scale library offers a set of customizable web components written with Stencil.js & TypeScript. The default theme of the library can be easily replaced so that a corresponding corporate identity of a dedicated brand can be represented.
Stars: ✭ 87 (-54.69%)
Mutual labels:  css-in-js, jss
React Image Smooth Loading
[not maintained] Images which just flick to appear aren't cool. Images which appear smoothly with a fade like Instagram are cool
Stars: ✭ 84 (-56.25%)
Mutual labels:  styled-components, css-in-js
Styled By
Simple and powerful lib to handle styled props in your components
Stars: ✭ 122 (-36.46%)
Mutual labels:  styled-components, css-in-js
Goober
🥜 goober, a less than 1KB 🎉 css-in-js alternative with a familiar API
Stars: ✭ 2,317 (+1106.77%)
Mutual labels:  styled-components, css-in-js
Next Dark Mode
🌑 Enable dark mode for Next.js apps
Stars: ✭ 133 (-30.73%)
Mutual labels:  styled-components, css-in-js
Styled Bootstrap
💅🏻 A styled-component implementation of Bootstrap
Stars: ✭ 154 (-19.79%)
Mutual labels:  styled-components, css-in-js
Filbert Js
A lightweight(~1kb) css-in-js framework
Stars: ✭ 167 (-13.02%)
Mutual labels:  styled-components, css-in-js

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].