From 85d925309772bf2daeb326c98db07c3aafdea253 Mon Sep 17 00:00:00 2001 From: Jared Lunde Date: Sun, 26 Sep 2021 19:09:33 -0600 Subject: [PATCH] chore: use pnpm and github actions --- .github/ISSUE_TEMPLATE/bug_report.md | 24 +- .github/ISSUE_TEMPLATE/feature_request.md | 7 +- .github/workflows/release.yml | 68 + .husky/commit-msg | 4 + .husky/pre-commit | 4 + .travis.yml | 15 - CODE_OF_CONDUCT.md | 26 +- README.md | 598 +- babel.config.js | 2 +- benchmark/doc.ts | 2 +- benchmark/index.ts | 288 +- package.json | 88 +- pnpm-lock.yaml | 8110 +++++++++++++++++++ server/package.json | 5 +- server/src/index.test.ts | 552 +- server/src/index.ts | 150 +- server/types/index.d.ts | 34 +- src/create-dash.ts | 260 +- src/create-styles.ts | 478 +- src/index.test.ts | 1270 +-- src/index.ts | 8 +- src/utils.ts | 32 +- test/resolve-snapshot.js | 16 +- test/{setup.js => setup.ts} | 4 +- types/create-dash.d.ts | 68 +- types/create-styles.d.ts | 118 +- types/index.d.ts | 8 +- types/utils.d.ts | 6 +- yarn.lock | 8543 --------------------- 29 files changed, 10214 insertions(+), 10574 deletions(-) create mode 100644 .github/workflows/release.yml create mode 100755 .husky/commit-msg create mode 100755 .husky/pre-commit delete mode 100644 .travis.yml create mode 100644 pnpm-lock.yaml rename test/{setup.js => setup.ts} (72%) delete mode 100644 yarn.lock diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index dd84ea7..9b77ea7 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -1,10 +1,9 @@ --- name: Bug report about: Create a report to help us improve -title: '' -labels: '' -assignees: '' - +title: "" +labels: "" +assignees: "" --- **Describe the bug** @@ -12,6 +11,7 @@ A clear and concise description of what the bug is. **To Reproduce** Steps to reproduce the behavior: + 1. Go to '...' 2. Click on '....' 3. Scroll down to '....' @@ -24,15 +24,17 @@ A clear and concise description of what you expected to happen. If applicable, add screenshots to help explain your problem. **Desktop (please complete the following information):** - - OS: [e.g. iOS] - - Browser [e.g. chrome, safari] - - Version [e.g. 22] + +- OS: [e.g. iOS] +- Browser [e.g. chrome, safari] +- Version [e.g. 22] **Smartphone (please complete the following information):** - - Device: [e.g. iPhone6] - - OS: [e.g. iOS8.1] - - Browser [e.g. stock browser, safari] - - Version [e.g. 22] + +- Device: [e.g. iPhone6] +- OS: [e.g. iOS8.1] +- Browser [e.g. stock browser, safari] +- Version [e.g. 22] **Additional context** Add any other context about the problem here. diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md index bbcbbe7..2bc5d5f 100644 --- a/.github/ISSUE_TEMPLATE/feature_request.md +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -1,10 +1,9 @@ --- name: Feature request about: Suggest an idea for this project -title: '' -labels: '' -assignees: '' - +title: "" +labels: "" +assignees: "" --- **Is your feature request related to a problem? Please describe.** diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml new file mode 100644 index 0000000..9bb7303 --- /dev/null +++ b/.github/workflows/release.yml @@ -0,0 +1,68 @@ +name: release + +on: + push: + branches: + - main + - next + - alpha + pull_request: + branches: + - main + - next + - alpha + +jobs: + release: + name: ๐Ÿš€ Release + if: "!contains(github.event.head_commit.message, '[skip ci]') && !startsWith(github.event.head_commit.message, 'chore:') && !startsWith(github.event.head_commit.message, 'style:') && !contains(github.event.pull_request.title, '[skip ci]') && !startsWith(github.event.pull_request.title, 'chore:') && !startsWith(github.event.pull_request.title, 'style:') && !startsWith(github.event.head_commit.message, 'chore(') && !startsWith(github.event.head_commit.message, 'style(') && !startsWith(github.event.pull_request.title, 'chore(') && !startsWith(github.event.pull_request.title, 'style(')" + runs-on: ubuntu-latest + strategy: + matrix: + node-version: [16.x] + steps: + - name: Checkout + uses: actions/checkout@v2 + with: + fetch-depth: 0 + - name: Setup pnpm + uses: pnpm/action-setup@v2.0.1 + with: + version: 6.14.3 + - name: Setup Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v1 + with: + node-version: ${{ matrix.node-version }} + - name: Cache node_modules + id: cache-node-modules + uses: actions/cache@v2 + with: + path: node_modules + key: ${{ runner.os }}-modules-${{ hashFiles('**/pnpm-lock.yaml') }} + - name: Install + if: steps.cache-node-modules.outputs.cache-hit != 'true' + run: pnpm install --reporter=silent + - name: โœ… Check types + run: pnpm check-types + - name: ๐Ÿงน Lint + run: pnpm lint -- --quiet + - name: ๐Ÿงช Test + run: pnpm test -- --coverage --silent + - name: Publish tests to Codecov + if: always() + uses: codecov/codecov-action@v2 + with: + files: coverage/clover.xml + verbose: false + fail_ci_if_error: false + - name: Build + if: "github.event_name == 'push'" + run: pnpm build + - name: Stage changes + if: "github.event_name == 'push'" + run: git add . + - name: ๐Ÿš€ Release + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + NPM_TOKEN: ${{ secrets.NPM_TOKEN }} + run: pnpx -y semantic-release diff --git a/.husky/commit-msg b/.husky/commit-msg new file mode 100755 index 0000000..d69ab0a --- /dev/null +++ b/.husky/commit-msg @@ -0,0 +1,4 @@ +#!/bin/sh +. "$(dirname "$0")/_/husky.sh" + +pnpm commitlint --edit $1 diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100755 index 0000000..fab6428 --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1,4 @@ +#!/bin/sh +. "$(dirname "$0")/_/husky.sh" + +pnpm lint-staged diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index c510881..0000000 --- a/.travis.yml +++ /dev/null @@ -1,15 +0,0 @@ -sudo: false -language: node_js -cache: - yarn: true - directories: - - node_modules -notifications: - email: false -node_js: '12' -install: yarn install -script: yarn validate -after_script: npx codecov@3 -branches: - only: - - master diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index 48f19ef..9eafd85 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -14,22 +14,22 @@ appearance, race, religion, or sexual identity and orientation. Examples of behavior that contributes to creating a positive environment include: -* Using welcoming and inclusive language -* Being respectful of differing viewpoints and experiences -* Gracefully accepting constructive criticism -* Focusing on what is best for the community -* Showing empathy towards other community members +- Using welcoming and inclusive language +- Being respectful of differing viewpoints and experiences +- Gracefully accepting constructive criticism +- Focusing on what is best for the community +- Showing empathy towards other community members Examples of unacceptable behavior by participants include: -* The use of sexualized language or imagery and unwelcome sexual attention or - advances -* Trolling, insulting/derogatory comments, and personal or political attacks -* Public or private harassment -* Publishing others' private information, such as a physical or electronic - address, without explicit permission -* Other conduct which could reasonably be considered inappropriate in a - professional setting +- The use of sexualized language or imagery and unwelcome sexual attention or + advances +- Trolling, insulting/derogatory comments, and personal or political attacks +- Public or private harassment +- Publishing others' private information, such as a physical or electronic + address, without explicit permission +- Other conduct which could reasonably be considered inappropriate in a + professional setting ## Our Responsibilities diff --git a/README.md b/README.md index d6ec01c..c93f6e7 100755 --- a/README.md +++ b/README.md @@ -1,32 +1,34 @@
-
-
A tiny, powerful, framework-agnostic CSS-in-JS library
- 
npm i @dash-ui/styles
-
+ > A tiny, powerful, framework-agnostic CSS-in-JS library + ```sh + npm i @dash-ui/styles + ``` - - Bundlephobia - - - - Types - - - Code coverage - - - Build status - - - NPM Version - - - MIT License - +

+ + Bundlephobia + + + Types + + + Code coverage + + + Build status + + + NPM Version + + + MIT License + + +

-
+--- ## Features @@ -50,34 +52,34 @@ ```jsx harmony // React example -import * as React from 'react' -import {styles} from '@dash-ui/styles' +import * as React from "react"; +import { styles } from "@dash-ui/styles"; // Any global styles or tokens that are inserted into the DOM // can be easily ejected by calling the function they return. const flushTokens = styles.insertTokens({ color: { // var(--color-brand) - brand: '#ee5b5f', + brand: "#ee5b5f", // var(--color-white) - white: '#fafafa', + white: "#fafafa", }, elevation: { // var(--elevation-resting) resting: - '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)', + "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)", }, radius: { // var(--radius-primary) - primary: '4px', + primary: "4px", }, -}) +}); const flushGlobal = styles.insertGlobal` body { min-height: 100vh; } -` +`; // `styles` is a function for composing style variants in a // deterministic way. In the example below, you'll see an example @@ -87,7 +89,7 @@ const button = styles({ // The object in this callback is a mapping to the CSS // tokens above. `default` here is a special style name // that will be applied to each invocation of `button()` - default: ({radius}) => ` + default: ({ radius }) => ` display: inline-block; border: none; background: transparent; @@ -107,15 +109,15 @@ const button = styles({ } `, // Styles can also be defined in the object format - brand: ({color}) => ({ + brand: ({ color }) => ({ backgroundColor: color.brand, }), // Lastly, styles need not use callbacks if they don't need // access to design tokens black: { - backgroundColor: '#000', + backgroundColor: "#000", }, -}) +}); const Component = (props) => (
@@ -123,16 +125,16 @@ const Component = (props) => ( * Styles are composed in the order they're defined in arguments, * so they are completely deterministic. */} - + {/** * That is, in the button below `black`'s background color will * take precendence over the `brand` background color. */} -
-) +); ``` ## API docs @@ -240,14 +242,14 @@ scale an application using CSS-in-JS. ```jsx harmony // React example -import * as React from 'react' -import {styles} from '@dash-ui/styles' +import * as React from "react"; +import { styles } from "@dash-ui/styles"; const button = styles({ // The object in this callback is a mapping to the CSS // tokens above. `default` here is a special style name // that will be applied to each invocation of `button()` - default: ({radius}) => ` + default: ({ radius }) => ` display: inline-block; border: none; background: transparent; @@ -261,17 +263,17 @@ const button = styles({ } `, // Styles can also be defined in the object format - primary: ({color}) => ({ + primary: ({ color }) => ({ backgroundColor: color.primary, color: color.white, }), // Lastly, styles need not use callbacks if they don't need // access to design tokens black: { - backgroundColor: '#000', - color: '#fff', + backgroundColor: "#000", + color: "#fff", }, -}) +}); const Component = (props) => ( @@ -280,17 +282,17 @@ const Component = (props) => ( * so they are completely deterministic. Calling the `button` * function returns a string class name. */} - + {/** * That is, in the button below `black`'s background color will * take precendence over the `brand` background color because it * is declared after `brand`. */} - -) +); ``` #### Arguments @@ -315,7 +317,7 @@ styles(styleMap: StyleMap): Style * deterministic style and class name. */ export type Style = { - (...args: StyleArguments): string + (...args: StyleArguments): string; /** * A function that returns the raw, CSS string for a given * name in the style map. @@ -324,41 +326,41 @@ export type Style = { * select the styles from the style map you want to compose into a singular * CSS string. */ - css(...names: StyleArguments): string + css(...names: StyleArguments): string; /** * The style map that this `style()` instance was instantiated with. */ - styles: StyleMap -} + styles: StyleMap; +}; export type StyleArguments = ( | N | { - [Name in N]?: boolean | null | undefined | string | number + [Name in N]?: boolean | null | undefined | string | number; } | Falsy -)[] +)[]; ``` ### StyleMap ```ts export type StyleMap = { - [Name in N | 'default']?: StyleValue -} + [Name in N | "default"]?: StyleValue; +}; export type StyleValue = | string | StyleCallback - | StyleObject + | StyleObject; export type StyleObject = { - [property: string]: StyleObject | string | number -} + [property: string]: StyleObject | string | number; +}; export type StyleCallback = ( tokens: V -) => StyleObject | string +) => StyleObject | string; ``` --- @@ -375,28 +377,28 @@ class name when called. ```jsx harmony // React example -import * as React from 'react' -import {styles} from '@dash-ui/styles' +import * as React from "react"; +import { styles } from "@dash-ui/styles"; // Can be a tagged template literal const heading = styles.one` font-size: 2rem; font-weight: bold; -` +`; // Or an object const heading = styles.one({ - fontSize: '2rem', - fontWeight: 'bold', -}) + fontSize: "2rem", + fontWeight: "bold", +}); // Or a callback -const heading = styles.one(({font}) => ({ +const heading = styles.one(({ font }) => ({ fontSize: font.size.heading, - fontWeight: 'bold', -})) + fontWeight: "bold", +})); -const Heading = () =>

Hello world

+const Heading = () =>

Hello world

; ``` #### Returns @@ -408,12 +410,12 @@ const Heading = () =>

Hello world

* not be inserted and a class name will not be returned. */ export type StylesOne = { - (createClassName?: boolean | number | string | null): string + (createClassName?: boolean | number | string | null): string; /** * A method that returns a CSS string if the first argument is not falsy. */ - css(createCss?: boolean | number | string | null): string -} + css(createCss?: boolean | number | string | null): string; +}; ``` --- @@ -430,8 +432,8 @@ name for the styles. This is a shortcut for `styles.one({display: 'flex'})()`. ```jsx harmony // React example -import * as React from 'react' -import {styles} from '@dash-ui/styles' +import * as React from "react"; +import { styles } from "@dash-ui/styles"; // The styles here will only be injected into the DOM // immediately when the style is created. This is cached @@ -440,7 +442,7 @@ import {styles} from '@dash-ui/styles' const Box = () => (
` + ({ color }) => ` width: 200px; height: 200px; background-color: ${color.primary}; @@ -451,13 +453,13 @@ const Box = () => ( ` )} /> -) +); ``` #### Returns ```ts -string // A class name +string; // A class name ``` --- @@ -474,17 +476,17 @@ class name for the styles. ```jsx harmony // React example -import * as React from 'react' -import clsx from 'clsx' -import {styles} from '@dash-ui/styles' +import * as React from "react"; +import clsx from "clsx"; +import { styles } from "@dash-ui/styles"; // The lazy function can return style objects, style callbacks, // and strings -const bgColor = styles.lazy((colorName) => ({color}) => ({ +const bgColor = styles.lazy((colorName) => ({ color }) => ({ backgroundColor: color[colorName], -})) +})); -const Box = ({bg = 'primary'}) =>
+const Box = ({ bg = "primary" }) =>
; ``` #### Returns @@ -498,7 +500,7 @@ const Box = ({bg = 'primary'}) =>
* styles from */ export type StylesLazy = { - (value?: Value): string + (value?: Value): string; /** * A method that returns indeterminate CSS strings based on the value * when called. @@ -506,8 +508,8 @@ export type StylesLazy = { * @param value A JSON serializable value to create indeterminate * styles from */ - css(value?: Value): string -} + css(value?: Value): string; +}; ``` --- @@ -523,15 +525,15 @@ class name. ```jsx harmony // React example -import * as React from 'react' -import {styles} from '@dash-ui/styles' +import * as React from "react"; +import { styles } from "@dash-ui/styles"; // Create a style for primary bg color const bgPrimary = styles.one( - ({color}) => ` + ({ color }) => ` background-color: ${color.primary}; ` -) +); // Creates styles for a box with 2 widths const box = styles({ @@ -543,14 +545,14 @@ const box = styles({ width: 400, height: 400, }, -}) +}); // This joins CSS strings together and immediately // inserts them into the DOM while returning a // class name const PrimaryBox = () => ( -
-) +
+); ``` #### Arguments @@ -566,7 +568,7 @@ styles.join(...css: string[]): string #### Returns ```ts -string // A class name +string; // A class name ``` --- @@ -583,8 +585,8 @@ name which can then be referenced in other styles. ```jsx harmony // React example -import * as React from 'react' -import {styles} from '@dash-ui/styles' +import * as React from "react"; +import { styles } from "@dash-ui/styles"; // Immediately injects keyframes styles into the // DOM and returns an animation name which can then @@ -605,26 +607,26 @@ const zoomy = styles.keyframes` 100% { transform: scale(0.0); } -` +`; // Creates styles for a zoomy box const zoomyBox = styles.one({ animationName: zoomy, animationDuration: `2000ms`, - animationIterationCount: 'infinite', - backgroundColor: '#008489', + animationIterationCount: "infinite", + backgroundColor: "#008489", width: 100, height: 100, - margin: '48px auto', -}) + margin: "48px auto", +}); -const ZoomyBox = () =>
+const ZoomyBox = () =>
; ``` #### Returns ```ts -string // An animation name +string; // An animation name ``` --- @@ -640,8 +642,8 @@ A function that returns the generated class name for a given theme when using ```tsx // React example -import * as React from 'react' -import {createStyles} from '@dash-ui/styles' +import * as React from "react"; +import { createStyles } from "@dash-ui/styles"; // Creating our own styles instance gives us strong // types for `themes` and `tokens` without having @@ -651,25 +653,25 @@ const styles = createStyles({ themes: { // Light mode design tokens light: { - bgColor: '#FAFAFA', - primaryColor: '#ee5b5f', + bgColor: "#FAFAFA", + primaryColor: "#ee5b5f", }, // Dark mode design tokens dark: { - bgColor: '#272727', - primaryColor: '#333', + bgColor: "#272727", + primaryColor: "#333", }, } as const, -}) +}); export const App = () => { - const [mode, setMode] = React.useState<'light' | 'dark'>('light') + const [mode, setMode] = React.useState<"light" | "dark">("light"); React.useEffect(() => - styles.insertGlobal(({bgColor}) => ({ - body: {backgroundColor: bgColor}, + styles.insertGlobal(({ bgColor }) => ({ + body: { backgroundColor: bgColor }, })) - ) + ); return ( // Sets the theme name on the body element @@ -679,7 +681,7 @@ export const App = () => {
` + ({ bgColor, primaryColor }) => ` width: 200px; height: 200px; background-color: ${primaryColor}; @@ -688,13 +690,13 @@ export const App = () => { /> - ) -} + ); +}; ``` #### Arguments @@ -710,7 +712,7 @@ theme(name: T): string #### Returns ```typescript -string // A class name +string; // A class name ``` --- @@ -729,8 +731,8 @@ when it is called. ```tsx // React example -import * as React from 'react' -import {createStyles} from '@dash-ui/styles' +import * as React from "react"; +import { createStyles } from "@dash-ui/styles"; // Creating our own styles instance gives us strong // types for `themes` and `tokens` without having @@ -740,19 +742,19 @@ const styles = createStyles({ themes: { // Light mode design tokens light: { - primaryColor: '#ee5b5f', + primaryColor: "#ee5b5f", }, // Dark mode design tokens dark: { - primaryColor: '#272727', + primaryColor: "#272727", }, }, -}) +}); export const App = () => { - const [mode, setMode] = React.useState<'light' | 'dark'>('light') - const [darkModePrimary, setDarkModePrimary] = React.useState('#272727') - const [lightModePrimary, setLightModePrimary] = React.useState('#ee5b5f') + const [mode, setMode] = React.useState<"light" | "dark">("light"); + const [darkModePrimary, setDarkModePrimary] = React.useState("#272727"); + const [lightModePrimary, setLightModePrimary] = React.useState("#ee5b5f"); React.useEffect( // Here we are updating our theme values each @@ -767,7 +769,7 @@ export const App = () => { }, }), [darkModePrimary, lightModePrimary] - ) + ); return ( // Sets the theme name on the body element @@ -777,7 +779,7 @@ export const App = () => {
` + ({ primaryColor }) => ` width: 200px; height: 200px; background-color: ${primaryColor}; @@ -788,10 +790,10 @@ export const App = () => {
@@ -811,8 +813,8 @@ export const App = () => { /> - ) -} + ); +}; ``` #### Arguments @@ -854,20 +856,20 @@ the tokens that were inserted when it is called. ```tsx // React example -import * as React from 'react' -import {createStyles} from '@dash-ui/styles' +import * as React from "react"; +import { createStyles } from "@dash-ui/styles"; // Creating our own styles instance gives us strong // types for `tokens` without having to declare // DashTokens in our app const styles = createStyles({ tokens: { - primaryColor: '#ee5b5f', + primaryColor: "#ee5b5f", }, -}) +}); export const App = () => { - const [primaryColor, setPrimaryColor] = React.useState('#ee5b5f') + const [primaryColor, setPrimaryColor] = React.useState("#ee5b5f"); React.useEffect( // Here we are updating our variable values each @@ -877,13 +879,13 @@ export const App = () => { primaryColor, }), [primaryColor] - ) + ); return (
` + ({ primaryColor }) => ` width: 200px; height: 200px; background-color: ${primaryColor}; @@ -899,8 +901,8 @@ export const App = () => { />
- ) -} + ); +}; ``` #### Arguments @@ -936,21 +938,21 @@ returns a function that will flush the styles inserted when it is called. ```tsx // React example -import * as React from 'react' -import {styles} from '@dash-ui/styles' +import * as React from "react"; +import { styles } from "@dash-ui/styles"; const flushStyles = styles.insertGlobal({ body: { - minHeight: '100vh', - backgroundColor: '#ee5b5f', - color: '#fff', - fontFamily: 'Inter, -apple-system, sans-serif', + minHeight: "100vh", + backgroundColor: "#ee5b5f", + color: "#fff", + fontFamily: "Inter, -apple-system, sans-serif", }, h1: { - margin: '1rem', - fontSize: '3rem', + margin: "1rem", + fontSize: "3rem", }, -}) +}); export const App = () => { return ( @@ -958,8 +960,8 @@ export const App = () => {

Hello world

- ) -} + ); +}; ``` #### Returns @@ -980,9 +982,9 @@ configured by creating your own `styles()` instance with [`createStyles()`](#cre #### Example ```js -import {styles} from '@dash-ui/styles' +import { styles } from "@dash-ui/styles"; -console.log(styles.hash('foo: bar;')) +console.log(styles.hash("foo: bar;")); // 1rcc4tl ``` @@ -999,7 +1001,7 @@ hash(string: string): string #### Returns ```typescript -string // A hash of the input string +string; // A hash of the input string ``` --- @@ -1030,10 +1032,10 @@ in the [`styles()`](#styles) instance. #### Example ```jsx harmony -import {styles} from '@dash-ui/styles' +import { styles } from "@dash-ui/styles"; // Inserts a style named 'foo' under the selector '.foo' // into the default style sheet -styles.dash.insert('foo', '.foo', 'display: flex;') +styles.dash.insert("foo", ".foo", "display: flex;"); ``` --- @@ -1072,7 +1074,7 @@ const oneStyle = styles.one(({gap}) => ` function createStyles< V extends DashTokens = DashTokens, T extends string = DashThemeNames ->(options: CreateStylesOptions = {}): Styles +>(options: CreateStylesOptions = {}): Styles; ``` | Argument | Type | Required? | Description | @@ -1106,18 +1108,18 @@ Dash is a tiny, performant CSS-in-JS style rule sheet manager similar to Emotion #### Example ```js -import {createDash} from '@dash-ui/styles' +import { createDash } from "@dash-ui/styles"; -const dash = createDash({key: 'css', prefix: false}) +const dash = createDash({ key: "css", prefix: false }); // Inserts a style named 'flex' under the selector '.flex' // into the default style sheet -dash.insert('flex', '.flex', 'display: flex;') +dash.insert("flex", ".flex", "display: flex;"); ``` #### Arguments ```typescript -function createDash(options: CreateDashOptions = {}): Dash +function createDash(options: CreateDashOptions = {}): Dash; ``` | Argument | Type | Required? | Description | @@ -1132,28 +1134,28 @@ export type Dash = { /** * The sheet key */ - readonly key: string + readonly key: string; /** * The default style sheet used by this instance of Dash */ - readonly sheet: DashStyleSheet + readonly sheet: DashStyleSheet; /** * Used for tracking external sheets. You can safely add/delete new * custom sheets using this. Those sheets can be used in the `insert()` * method. The primary reason you'd want to use this is so that you can * create independently flushable styles/sheets. */ - readonly sheets: DashSheets + readonly sheets: DashSheets; /** * The instance of Stylis used by this Dash instance */ - readonly stylis: typeof Stylis + readonly stylis: typeof Stylis; /** * A cache of Stylis rules saved by their keys. This is only used * on the server for generating CSS files and strings from the keys * used in the cache. */ - readonly cache: Map + readonly cache: Map; /** * A function for inserting style rules into the document and cache. * @@ -1168,13 +1170,13 @@ export type Dash = { selector: string, styles: string, styleSheet?: DashStyleSheet - ): void + ): void; /** * An insertion cache. This tracks which keys have already been inserted into * the DOM to prevent duplicates. */ - readonly inserted: Set -} + readonly inserted: Set; +}; ``` ### CreateDashOptions @@ -1197,19 +1199,19 @@ A utility function that will compile style objects and callbacks into CSS string #### Example ```js -import {compileStyles} from '@dash-ui/styles' +import { compileStyles } from "@dash-ui/styles"; const css = compileStyles({ - display: 'flex', - '> * + *': { - marginLeft: '0.5rem', + display: "flex", + "> * + *": { + marginLeft: "0.5rem", }, -}) -console.log(css) +}); +console.log(css); // "display:flex;> * + *{margin-left:0.5rem;}" -const red = compileStyles(({red}) => ({color: red}), {red: 'var(--red)'}) -console.log(red) +const red = compileStyles(({ red }) => ({ color: red }), { red: "var(--red)" }); +console.log(red); // "color:var(--red);" ``` @@ -1223,7 +1225,7 @@ console.log(red) #### Returns ```typescript -string // A CSS string +string; // A CSS string ``` --- @@ -1238,16 +1240,16 @@ well-suited for hashing nearly identical strings. This is the default hash used #### Example ```js -import {hash} from '@dash-ui/styles' +import { hash } from "@dash-ui/styles"; -console.log(hash('foo: bar;')) +console.log(hash("foo: bar;")); // 1rcc4tl ``` #### Arguments ```typescript -function hash(string: string): string +function hash(string: string): string; ``` | Argument | Type | Required? | Description | @@ -1257,7 +1259,7 @@ function hash(string: string): string #### Returns ```typescript -string // A hash of the input string +string; // A hash of the input string ``` --- @@ -1275,21 +1277,21 @@ Gatsby, for example. #### Example ```js -import {styles} from '@dash-ui/styles' -import {createStylesFromCache} from '@dash-ui/styles/server' +import { styles } from "@dash-ui/styles"; +import { createStylesFromCache } from "@dash-ui/styles/server"; // Inserts a new class for `display: flex;` -styles.cls`display: flex;` +styles.cls`display: flex;`; // Reads from the cache -const {css, names} = createStylesFromCache(styles) +const { css, names } = createStylesFromCache(styles); // A CSS string generated from the cache -console.log(css) +console.log(css); // ".ui-1ut9bc3{display:flex;}" // A list of all of the names that were in the cache -console.log(names) +console.log(names); // ["1ut9bc3"] ``` @@ -1297,9 +1299,9 @@ console.log(names) ```typescript export function createStylesFromCache( - styles = require('@dash-ui/styles').styles, + styles = require("@dash-ui/styles").styles, options: CreateServerStylesOptions = {} -): ServerStylesResult +): ServerStylesResult; ``` | Argument | Type | Required? | Default | Description | @@ -1314,11 +1316,11 @@ export interface ServerStylesResult { /** * A CSS string containing all of the styles that were used */ - css: string + css: string; /** * Hash names of all of the styles used in the generated CSS */ - names: string[] + names: string[]; } ``` @@ -1342,17 +1344,17 @@ will dirty the results. This means it will not work with Gatsby, for example. #### Example ```js -import {styles} from '@dash-ui/styles' -import {createStyleTagFromCache} from '@dash-ui/styles/server' +import { styles } from "@dash-ui/styles"; +import { createStyleTagFromCache } from "@dash-ui/styles/server"; // Inserts a new class for `display: flex;` -styles.cls`display: flex;` +styles.cls`display: flex;`; // Reads from the cache -const styleTag = createStyleTagFromCache(styles) +const styleTag = createStyleTagFromCache(styles); // A " ``` @@ -1360,9 +1362,9 @@ console.log(styleTag) ```typescript export function createStyleTagFromCache( - styles = require('@dash-ui/styles').styles, + styles = require("@dash-ui/styles").styles, options: CreateServerStylesOptions = {} -): string +): string; ``` | Argument | Type | Required? | Default | Description | @@ -1373,7 +1375,7 @@ export function createStyleTagFromCache( #### Returns ```typescript -string // A " ``` @@ -1566,8 +1570,8 @@ console.log(styleTag) ```typescript function createStyleTagFromString( html: string, - styles = require('@dash-ui/styles').styles -): string + styles = require("@dash-ui/styles").styles +): string; ``` | Argument | Type | Required? | Default | Description | @@ -1578,7 +1582,7 @@ function createStyleTagFromString( #### Returns ```typescript -string // A ` + }"${nonceString}>${css}`; } /** @@ -62,25 +62,25 @@ export function createStyleTagFromCache( * because multiple pages using the same cache will dirty the results. * This means it will not work with Gatsby, for example. * - * @param outputPath An absolute or relative path dictating where you want to + * @param outputPath - An absolute or relative path dictating where you want to * output the CSS file. - * @param styles A `styles()` instance - * @param options Configuration options + * @param styles - A `styles()` instance + * @param options - Configuration options */ export async function writeStylesFromCache( - outputPath = '', - styles = require('@dash-ui/styles').styles, - options?: WriteServerStylesOptions & {clearCache?: boolean} + outputPath = "", + styles = require("@dash-ui/styles").styles, + options?: WriteServerStylesOptions & { clearCache?: boolean } ): Promise { // Requiring in here prevents webpack errors in stuff like Next.js apps - const fs = require('fs') - const path = require('path') - let {name, hash = styles.hash, clearCache = false} = options || {} - const {css, names} = createStylesFromCache(styles, {clearCache}) - name = `${name || styles.dash.key + '-' + hash(css) + '.css'}` - const filename = path.join(outputPath, name) - await fs.promises.writeFile(filename, css) - return {filename, name, path: outputPath, css, names} + const fs = require("fs"); + const path = require("path"); + let { name, hash = styles.hash, clearCache = false } = options || {}; + const { css, names } = createStylesFromCache(styles, { clearCache }); + name = `${name || styles.dash.key + "-" + hash(css) + ".css"}`; + const filename = path.join(outputPath, name); + await fs.promises.writeFile(filename, css); + return { filename, name, path: outputPath, css, names }; } /** @@ -91,29 +91,29 @@ export async function writeStylesFromCache( * * This is a safe way to generate style strings in an asynchronous environment * - * @param html An HTML string - * @param styles A `styles()` instance + * @param html - An HTML string + * @param styles - A `styles()` instance */ export function createStylesFromString( html: string, - styles = require('@dash-ui/styles').styles + styles = require("@dash-ui/styles").styles ): ServerStylesResult { - const {dash} = styles - const styleCache = dash.cache - const names = new Set(dash.sheets.keys()) + const { dash } = styles; + const styleCache = dash.cache; + const names = new Set(dash.sheets.keys()); - let css = '' - for (let name of names) css += styleCache.get(name) + let css = ""; + for (let name of names) css += styleCache.get(name); - const re = new RegExp(`["\\s'=]${dash.key}-(\\w+)`, 'g') + const re = new RegExp(`["\\s'=]${dash.key}-(\\w+)`, "g"); for (const [, name] of html.matchAll(re)) { if (!names.has(name)) { - css += styleCache.get(name) || '' - names.add(name) + css += styleCache.get(name) || ""; + names.add(name); } } - return {names: [...names], css} + return { names: [...names], css }; } /** @@ -123,21 +123,21 @@ export function createStylesFromString( * * This is a safe way to generate `` + }"${nonceString}>${css}`; } /** @@ -147,37 +147,38 @@ export function createStyleTagFromString( * * This is a safe way to generate `