@blockquote/sass-style-template
SASS and LitElement for creating Web Components
Last updated 5 days ago by oscarmarina .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @blockquote/sass-style-template 
SYNC missed versions from official npm registry.

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-element';
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, unsafeCSS } from 'lit-element';

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, unsafeCSS } from 'lit-element';

// 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('-d, --destination <string>', 'location of the output file');

Default option value

.sass-template.tmpl
import { css, unsafeCSS } from 'lit-element';

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-element';
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

--destination (-d)

location of the output file : undefined


Example:

open-wc-sass

Free Software.

Current Tags

  • 1.0.1                                ...           latest (5 days ago)

2 Versions

  • 1.0.1                                ...           5 days ago
  • 1.0.0                                ...           9 days ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 19
Last Day 0
Last Week 11
Last Month 0
Dependencies (8)
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |