feat(vite): add vite support #70
Conversation
🦋 Changeset detectedLatest commit: cc8320c The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
WalkthroughA new package Changes
Sequence Diagram(s)sequenceDiagram
participant Vite as Vite (resolver & bundler)
participant Plugin as vite-plugin-lit-css
participant FS as File System
participant LitCSS as @pwrs/lit-css
Vite->>Plugin: resolveId(importer -> "styles.css")
Plugin->>Plugin: apply include/exclude filter
alt matches filter
Plugin-->>Vite: return virtual id "styles.css.lit-css.js"
Vite->>Plugin: load("styles.css.lit-css.js")
Plugin->>FS: read "styles.css"
FS-->>Plugin: CSS content
Plugin->>LitCSS: transform(css, options)
LitCSS-->>Plugin: JS module (tagged template)
Plugin-->>Vite: return transformed JS + source map
else not matched
Plugin-->>Vite: return undefined (no handling)
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 inconclusive)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (8)
🚧 Files skipped from review as they are similar to previous changes (6)
🧰 Additional context used🧠 Learnings (2)📓 Common learnings📚 Learning: 2025-11-03T06:29:44.714ZApplied to files:
🧬 Code graph analysis (2)packages/vite-plugin-lit-css/test/expected/scss/output.js (3)
packages/vite-plugin-lit-css/test/expected/postcss/output.js (4)
🔇 Additional comments (2)
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: 5
🧹 Nitpick comments (3)
packages/vite-plugin-lit-css/CHANGELOG.md (1)
3-3: Consider adding a release date to the version header.Following "Keep a Changelog" conventions, include the release date in the format
[1.0.0] - YYYY-MM-DDto provide clarity on when this version was released. This is particularly useful for tracking release timelines and is a common practice across many open-source projects.Example:
-## 1.0.0 +## [1.0.0] - 2025-11-03packages/vite-plugin-lit-css/README.md (1)
1-170: Excellent documentation!The README is comprehensive and well-structured, covering installation, configuration, usage examples for multiple scenarios (Lit, FAST, Sass, PostCSS), and includes helpful notes about HMR and how the plugin works.
If you'd like to address the style suggestion from the linter, consider this minor change:
-This plugin works seamlessly with Vite's HMR. When you modify a CSS file, Vite will automatically reload the module and update your component styles without a full page refresh. +This plugin works seamlessly with Vite's HMR. When you modify a CSS file, Vite will automatically reload the module and update your component styles without a full-page refresh.packages/vite-plugin-lit-css/vite-plugin-lit-css.ts (1)
41-70: Robust resolveId implementation with good delegation pattern.The implementation correctly:
- Performs early returns for non-applicable cases
- Delegates to other plugins via
this.resolvewithskipSelf- Uses the filter on the resolved path (not the raw import)
- Returns a virtual module ID with the
\0prefix conventionThe static analysis warning about string concatenation on line 66 is a false positive—this is the standard Rollup convention for virtual modules.
You may optionally address the linter's formatting suggestions:
const resolution = await this.resolve(source, importer, { - skipSelf: true, // Don't call ourselves recursively + skipSelf: true, // Don't call ourselves recursively ...options, });if (!source.endsWith('.css') && !source.endsWith('.scss') && !source.endsWith('.sass') && - !source.endsWith('.less') && !source.endsWith('.styl')) { + !source.endsWith('.less') && !source.endsWith('.styl')) return null; - }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
package-lock.jsonis excluded by!**/package-lock.jsonpackages/vite-plugin-lit-css/integration-test/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (20)
README.md(1 hunks)packages/vite-plugin-lit-css/CHANGELOG.md(1 hunks)packages/vite-plugin-lit-css/README.md(1 hunks)packages/vite-plugin-lit-css/integration-test/README.md(1 hunks)packages/vite-plugin-lit-css/integration-test/index.html(1 hunks)packages/vite-plugin-lit-css/integration-test/package.json(1 hunks)packages/vite-plugin-lit-css/integration-test/src/my-element.js(1 hunks)packages/vite-plugin-lit-css/integration-test/src/styles.css(1 hunks)packages/vite-plugin-lit-css/integration-test/vite.config.js(1 hunks)packages/vite-plugin-lit-css/package.json(1 hunks)packages/vite-plugin-lit-css/test/expected/bare/output.js(1 hunks)packages/vite-plugin-lit-css/test/expected/basic/boop.js(1 hunks)packages/vite-plugin-lit-css/test/expected/basic/fast.js(1 hunks)packages/vite-plugin-lit-css/test/expected/basic/output.js(1 hunks)packages/vite-plugin-lit-css/test/expected/basic/uglified.js(1 hunks)packages/vite-plugin-lit-css/test/expected/postcss/output.js(1 hunks)packages/vite-plugin-lit-css/test/expected/scss/output.js(1 hunks)packages/vite-plugin-lit-css/test/expected/special-chars/output.js(1 hunks)packages/vite-plugin-lit-css/test/vite-plugin-lit-css.test.js(1 hunks)packages/vite-plugin-lit-css/vite-plugin-lit-css.ts(1 hunks)
🧰 Additional context used
🪛 GitHub Actions: Verify PR
packages/vite-plugin-lit-css/test/vite-plugin-lit-css.test.js
[warning] 2-2: eslint: 'aliasPlugin' is defined but never used. (no-unused-vars). Command: eslint .
[error] 55-55: eslint: Unnecessary { after 'if' condition. (curly). Command: eslint .
packages/vite-plugin-lit-css/integration-test/src/my-element.js
[error] 5-5: eslint: Parsing error: Unexpected token =. Command: eslint .
🪛 GitHub Check: verify
packages/vite-plugin-lit-css/test/vite-plugin-lit-css.test.js
[failure] 61-61:
Unnecessary { after 'if' condition
[failure] 55-55:
Unnecessary { after 'if' condition
[warning] 2-2:
'aliasPlugin' is defined but never used
packages/vite-plugin-lit-css/vite-plugin-lit-css.ts
[warning] 86-86:
Unexpected any. Specify a different type
[failure] 66-66:
Unexpected string concatenation
[failure] 55-55:
Multiple spaces found before '// Don't call ...'
[failure] 48-48:
Unnecessary { after 'if' condition
🪛 LanguageTool
packages/vite-plugin-lit-css/README.md
[uncategorized] ~155-~155: If this is a compound adjective that modifies the following noun, use a hyphen.
Context: ... update your component styles without a full page refresh. ## How It Works This plugin ...
(EN_COMPOUND_ADJECTIVE_INTERNAL)
🔇 Additional comments (22)
README.md (1)
30-30: LGTM!The addition of Vite to the supported tools list is consistent with the existing format and correctly links to the new package directory.
packages/vite-plugin-lit-css/test/expected/basic/uglified.js (1)
1-5: LGTM!This test fixture correctly demonstrates the expected output for minified CSS transformation, with proper dual export pattern (default and named).
packages/vite-plugin-lit-css/test/expected/basic/fast.js (1)
1-8: LGTM!This test fixture correctly demonstrates the expected output for FAST element integration, importing from the correct package and using the standard export pattern.
packages/vite-plugin-lit-css/test/expected/basic/boop.js (1)
1-8: LGTM!This test fixture correctly validates the custom specifier and tag functionality, demonstrating that the plugin can work with arbitrary template tag functions beyond just
cssfromlit.packages/vite-plugin-lit-css/package.json (1)
1-40: LGTM!The package manifest is well-configured with:
- Proper dual package support (ESM + CJS) via the
exportsfield- Appropriate peer dependency range covering Vite 4.x, 5.x, and 6.x
- Correct dependencies for the plugin functionality
- Properly scoped
filesarray for publicationpackages/vite-plugin-lit-css/vite-plugin-lit-css.ts (3)
8-18: LGTM!The
LitCSSOptionsinterface is well-defined with clear JSDoc comments and appropriate type constraints.
26-40: LGTM!The plugin initialization logic correctly destructures options with sensible defaults and creates a Rollup filter for file matching. The
enforce: 'pre'configuration appropriately prioritizes this plugin before Vite's built-in CSS handling.
93-93: LGTM!The default export provides convenient import syntax while the named export remains available for explicit imports.
packages/vite-plugin-lit-css/integration-test/vite.config.js (1)
1-18: LGTM!The integration test configuration is well-structured:
- Correctly imports the plugin from the parent directory
- Uses library build mode appropriate for testing a component
- Properly externalizes
litto avoid bundling peer dependenciespackages/vite-plugin-lit-css/integration-test/src/styles.css (1)
1-9: LGTM! Clean test fixture.The CSS is simple and appropriate for integration testing. The hotpink color provides clear visual verification that the plugin is working correctly.
packages/vite-plugin-lit-css/test/expected/scss/output.js (1)
1-5: LGTM! Consistent test fixture pattern.The expected output follows the standard pattern used across all test fixtures in this PR.
packages/vite-plugin-lit-css/test/expected/basic/output.js (1)
1-8: LGTM! Consistent test fixture pattern.The expected output follows the standard pattern used across all test fixtures in this PR.
packages/vite-plugin-lit-css/test/expected/bare/output.js (1)
1-8: LGTM! Consistent test fixture pattern.The expected output follows the standard pattern used across all test fixtures in this PR.
packages/vite-plugin-lit-css/integration-test/index.html (1)
1-16: LGTM! Well-structured integration test page.The HTML provides a clear test harness with visual verification instructions. The structure is appropriate for Vite dev server testing.
packages/vite-plugin-lit-css/test/vite-plugin-lit-css.test.js (1)
15-18: LGTM! Good type-checking practice.The type check for the plugin configuration is a nice touch to ensure TypeScript types are correct.
packages/vite-plugin-lit-css/test/expected/postcss/output.js (1)
1-5: LGTM! Consistent test fixture pattern.The expected output follows the standard pattern used across all test fixtures in this PR. The concatenated CSS rules appropriately demonstrate PostCSS processing.
packages/vite-plugin-lit-css/integration-test/README.md (1)
1-40: LGTM! Excellent documentation.The README provides comprehensive guidance on the integration test purpose, usage, and verification steps. The rationale for having integration tests alongside unit tests is particularly valuable.
packages/vite-plugin-lit-css/integration-test/src/my-element.js (3)
7-12: LGTM!The render method is correctly implemented and provides clear visual feedback for integration testing.
15-15: LGTM!The custom element registration follows web components best practices with a properly formatted kebab-case name.
1-2: Verify the CSS import transformation.The component imports
stylesfrom a CSS file without importingcssfrom 'lit'. The plugin should transform the CSS import to return a properly wrapped Lit css template literal. Ensure the plugin handles this transformation correctly in both dev and build modes.Run the following script to verify the plugin transformation:
packages/vite-plugin-lit-css/integration-test/package.json (1)
1-15: LGTM!The package manifest is well-structured for an integration test with appropriate dependencies and scripts. The version ranges for lit (^3.0.0) and vite (^5.0.0) are current, and marking the package as private is correct.
packages/vite-plugin-lit-css/test/expected/special-chars/output.js (1)
1-11: LGTM!This test fixture correctly demonstrates the expected plugin output for special character handling (including the emoji in the comment) and validates the dual export pattern that supports both default and named imports.
Summary by CodeRabbit
New Features
Documentation
Tests
Chores