Standardize code formatting and update monorepo configuration#15
Standardize code formatting and update monorepo configuration#15planetabhi merged 3 commits intomainfrom
Conversation
WalkthroughAdds Prettier and Stylelint configs, updates repository metadata and devDependencies across packages, applies widespread formatting and whitespace normalization, normalizes color/shadow value formats, adjusts placeholder selectors, and introduces new grid mixins/classes and related utilities. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Nitpick comments (2)
.stylelintrc.json (1)
5-5: Consider tightening precision for performance.
number-max-precision: 10is generous. Most design systems use 4-6 decimal places for CSS values. Higher precision rarely provides visual benefit and can increase file size.🔎 Suggested adjustment
- "number-max-precision": 10, + "number-max-precision": 6,packages/typography/src/_fonts.scss (1)
4-9: Use proper capitalization for system font names as per Modern Font Stacks convention.While CSS font-family names are case-insensitive per W3C standards, the lowercase casing in this change deviates from established best practices. Authoritative references like Modern Font Stacks use capitalized names:
Menlo,Consolas, and the handwritten font reference should beTSCu_Comic, nottscu_comic. While both will function identically in browsers, maintaining proper capitalization improves consistency with industry standards and readability.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (17)
bun.lockis excluded by!**/*.lockdist/index.cssis excluded by!**/dist/**dist/index.css.mapis excluded by!**/dist/**,!**/*.mappackages/colors/bun.lockis excluded by!**/*.lockpackages/colors/dist/index.cssis excluded by!**/dist/**packages/colors/dist/index.css.mapis excluded by!**/dist/**,!**/*.mappackages/effects/bun.lockis excluded by!**/*.lockpackages/effects/dist/index.css.mapis excluded by!**/dist/**,!**/*.mappackages/grid/bun.lockis excluded by!**/*.lockpackages/grid/dist/index.css.mapis excluded by!**/dist/**,!**/*.mappackages/reset/bun.lockis excluded by!**/*.lockpackages/reset/dist/index.css.mapis excluded by!**/dist/**,!**/*.mappackages/spacings/bun.lockis excluded by!**/*.lockpackages/spacings/dist/index.css.mapis excluded by!**/dist/**,!**/*.mappackages/typography/bun.lockis excluded by!**/*.lockpackages/typography/dist/index.cssis excluded by!**/dist/**packages/typography/dist/index.css.mapis excluded by!**/dist/**,!**/*.map
📒 Files selected for processing (45)
.prettierrc.stylelintrc.jsonREADME.mdpackage.jsonpackages/colors/README.mdpackages/colors/package.jsonpackages/colors/parcel.config.jspackages/colors/src/_palette.scsspackages/colors/src/_theme-dark--cold.scsspackages/colors/src/_theme-dark--warm.scsspackages/colors/src/_theme-dark.scsspackages/colors/src/_theme-light--cold.scsspackages/colors/src/_theme-light--warm.scsspackages/colors/src/_theme-light.scsspackages/colors/src/_theme-mixins.scsspackages/colors/src/_utilities.scsspackages/colors/src/index.scsspackages/effects/README.mdpackages/effects/package.jsonpackages/effects/src/_variables.scsspackages/effects/src/index.scsspackages/grid/README.mdpackages/grid/package.jsonpackages/grid/parcel.config.jspackages/grid/src/_grid.scsspackages/grid/src/index.scsspackages/reset/README.mdpackages/reset/package.jsonpackages/reset/parcel.config.jspackages/reset/src/_reset.scsspackages/reset/src/index.scsspackages/spacings/README.mdpackages/spacings/package.jsonpackages/spacings/src/_components.scsspackages/spacings/src/_utilities.scsspackages/spacings/src/_variables.scsspackages/typography/README.mdpackages/typography/package.jsonpackages/typography/parcel.config.jspackages/typography/src/_components.scsspackages/typography/src/_fonts.scsspackages/typography/src/_utilities.scsspackages/typography/src/_variables.scsspackages/typography/src/index.scsssrc/index.scss
🧰 Additional context used
🪛 LanguageTool
README.md
[style] ~48-~48: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...l-for layout-related styles. -u-for utilities. -is-andhas-` for sta...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
🪛 markdownlint-cli2 (0.18.1)
packages/grid/README.md
3-3: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
packages/spacings/README.md
7-7: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
packages/colors/README.md
11-11: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🔇 Additional comments (57)
packages/grid/parcel.config.js (1)
2-2: Formatting change for quote consistency.Quote style normalization aligns with the project's Prettier configuration (singleQuote: true). No functional changes.
packages/reset/parcel.config.js (1)
2-3: Formatting change for quote consistency.Quote style and trailing newline adjustments align with the project's Prettier configuration. No functional changes.
packages/reset/src/index.scss (1)
1-1: Trailing newline formatting standardization.EOF newline added for consistency with project formatting standards. No semantic impact.
packages/spacings/src/_variables.scss (1)
1-41: Formatting standardization with no functional changes.Spacing and comment formatting updated for consistency; all variable values and cascading behavior remain identical. No impact on generated CSS.
src/index.scss (1)
1-5: Trailing newline formatting standardization.EOF newline added for consistency with project formatting standards. All imports properly formed and functional.
packages/reset/README.md (1)
4-15: Documentation formatting and quote consistency.Blank line after heading improves readability. SCSS quote style normalized to align with Prettier configuration. No semantic or functional impact.
.prettierrc (1)
1-6: Prettier configuration with appropriate defaults.Configuration enforces consistent formatting (semicolons, single quotes, 2-space indentation, trailing commas). These settings align with the formatting changes observed throughout the PR and are standard best practices.
packages/effects/src/index.scss (1)
1-2: LGTM!The trailing newline addition aligns with the Prettier/Stylelint configuration introduced in this PR.
packages/colors/parcel.config.js (1)
1-3: LGTM!Quote style standardization to single quotes aligns with the Prettier configuration added in this PR.
packages/effects/README.md (1)
1-30: LGTM!README formatting improvements enhance readability, particularly the multi-line HTML
<link>tag formatting. No content changes.packages/typography/parcel.config.js (1)
1-3: LGTM!Consistent quote style standardization matching other
parcel.config.jsfiles in the monorepo.packages/typography/src/_components.scss (1)
30-41: LGTM!Whitespace formatting maintains consistency with other heading classes in this file.
packages/spacings/src/_components.scss (1)
1-41: LGTM!Multi-line formatting improves readability and aligns with the Stylelint configuration. The spacer component classes are consistent and well-structured.
packages/spacings/src/_utilities.scss (1)
6-31: LGTM! Formatting standardization applied.The expanded block formatting improves readability and aligns with the Prettier/Stylelint configuration added in this PR. The logic remains unchanged.
packages/typography/src/_utilities.scss (1)
49-64: LGTM! Font-family declarations formatted for readability.The multiline formatting of font-family stacks improves readability without changing functionality.
.stylelintrc.json (1)
1-20: LGTM! Stylelint configuration is appropriate.The configuration appropriately extends the standard SCSS config and adds reasonable customizations for a design system. The
input-placeholderexceptions accommodate legacy syntax that may exist in the codebase.packages/colors/README.md (2)
15-18: LGTM! Improved HTML formatting.The multiline CDN link improves readability and makes the attributes clearer.
34-40: Good documentation enhancement.Adding the dark theme variants to the documentation helps users discover all available themes.
packages/spacings/README.md (1)
15-18: LGTM! Consistent formatting with other READMEs.The multiline CDN link formatting is consistent with the colors package README and improves readability.
packages/reset/src/_reset.scss (2)
1-5: LGTM! Improved formatting consistency.The multiline selector format improves readability throughout the reset stylesheet.
27-30: LGTM! Good accessibility-conscious pattern.The ARIA role-based list selectors provide an opt-in mechanism for removing list styles while maintaining semantic meaning. This pattern is used by modern CSS resets and ensures that list semantics are preserved when visual styles are removed.
package.json (2)
16-18: LGTM!The workspaces configuration properly sets up the monorepo structure for managing multiple packages.
30-30: LGTM!Repository URLs have been consistently updated to reflect the new
create-new-ui/foundationsnamespace.Also applies to: 48-48, 50-50
packages/reset/package.json (2)
3-3: LGTM!The version bump (patch increment) and repository URL updates are appropriate for this rebranding change.
Also applies to: 22-22, 32-32, 34-34
36-38: DevDependency updates align with root package.These devDependency versions match the root package.json updates and will be verified there.
packages/colors/package.json (2)
3-3: LGTM!Version bump and URL updates are consistent with the rebranding effort.
Also applies to: 22-22, 35-35, 37-37
39-42: DevDependency updates include caniuse-lite.The devDependencies have been updated, including a new
caniuse-liteentry. These versions will be verified along with the root package dependencies.packages/grid/package.json (1)
3-3: LGTM!Version bump, URL updates, and devDependency updates are consistent with the other packages in this PR.
Also applies to: 22-22, 35-35, 37-37, 39-41
packages/typography/package.json (2)
22-22: LGTM!Repository URLs have been consistently updated.
Also applies to: 38-38, 40-40
42-44: DevDependency updates align with other packages.The devDependency versions match the updates across other packages and will be verified with the root package.
README.md (5)
22-22: LGTM!The comment has been simplified while maintaining clarity.
30-30: LGTM!Making the closing tag explicit improves HTML clarity in the documentation.
33-40: LGTM!The table formatting has been improved with proper alignment markers and consistent structure.
44-50: Static analysis false positive - ignore word repetition warning.The LanguageTool warning about repeated sentence beginnings is a false positive. In this bullet list describing naming conventions, the parallel structure using "for" is intentional and improves clarity and scannability.
58-169: LGTM!The design token tables have been reformatted with consistent structure, proper alignment, and improved readability. These formatting improvements enhance the documentation quality significantly.
packages/effects/src/_variables.scss (2)
30-30: LGTM!Removing the trailing
.0from decimal values (e.g.,1.0rem→1rem) is a clean improvement that doesn't affect functionality.Also applies to: 33-33, 39-40
3-8: The CSS Color Level 4 space-separatedrgb()syntax with slash-alpha notation is well-supported in all modern browsers and safe to use. RGB space is supported on all modern browsers, including Chrome, Firefox, Edge, and Safari. As of CSS Colors Module Level 4, rgb() supports alpha values separated by a slash (/) as demonstrated below. The only browser lacking support is Internet Explorer, which is deprecated. No fallback is needed for modern projects.packages/grid/src/index.scss (1)
1-1: LGTM!Adding a trailing newline is a formatting improvement that aligns with common coding conventions and the newly added Prettier configuration.
packages/colors/src/index.scss (1)
7-7: LGTM! EOF formatting improvement.The trailing newline addition aligns with POSIX text file standards and is consistent with the broader formatting standardization effort across the repository.
packages/colors/src/_theme-dark.scss (2)
19-19: LGTM! EOF formatting improvement.Trailing newline addition aligns with best practices.
4-4: Quote consistency confirmed across all theme selectors.The single-quote style is consistent across all
data-new-ui-themeattribute selectors in the codebase. Verified in:_theme-dark.scss,_theme-light.scss,_theme-dark--warm.scss,_theme-light--warm.scss,_theme-dark--cold.scss,_theme-light--cold.scss, and_utilities.scss. No double-quoted selectors remain.packages/typography/src/index.scss (1)
4-4: LGTM! EOF formatting improvement.The trailing newline addition is consistent with the formatting standardization across the repository.
packages/colors/src/_theme-light.scss (2)
4-5: LGTM! Quote style consistency.The single-quote style for the
data-new-ui-themeattribute selector is consistent with the formatting standardization. The verification script in_theme-dark.scsswill confirm this is applied uniformly.
20-20: LGTM! EOF formatting improvement.packages/typography/README.md (1)
4-4: LGTM! Documentation formatting improvements.The formatting changes improve readability and consistency in the markdown documentation. The multi-line HTML element formatting aligns with standard code formatting practices.
Also applies to: 15-18, 25-25, 30-30
packages/typography/src/_variables.scss (1)
59-59: LGTM! Formatting improvements.The blank line removal between CSS custom property groups and the trailing newline addition improve file consistency without affecting functionality.
packages/colors/src/_palette.scss (1)
4-101: Excellent improvement! Explicit hue units for OKLCH colors.Adding the
degunit to all hue values in the OKLCH color definitions improves:
- CSS specification compliance: Aligns with CSS Color Module Level 4 standards
- Clarity: Makes it explicit that hue values are in degrees
- Maintainability: Future-proofs against potential use of other angle units (rad, grad, turn)
This change enhances both correctness and readability of the color palette.
packages/colors/src/_theme-light--warm.scss (3)
4-4: LGTM! Quote style consistency.The single-quote style for the
data-new-ui-themeattribute selector aligns with the formatting standardization across all theme files.
9-10: LGTM! Numeric value normalization.Removing trailing zeros from decimal values (e.g.,
67.80→67.8,106.50→106.5,54.10→54.1) improves consistency and file size without affecting functionality.Also applies to: 12-12
20-20: LGTM! EOF formatting improvement.packages/colors/src/_theme-mixins.scss (1)
3-15: LGTM! Improved readability with multi-line parameters.The reformatting of the mixin parameters to a multi-line layout improves readability without any functional changes.
packages/colors/src/_theme-dark--warm.scss (1)
4-4: LGTM! Formatting standardization applied correctly.The changes normalize the data attribute selector quotes and OKLCH color values by removing trailing zeros, aligning with the project's new formatting standards. These are purely stylistic changes with no functional impact.
Also applies to: 9-12, 20-20
packages/colors/src/_theme-dark--cold.scss (1)
4-4: LGTM! Consistent formatting applied.Quote normalization and numeric value standardization (removing trailing zeros from OKLCH values) are applied consistently. No functional changes.
Also applies to: 9-13, 20-20
packages/colors/src/_theme-light--cold.scss (1)
4-4: LGTM! Formatting standardization matches other theme files.Consistent with other theme files, this applies quote normalization and numeric formatting without functional changes.
Also applies to: 9-13, 20-20
packages/colors/src/_utilities.scss (1)
1-219: LGTM! Consistent code formatting applied.The file has been reformatted from compact single-line rules to expanded multi-line blocks for better readability. All utility class mappings remain functionally identical—only the presentation has changed. This aligns with the project's new Prettier/Stylelint configuration.
packages/grid/src/_grid.scss (2)
1-2: LGTM! Improved formatting and modern Sass syntax.The import quote normalization, trailing comma addition, expanded formatting, and spacing improvements enhance code readability without functional changes.
Also applies to: 8-8, 22-22, 49-49, 62-122
221-222: LGTM! Correct usage ofmath.div()function.Using
math.div()instead of the/operator is the recommended approach in modern Sass, as the/operator for division has been deprecated.Also applies to: 227-227
planetabhi
changed the title
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
packages/grid/src/_grid.scss (1)
279-279: Browser support for media query range syntax requires verification.The modern range syntax
(width <= calc(...))is supported in Chrome 104+, Firefox 63+, and Safari 16.4+. Ensure your project's browser support requirements align with this syntax. If broader support is needed, consider reverting to traditionalmax-widthsyntax.Also applies to: 295-295
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
packages/grid/dist/index.cssis excluded by!**/dist/**packages/grid/dist/index.css.mapis excluded by!**/dist/**,!**/*.map
📒 Files selected for processing (2)
package.jsonpackages/grid/src/_grid.scss
🚧 Files skipped from review as they are similar to previous changes (1)
- package.json
| /// Breakpoint mixin using modern range syntax | ||
| /// @param {String} $breakpoint - Breakpoint name from $breakpoints map |
There was a problem hiding this comment.
Misleading comment: mixin uses traditional syntax, not range syntax.
The comment claims "modern range syntax," but the actual implementation at line 17 uses traditional @media (min-width: $value). Modern range syntax would be @media (width >= $value). Update the comment to accurately reflect the implementation.
🔎 Proposed fix
-/// Breakpoint mixin using modern range syntax
+/// Breakpoint mixin for min-width media queries
/// @param {String} $breakpoint - Breakpoint name from $breakpoints map📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| /// Breakpoint mixin using modern range syntax | |
| /// @param {String} $breakpoint - Breakpoint name from $breakpoints map | |
| /// Breakpoint mixin for min-width media queries | |
| /// @param {String} $breakpoint - Breakpoint name from $breakpoints map |
🤖 Prompt for AI Agents
In packages/grid/src/_grid.scss around lines 11 to 12, the comment incorrectly
states the mixin uses "modern range syntax" while the implementation uses
traditional media query syntax (e.g., @media (min-width: ...)); update the
comment to accurately describe the implementation by replacing "modern range
syntax" with "traditional min-width media query syntax" and optionally mention
it uses min-width based breakpoints so readers aren't misled.
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
packages/grid/src/_grid.scss (1)
11-12: Misleading comment remains uncorrected.The comment still claims "modern range syntax" while the implementation at line 17 uses traditional
@media (min-width: $value). This was flagged in a previous review and has not been addressed.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
packages/grid/dist/index.cssis excluded by!**/dist/**packages/grid/dist/index.css.mapis excluded by!**/dist/**,!**/*.map
📒 Files selected for processing (1)
packages/grid/src/_grid.scss
🔇 Additional comments (8)
packages/grid/src/_grid.scss (8)
23-30: LGTM!The
grid-gutter-resetmixin correctly uses logical properties to remove gutters from the grid system.
32-50: LGTM!The
column-sizesmixin correctly generates responsive column sizing and offset classes using modern Sass math functions and logical properties.
96-112: LGTM!Gap modifiers correctly implement three size variants with appropriate gutter resets to prevent double spacing.
163-167: LGTM!Focus-visible styles enhance accessibility with appropriate outline and offset values.
253-254: LGTM!Base column sizing is correctly generated using the
column-sizesmixin without a prefix.
315-339: Legacy gap fallback appears corrected.The fallback now includes all three gap variants with correct spacing calculations:
.grid--gap: margin and padding use$base / 2✓.grid--gap-sm: margin and padding use$base / 4✓.grid--gap-lg: margin and padding use$base✓This addresses the issues flagged in the previous review.
264-267: LGTM!Column focus-visible styles maintain consistency with grid focus styles and enhance accessibility.
189-261: LGTM!Column alignment, ordering, and flex utilities are correctly implemented using appropriate CSS properties and logical properties for internationalization support.
|
|
||
| .hidden-#{$breakpoint}-down { | ||
| @media (max-width: calc(#{$value} - 0.01rem)) { | ||
| @media (width <=calc(#{$value} - 0.01rem)) { |
There was a problem hiding this comment.
Missing space in media query range syntax.
The media query (width <=calc(...)) is missing a space between the operator and function. The correct syntax is (width <= calc(...)).
🔎 Proposed fix
- @media (width <=calc(#{$value} - 0.01rem)) {
+ @media (width <= calc(#{$value} - 0.01rem)) {📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| @media (width <=calc(#{$value} - 0.01rem)) { | |
| @media (width <= calc(#{$value} - 0.01rem)) { |
🤖 Prompt for AI Agents
In packages/grid/src/_grid.scss around line 279, the media query uses `(width
<=calc(#{$value} - 0.01rem))` which is missing a space between the operator and
the calc function; update the media query to insert a space so the condition
reads `(width <= calc(#{$value} - 0.01rem))`, preserving the interpolation and
spacing elsewhere.
| display: none !important; | ||
| @media (max-width: calc(#{$value} - 0.01rem)) { | ||
|
|
||
| @media (width <=calc(#{$value} - 0.01rem)) { |
There was a problem hiding this comment.
Missing space in media query range syntax.
Same issue as line 279: missing space between the operator and function. Should be (width <= calc(...)).
🔎 Proposed fix
- @media (width <=calc(#{$value} - 0.01rem)) {
+ @media (width <= calc(#{$value} - 0.01rem)) {📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| @media (width <=calc(#{$value} - 0.01rem)) { | |
| @media (width <= calc(#{$value} - 0.01rem)) { |
🤖 Prompt for AI Agents
In packages/grid/src/_grid.scss around line 295, the media query uses "(width
<=calc(#{$value} - 0.01rem))" with a missing space between the operator and the
function; update it to include a space so the condition reads "(width <=
calc(#{$value} - 0.01rem))" (same fix as line 279) to conform to proper media
query range syntax.
1 participant
Summary by CodeRabbit
New Features
Documentation
Chores
✏️ Tip: You can customize this high-level summary in your review settings.