stylelint-config-runroom

Runroom config for stylelint


Keywords
stylelint, stylelint-config, runroom
License
MIT
Install
npm install stylelint-config-runroom@1.0.3

Documentation

stylelint-config-runroom

Runroom config for stylelint, it is an extension of Stylelint config standard.

Build Status

Example

@import "route/filename.1";
@import "route/filename.2";

/**
 * Multi-line comment
 */
.selector-1,
.selector-2,
.selector-3[type="text"] {
    background: linear-gradient(#fff, rgba(0, 0, 0, .8));
    box-sizing: border-box;
    color: #333;
    display: block;
}

.selector-a,
.selector-b:not(:first-child) {
    left: 50%;
    padding: 10px !important;
    position: absolute;
    top: calc(calc(1em * 2) / 3);
    transform: translateX(-50%);

    @include breakpoint($s768) {
        top: 50%;
        transform: translate(-50%, -50%);
    }

    &.is-main { font-size: 30px; }
}

.selector-x { width: 10%; }
.selector-y { width: 20%; }
.selector-z { width: 30%; }

/* Single-line comment */

@media (min-width: 60em) {
    .selector {
        /* Flush to parent comment */
        transform: translate(1, 1) scale(3);
    }
}

@media (orientation: portrait), projection and (color) {
    .selector-i + .selector-ii {
        background: color(rgb(0, 0, 0) lightness(50%));
        font-family: Helvetica, "Arial Black", sans-serif;
    }
}

/* Flush single line comment */
@media
    screen and (min-resolution: 192dpi),
    screen and (min-resolution: 2dppx) {
    .selector {
        background-image: repeating-linear-gradient(-45deg, transparent, #fff 25px, rgba(255, 255, 255, 1) 50px);
        box-shadow: 0 1px 1px #000, 0 1px 0 #fff, 2px 2px 1px 1px #ccc inset;
        height: 10rem;
        margin: 10px;
    }

    /* Flush nested single line comment */
    .selector::after {
        background-image: url(x.svg);
        content: '';
    }
}

Note: the config is tested against the CSS version of this example, as such the example contains plenty of SCSS syntax, formatting and features.

Installation

yarn add --dev stylelint-config-runroom

Usage

Set your stylelint config to:

{
    "extends": "stylelint-config-runroom"
}

In this link you will find more information about extending stylelint

Changelog

License