Skip to content

Conversation

@ling1726
Copy link
Contributor

@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
Contributor 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

export const stringify: postcss.Stringifier = root => {
const originalSource = root.raw(GRIFFEL_SRC_RAW);
if (originalSource) {
console.log(originalSource);
Copy link
Contributor 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
Contributor 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

layershifter
layershifter previously approved these changes Sep 8, 2023
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