Stylis

Stylis is a lightweight CSS preprocessor and parser. It supports CSS-like syntax with nesting, auto-prefixing, and other transformations.

Demo

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "config": {
    "activeEditor": "style",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Hello, Stylis!</h1>\n  <p>A lightweight CSS preprocessor.</p>\n  <div class=\"box\">\n    <p>Nested styles with auto-prefixing</p>\n  </div>\n</div>\n"
    },
    "style": {
      "language": "stylis",
      "content": ".container {\n  font-family: sans-serif;\n  max-width: 600px;\n  margin: 2em auto;\n  padding: 1.5em;\n\n  h1 {\n    color: #2d3748;\n  }\n\n  p {\n    color: #4a5568;\n  }\n}\n\n.box {\n  background: #4a90d9;\n  color: white;\n  padding: 1em;\n  border-radius: 8px;\n  user-select: none;\n  transition: transform 0.3s ease;\n\n  &:hover {\n    transform: scale(1.05);\n  }\n}"
    }
  }
};
createPlayground('#container', options);

TS

import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = {
  "config": {
    "activeEditor": "style",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Hello, Stylis!</h1>\n  <p>A lightweight CSS preprocessor.</p>\n  <div class=\"box\">\n    <p>Nested styles with auto-prefixing</p>\n  </div>\n</div>\n"
    },
    "style": {
      "language": "stylis",
      "content": ".container {\n  font-family: sans-serif;\n  max-width: 600px;\n  margin: 2em auto;\n  padding: 1.5em;\n\n  h1 {\n    color: #2d3748;\n  }\n\n  p {\n    color: #4a5568;\n  }\n}\n\n.box {\n  background: #4a90d9;\n  color: white;\n  padding: 1em;\n  border-radius: 8px;\n  user-select: none;\n  transition: transform 0.3s ease;\n\n  &:hover {\n    transform: scale(1.05);\n  }\n}"
    }
  }
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "config": {
    "activeEditor": "style",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Hello, Stylis!</h1>\n  <p>A lightweight CSS preprocessor.</p>\n  <div class=\"box\">\n    <p>Nested styles with auto-prefixing</p>\n  </div>\n</div>\n"
    },
    "style": {
      "language": "stylis",
      "content": ".container {\n  font-family: sans-serif;\n  max-width: 600px;\n  margin: 2em auto;\n  padding: 1.5em;\n\n  h1 {\n    color: #2d3748;\n  }\n\n  p {\n    color: #4a5568;\n  }\n}\n\n.box {\n  background: #4a90d9;\n  color: white;\n  padding: 1em;\n  border-radius: 8px;\n  user-select: none;\n  transition: transform 0.3s ease;\n\n  &:hover {\n    transform: scale(1.05);\n  }\n}"
    }
  }
};
  return (<LiveCodes {...options} />);
}

Vue

<script setup>
import LiveCodes from "livecodes/vue";

const options = {
  "config": {
    "activeEditor": "style",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Hello, Stylis!</h1>\n  <p>A lightweight CSS preprocessor.</p>\n  <div class=\"box\">\n    <p>Nested styles with auto-prefixing</p>\n  </div>\n</div>\n"
    },
    "style": {
      "language": "stylis",
      "content": ".container {\n  font-family: sans-serif;\n  max-width: 600px;\n  margin: 2em auto;\n  padding: 1.5em;\n\n  h1 {\n    color: #2d3748;\n  }\n\n  p {\n    color: #4a5568;\n  }\n}\n\n.box {\n  background: #4a90d9;\n  color: white;\n  padding: 1em;\n  border-radius: 8px;\n  user-select: none;\n  transition: transform 0.3s ease;\n\n  &:hover {\n    transform: scale(1.05);\n  }\n}"
    }
  }
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

<script>
import LiveCodes from 'livecodes/svelte';

const options = {
  "config": {
    "activeEditor": "style",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Hello, Stylis!</h1>\n  <p>A lightweight CSS preprocessor.</p>\n  <div class=\"box\">\n    <p>Nested styles with auto-prefixing</p>\n  </div>\n</div>\n"
    },
    "style": {
      "language": "stylis",
      "content": ".container {\n  font-family: sans-serif;\n  max-width: 600px;\n  margin: 2em auto;\n  padding: 1.5em;\n\n  h1 {\n    color: #2d3748;\n  }\n\n  p {\n    color: #4a5568;\n  }\n}\n\n.box {\n  background: #4a90d9;\n  color: white;\n  padding: 1em;\n  border-radius: 8px;\n  user-select: none;\n  transition: transform 0.3s ease;\n\n  &:hover {\n    transform: scale(1.05);\n  }\n}"
    }
  }
};
</script>

<LiveCodes {...options} />

Solid

import LiveCodes from 'livecodes/solid';

export default function App() {
  const options = {
  "config": {
    "activeEditor": "style",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Hello, Stylis!</h1>\n  <p>A lightweight CSS preprocessor.</p>\n  <div class=\"box\">\n    <p>Nested styles with auto-prefixing</p>\n  </div>\n</div>\n"
    },
    "style": {
      "language": "stylis",
      "content": ".container {\n  font-family: sans-serif;\n  max-width: 600px;\n  margin: 2em auto;\n  padding: 1.5em;\n\n  h1 {\n    color: #2d3748;\n  }\n\n  p {\n    color: #4a5568;\n  }\n}\n\n.box {\n  background: #4a90d9;\n  color: white;\n  padding: 1em;\n  border-radius: 8px;\n  user-select: none;\n  transition: transform 0.3s ease;\n\n  &:hover {\n    transform: scale(1.05);\n  }\n}"
    }
  }
};
  return (<LiveCodes {...options} />);
}

Preact

import LiveCodes from 'livecodes/preact';

export default function App() {
  const options = {
  "config": {
    "activeEditor": "style",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Hello, Stylis!</h1>\n  <p>A lightweight CSS preprocessor.</p>\n  <div class=\"box\">\n    <p>Nested styles with auto-prefixing</p>\n  </div>\n</div>\n"
    },
    "style": {
      "language": "stylis",
      "content": ".container {\n  font-family: sans-serif;\n  max-width: 600px;\n  margin: 2em auto;\n  padding: 1.5em;\n\n  h1 {\n    color: #2d3748;\n  }\n\n  p {\n    color: #4a5568;\n  }\n}\n\n.box {\n  background: #4a90d9;\n  color: white;\n  padding: 1em;\n  border-radius: 8px;\n  user-select: none;\n  transition: transform 0.3s ease;\n\n  &:hover {\n    transform: scale(1.05);\n  }\n}"
    }
  }
};
  return (<LiveCodes {...options} />);
}

Web Components

<live-codes></live-codes>

<script type="module">
  import "livecodes/web-components";

  const playground = document.querySelector("live-codes");
  playground.config = {
    "activeEditor": "style",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Hello, Stylis!</h1>\n  <p>A lightweight CSS preprocessor.</p>\n  <div class=\"box\">\n    <p>Nested styles with auto-prefixing</p>\n  </div>\n</div>\n"
    },
    "style": {
      "language": "stylis",
      "content": ".container {\n  font-family: sans-serif;\n  max-width: 600px;\n  margin: 2em auto;\n  padding: 1.5em;\n\n  h1 {\n    color: #2d3748;\n  }\n\n  p {\n    color: #4a5568;\n  }\n}\n\n.box {\n  background: #4a90d9;\n  color: white;\n  padding: 1em;\n  border-radius: 8px;\n  user-select: none;\n  transition: transform 0.3s ease;\n\n  &:hover {\n    transform: scale(1.05);\n  }\n}"
    }
  };
</script>

Usage

Stylis code added to the style editor is compiled to CSS before being added to the result page.

For more details about CSS support in LiveCodes, including CSS processors, style imports, CSS modules, and CSS frameworks, see the CSS feature documentation.

Loading External Styles

Stylis supports importing external stylesheets using the @import rule. Bare module specifiers are resolved to full CDN URLs.

@import "normalize.css";

tip

For more information about loading and importing styles, see the Style Imports documentation.

Language Info

Name

stylis

Extensions

.stylis

Editor

style

Compiler

Stylis

Version

stylis: v4.3.6

Code Formatting

Not supported.

Links

• Stylis Official Website
• Stylis on GitHub
• CSS feature documentation in LiveCodes