Skip to content

Support css, scss, and less#137

Merged
ony3000 merged 11 commits intomasterfrom
support-css
Mar 15, 2026
Merged

Support css, scss, and less#137
ony3000 merged 11 commits intomasterfrom
support-css

Conversation

@ony3000
Copy link
Copy Markdown
Owner

@ony3000 ony3000 commented Mar 15, 2026

This PR closes #136.

Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds first-class Prettier parser support for CSS-family languages so the plugin can wrap class lists inside Tailwind @apply directives in css/scss/less, addressing issue #136.

Changes:

  • Register css, scss, and less parsers using Prettier’s postcss plugin parsers.
  • Route css/scss/less AST processing through the CSS @apply node finder in the core processor.
  • Add extensive Vitest snapshot coverage for @apply wrapping across CSS/SCSS/Less (selectors, pseudo-classes/elements, nesting, ignore comments, etc.).

Reviewed changes

Copilot reviewed 158 out of 159 changed files in this pull request and generated no comments.

Show a summary per file
File Description
src/parsers.ts Adds css/scss/less parser entries backed by prettier/plugins/postcss parsers.
src/core-parts/processor.ts Enables CSS-family parsers to use the CSS AST finder for @apply.
global.d.ts Extends supported parser name union with css/scss/less.
tests/scss/selector/relative.test.ts SCSS selector snapshot test harness (relative ending).
tests/scss/selector/absolute.test.ts SCSS selector snapshot test harness (absolute ending).
tests/scss/selector/fixtures.ts SCSS selector fixtures using @apply in various selector forms.
tests/scss/selector/snapshots/relative.test.ts.snap SCSS selector expected output snapshots (relative).
tests/scss/selector/snapshots/absolute.test.ts.snap SCSS selector expected output snapshots (absolute).
tests/scss/pseudo-element/relative.test.ts SCSS pseudo-element snapshot test harness (relative).
tests/scss/pseudo-element/absolute.test.ts SCSS pseudo-element snapshot test harness (absolute).
tests/scss/pseudo-element/fixtures.ts SCSS pseudo-element fixtures with @apply.
tests/scss/pseudo-element/snapshots/relative.test.ts.snap SCSS pseudo-element snapshots (relative).
tests/scss/pseudo-element/snapshots/absolute.test.ts.snap SCSS pseudo-element snapshots (absolute).
tests/scss/pseudo-class/relative.test.ts SCSS pseudo-class snapshot test harness (relative).
tests/scss/pseudo-class/absolute.test.ts SCSS pseudo-class snapshot test harness (absolute).
tests/scss/pseudo-class/fixtures.ts SCSS pseudo-class fixtures with @apply.
tests/scss/pseudo-class/snapshots/relative.test.ts.snap SCSS pseudo-class snapshots (relative).
tests/scss/pseudo-class/snapshots/absolute.test.ts.snap SCSS pseudo-class snapshots (absolute).
tests/scss/prettier-ignore/relative.test.ts SCSS prettier-ignore snapshot test harness (relative).
tests/scss/prettier-ignore/absolute.test.ts SCSS prettier-ignore snapshot test harness (absolute).
tests/scss/prettier-ignore/fixtures.ts SCSS fixtures validating prettier-ignore behavior around @apply.
tests/scss/prettier-ignore/snapshots/relative.test.ts.snap SCSS prettier-ignore snapshots (relative).
tests/scss/prettier-ignore/snapshots/absolute.test.ts.snap SCSS prettier-ignore snapshots (absolute).
tests/scss/others/relative.test.ts SCSS “other options” snapshot test harness (relative).
tests/scss/others/absolute.test.ts SCSS “other options” snapshot test harness (absolute).
tests/scss/others/fixtures.ts SCSS fixtures for tabWidth/useTabs/endOfLine with @apply.
tests/scss/others/snapshots/relative.test.ts.snap SCSS “others” snapshots (relative).
tests/scss/others/snapshots/absolute.test.ts.snap SCSS “others” snapshots (absolute).
tests/scss/nesting/relative.test.ts SCSS nesting snapshot test harness (relative).
tests/scss/nesting/absolute.test.ts SCSS nesting snapshot test harness (absolute).
tests/scss/nesting/fixtures.ts SCSS nesting fixtures with @apply.
tests/scss/nesting/snapshots/relative.test.ts.snap SCSS nesting snapshots (relative).
tests/scss/nesting/snapshots/absolute.test.ts.snap SCSS nesting snapshots (absolute).
tests/scss/mixin/relative.test.ts SCSS mixin snapshot test harness (relative).
tests/scss/mixin/absolute.test.ts SCSS mixin snapshot test harness (absolute).
tests/scss/mixin/fixtures.ts SCSS mixin fixtures with @apply.
tests/scss/mixin/snapshots/relative.test.ts.snap SCSS mixin snapshots (relative).
tests/scss/mixin/snapshots/absolute.test.ts.snap SCSS mixin snapshots (absolute).
tests/scss/inheritance/relative.test.ts SCSS inheritance snapshot test harness (relative).
tests/scss/inheritance/absolute.test.ts SCSS inheritance snapshot test harness (absolute).
tests/scss/inheritance/fixtures.ts SCSS inheritance fixtures with @apply.
tests/scss/inheritance/snapshots/relative.test.ts.snap SCSS inheritance snapshots (relative).
tests/scss/inheritance/snapshots/absolute.test.ts.snap SCSS inheritance snapshots (absolute).
tests/scss/combinator/relative.test.ts SCSS combinator snapshot test harness (relative).
tests/scss/combinator/absolute.test.ts SCSS combinator snapshot test harness (absolute).
tests/scss/combinator/fixtures.ts SCSS combinator fixtures with @apply.
tests/scss/combinator/snapshots/relative.test.ts.snap SCSS combinator snapshots (relative).
tests/scss/combinator/snapshots/absolute.test.ts.snap SCSS combinator snapshots (absolute).
tests/scss/at-rule/relative.test.ts SCSS at-rule snapshot test harness (relative).
tests/scss/at-rule/absolute.test.ts SCSS at-rule snapshot test harness (absolute).
tests/less/variable/relative.test.ts Less variable snapshot test harness (relative).
tests/less/variable/absolute.test.ts Less variable snapshot test harness (absolute).
tests/less/variable/fixtures.ts Less variable interpolation fixtures with @apply.
tests/less/variable/snapshots/relative.test.ts.snap Less variable snapshots (relative).
tests/less/variable/snapshots/absolute.test.ts.snap Less variable snapshots (absolute).
tests/less/selector/relative.test.ts Less selector snapshot test harness (relative).
tests/less/selector/absolute.test.ts Less selector snapshot test harness (absolute).
tests/less/selector/fixtures.ts Less selector fixtures with @apply.
tests/less/selector/snapshots/relative.test.ts.snap Less selector snapshots (relative).
tests/less/selector/snapshots/absolute.test.ts.snap Less selector snapshots (absolute).
tests/less/pseudo-element/relative.test.ts Less pseudo-element snapshot test harness (relative).
tests/less/pseudo-element/absolute.test.ts Less pseudo-element snapshot test harness (absolute).
tests/less/pseudo-element/fixtures.ts Less pseudo-element fixtures with @apply.
tests/less/pseudo-element/snapshots/relative.test.ts.snap Less pseudo-element snapshots (relative).
tests/less/pseudo-element/snapshots/absolute.test.ts.snap Less pseudo-element snapshots (absolute).
tests/less/pseudo-class/relative.test.ts Less pseudo-class snapshot test harness (relative).
tests/less/pseudo-class/absolute.test.ts Less pseudo-class snapshot test harness (absolute).
tests/less/pseudo-class/fixtures.ts Less pseudo-class fixtures with @apply.
tests/less/pseudo-class/snapshots/relative.test.ts.snap Less pseudo-class snapshots (relative).
tests/less/pseudo-class/snapshots/absolute.test.ts.snap Less pseudo-class snapshots (absolute).
tests/less/prettier-ignore/relative.test.ts Less prettier-ignore snapshot test harness (relative).
tests/less/prettier-ignore/absolute.test.ts Less prettier-ignore snapshot test harness (absolute).
tests/less/prettier-ignore/fixtures.ts Less fixtures validating prettier-ignore behavior around @apply.
tests/less/prettier-ignore/snapshots/relative.test.ts.snap Less prettier-ignore snapshots (relative).
tests/less/prettier-ignore/snapshots/absolute.test.ts.snap Less prettier-ignore snapshots (absolute).
tests/less/parent-selector/relative.test.ts Less parent selector snapshot test harness (relative).
tests/less/parent-selector/absolute.test.ts Less parent selector snapshot test harness (absolute).
tests/less/parent-selector/fixtures.ts Less parent selector fixtures with @apply.
tests/less/parent-selector/snapshots/relative.test.ts.snap Less parent selector snapshots (relative).
tests/less/parent-selector/snapshots/absolute.test.ts.snap Less parent selector snapshots (absolute).
tests/less/others/relative.test.ts Less “other options” snapshot test harness (relative).
tests/less/others/absolute.test.ts Less “other options” snapshot test harness (absolute).
tests/less/others/fixtures.ts Less fixtures for tabWidth/useTabs/endOfLine with @apply.
tests/less/others/snapshots/relative.test.ts.snap Less “others” snapshots (relative).
tests/less/others/snapshots/absolute.test.ts.snap Less “others” snapshots (absolute).
tests/less/mixin/relative.test.ts Less mixin snapshot test harness (relative).
tests/less/mixin/absolute.test.ts Less mixin snapshot test harness (absolute).
tests/less/mixin/fixtures.ts Less mixin fixtures with @apply.
tests/less/mixin/snapshots/relative.test.ts.snap Less mixin snapshots (relative).
tests/less/mixin/snapshots/absolute.test.ts.snap Less mixin snapshots (absolute).
tests/less/map/relative.test.ts Less map snapshot test harness (relative).
tests/less/map/absolute.test.ts Less map snapshot test harness (absolute).
tests/less/map/fixtures.ts Less map fixtures with @apply and media queries.
tests/less/map/snapshots/relative.test.ts.snap Less map snapshots (relative).
tests/less/map/snapshots/absolute.test.ts.snap Less map snapshots (absolute).
tests/less/extend/relative.test.ts Less extend snapshot test harness (relative).
tests/less/extend/absolute.test.ts Less extend snapshot test harness (absolute).
tests/less/extend/fixtures.ts Less extend fixtures with @apply across extend scenarios.
tests/less/extend/snapshots/relative.test.ts.snap Less extend snapshots (relative).
tests/less/extend/snapshots/absolute.test.ts.snap Less extend snapshots (absolute).
tests/less/detached-ruleset/relative.test.ts Less detached ruleset snapshot test harness (relative).
tests/less/detached-ruleset/absolute.test.ts Less detached ruleset snapshot test harness (absolute).
tests/less/detached-ruleset/fixtures.ts Less detached ruleset fixtures with @apply.
tests/less/detached-ruleset/snapshots/relative.test.ts.snap Less detached ruleset snapshots (relative).
tests/less/detached-ruleset/snapshots/absolute.test.ts.snap Less detached ruleset snapshots (absolute).
tests/less/css-guard/relative.test.ts Less CSS guard snapshot test harness (relative).
tests/less/css-guard/absolute.test.ts Less CSS guard snapshot test harness (absolute).
tests/less/css-guard/fixtures.ts Less CSS guard fixtures with @apply.
tests/less/css-guard/snapshots/relative.test.ts.snap Less CSS guard snapshots (relative).
tests/less/css-guard/snapshots/absolute.test.ts.snap Less CSS guard snapshots (absolute).
tests/less/combinator/relative.test.ts Less combinator snapshot test harness (relative).
tests/less/combinator/absolute.test.ts Less combinator snapshot test harness (absolute).
tests/less/combinator/fixtures.ts Less combinator fixtures with @apply.
tests/less/combinator/snapshots/relative.test.ts.snap Less combinator snapshots (relative).
tests/less/combinator/snapshots/absolute.test.ts.snap Less combinator snapshots (absolute).
tests/less/at-rule/relative.test.ts Less at-rule snapshot test harness (relative).
tests/less/at-rule/absolute.test.ts Less at-rule snapshot test harness (absolute).
tests/css/selector/relative.test.ts CSS selector snapshot test harness (relative).
tests/css/selector/absolute.test.ts CSS selector snapshot test harness (absolute).
tests/css/selector/fixtures.ts CSS selector fixtures using @apply in various selector forms.
tests/css/selector/snapshots/relative.test.ts.snap CSS selector snapshots (relative).
tests/css/selector/snapshots/absolute.test.ts.snap CSS selector snapshots (absolute).
tests/css/pseudo-element/relative.test.ts CSS pseudo-element snapshot test harness (relative).
tests/css/pseudo-element/absolute.test.ts CSS pseudo-element snapshot test harness (absolute).
tests/css/pseudo-element/fixtures.ts CSS pseudo-element fixtures with @apply.
tests/css/pseudo-element/snapshots/relative.test.ts.snap CSS pseudo-element snapshots (relative).
tests/css/pseudo-element/snapshots/absolute.test.ts.snap CSS pseudo-element snapshots (absolute).
tests/css/pseudo-class/relative.test.ts CSS pseudo-class snapshot test harness (relative).
tests/css/pseudo-class/absolute.test.ts CSS pseudo-class snapshot test harness (absolute).
tests/css/pseudo-class/fixtures.ts CSS pseudo-class fixtures with @apply.
tests/css/pseudo-class/snapshots/relative.test.ts.snap CSS pseudo-class snapshots (relative).
tests/css/pseudo-class/snapshots/absolute.test.ts.snap CSS pseudo-class snapshots (absolute).
tests/css/prettier-ignore/relative.test.ts CSS prettier-ignore snapshot test harness (relative).
tests/css/prettier-ignore/absolute.test.ts CSS prettier-ignore snapshot test harness (absolute).
tests/css/prettier-ignore/fixtures.ts CSS fixtures validating prettier-ignore behavior around @apply.
tests/css/prettier-ignore/snapshots/relative.test.ts.snap CSS prettier-ignore snapshots (relative).
tests/css/prettier-ignore/snapshots/absolute.test.ts.snap CSS prettier-ignore snapshots (absolute).
tests/css/others/relative.test.ts CSS “other options” snapshot test harness (relative).
tests/css/others/absolute.test.ts CSS “other options” snapshot test harness (absolute).
tests/css/others/fixtures.ts CSS fixtures for tabWidth/useTabs/endOfLine with @apply.
tests/css/others/snapshots/relative.test.ts.snap CSS “others” snapshots (relative).
tests/css/others/snapshots/absolute.test.ts.snap CSS “others” snapshots (absolute).
tests/css/combinator/relative.test.ts CSS combinator snapshot test harness (relative).
tests/css/combinator/absolute.test.ts CSS combinator snapshot test harness (absolute).
tests/css/combinator/fixtures.ts CSS combinator fixtures with @apply.
tests/css/combinator/snapshots/relative.test.ts.snap CSS combinator snapshots (relative).
tests/css/combinator/snapshots/absolute.test.ts.snap CSS combinator snapshots (absolute).
tests/css/at-rule/relative.test.ts CSS at-rule snapshot test harness (relative).
tests/css/at-rule/absolute.test.ts CSS at-rule snapshot test harness (absolute).

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@ony3000 ony3000 merged commit 09b6eb2 into master Mar 15, 2026
10 checks passed
@ony3000 ony3000 deleted the support-css branch March 15, 2026 13:06
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.

Feature Request: Support for CSS @apply Directive

2 participants