Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement support for parsing custom at rules in JS bindings #395

Merged
merged 14 commits into from
Feb 11, 2023

Conversation

devongovett
Copy link
Member

@devongovett devongovett commented Jan 12, 2023

Closes #391

This adds a new configuration option to the Lightning CSS JavaScript API which enables basic parsing of custom at-rules into a more structured AST rather than storing raw tokens. You can configure how the prelude and block should be parsed, and then use the value to transform the rule if needed. The syntax for the prelude is defined using a syntax string (as used in the @property rule), and the block can be a "declaration-list", "rule-list", or "style-block" as defined in the css spec.

In this example, @breakpoints accepts a rule list as a body, and @test accepts a style block, i.e. either a declaration list (in nested style rules) or a rule list. @test also expects a comma separated list of identifiers as a prelude.

let res = css.transform({
  code: Buffer.from(`
  @breakpoints {
    .foo { color: yellow; }
  }

  .foo {
    color: red;
    @test foo, bar {
      width: 25px;
    }
  }
`),
  customAtRules: {
    breakpoints: {
      body: 'rule-list'
    },
    test: {
      prelude: '<custom-ident>#',
      body: 'style-block'
    }
  },
  // ...

To do

  • Docs
  • Tests

@devongovett devongovett merged commit 74cf822 into master Feb 11, 2023
@devongovett devongovett deleted the custom-at-rule-js branch February 11, 2023 19:22
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.

Custom at-rule style parsing
1 participant