@blockquote/sass-style-template

sass-style-template

Simple SCSS watcher with autoprefixer.

Why?

• I want to use SASS and LitElement for creating Web Components.
• I want to use ES Modules for CSS (CSS Modules) helping me through ES6 modules.
• I want to make it simple and decoupled from any bundle generator (snowpack, parcel, rollup, webpack)

// I don't want to use SASS directly in my code
import styles from './my-component-style.scss' 😟

Lit Element makes it easy to "shimming" CSS Modules and "using" CSS-in-JS in a simple and lightweight way

:host {
  display: block;
  color: #{"${unsafeCSS(tokens.colors.primary)}"};

  @at-root #{&}([variant=large]) {
    letter-spacing: 3px;
  }
}

p {
  background-color: #{"${unsafeCSS(tokens.colors.secondary)}"};
  :host([variant=large]) & {
    padding:calc(#{"${unsafeCSS(tokens.spaces.xlarge)}"} + 16px);
  }
}

import { css, unsafeCSS } from 'lit';
import * as tokens from 'my-design-system-tokens';

export default css`:host {
  display: block;
  color: ${unsafeCSS(tokens.colors.primary)}; }
  :host([variant=large]) {
    letter-spacing: 3px; }

p {
  background-color: ${unsafeCSS(tokens.colors.secondary)}; }
  :host([variant=large]) p {
    padding: calc(${unsafeCSS(tokens.spaces.xlarge)} + 16px); }
`;

---

Or just, compile .scss files to .css file and then use ES Module Shims

CSS Modules - chromestatus

// LitElement
import styles from './style.css';
...
static get styles() {
    return [styles]
  }

---

How does it work

The first time a default template will be used to create a style file

// sass-template.tmpl
import { css } from 'lit';

export default css`<% content %>`;

// my-component.scss
:host {
  display: block;
  color: desaturate(#ad141e, 20%);
}

my-component.scss --> my-component-styles.js

Following changes in the scss file (my-component.scss) will update only the content between the css function in -styles.js file (my-component-styles.js)

// from original template
import { css } from 'lit';

// new content added later, it will not be deleted when updating scss file
import * as tokens from 'my-design-system-tokens';

export default css`
  //only this part will be modified
  //new css from scss file
`;

---

Usage

npm i -D sass-style-template

Options

sass-style-template 😄

// template default

const customTemplate = path.resolve('.sass-template.tmpl');

// commander options
  version(pkg.version, '-v, --version','show version number')
  .option('-s, --marker-start <string>', 'start replace position')
  .option('-e, --marker-end <string>', 'end replace position')
  .option('-g, --custom-glob <string>', 'string pattern to be matched')
  .option('-f, --css-file', 'generate css file instead of using template')
  .option('-, --js-file <string>', 'file extension')
  .option('-d, --destination <string>', 'location of the output file');

Usage - Typescript

// package.json
// my-component.scss --> my-component-styles.ts
"scripts": {
  "start": "concurrently -k -r \"npm:sass:watch\" \"npm:vite\"",
  "sass:watch": "sass-style-template -j ts"
}

---

Default option value

.sass-template.tmpl

import { css, unsafeCSS } from 'lit';

export default css`<% content %>`;

Creating a custom template file in root directory, using this name .sass-template.tmpl

 // 😎 https://github.com/material-components/material-components-web-components/blob/master/sass-template.tmpl

import {css} from 'lit';
export const style = css`<% content %>`;

---

--marker-start (-s)

start replace position : export default css`

--marker-end (-e)

end replace position : `;

--custom-glob (g)

pattern to be matched : ./*.scss, ./src/**/*.scss

--css-file (-f)

generate css file instead of using template : undefined

--js-file (-j)

file extension : js

--destination (-d)

location of the output file : undefined

---

Example:

open-wc-vitejs-sass

Free Software.