{"id":25541365,"url":"https://github.com/alfredosalzillo/masquerades","last_synced_at":"2025-04-11T17:02:16.128Z","repository":{"id":57291693,"uuid":"201256676","full_name":"alfredosalzillo/masquerades","owner":"alfredosalzillo","description":"A library for styled web components.","archived":false,"fork":false,"pushed_at":"2020-10-05T17:54:47.000Z","size":70,"stargazers_count":24,"open_issues_count":1,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-25T13:02:38.361Z","etag":null,"topics":["css","html-css-javascript","html5","javascript","styled-components","styled-system","web-components"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alfredosalzillo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-08-08T12:46:33.000Z","updated_at":"2024-09-02T06:02:58.000Z","dependencies_parsed_at":"2022-09-19T01:01:24.560Z","dependency_job_id":null,"html_url":"https://github.com/alfredosalzillo/masquerades","commit_stats":null,"previous_names":["alfredosalzillo/masquerade"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alfredosalzillo%2Fmasquerades","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alfredosalzillo%2Fmasquerades/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alfredosalzillo%2Fmasquerades/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alfredosalzillo%2Fmasquerades/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alfredosalzillo","download_url":"https://codeload.github.com/alfredosalzillo/masquerades/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248446659,"owners_count":21105130,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","html-css-javascript","html5","javascript","styled-components","styled-system","web-components"],"created_at":"2025-02-20T06:35:31.327Z","updated_at":"2025-04-11T17:02:15.970Z","avatar_url":"https://github.com/alfredosalzillo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# masquerades 🎭\n[![Actions Status](https://github.com/alfredosalzillo/masquerades/workflows/CI/badge.svg)](https://github.com/alfredosalzillo/masquerades/actions)\n\nA library for __styled web components__.\n\nThis library is a work in progress, feel free to participate to the project.\n## Why \nStyled components are easy to write and manage.\nThey focus only on style and anything else.\n\n## Usage\nInstall via npm or yarn.\n```bash\nnpm i masquerades@next\nyarn add masquerades@next\n```\nimport using es modules.\n```javascript\nimport styled from 'masquerades';\n\n// define styled components\nconst StyledDiv = styled.div`\n  /*some css...*/\n`\ncustomElements.define('styled-div', StyledDiv, { extends: \"div\" });\n```\n## Examples\n### Style Custom Elements\nStyle a custom component using `styled(CustomComponent)`.\n```javascript\nimport styled from 'masquerades';\n\nconst StyledCustomComponent = styled(CustomComponent)`\n  background: ${({ disabled }) =\u003e (disabled ? 'grey' : '#f1c40f')};\n  color: #fff;\n  border: 3px solid #fff;\n  border-radius: 5px;\n  padding: 0.8rem 2rem;\n  font: 24px \"Margarine\", sans-serif;\n  outline: none;\n  display: block;\n  letter-spacing: 2px;\n  ${({ disabled }) =\u003e disabled \u0026\u0026 styled.css`\n    border-radius: 15px;\n  `}\n`\n\ncustomElements.define('custom-component', StyledCustomComponent);\n\n```\n### Style Native Elements\nShortcut for style native components are available,\nfor example to style a button use `styled.button`.\n```javascript\nimport styled from 'masquerades';\n\n// Create the button\nconst StyledButton = styled.button`\n  background: ${({ disabled }) =\u003e (disabled ? 'grey' : '#f1c40f')};\n  color: #fff;\n  border: 3px solid #fff;\n  border-radius: 50px;\n  padding: 0.8rem 2rem;\n  font: 24px \"Margarine\", sans-serif;\n  outline: none;\n  cursor: pointer;\n  position: relative;\n  transition: 0.2s ease-in-out;\n  letter-spacing: 2px;\n  ${({ disabled }) =\u003e disabled \u0026\u0026 styled.css`\n    border-radius: 15px;\n  `}\n`\n// set up observedAttributes\n  .observeAttributes(['disabled']);\n\n// Define the styled button as extension of the native button\ncustomElements.define('styled-button', StyledButton, {\n  extends: 'button',\n});\n```\n\nUse the styled button\n```html\n\u003cbutton is=\"styled-button\"\u003eStyled Button\u003c/button\u003e\n\u003cbutton is=\"styled-button\" disabled\u003eStyled Button\u003c/button\u003e\n```\n### Style Shadow DOM\nThe css is injected in a stylesheet adopted by the root of the element and inside the shadow root,\nso it's possible to style both the light and shadow dom.\n```javascript\nimport styled from 'masquerades';\n\nconst StyledCustomComponent = styled(CustomComponent)`\n  /* some Light DOM style ... */\n  :global(:host(\u0026)) {\n    /* Shadow DOM style */\n    selector {\n      /*...*/\n    }\n  }\n  /* or use the styled.shadow shortcut */\n  ${(props) =\u003e styled.shadow`\n    /* Shadow DOM style */\n    selector {\n      /*...*/\n    }\n  `}\n`\n\ncustomElements.define('custom-component', StyledCustomComponent);\n```\n### Using Theme\nUse theme configure global value for styled components.\n\n#### Create a Theme.\n```javascript\nimport styled, { createTheme } from 'masquerades';\n\nconst ThemeProvider = createTheme({\n  primary: '#12a57a',\n  accent: '#f1c40f',\n});\ncustomElements.define('theme-provider', ThemeProvider);\n```\n#### Use a Theme\nThe value of the nearest theme can be used as attribute (and props) in the styled element.\n```javascript\nimport styled from 'masquerades';\n\nconst StyledButton = styled.button`\n  /* the props theme is the value of the nearest theme provider */\n  background: ${({ type = 'primary', theme }) =\u003e (theme[type])};\n  color: #fff;\n  border: 3px solid #fff;\n  border-radius: 50px;\n  padding: 0.8rem 2rem;\n  font: 24px \"Margarine\", sans-serif;\n  outline: none;\n  cursor: pointer;\n  position: relative;\n  transition: 0.2s ease-in-out;\n  letter-spacing: 2px;\n`.observeAttributes(['disabled']);\n\n// Define the styled button as extension of the native button\ncustomElements.define('styled-button', StyledButton, {\n  extends: 'button',\n});\n```\nOr using the static method `valueOf` of the theme provider class.\n```javascript\nclass CustomElement extends HTMLElement {\n  constructor() {\n    super();\n    this.onThemeValueChange = this.onThemeValueChange.bind(this);\n  }\n\n  connectedCallback() {\n    const themeProvider = ThemeProvider.of(this);\n    if (themeProvider) {\n      themeProvider.addEventListener('provider-value-change', this.onThemeValueChange);\n    }\n  }\n\n  onThemeValueChange() {\n    const value = ThemeProvider.valueOf(this);\n    // do something with the theme value\n  }\n\n  disconnectCallback() {\n    const themeProvider = ThemeProvider.of(this);\n    if (themeProvider) {\n      themeProvider.removeEventListener('provider-value-change', this.onThemeValueChange);\n    }\n  }\n}\n```\nAdd the theme in the element three.\n```html\n\u003ctheme-provider .value=${theme1}\u003e\n    \u003cdiv\u003e\n        \u003cbutton is=\"styled-button\"\u003eStyled Button With Theme1\u003c/button\u003e\n        \u003ctheme-provider .value=${theme2}\u003e\n            \u003cbutton is=\"styled-button\"\u003eStyled Button With Theme2\u003c/button\u003e\n        \u003c/theme-provider\u003e\n    \u003c/div\u003e\n\u003c/theme-provider\u003e\n```\n## Pros\n* works in both **Light** and **Shadow** DOM\n* works with native web component (HTMLButtonElement, HTMLDivElement, ...)\n* works with custom web component \n* write css in js\n* no need to manage class names\n* support [stylis](https://github.com/thysultan/stylis.js) css\n## Compatibility\n* This library uses [Constructible Style Sheets](https://wicg.github.io/construct-stylesheets/). Depending on your targets you may need to include a [polyfill](https://www.npmjs.com/package/construct-style-sheets-polyfill) for browsers that don't support them.\n## Hints\n### Webstorm support\nFor add support for stylus in styled tagged template,\nin **_settings \u003e language injections \u003e + \u003e new generic js_** add:\n* Name: **Styled Web Components**\n* Id: **Stylus**\n* Prefix: `.some-class {`\n* Suffix: `}`\n* Places Patterns:\n\n    ```\n    + jsLiteralExpression().and(jsArgument(\"styled\\\\.\", 0))\n    + jsLiteralExpression().withParent(psiElement().withText(string().contains(\".extend\")))\n    + jsLiteralExpression().withParent(psiElement().withText(string().startsWith(\"injectGlobal\")))\n    + jsLiteralExpression().withParent(psiElement().withText(string().startsWith(\"styled\")))\n    + taggedString(\"css\")\n    ```\n##\n_Inspired by [styled-components](https://github.com/styled-components/styled-components])_\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falfredosalzillo%2Fmasquerades","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falfredosalzillo%2Fmasquerades","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falfredosalzillo%2Fmasquerades/lists"}