Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

CSS mixin api

See original GitHub issue

Is your feature request related to a problem? Please describe.

CSS syntax highlighting is built based on premise that CSS code is wrapped with css tagged template literal. Without the tag syntax highlighting does not work.

Describe the solution you’d like

Even if there is no use case for it, provide a dummy css tagged template literal that could be used simply to enable compatibility with the existing code editors, e.g.

import {
  css,
  styled,
} from '@compiled/css-in-js';

const mixin = css`
  font-size: 12px;
`;

<div
  css={css`
    ${mixin};
    color: red;
  `}
/>

<div
  css={[mixin, { color: 'red' }]}
/>

To produce this CSS:

font-size: 12px;
color: red;

Testing notes

Used inline in a CSS prop
Used in a local variable
Used from a import
Used in CSS prop array
Dynamic CSS interpolations
Static CSS interpolations

Issue Analytics

State:
Created 3 years ago
Comments:8 (5 by maintainers)

Top GitHub Comments

1reaction

pgmanutdcommented, Jan 12, 2021

Cool @sonatard. Thanks for that. We will merge #341 asap. Your contributions are always welcome. 😃 ❤️

1reaction

sonatardcommented, Jan 12, 2021

That’s good!! I’m looking forward to it. If #341 will be merged, I will Introduce Compiled in Japan. And Congratulations! 1000 Stars! I was waiting for Atomic CSS by stylex from last year, but they were never released by Facebook. I was excited when I found Compiled.

Top Results From Across the Web

Sass: @mixin and @include

This makes it easy to define flexible mixin APIs that can be used in simple or complex ways. SCSS; Sass; CSS. SCSS Syntax....

Sass @mixin and @include - W3Schools

The @mixin directive lets you create CSS code that is to be reused throughout the website. The @include directive is created to let...

Sass - Mixins - TutorialsTeacher

There are CSS frameworks around they try to address the problem. ... The mixin in the above example is defined in the same...

CSS Mixins

Mixins allow document authors to define patterns of property value pairs, ... The following example includes both the defined mixin .clearfix and the ......

5 PRACTICAL SCSS MIXIN EXAMPLES - Codipher

The SCSS mixin “prefixer” takes property as an argument and adds browser prefixes to them. For example, if Google Chrome doesn't support a ......