### Project Setup with Stylelint Configuration

Source: https://context7.com/jronald01/stylelint-config-skyscanner/llms.txt

Installs the stylelint-config-skyscanner package and configures npm scripts for linting SCSS files. This setup enables running linters and auto-fixing issues directly from the command line.

```json
{
  "name": "my-project",
  "devDependencies": {
    "@skyscanner/stylelint-config-skyscanner": "^9.0.0",
    "stylelint": "^16.22.0"
  },
  "scripts": {
    "lint:css": "stylelint '**/*.scss'",
    "lint:css:fix": "stylelint '**/*.scss' --fix"
  }
}
```

--------------------------------

### Running Stylelint Commands

Source: https://context7.com/jronald01/stylelint-config-skyscanner/llms.txt

Examples of npm scripts and npx commands to run Stylelint. These commands cover linting all SCSS files, auto-fixing issues, linting specific directories, and applying custom configuration overrides.

```bash
# Lint all SCSS files
npm run lint:css

# Auto-fix issues
npm run lint:css:fix

# Lint specific directory
npx stylelint "src/**/*.scss"

# Lint with custom config overrides
npx stylelint "src/**/*.scss" --config .stylelintrc
```

--------------------------------

### Install stylelint-config-skyscanner

Source: https://github.com/jronald01/stylelint-config-skyscanner/blob/main/README.md

Installs the stylelint-config-skyscanner package as a development dependency using npm. This package provides the base stylelint configuration for Skyscanner projects.

```bash
npm install --save-dev @skyscanner/stylelint-config-skyscanner
```

--------------------------------

### Advanced Stylelint Configuration Overrides

Source: https://context7.com/jronald01/stylelint-config-skyscanner/llms.txt

An example of an extended Stylelint configuration, demonstrating how to override or add custom rules, disallow specific units with exceptions, and configure strict value checks for properties. It also shows how to ignore certain files.

```json
{
  "extends": "@skyscanner/stylelint-config-skyscanner",
  "rules": {
    "selector-max-compound-selectors": 3,
    "unit-disallowed-list": [
      "px",
      {
        "ignoreProperties": {
          "px": ["margin-top", "margin-bottom", "/^padding/", "/^border/", "width", "height"]
        }
      }
    ],
    "scale-unlimited/declaration-strict-value": [
      ["/color/", "fill", "stroke"],
      {
        "ignoreKeywords": {
          "/color/": ["currentcolor", "currentColor", "transparent", "inherit", "white", "black"]
        }
      }
    ]
  },
  "ignoreFiles": ["**/*.css", "dist/**/*.scss"]
}
```

--------------------------------

### Customized Stylelint Configuration

Source: https://context7.com/jronald01/stylelint-config-skyscanner/llms.txt

Extends the Skyscanner shareable configuration and adds custom rules. This example overrides the 'selector-max-compound-selectors' rule.

```json
{
  "extends": "@skyscanner/stylelint-config-skyscanner",
  "rules": {
    "selector-max-compound-selectors": 3
  }
}
```

--------------------------------

### Update SCSS @import for file extensions

Source: https://github.com/jronald01/stylelint-config-skyscanner/blob/main/docs/migration-from-4-to-5.md

Illustrates the required change in SCSS `@import` statements. Due to a new rule in `stylelint-scss` v5, file extensions for partials are now enforced. Paths previously omitting extensions must be updated to include `.scss`.

```scss
@import '~bpk-mixins/index';
```

```scss
@import '~bpk-mixins/index.scss';
```

--------------------------------

### Update NPM package scope

Source: https://github.com/jronald01/stylelint-config-skyscanner/blob/main/docs/migration-from-4-to-5.md

Demonstrates the change in the `extends` property within a stylelint configuration file to reflect the new `@skyscanner/` scope. This is a necessary update for consumers of the package.

```javascript
"extends": "stylelint-config-skyscanner"
```

```javascript
"extends": "@skyscanner/stylelint-config-skyscanner"
```

--------------------------------

### Sass @extend with placeholder syntax

Source: https://github.com/jronald01/stylelint-config-skyscanner/blob/main/docs/migration-from-4-to-5.md

Shows the correct usage of Sass's `@extend` directive, which now requires placeholder selectors (`%placeholder`). This change enforces a best practice for managing CSS through mixins and placeholder extensions, preventing potential issues with class name extensions.

```scss
.iconWrapper,
%icon-wrapper {
  display: flex;
  width: $bpk-one-pixel-rem * 40;
  height: $bpk-one-pixel-rem * 40;
  background: $bpk-color-sky-blue-tint-03;
}

.iconGreenWrapper {
  @extend %icon-wrapper;

  background: $bpk-color-nara;
}
```

--------------------------------

### Publish Alpha/Beta Release of stylelint-config-skyscanner

Source: https://github.com/jronald01/stylelint-config-skyscanner/blob/main/docs/release.md

Automates the process of publishing alpha or beta versions of the package. It involves updating the package.json with a pre-release version and then publishing to the npm registry with a specific tag. Ensure you are on the correct branch or have merged to main before running these commands.

```shell
npm version <provide a custom version with the alpha or beta name e.g. 10.0.0-beta.1>
npm publish --registry=https://registry.npmjs.org/ --tag alpha|beta
```

--------------------------------

### Apache 2.0 License Header for New Files

Source: https://github.com/jronald01/stylelint-config-skyscanner/blob/main/CONTRIBUTING.md

This is the standard header required for new files being added to the project. It includes copyright information and the terms of the Apache 2.0 license. Ensure this header is present in all new files to comply with project guidelines.

```javascript
/**
 * Copyright 2020 Skyscanner Limited.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
```

--------------------------------

### SCSS Placeholder Selector Naming Conventions

Source: https://context7.com/jronald01/stylelint-config-skyscanner/llms.txt

Requires placeholder selectors to use kebab-case. This ensures consistency with other SCSS naming conventions and improves code clarity when using `@extend`.

```scss
/* Valid - kebab-case placeholder */
%button-reset {
  border: 0;
  background: transparent;
}

.custom-button {
  @extend %button-reset;
}

/* Invalid - camelCase placeholder */
%buttonReset {
  border: 0;
}
```

--------------------------------

### SCSS Rule and At-Rule Ordering

Source: https://context7.com/jronald01/stylelint-config-skyscanner/llms.txt

Specifies the correct order for declarations, mixins, and media queries within SCSS rulesets. This includes handling `@extend`, regular declarations, includes, and nested rules.

```scss
/* Valid - correct ordering of declarations, mixins, and media queries */
.button {
  /* 1. @extend */
  @extend %button-base;

  /* 2. Regular declarations */
  display: inline-block;
  padding: 0.5rem 1rem;
  background: blue;
  color: white;

  /* 3. Bodyless @include */
  @include clearfix;

  /* 4. @include with body */
  @include hover-focus {
    background: darkblue;
  }

  /* 5. @media rules */
  @media (min-width: 768px) {
    padding: 0.75rem 1.5rem;
  }

  /* 6. Nested selectors */
  &__icon {
    margin-right: 0.5rem;
  }

  &--large {
    padding: 1rem 2rem;
  }
}
```

--------------------------------

### No Manual Vendor Prefixes (SCSS)

Source: https://context7.com/jronald01/stylelint-config-skyscanner/llms.txt

Prohibits the manual addition of vendor prefixes. The configuration assumes the use of autoprefixer to handle vendor prefixing automatically.

```scss
/* Invalid - manual vendor prefixes not allowed */
.element {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}

.container {
  display: -webkit-flex;
  display: flex;
}

/* Valid - write standard CSS, autoprefixer handles it */
.element {
  transform: rotate(45deg);
}

.container {
  display: flex;
}

/* Invalid - vendor-prefixed properties */
.box {
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Valid - standard property only */
.box {
  appearance: none;
}
```

--------------------------------

### Configure stylelint with @skyscanner/stylelint-config-skyscanner

Source: https://github.com/jronald01/stylelint-config-skyscanner/blob/main/README.md

Configures a project's .stylelintrc file to extend the Skyscanner stylelint configuration. This enables all the predefined rules and best practices enforced by the package.

```json
{
  "extends": "@skyscanner/stylelint-config-skyscanner"
}
```

--------------------------------

### SCSS Variable, Function, and Mixin Naming Conventions

Source: https://context7.com/jronald01/stylelint-config-skyscanner/llms.txt

Enforces kebab-case for SCSS variables, functions, and mixins. Private mixins should be prefixed with an underscore. This helps maintain consistency and readability in SCSS codebases.

```scss
/* Valid - kebab-case variable names */
$primary-color: blue;
$button-padding: 1rem;
$card-border-radius: 4px;

/* Invalid - other naming styles */
$primaryColor: blue;
$PrimaryColor: blue;
$PRIMARY_COLOR: blue;

/* Valid - kebab-case function names */
@function calculate-spacing($base) {
  @return $base * 1.5;
}

/* Invalid - camelCase function */
@function calculateSpacing($base) {
  @return $base * 1.5;
}

/* Valid - kebab-case mixin names with BEM variants */
@mixin button-base {
  display: inline-block;
}

@mixin button__icon {
  margin-right: 0.5rem;
}

@mixin button--large {
  padding: 1rem 2rem;
}

/* Valid - private mixin with underscore prefix */
@mixin _internal-helper {
  position: relative;
}

/* Invalid - wrong naming patterns */
@mixin buttonBase {
  display: inline-block;
}
```

--------------------------------

### SCSS Import Statement Formatting

Source: https://context7.com/jronald01/stylelint-config-skyscanner/llms.txt

Governs the format of `@import` statements in SCSS. It requires omitting leading underscores and file extensions (like `.scss`) to simplify imports and avoid redundancy.

```scss
/* Valid - no leading underscore, no extension */
@import 'components/button';
@import 'utils/mixins';

/* Invalid - has leading underscore */
@import 'components/_button';

/* Invalid - has file extension */
@import 'components/button.scss';
```

--------------------------------

### Typography Mixin Enforcement (SCSS)

Source: https://context7.com/jronald01/stylelint-config-skyscanner/llms.txt

Shows how to use Backpack's typography mixins instead of directly setting font properties. This ensures consistency and adherence to design tokens.

```scss
/* Invalid - direct font properties discouraged */
.text {
  font-size: 16px;
  line-height: 1.5;
  font-weight: bold;
}

/* Valid - using Backpack typography mixin */
@import '@skyscanner/backpack-web/bpk-mixins';

.text {
  @include bpk-text;
}

.heading {
  @include bpk-heading-1;
}
```

--------------------------------

### SCSS Variable Syntax and Spacing

Source: https://context7.com/jronald01/stylelint-config-skyscanner/llms.txt

Defines rules for SCSS variable syntax, including proper spacing around colons and the use of interpolation for dynamic values. It also covers single-line and multi-line map assignments.

```scss
/* Valid - proper spacing around colons */
$primary-color: blue;
$spacing: 1rem;

/* Invalid - space before colon */
$primary-color : blue;

/* Invalid - no space after colon */
$spacing:1rem;

/* Valid - interpolation required for dynamic values */
.icon-#{$size} {
  width: #{$size}px;
}

/* Valid - single-line variable assignments */
$var: value;

/* Valid - multi-line map */
$breakpoints: (
  small: 320px,
  medium: 768px,
  large: 1024px
);
```

--------------------------------

### Selector Specificity Limits (SCSS)

Source: https://context7.com/jronald01/stylelint-config-skyscanner/llms.txt

Illustrates selector specificity rules, prohibiting ID selectors and limiting compound selectors to a maximum of two. Top-level type selectors are also disallowed.

```scss
/* Valid - no ID selectors (max: 0) */
.header {
  background: white;
}

/* Invalid - ID selectors not allowed */
#header {
  background: white;
}

/* Valid - max 2 compound selectors */
.card .card__header {
  padding: 1rem;
}

/* Invalid - exceeds 2 compound selectors */
.card .card__header .card__title .card__icon {
  color: blue;
}

/* Valid - no type selectors at top level */
.button-wrapper {
  button {
    cursor: pointer;
  }
}

/* Invalid - top-level type selector */
button {
  cursor: pointer;
}
```

--------------------------------

### SCSS Control Directive Formatting

Source: https://context7.com/jronald01/stylelint-config-skyscanner/llms.txt

Enforces consistent formatting for SCSS control directives like `@if` and `@else`. It mandates that there should be no empty line before an `@else` statement to maintain a compact structure.

```scss
/* Valid - @if/@else formatting */
@mixin responsive-size($size) {
  @if $size == small {
    width: 100%;
  } @else if $size == medium {
    width: 50%;
  } @else {
    width: 33.333%;
  }
}

/* Valid - no empty line before @else */
.element {
  @if $condition {
    color: red;
  }
  @else {
    color: blue;
  }
}

/* Invalid - empty line before @else */
.element {
  @if $condition {
    color: red;
  }

  @else {
    color: blue;
  }
}
```

--------------------------------

### BEM Class Naming Conventions (SCSS)

Source: https://context7.com/jronald01/stylelint-config-skyscanner/llms.txt

Demonstrates valid and invalid BEM (Block Element Modifier) naming patterns enforced by the configuration. It supports PascalCase blocks, kebab-case elements, and camelCase modifiers.

```scss
/* Valid BEM patterns */
.Button {
  padding: 1rem;
}

.Button__label {
  font-weight: bold;
}

.Button--primary {
  background: blue;
}

.Button__label--emphasized {
  color: red;
}

.search-form {
  display: flex;
}

.search-form__input {
  flex: 1;
}

.search-form--compact {
  margin: 0;
}

/* Invalid patterns - will cause lint errors */
.button_label {
  /* Underscore separator not allowed */
}

.ButtonlabelEmphasized {
  /* Missing BEM separators */
}

.BUTTON {
  /* All caps not allowed */
}
```

--------------------------------

### SCSS Unsupported Feature Detection (CSS Grid Warning)

Source: https://context7.com/jronald01/stylelint-config-skyscanner/llms.txt

Flags the use of CSS Grid properties, as they may have limited browser support. This serves as a warning to developers, prompting them to consider compatibility or provide fallbacks.

```scss
/* Warning - CSS Grid may have limited support */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* Ignored features - flexbox, css-nesting, css-when-else, css3-cursors */
.flex-container {
  display: flex; /* No warning */
}

.parent {
  & .child {
    color: blue; /* CSS nesting ignored */
  }
}

/* Partial support ignored */
.element {
  backdrop-filter: blur(10px); /* Partial support, no warning */
}
```

--------------------------------

### Color Value Enforcement (SCSS)

Source: https://context7.com/jronald01/stylelint-config-skyscanner/llms.txt

Discourages hardcoded color values, promoting the use of Backpack color variables. Special keywords like 'currentColor', 'transparent', and 'inherit' are permitted.

```scss
/* Invalid - hardcoded color values */
.button {
  background-color: #0770e3;
  color: #ffffff;
}

/* Valid - using Backpack color variables */
@import '@skyscanner/backpack-web/bpk-mixins';

.button {
  background-color: $bpk-color-sky-blue;
  color: $bpk-color-white;
}

/* Valid - special keywords allowed */
.icon {
  fill: currentColor;
  stroke: transparent;
  background: inherit;
}
```

--------------------------------

### Unit Restrictions (SCSS)

Source: https://context7.com/jronald01/stylelint-config-skyscanner/llms.txt

Enforces the use of 'rem' units for most properties, while allowing 'px' for specific cases like borders and border-radius. This promotes scalable and consistent sizing.

```scss
/* Invalid - px units not allowed for most properties */
.container {
  width: 300px;
  height: 200px;
}

/* Valid - rem units preferred */
.container {
  width: 18.75rem;
  height: 12.5rem;
}

/* Valid - px allowed for specific properties */
.box {
  margin-top: 1px;
  padding-top: 2px;
  border: 1px solid black;
  border-radius: 4px;
}
```

--------------------------------

### SCSS CSS Property Order

Source: https://context7.com/jronald01/stylelint-config-skyscanner/llms.txt

Defines a specific order for CSS properties within rulesets to enhance readability and maintainability. Properties are grouped logically (e.g., Positioning, Box Model, Typography).

```scss
/* Valid - properties ordered correctly */
.card {
  /* Positioning */
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;

  /* Display & Box Model */
  display: flex;
  width: 100%;
  height: auto;
  margin: 1rem;
  padding: 1rem;

  /* Flexbox */
  flex-direction: column;
  justify-content: center;
  align-items: center;

  /* Border & Background */
  border: 1px solid gray;
  border-radius: 4px;
  background-color: white;

  /* Typography */
  color: black;
  font-family: sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;

  /* Other */
  opacity: 1;
  overflow: hidden;
}
```

--------------------------------

### Stylelint Rule: selector-class-pattern

Source: https://github.com/jronald01/stylelint-config-skyscanner/blob/main/README.md

Defines the allowed pattern for CSS class names, enforcing the Block Element Modifier (BEM) style. This promotes maintainable and understandable CSS by clearly defining the relationship between styles and HTML elements, including blocks, elements, and modifiers.

```json
{
  "rules": {
    "selector-class-pattern": [
      "^([A-Z][a-zA-Z0-9]+)",
      "^([a-z][a-z0-9]*(-[a-z0-9]+)*)",
      "^([a-z]+([A-Z][a-z0-9]+)*)",
      "^(${pascalCase}|${kebabCase})(__(${camelCase}|${kebabCase}))?(--(${camelCase}|${kebabCase}))?$"
    ]
  }
}
```

--------------------------------

### SCSS String and Attribute Quote Usage

Source: https://context7.com/jronald01/stylelint-config-skyscanner/llms.txt

Specifies quote usage in SCSS, preferring single quotes for strings and attribute selectors. It also dictates when quotes are necessary, such as for font names containing spaces or for data URIs.

```scss
/* Valid - single quotes for strings */
@import 'components/button';

$font-family: 'Helvetica Neue', sans-serif;

.element::before {
  content: 'Hello';
}

/* Valid - quotes required for font names with spaces */
.text {
  font-family: 'Segoe UI', Arial, sans-serif;
}

/* Valid - no quotes for simple font names */
.text {
  font-family: Arial, sans-serif;
}

/* Valid - quotes in attribute selectors */
input[type='text'] {
  border: 1px solid gray;
}

/* Valid - data URIs require quotes */
.icon {
  background-image: url('data:image/svg+xml;base64,...');
}
```

--------------------------------

### Stylelint Rule: selector-max-compound-selectors

Source: https://github.com/jronald01/stylelint-config-skyscanner/blob/main/README.md

Limits the maximum number of compound selectors allowed in a single CSS rule. This rule discourages excessive nesting, which can make CSS harder to understand and maintain, favoring BEM and CSS modules for specificity.

```json
{
  "rules": {
    "selector-max-compound-selectors": 3
  }
}
```

--------------------------------

### Stylelint Rule: selector-max-type

Source: https://github.com/jronald01/stylelint-config-skyscanner/blob/main/README.md

Enforces a maximum limit on the number of type selectors allowed in a CSS rule. This rule is used to prevent the overuse of top-level type selectors, which can cause interference in component-based architectures.

```json
{
  "rules": {
    "selector-max-type": 1
  }
}
```

--------------------------------

### Stylelint Rule: declaration-no-important

Source: https://github.com/jronald01/stylelint-config-skyscanner/blob/main/README.md

Prohibits the use of the `!important` flag in CSS declarations. This rule prevents unexpected issues caused by breaking the CSS cascade and encourages refactoring code to avoid situations where `!important` might seem necessary.

```json
{
  "rules": {
    "declaration-no-important": true
  }
}
```

--------------------------------

### Stylelint Rule: selector-max-id

Source: https://github.com/jronald01/stylelint-config-skyscanner/blob/main/README.md

Enforces a maximum limit on the number of ID selectors allowed in a CSS rule. This rule prevents the use of IDs in CSS selectors due to their high specificity, which can lead to unexpected style interactions. IDs should be reserved for JavaScript bindings.

```json
{
  "rules": {
    "selector-max-id": 0
  }
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.