stylelint-processor-glamorous

0.3.0 verified Fri May 01 auth: no javascript maintenance

A stylelint processor that extracts CSS-in-JS objects from glamorous and related libraries for linting with stylelint. Version 0.3.0 is the latest stable release, with irregular maintenance cadence. It supports glamorous component factories, CSS attributes, and annotated object literals (via @css comments). Unlike other CSS-in-JS linters that rely on template literal extraction, this processor parses JavaScript object syntax directly, though it ignores certain formatting rules that don't apply to inline styles. Requires stylelint and a stylelint config (e.g., stylelint-config-standard).

Common errors

error Unknown processor: stylelint-processor-glamorous ↓

cause The processor is not installed or stylelint cannot find it.

fix

Run npm install stylelint-processor-glamorous --save-dev.

error Cannot find module 'stylelint-processor-glamorous' ↓

cause Module not installed or missing in node_modules.

fix

Ensure the package is installed and the working directory is correct.

error syntax error: Unexpected token . ↓

cause The processor did not extract CSS from a glamorous call (e.g.,glamorous.div({...}) incorrectly formatted).

fix

Check that the glamorous call is a valid object literal with CSS properties.

error Expected indentation of 2 spaces but found 4 spaces ↓

cause The processor does not enforce indentation rules for inline styles.

fix

Ignore this rule; it is in the ignored rules list. Add to stylelint config if needed.

Warnings

gotcha Only supports glamorous (not styled-components, emotion, or other CSS-in-JS libraries). ↓

fix Use a different processor for other libraries, e.g., stylelint-processor-styled-components.

gotcha Certain formatting rules (e.g., indentation, number-leading-zero) are ignored because inline style objects are not CSS files. The plugin ignores a predefined list of rules. ↓

fix No action needed; these rules will be silently skipped. No warning is shown.

gotcha The @css annotation must be placed immediately before the opening brace of the object literal, with no comments or whitespace in between. ↓

fix Ensure annotation is directly before the brace, e.g., // @css { ... }

deprecated The glamorous library itself is deprecated in favor of emotion or styled-components. ↓

fix Consider migrating to emotion or styled-components and use their respective stylelint processors.

Install

npm install stylelint-processor-glamorous

yarn add stylelint-processor-glamorous

pnpm add stylelint-processor-glamorous

Imports

stylelint-processor-glamorous (processor)
wrong
```
import processor from 'stylelint-processor-glamorous';
```
correct
```
Install and configure via stylelint config: "processors": ["stylelint-processor-glamorous"]
```
This package is not used via JS imports; it is loaded by stylelint as a processor string in .stylelintrc.
stylelint (config)
```
import stylelint from 'stylelint'
```
stylelint itself is the main dependency for running linting.
stylelint-config-standard
```
Install and extend in .stylelintrc: "extends": "stylelint-config-standard"
```
Recommended config but optional; any stylelint config works.

Quickstart

Installation, configuration, and example of linting glamorous CSS-in-JS with stylelint.

// 1. Install dependencies
// yarn add stylelint stylelint-processor-glamorous stylelint-config-standard --dev

// 2. Create .stylelintrc
{
  "processors": ["stylelint-processor-glamorous"],
  "extends": "stylelint-config-standard"
}

// 3. Run stylelint on JavaScript files
// yarn stylelint 'src/**/*.js'

// 4. Example file that will be linted (e.g., src/Component.js)
import glamorous from 'glamorous';

const Button = glamorous.button({
  fontSize: 14,
  padding: '10px 20px',
  backgroundColor: 'blue',
  color: 'white'
});

// @css
const styles = {
  container: {
    display: 'flex',
    justifyContent: 'center'
  }
};

export { Button, styles };