parcel-transformer-lit-sass's Introduction

parcel-transformer-lit-sass

Import a SCSS file into a Lit component as a CSS template literal.

This Parcel setup will take a SASS file import, compile it to CSS, then convert it to a Lit CSS template literal:

Setup

Install the package from npm

npm i parcel-transformer-lit-sass

In your .parcelrc config file, create a named pipeline which will tell Parcel to use the three transformers shown below, in that order.

Your config may look something like this:

{
  "extends": "@parcel/config-default",
  "transformers": {
    "litsass:*": [
      "@parcel/transformer-sass",
      "parcel-transformer-lit-sass",
      "@parcel/transformer-js"
    ]
  }
}

You can change 'litsass' to a different name if you desire.

If you are importing a .css file, remove @parcel/transformer-sass

How to use

Prepend your import path with your named pipeline:

import myStyles from 'litsass:./myStyles.scss'

The value of myStyles will become:

mySyles = css`
  p {
    color: black;
  }
  ...
`

Example

import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators';

// Import stylesheet using the 'litsass:' named pipeline
import myStyles from 'litsass:./myStyles.scss';

@customElement('my-component')
export class MyComponent extends LitElement {

	static styles = [myStyles];

	...

parcel-transformer-lit-sass's People

Contributors

Stargazers

Watchers

parcel-transformer-lit-sass's Issues

Error in Parcel Transformer sass when reading sass file in lit using Typescript

I am trying to figure out how this import is supposed to run. I have followed the steps in the readme and I ran into two errors.

The first error was in recognizing the module for the named pipeline litsass*:.

I fixed this issue by adding a declarations.d.ts file to my project with the following content

declare module "litsass:*" {
  const value: string
  export default value
}

This allowed parcel to recognize the named pipeline in my component.ts file.

Where I am getting confused at now is in why I am getting this error:

Class static side 'typeof MyButton' incorrectly extends base class static side 'typeof LitElement'.
  Types of property 'styles' are incompatible.
    Type 'string' is not assignable to type 'CSSResultGroup'.

Here's the component file:

import { LitElement, html, css } from "lit"
import { customElement, property } from "lit/decorators"
import myButtonStyles from 'litsass:./my-button.component.scss'

@customElement( 'my-button' )
export class MyButton extends LitElement
{
	static styles = [myButtonStyles];
...

}

My .parcelrc

{
  "extends": "@parcel/config-default",
  "resolvers": [
    "@parcel/resolver-glob",
    "..."
  ],
  "transformers": {
    "*.{ts,tsx}": ["@parcel/transformer-typescript-tsc"],
    "sass":["...", "@parcel/transformer-sass"],
    "litsass:*": [
      "@parcel/transformer-sass",
      "parcel-transformer-lit-sass",
      "@parcel/transformer-js",
      "..."
    ]
  }
}

Parcel Version: "parcel": "^2.9.3",
Lit Version: "lit": "^2.7.2",

I am not sure why what I have that could be different. It looks like the example in the readme also uses the Typescript version of Lit so I am at a loss. Can anyone help me figure this out?

Recommend Projects

kieran-harte / parcel-transformer-lit-sass Goto Github PK

parcel-transformer-lit-sass's Introduction

parcel-transformer-lit-sass

Setup

How to use

Example

parcel-transformer-lit-sass's People

Contributors

Stargazers

Watchers

parcel-transformer-lit-sass's Issues

Error in Parcel Transformer sass when reading sass file in lit using Typescript

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent