Gathering detailed insights and metrics for preact-mwc-styled
Gathering detailed insights and metrics for preact-mwc-styled
npm install preact-mwc-styled
Typescript
Module System
51.4
Supply Chain
54
Quality
65.6
Maintenance
50
Vulnerability
78.1
License
TypeScript (86.84%)
CSS (10.97%)
Shell (2.18%)
Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.
Total Downloads
5,598
Last Day
1
Last Week
2
Last Month
9
Last Year
365
MPL-2.0 License
2 Stars
100 Commits
1 Watchers
2 Branches
1 Contributors
Updated on Jun 14, 2023
Latest Version
0.1.5
Package Id
preact-mwc-styled@0.1.5
Unpacked Size
44.33 kB
Size
11.58 kB
File Count
68
Cumulative downloads
Total Downloads
Last Day
0%
1
Compared to previous day
Last Week
0%
2
Compared to previous week
Last Month
-87.5%
9
Compared to previous month
Last Year
-26.4%
365
Compared to previous year
1
2
3
Automatically styles preact-material-components (needs to be used with something like webpack)
1module.exports = { 2 // [...] 3 rules: [ 4 { 5 test: { 6 test: /\.scss$/, 7 and: /^node_modules\/precat-mwc-styled/ 8 }, 9 use: [ 10 {loader: "style-loader"}, 11 {loader: "css-loader"}, 12 { 13 loader: "postcss-loader", options: { 14 plugins: [ 15 require("postcss-custom-properties")({strict: false, preserve: true}), 16 require("autoprefixer") 17 ] 18 } 19 }, 20 {loader: "sass-loader", options: {includePaths: ["./node_modules"]}}, 21 {loader: "sass-resources-loader", options: {resources: "<path to your theme>"}} 22 ] 23 } 24 // [...] 25 ] 26 // [...] 27}
1module.exports = { 2 // [...] 3 rules: [ 4 { 5 test: { 6 test: /\.scss$/, 7 and: [/node_modules\/precat-mwc-styled\//] 8 }, 9 use: [ 10 {loader: "style-loader"}, 11 {loader: "css-loader"}, 12 { 13 loader: "postcss-loader", options: { 14 plugins: [ 15 require("postcss-custom-properties")({strict: false, preserve: true}), 16 require("autoprefixer") 17 ] 18 } 19 }, 20 {loader: "sass-loader", options: {includePaths: ["./node_modules"]}}, 21 {loader: "sass-resources-loader", options: {resources: "<path to your theme (see Theming)>"}} 22 ] 23 }, 24 { 25 test: { 26 test: /\.scss$/, 27 exclude: /node_modules\// 28 }, 29 use: [ 30 // Your scss processing 31 ] 32 } 33 // [...] 34 ] 35 // [...] 36}
You need to install style-loader
, css-loader
, postcss-loader
, postcss-custom-properties
, autoprefixer
,
sass-loader
and sass-resources-loader
for this config to work are automatically installed by this package.
You can add more postcss
plugins or remove autoprefixer
, removing postcss-custom-properties
is possible,
but not recommended.
You can remove style-loader
but it is recommended to use it.
Insert on use (/usable
) is optional, try what works for you.
You should prerender the site in production
(If this library is good enough for your use case, it's currently not well tested)
style-loader
: Inserts the css for the components into DOM. Can be replaced with extract-loader
in production.css-loader
: See sass-loader
documentationpostcss
:
postcss-custom-properties
: To "compile" your theme into the css
(Especially for browsers that do not support CSS custom properties)autoprefixer
: cross-browser supportsass-loader
: This project uses sass, absolutely neededsass-resources-loader
: To insert your theme mixins into the component stylesheetsJust use them like:
1import {Component, h} from "preact"; 2import Button from "preact-mwc-styled/Button"; 3 4export default class App extends Component { 5 render() { 6 return <Button primary ripple>I am a Button</Button> 7 } 8}
This project is fully TypeScript compatible! (Because it's written in TypeScript)
For documentation of the components refer to preact-material-components and their docs.
To use your custom theme, just create a custom theme sass file like this:
1$mdc-theme-primary: #6200ee; // primary color 2$mdc-theme-on-primary: #000000; // text color on primary component 3 4$mdc-theme-secondary: #018786; // secondary color 5$mdc-theme-on-secondary: #000000; // text color on secondary component 6 7// Uncommon that you need this ones 8$mdc-theme-background: #ffffff; 9 10$mdc-theme-surface: #ffffff; 11$mdc-theme-on-surface: #000000;
And reference it from sass-resources-loader
. Just insert the variables you need into your theme file.
For assistance on choosing colors there is the material color tool.
You can also override material classes in there.
No vulnerabilities found.
Reason
no vulnerabilities detected
Reason
tokens are read-only in GitHub workflows
Reason
no dangerous workflow patterns detected
Reason
all dependencies are pinned
Details
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
branch protection is not maximal on development and all release branches
Details
Reason
GitHub code reviews found for 6 commits out of the last 30 -- score normalized to 2
Details
Reason
repo is marked as archived
Reason
no badge detected
Reason
0 out of 1 artifacts are signed or have provenance
Details
Reason
security policy file not detected
Reason
no update tool detected
Details
Reason
project is not fuzzed
Score
Last Scanned on 2022-08-15
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More