All Projects → Thream → styled-jsx-plugin-sass

Thream / styled-jsx-plugin-sass

Licence: MIT License
Plugin to add Sass support to styled-jsx.

Programming Languages

javascript
184084 projects - #8 most used programming language
shell
77523 projects
SCSS
7915 projects
CSS
56736 projects

Projects that are alternatives of or similar to styled-jsx-plugin-sass

styled-jsx-plugin-postcss
Plugin to add PostCSS support to styled-jsx.
Stars: ✭ 86 (+330%)
Mutual labels:  css-in-js, styled-jsx, styled-jsx-plugin
tsstyled
A small, fast, and simple CSS-in-JS solution for React.
Stars: ✭ 52 (+160%)
Mutual labels:  css-in-js, styled-jsx
mediocre-pictures
Helping you take mediocre pictures, hands-free. 📷🙆🏻🙅🏾💁🏼📸
Stars: ✭ 16 (-20%)
Mutual labels:  css-in-js
styletron-connect
A high-level interface to styletron, similar to react-redux's connect
Stars: ✭ 17 (-15%)
Mutual labels:  css-in-js
mugiwara
fast minimal CSS-in-JS created to reduce size of CSS injected
Stars: ✭ 11 (-45%)
Mutual labels:  css-in-js
visage
Visage design system
Stars: ✭ 12 (-40%)
Mutual labels:  css-in-js
csstips
CSS Tips to help beginners using CSS in TS / JS
Stars: ✭ 50 (+150%)
Mutual labels:  css-in-js
siimple
The minimal and themeable CSS toolkit for flat and clean designs
Stars: ✭ 525 (+2525%)
Mutual labels:  css-in-js
veel
Base react styling components using fela with a design system
Stars: ✭ 26 (+30%)
Mutual labels:  css-in-js
flair
a lean, component-centric style system for React components
Stars: ✭ 19 (-5%)
Mutual labels:  css-in-js
styled-components-docs-zh
💅 styled-components 中文文档翻译 🏇持续施工中
Stars: ✭ 160 (+700%)
Mutual labels:  css-in-js
glitz
Lightweight CSS-in-JS library with high performance written in TypeScript
Stars: ✭ 42 (+110%)
Mutual labels:  css-in-js
benefit
✨ Utility CSS-in-JS library that provides a set of low-level, configurable, ready-to-use styles
Stars: ✭ 51 (+155%)
Mutual labels:  css-in-js
adonis
Adonis ❤️ Aphrodite
Stars: ✭ 44 (+120%)
Mutual labels:  css-in-js
css-render
Generating CSS using JS with considerable flexibility and extensibility, at both server side and client side.
Stars: ✭ 137 (+585%)
Mutual labels:  css-in-js
react-awesome-reveal
React components to add reveal animations using the Intersection Observer API and CSS Animations.
Stars: ✭ 564 (+2720%)
Mutual labels:  css-in-js
react-koa-universal
a boilerplate react graphql apollo css-in-js buzzword koa ssr pwa wasm throwaway app 🚮
Stars: ✭ 12 (-40%)
Mutual labels:  css-in-js
boss-lite
Boss Lite - React Redux Material Admin Template
Stars: ✭ 148 (+640%)
Mutual labels:  css-in-js
bredon
A modern CSS value compiler in JavaScript
Stars: ✭ 39 (+95%)
Mutual labels:  css-in-js
jolvera.dev
Personal blog built with Next.js & Rebass
Stars: ✭ 36 (+80%)
Mutual labels:  css-in-js

Thream/styled-jsx-plugin-sass

Plugin to add Sass support to styled-jsx.

Licence MIT Contributor Covenant
Dependabot badge
Conventional Commits semantic-release npm version

📜 About

Use Sass with styled-jsx 💥

This repository was originally forked from giuseppeg/styled-jsx-plugin-sass & it is not intended to take any credit but to improve the code from now on.

💾 Install

Install the package and sass version you need (it is a peer dependency).

npm install --save-dev sass @styled-jsx/plugin-sass

⚙️ Usage

Add @styled-jsx/plugin-sass to the styled-jsx's plugins in your babel configuration (e.g. .babelrc.json):

{
  "presets": [
    [
      "next/babel",
      {
        "styled-jsx": {
          "plugins": ["@styled-jsx/plugin-sass"]
        }
      }
    ]
  ]
}

Sass options

Sass can be configured using sassOptions. This is useful for setting options such as data or includePaths, see all the available options in Sass README.

{
  "presets": [
    [
      "next/babel",
      {
        "styled-jsx": {
          "plugins": [
            [
              "@styled-jsx/plugin-sass",
              {
                "sassOptions": {
                  "includePaths": ["./styles"],
                  "data": "$test-color: #ff0000"
                }
              }
            ]
          ]
        }
      }
    ]
  ]
}

💡 Contributing

Anyone can help to improve the project, submit a Feature Request, a bug report or even correct a simple spelling mistake.

The steps to contribute can be found in the CONTRIBUTING.md file.

📄 License

MIT

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].