[BOOKINGSG-9317][GZ] include linaria css in stylelint by ghazwan-gt · Pull Request #1157 · LifeSG/react-design-system

ghazwan-gt · 2026-05-06T12:46:35Z

Summary

Migrated Stylelint config from JSON to JS config and added Linaria PostCSS custom syntax with Linaria-related rule adjustments.
Expanded Stylelint execution scope to include *.styles.ts files across NPM scripts and lint-staged.
Updated VS Code Stylelint settings so IDE linting uses the new config.
Introduced new local ESLint rule to prevent negative interpolation usage.

…n js

…n in linaria css

qroll · 2026-05-07T01:26:39Z

+                ],
+                "no-invalid-double-slash-comments": true,
+
+                // Ignore Linaria placeholder values like pcss-lin0 and -pcss-lin1.


not sure how this works. where are these placeholder values introduced?

It is part of @linaria/postcss-linaria where they turn expression into those placeholders during parsing. Will take a look at the flow of having this custom sytax with stylelint

Okay after taking a look of how stylelint works and the linaria postcss custom syntax, basically this is how it works

File matching phase where we're looking for which files match the one where we want the syntax to be applied

Parse phase where stylelint loads the linaria's syntax and parse it into a postcss AST. And during this phase, linaria replaced all string interpolation into those placeholders

Validation phase where stylelint checks all the rules applied

Fix/Stringify phase where all the fix takes place (with --fix) and serialize the output back using the linaria's syntax stringify behavior, which replacing those placeholders back

qroll · 2026-05-07T01:29:37Z

+    overrides: [
+        {
+            /*
+            Taken from linaria's stylelint-config-standard-linaria package,


what's different from the npm linter plugin? https://github.com/callstack/linaria/blob/master/docs/LINTING.md#stylelint-14

It should be the same, but using the one from npm keeps throwing error even when the resulted config is the same

… when wrapped by comma or parenthesis

…nd vendor prefix

…nd generic family

…ore wrapping

ziggyzet

some attributes went missing, will check the rest as well

ziggyzet · 2026-05-07T08:06:13Z

 export const iconContainer = css`
    transform: rotate(180deg);
-    transition: transform ${Motion["duration-250"]}${Motion["ease-default"]};
+    transition: transform ${Motion["duration-250"]};


uhh why was this part deleted here? is this intentional?

This one already resolved through 142cdd8

ziggyzet · 2026-05-07T08:06:49Z

+
    max-height: var(${tokens.maxCollapsedHeight});
    overflow: hidden;
-    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);


this one is removed as well

Also resolved through 142cdd8

ziggyzet · 2026-05-07T08:10:06Z

-            var(${tokens.wrapper.offsetX}, 0px),
-            var(${tokens.wrapper.offsetY}, 0px)
-        );
+    transform: translate(50%, -25%) translate(var(${tokens.wrapper.offsetX}), var(${tokens.wrapper.offsetY}));


is this change to suggest us to reinitialize the variables instead of using fallbacks?

ziggyzet · 2026-05-07T08:10:26Z

 export const labelText = css`
    ${Font["heading-sm-semibold"]}
-    color: ${Colour["text"]};
-    word-wrap: break-word;


word-wrap is gone here

We have overflow-wrap: anywhere just below it which means the word-wrap is not being applied at all

qroll · 2026-05-08T02:05:47Z

+        "lint:css": "stylelint --config stylelint.config.mjs '**/*.css' '**/*.styles.ts'",
+        "lint:css:fix": "stylelint --config stylelint.config.mjs '**/*.css' '**/*.styles.ts' --fix",


do we need to specify --config explicitly and in the vscode settings? I assumed stylelint would pick up this filename by default

With cjs it needs the flag, but let me try with mjs

qroll · 2026-05-08T02:12:57Z

+            "files": "**/*.styles.ts",
+            "options": {
+                "printWidth": 120
+            }


what is this for?

This is to help us preventing the linaria's postcss which wrongly process interpolation when it is on multiple lines

ghazwanmuhammad added 2 commits May 6, 2026 19:41

[BOOKINGSG-9317][GZ] update stylelint config to include linaria css i…

1717971

…n js

[BOOKINGSG-9317][GZ] add eslint rule to prevent negative interpolatio…

5782846

…n in linaria css

qroll reviewed May 7, 2026

View reviewed changes

ghazwanmuhammad added 13 commits May 7, 2026 10:05

[BOOKINGSG-9317][GZ] change stylelint config to mjs

c7e9f7e

[BOOKINGSG-9317][GZ] separate local eslint rules to its own file

a1162e4

[BOOKINGSG-9317][GZ] ignore class selector on linaria styling file

687611d

[BOOKINGSG-9317][GZ] add stylelint rule to ignore linaria placeholder…

6e0342d

… when wrapped by comma or parenthesis

[BOOKINGSG-9317][GZ] add stylelint rule to ignore some pseudo class a…

41918aa

…nd vendor prefix

[BOOKINGSG-9317][GZ] add stylelint rule to ignore font family quote a…

ce02b4d

…nd generic family

[BOOKINGSG-9317][GZ] update prettier config to have longer length bef…

1274d91

…ore wrapping

[BOOKINGSG-9317][GZ] update eslint import path

eb7b903

[BOOKINGSG-9317][GZ] apply lint fix

41ad6f5

[BOOKINGSG-9317][GZ] ignore playwright report

e0b2fce

[BOOKINGSG-9317][GZ] resolve not linting due to double slash comment

fe72b32

[BOOKINGSG-9317][GZ] update stylelint config path in vscode setting

589be9d

[BOOKINGSG-9317][GZ] update removed tokens

ef9e588

ghazwan-gt marked this pull request as ready for review May 7, 2026 07:29

[BOOKINGSG-9317][GZ] update removed properties

142cdd8

ziggyzet reviewed May 7, 2026

View reviewed changes

qroll added the type: chore For technical improvements or refactoring. label May 7, 2026

qroll reviewed May 8, 2026

View reviewed changes

[BOOKINGSG-9317][GZ] disable stylelint for css properties ordering

820c14b

ghazwan-gt force-pushed the BOOKINGSG-9317/styelint-linaria branch from f0265d0 to 820c14b Compare May 8, 2026 02:22

[BOOKINGSG-9317][GZ] removing config flag

636aa7a

ghazwan-gt marked this pull request as draft May 8, 2026 03:50

		"lint:css": "stylelint --config stylelint.config.mjs '*/.css' '*/.styles.ts'",
		"lint:css:fix": "stylelint --config stylelint.config.mjs '*/.css' '*/.styles.ts' --fix",

Conversation

ghazwan-gt commented May 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ziggyzet left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

ghazwan-gt commented May 6, 2026 •

edited

Loading