callstack / callstack/linaria

[postcss-linaria] Allow for alias of `css` in config

Open
#1,423 6 comments 1 reaction 0 assignees View on GitHub
cat: modules aliasing 🔗 enhancement: proposal 💬 needs: triage 🏷
Dominant language
TypeScript
Stars
12.4k
Forks
413
PR merge metrics
No merged PRs in 30d

Description

## Describe the enhancement

Supply the ability to declare aliases for `css` and `styled` when running `stylelint` analysis for projects that export those methods from `linaria` with a different name.

## Motivation

I'm using atomic styles in a personal project. I recently [added `stylelint`](https://github.com/clintandrewhall/clintandrewhall.com/blob/a87a23f2397e8f4837a00dfc59dcd972beb22fee/.stylelintrc.json) with `property-disallowed-list` to flag uses of `margin` and `padding`, (to prompt using `margin-left` instead, etc) and it wasn't working... at all.

After a day of digging, it turned out the reason was I had abstracted the use of `linaria` out to a local import. And since I was needing to apply global styles for a component library, to differentiate `css` from `core` and `atomic`, I had done the following:

```ts
// lib/css
export { css as csa, styled } from '@linaria/atomic';
export { css } from '@linaria/core';
```
and
```
// some/component.styles.ts

import { csa } from '@lib/css';
...
csa`{
margin-left: 10px;
}`
```

Because `postcss-linaria` [looks specifically for `css` and `styled`](https://github.com/callstack/linaria/blob/master/packages/postcss-linaria/src/parse.ts#L129-L150) the string literals weren't being flagged.

## Possible implementations

Allow the ability to configure the syntax with aliases to each named method:

```ts
alias: {
css: 'csa',
styled: 'linariaStyled',
}
```

## Related Issues

None I could find.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.