Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Implement griffel stylelint config #437

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

ling1726
Copy link
Member

@ling1726 ling1726 commented Sep 8, 2023

Implements a stylelint config for griffel that uses the postcss syntax.

Also adds tests for stylelint integration.

Implements a stylelint config for griffel that uses the postcss syntax.

Also adds tests for stylelint integration.
@ling1726 ling1726 marked this pull request as ready for review September 8, 2023 15:28
@ling1726 ling1726 requested a review from a team as a code owner September 8, 2023 15:28
@github-actions
Copy link

github-actions bot commented Sep 8, 2023

📊 Bundle size report

🤖 This report was generated against 5fdc049120a7426864edc46b1b73c91cec0ba060


export const parse = (css: string | { toString(): string }, opts?: ParserOptions) => {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { from: filename = 'postcss-syntax.styles.ts', map, ...griffelPluginOptions } = opts ?? {};
const { from: filename = 'postcss-syntax.styles.ts', griffelPreset } = opts ?? {};
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

postcss passes some untyped properties here - it will fail the griffel config validator, so I've put it all the preset configuration in a separate property

@@ -4,7 +4,6 @@ import { GRIFFEL_SRC_RAW } from './constants';
export const stringify: postcss.Stringifier = root => {
const originalSource = root.raw(GRIFFEL_SRC_RAW);
if (originalSource) {
console.log(originalSource);
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oopsie

"column": 11,
"endColumn": 24,
"endLine": 5,
"line": 5,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The starting line is always correct, however the rest of the locations are wrong because most of the stylelint default rules calculate additional offsets internally for better reporting when linting real CSS files.

This doesn't work too well with the griffel postcss syntax since we lose the mapping to the entire style slot. Example:

https://github.com/stylelint/stylelint/blob/0b686f289ab436eac64aaa78eb1646d38a153294/lib/rules/selector-anb-no-unmatchable/index.js#L91C8-L100

That rule even uses a third party parser for the selector and doesn't really use postcss at all

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants