├── .gitignore
├── LICENSE
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── rollup.config.js
├── src
├── index.ts
├── my-element.scss
└── my-element.ts
├── tsconfig.json
└── typings
└── scss.d.ts
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | lib
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright (c) 2021 Elliott Marquez and others
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining
4 | a copy of this software and associated documentation files (the
5 | "Software"), to deal in the Software without restriction, including
6 | without limitation the rights to use, copy, modify, merge, publish,
7 | distribute, sublicense, and/or sell copies of the Software, and to
8 | permit persons to whom the Software is furnished to do so, subject to
9 | the following conditions:
10 |
11 | The above copyright notice and this permission notice shall be
12 | included in all copies or substantial portions of the Software.
13 |
14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
17 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
18 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
19 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
20 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Lit Sass Typescript Starter
2 |
3 | This is a project that has a very simple setup for SASS + TS + Lit that uses rollup.
4 |
5 | See an online demo [here on Glitch](https://glitch.com/edit/#!/lit-sass-ts-starter).
6 |
7 | ## Goals
8 |
9 | * Get started with Lit + SASS + TS
10 | * For JS see [`e111077/lit-sass-js-starter`](https://github.com/e111077/lit-sass-js-starter)
11 | * Exemplify how to setup rollup to support this config
12 |
13 | ## Non-goals
14 |
15 | * This does not include a production build as that may vary from project to project
16 | * This does not support Lit 1
17 | * It can, but the imports will have to be changed
18 | * This does not recommend an Lit app structure - only exemplifies the build setup
19 |
20 | ## Get Started
21 |
22 | Clone the repo. Then install.
23 |
24 | ```bash
25 | npm install
26 | ```
27 |
28 | Then start the dev server and rollup watchers
29 |
30 | ```bash
31 | npm run dev
32 | ```
33 |
34 | A browser window should open and rollup will watch your files for changes.
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "lit-sass-ts-starter",
3 | "version": "0.0.1",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "build": "rollup --config rollup.config.js",
8 | "build:watch": "npm run build -- --watch",
9 | "dev": "npm run build:watch & npm run serve",
10 | "serve": "wds --watch --open"
11 | },
12 | "author": "",
13 | "license": "MIT",
14 | "dependencies": {
15 | "lit": "latest",
16 | "tslib": "^2.4.0"
17 | },
18 | "devDependencies": {
19 | "@rollup/plugin-node-resolve": "^15.0.0",
20 | "@web/dev-server": "^0.1.34",
21 | "node-sass": "^7.0.3",
22 | "postcss": "^8.4.17",
23 | "rollup": "^2.79.1",
24 | "rollup-plugin-postcss": "^4.0.2",
25 | "rollup-plugin-postcss-lit": "^2.0.0",
26 | "rollup-plugin-typescript2": "^0.34.1",
27 | "sass": "^1.55.0",
28 | "typescript": "^4.8.4"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
1 | import typescript from 'rollup-plugin-typescript2';
2 | import resolve from '@rollup/plugin-node-resolve';
3 | import postcss from 'rollup-plugin-postcss';
4 | import litcss from 'rollup-plugin-postcss-lit';
5 |
6 | export default {
7 | input: 'src/index.ts',
8 | output: [
9 | {
10 | dir: 'lib',
11 | format: 'es',
12 | sourcemap: true,
13 | }
14 | ],
15 | plugins: [
16 | resolve({
17 | browser: true,
18 | }),
19 | typescript(),
20 | postcss({
21 | minimize: false,
22 | inject: false
23 | }),
24 | litcss(),
25 | ],
26 | };
27 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | import './my-element';
--------------------------------------------------------------------------------
/src/my-element.scss:
--------------------------------------------------------------------------------
1 | div {
2 | color: blue;
3 | }
--------------------------------------------------------------------------------
/src/my-element.ts:
--------------------------------------------------------------------------------
1 | import {LitElement, html} from 'lit';
2 | import {customElement} from 'lit/decorators.js';
3 | import styles from './my-element.scss';
4 |
5 | @customElement('my-element')
6 | export class MyElement extends LitElement {
7 | static styles = styles;
8 |
9 | render() {
10 | return html`Hello World!
`;
11 | }
12 | }
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es2017",
4 | "module": "es2015",
5 | "moduleResolution": "node",
6 | "lib": ["es2017", "dom", "dom.iterable"],
7 | "declaration": true,
8 | "sourceMap": true,
9 | "inlineSources": true,
10 | "experimentalDecorators": true,
11 | "skipLibCheck": true,
12 | "noImplicitAny": false,
13 | "outDir": "./",
14 | "importHelpers": true,
15 | },
16 | "include": [
17 | "**/*.ts",
18 | ],
19 | "exclude": [],
20 | }
--------------------------------------------------------------------------------
/typings/scss.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.scss' {
2 | import { CSSResultGroup } from 'lit';
3 | const styles: CSSResultGroup;
4 | export default styles;
5 | }
--------------------------------------------------------------------------------