Find a way to specify options for the syntax

[43081j]

We may want to support names other than css, for example if someone names theirs style or something:

style`.foo { color: blue; }`;

not entirely sure if there's a way to pass options to a postcss custom syntax, though. needs investigation

[timbomckay]

I also use a different name for some extra css logic. I ended up altering the code locally to check for any tag ending with css (such as postcss, tailwindcss, mycustomcss, etc). This could be an opinionated way of providing this flexibility without adding too much extra logic, but some might appreciate an options parameter to expand the tags to be whatever their hearts desire.

Essentially on line 36 of parse.js I updated:

- if (path.node.tag.type === 'Identifier' && path.node.tag.name === 'css')
+ if (path.node.tag.type === 'Identifier' && path.node.tag.name.endsWith('css'))

I could create a PR for this alteration but again it'd be very specific to only tags ending in css.

Update: (For some extra context) we're using this for a component library that needs the breakpoints to be dynamic based on what the consumer specifies. This requires some adjustments on the client side so we have a tag to search the passed styles for a specific string and replace with customized breakpoints.

const tailwindcss = (styles: TemplateStringsArray): CSSResult => {
  const style = styles.toString().replace('--MEDIUM--', _breakpoints('md'));
  return css`${unsafeCSS(style)}`;
}

export class MyElement extends LitElement {
  static override styles = [
    tailwindcss`
      @tailwind base;
      @tailwind utilities;
    `,
    tailwindcss`:host {
      @apply font-bold md:text-lg;
    }`
  ]
}

Otherwise I'm not sure what the use case would be for a custom css tagged template but flexibility isn't a bad thing.