YPE-1009: refactor(ui): add postcss to compile css and remove layers #95
Conversation
|
|
Codex usage limits have been reached for code reviews. Please check with the admins of this repo to increase the limits by adding credits. |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
Greptile Overview
Greptile Summary
This PR refactors the CSS build process to use PostCSS instead of the Tailwind CLI with a post-processing script, modernizing the build pipeline and consolidating CSS transformations into a single tool.
Key Changes:
- Replaced the two-step build process (Tailwind CLI + custom Node.js script) with a unified PostCSS pipeline
- Added PostCSS dependencies:
@tailwindcss/postcss,postcss-cli,autoprefixer, andcssnano - Created
postcss.config.jswith a custom plugin to remove@layerwrappers (replaces the deletedstrip-layers.jsscript) - Updated
build:cssscript to usepostcsscommand instead oftailwindcssCLI - The new pipeline processes CSS in order: Tailwind → autoprefixer → layer removal → minification
Benefits:
- More maintainable: uses standard PostCSS plugin architecture instead of custom string parsing
- Better integration: all CSS transformations happen in one pipeline
- Adds autoprefixer support for better browser compatibility
Confidence Score: 4/5
- This PR is safe to merge with minor cleanup recommended
- The refactoring is well-structured and achieves the stated goal of modernizing the CSS build process. The PostCSS approach is more maintainable than custom string parsing. One minor style issue: a debug console.log statement should be removed before production
packages/ui/postcss.config.js- remove console.log statement on line 10
Important Files Changed
File Analysis
| Filename | Score | Overview |
|---|---|---|
| packages/ui/package.json | 5/5 | Added PostCSS dependencies (@tailwindcss/postcss, postcss-cli, autoprefixer, cssnano) and updated build script to use PostCSS instead of Tailwind CLI |
| packages/ui/postcss.config.js | 4/5 | New PostCSS configuration with Tailwind, autoprefixer, custom layer removal plugin, and cssnano. Contains minor console.log that should be removed |
| packages/ui/scripts/strip-layers.js | 5/5 | Removed custom Node.js script that manually parsed and stripped @layer wrappers - functionality replaced by PostCSS plugin |
Sequence Diagram
sequenceDiagram
participant Dev as Developer
participant Build as Build Script
participant PostCSS as PostCSS CLI
participant TW as @tailwindcss/postcss
participant AP as Autoprefixer
participant RL as removeLayersPlugin
participant CN as cssnano
participant Out as dist/tailwind.css
Note over Dev,Out: Old Build Process (Before)
Dev->>Build: pnpm build:css
Build->>TW: tailwindcss --minify
TW->>Out: Generate CSS with @layer wrappers
Build->>Out: node scripts/strip-layers.js
Note over Out: Manual string parsing to remove @layers
Note over Dev,Out: New Build Process (After)
Dev->>Build: pnpm build:css
Build->>PostCSS: postcss src/styles/global.css
PostCSS->>TW: Process Tailwind directives
TW-->>PostCSS: CSS with @layer wrappers
PostCSS->>AP: Add vendor prefixes
AP-->>PostCSS: Prefixed CSS
PostCSS->>RL: Remove @layer wrappers
RL-->>PostCSS: Unwrapped CSS
PostCSS->>CN: Minify CSS
CN-->>PostCSS: Minified CSS
PostCSS->>Out: Write final CSS
| AtRule: { | ||
| layer: (atRule) => { | ||
| // Unwrap the contents and remove the @layer wrapper | ||
| console.log('Found @layer:', atRule.params); |
There was a problem hiding this comment.
console.log statement left in production code
| console.log('Found @layer:', atRule.params); | |
| // Unwrap the contents and remove the @layer wrapper |
cameronapak
left a comment
cameronapak
left a comment
There was a problem hiding this comment.
Hey, before I approve, have you read these methods?:
cameronapak
changed the title
No description provided.