Emotion: Implement LESS/SCSS support

[aej11a]

The problem

It would be much easier to write inline styles if LESS/SCSS were supported

Proposed solution

Implement LESS or SCSS as alternatives to the css inline modifier imported from emotion/core

[Andarist]

That would increase complexity and bundlesize dramatically. With emotion you already have full-blown language (javascript) at your disposal to create your styles and there is no much need to introduce any other special syntax (even if it's as familiar to people as less/scss)

[kimbaudi]

Here is an example of how I converted SCSS to emotion in a React application:

scss

.nav {
  background: lightgreen;

  ul {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
    list-style-type: none;

    li {
      padding: 0.25rem 0.5rem;
      background: mintcream;

      &:not(:last-child) {
        margin-right: 1rem;
      }
    }
  }
}

emotion and react

import React from 'react'
import { Link } from 'gatsby'
import styled from '@emotion/styled'

const Nav = styled.nav({
  backgroundColor: 'lightgreen',
})

const Ul = styled.ul({
  display: 'inline-flex' /* flex | inline-flex */,
  flexDirection: 'row' /* ? | ? */,
  flexWrap: 'wrap' /* ? | ? */,
  justifyContent: 'flex-start',
  margin: 0,
  padding: 0,
  listStyleType: 'none' /* ? | ? */,
})

const Li = styled.li({
  padding: '0.25rem 0.5rem',
  backgroundColor: 'mintcream',
  '&:not(:last-child)': {
    marginRight: '1rem',
    backgroundColor: 'red',
  },
})

const Navigation = () => (
  <Nav>
    <Ul>
      <Li>
        <Link to={'/'}>Home</Link>
      </Li>
      <Li>
        <Link to={'/about'}>About</Link>
      </Li>
    </Ul>
  </Nav>
)
export default Navigation

[avin-kavish]

@kimbaudi You can use a tagged template literal and just copy paste the styles.

const Ul = styled.ul`
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
    list-style-type: none;
`

Also the css prop is more performant.

[kimbaudi]

@avin-kavish thanks for the suggestion. I am aware of template literals (aka string styles), but I prefer object styles because of better syntax highlighting, autocomplete, etc from my text editor/ide. I feel we lose some of the benefits of writing css in template string literal because you don't get autocomplete, syntax checking, etc that you would normally get if you were to write css normally instead of as a string.

[avin-kavish]

@kimbaudi What IDE are you using? Some IDEs have a feature called language injection which allows you to inject one language into another. If you use one of the JetBrains family, based on the WebStorm engine, installing this extension will automatically do it for you whenever you use emotion.

[kimbaudi]

@avin-kavish I have WebStorm, but I stopped using it a while back and now use vscode primarily. It already has good support for javascript and sass, but i'm unaware of any extensions that allow sass/css support in javascript string template literals.

[FezVrasta]

You can install the styled components extension

[Andarist]

Closing this as we don't plan to add anything like this, see https://github.com/emotion-js/emotion/issues/1416#issuecomment-505635897