From 354f7c4b806a080be23178c3a6798c4f5fd7586e Mon Sep 17 00:00:00 2001 From: Alexis Munsayac Date: Thu, 13 Oct 2022 14:57:03 +0800 Subject: [PATCH 1/7] Change to namespace `s` --- .../babel-plugin-solid-styled/src/index.ts | 19 +++++++++++++------ packages/solid-styled/src/core.ts | 5 +++-- 2 files changed, 16 insertions(+), 8 deletions(-) diff --git a/packages/babel-plugin-solid-styled/src/index.ts b/packages/babel-plugin-solid-styled/src/index.ts index ad5cbb8..dbc573c 100644 --- a/packages/babel-plugin-solid-styled/src/index.ts +++ b/packages/babel-plugin-solid-styled/src/index.ts @@ -9,9 +9,12 @@ function getFileId(file: string) { return xxHash32(file).toString(16); } +// The identifier for the tagged template const TAGGED_TEMPLATE = 'css'; +// The module const SOURCE_MODULE = 'solid-styled'; -const SOLID_STYLED_ATTR = 'data-s'; +// The namespace used for scoping +const SOLID_STYLED_NS = 's'; const VARS_ID = 'vars'; const SHEET_ID = 'sheet'; const GLOBAL_SELECTOR = 'global'; @@ -82,8 +85,9 @@ function checkScopedAttribute(opening: t.JSXOpeningElement, sheetID: string): bo const attr = opening.attributes[i]; if ( t.isJSXAttribute(attr) - && t.isJSXIdentifier(attr.name) - && attr.name.name === `${SOLID_STYLED_ATTR}-${sheetID}` + && t.isJSXNamespacedName(attr.name) + && attr.name.namespace.name === SOLID_STYLED_NS + && attr.name.name.name === sheetID ) { return true; } @@ -195,7 +199,10 @@ function transformJSX( return; } opening.attributes.push(t.jsxAttribute( - t.jsxIdentifier(`${SOLID_STYLED_ATTR}-${sheet.scope}`), + t.jsxNamespacedName( + t.jsxIdentifier(SOLID_STYLED_NS), + t.jsxIdentifier(sheet.scope), + ), )); // Check if there's any dynamic vars call if (!ctx.vars.has(functionParent)) { @@ -276,12 +283,12 @@ function processScopedSheet( sheetID: string, ast: csstree.CssNode, ) { - // [data-s-${sheetID}] + // [s\:${sheetID}] const selector: csstree.AttributeSelector = { type: 'AttributeSelector', name: { type: 'Identifier', - name: `${SOLID_STYLED_ATTR}-${sheetID}`, + name: `${SOLID_STYLED_NS}\\:${sheetID}`, }, matcher: null, flags: null, diff --git a/packages/solid-styled/src/core.ts b/packages/solid-styled/src/core.ts index dab39ed..b3ca0ca 100644 --- a/packages/solid-styled/src/core.ts +++ b/packages/solid-styled/src/core.ts @@ -16,7 +16,8 @@ interface StyleRegistryContext { const StyleRegistryContext = createContext(); -const SOLID_SHEET_ATTR = 'data-s'; +const SOLID_SHEET_ATTR = 's:id'; +const SOLID_SHEET_ATTR_ESCAPED = 's\\:id'; export interface StyleData { id: string; @@ -33,7 +34,7 @@ export function StyleRegistry(props: StyleRegistryProps): JSX.Element { const references = new Map(); if (!isServer) { - document.head.querySelectorAll(`style[${SOLID_SHEET_ATTR}]`).forEach((node) => { + document.head.querySelectorAll(`style[${SOLID_SHEET_ATTR_ESCAPED}]`).forEach((node) => { tracked.add(node.getAttribute(SOLID_SHEET_ATTR)); }); } From 1fc17ca7cc8c0d6e60837ce3a5abe61197feace7 Mon Sep 17 00:00:00 2001 From: Alexis Munsayac Date: Thu, 13 Oct 2022 15:31:12 +0800 Subject: [PATCH 2/7] Allow optional registry for CSR; fix shared style management for multiple roots --- packages/solid-styled/src/core.ts | 83 +++++++++++++++++-------------- 1 file changed, 45 insertions(+), 38 deletions(-) diff --git a/packages/solid-styled/src/core.ts b/packages/solid-styled/src/core.ts index b3ca0ca..9447bc8 100644 --- a/packages/solid-styled/src/core.ts +++ b/packages/solid-styled/src/core.ts @@ -19,6 +19,44 @@ const StyleRegistryContext = createContext(); const SOLID_SHEET_ATTR = 's:id'; const SOLID_SHEET_ATTR_ESCAPED = 's\\:id'; +const tracked = new Set(); +const references = new Map(); + +// Hydrate the sheets +if (!isServer) { + document.head.querySelectorAll(`style[${SOLID_SHEET_ATTR_ESCAPED}]`).forEach((node) => { + tracked.add(node.getAttribute(SOLID_SHEET_ATTR)); + }); +} + +function insert(id: string, sheet: string) { + if (!tracked.has(id)) { + tracked.add(id); + + if (!isServer) { + const node = document.createElement('style'); + node.setAttribute(SOLID_SHEET_ATTR, id); + node.innerHTML = sheet; + document.head.appendChild(node); + } + } + references.set(id, (references.get(id) ?? 0) + 1); +} + +function remove(id: string) { + const count = references.get(id) ?? 0; + if (count > 1) { + references.set(id, count - 1); + } else { + references.set(id, 0); + const node = document.head.querySelector(`style[${SOLID_SHEET_ATTR}="${id}"]`); + if (node) { + document.head.removeChild(node); + } + tracked.delete(id); + } +} + export interface StyleData { id: string; sheet: string; @@ -30,48 +68,21 @@ export interface StyleRegistryProps { } export function StyleRegistry(props: StyleRegistryProps): JSX.Element { - const tracked = new Set(); - const references = new Map(); - - if (!isServer) { - document.head.querySelectorAll(`style[${SOLID_SHEET_ATTR_ESCAPED}]`).forEach((node) => { - tracked.add(node.getAttribute(SOLID_SHEET_ATTR)); - }); - } - - function insert(id: string, sheet: string) { - if (!tracked.has(id)) { - tracked.add(id); + const sheets = new Set(); + function wrappedInsert(id: string, sheet: string) { + if (!sheets.has(id)) { + sheets.add(id); if (isServer) { props.styles?.push({ id, sheet }); - } else { - const node = document.createElement('style'); - node.setAttribute(SOLID_SHEET_ATTR, id); - node.innerHTML = sheet; - document.head.appendChild(node); } } - references.set(id, (references.get(id) ?? 0) + 1); - } - - function remove(id: string) { - const count = references.get(id) ?? 0; - if (count > 1) { - references.set(id, count - 1); - } else { - references.set(id, 0); - const node = document.head.querySelector(`style[${SOLID_SHEET_ATTR}="${id}"]`); - if (node) { - document.head.removeChild(node); - } - tracked.delete(id); - } + insert(id, sheet); } return ( createComponent(StyleRegistryContext.Provider, { - value: { insert, remove }, + value: { insert: wrappedInsert, remove }, get children() { return props.children; }, @@ -85,11 +96,7 @@ export function useSolidStyled( id: string, sheet: string, ): void { - const ctx = useContext(StyleRegistryContext); - - if (!ctx) { - throw new Error('Missing StyleRegistry'); - } + const ctx = useContext(StyleRegistryContext) ?? { insert, remove }; ctx.insert(id, sheet); onCleanup(() => ctx.remove(id)); } From ecc233ca4c6b2d4fe0bae4f051c4f9dae824568e Mon Sep 17 00:00:00 2001 From: Alexis Munsayac Date: Thu, 13 Oct 2022 15:35:25 +0800 Subject: [PATCH 3/7] Fix fragment replacement with empty text --- packages/babel-plugin-solid-styled/src/index.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/babel-plugin-solid-styled/src/index.ts b/packages/babel-plugin-solid-styled/src/index.ts index dbc573c..d477e85 100644 --- a/packages/babel-plugin-solid-styled/src/index.ts +++ b/packages/babel-plugin-solid-styled/src/index.ts @@ -510,11 +510,7 @@ export default function solidStyledPlugin(): PluginObj { } } } - path.replaceWith(t.jsxFragment( - t.jsxOpeningFragment(), - t.jsxClosingFragment(), - [], - )); + path.replaceWith(t.jsxText('')); } }, TaggedTemplateExpression(path) { From 18566ca49c32bcfcf5e185ce8425e2e7e7396829 Mon Sep 17 00:00:00 2001 From: Alexis Munsayac Date: Thu, 13 Oct 2022 15:51:38 +0800 Subject: [PATCH 4/7] Fix support for namespace import --- .../babel-plugin-solid-styled/src/index.ts | 313 ++++++++++-------- 1 file changed, 180 insertions(+), 133 deletions(-) diff --git a/packages/babel-plugin-solid-styled/src/index.ts b/packages/babel-plugin-solid-styled/src/index.ts index d477e85..d11f41c 100644 --- a/packages/babel-plugin-solid-styled/src/index.ts +++ b/packages/babel-plugin-solid-styled/src/index.ts @@ -401,6 +401,150 @@ function processTemplate( }; } +function processJSXTemplate( + ctx: StateContext, + programPath: NodePath, + path: NodePath, +) { + const opening = path.node.openingElement; + if (!t.isJSXIdentifier(opening.name)) { + return; + } + if (opening.name.name !== 'style') { + return; + } + let isGlobal = false; + let isJSX = false; + for (let i = 0, len = opening.attributes.length; i < len; i += 1) { + const attr = opening.attributes[i]; + if (t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name)) { + if (attr.name.name === 'jsx') { + isJSX = true; + } + if (attr.name.name === 'global') { + isGlobal = true; + } + } + } + if (!isJSX) { + return; + } + const functionParent = path.scope.getFunctionParent(); + if (functionParent) { + const sheet = generateSheet( + ctx, + functionParent, + ); + const statement = path.getStatementParent(); + if (statement) { + for (let i = 0, len = path.node.children.length; i < len; i += 1) { + const child = path.node.children[i]; + if (t.isJSXExpressionContainer(child) && t.isTemplateLiteral(child.expression)) { + const { sheet: compiledSheet, variables } = processTemplate( + ctx, + sheet.scope, + child.expression, + !isGlobal, + ); + + const cssID = programPath.scope.generateUidIdentifier('css'); + + programPath.scope.push({ + id: cssID, + init: t.stringLiteral(compiledSheet), + kind: 'const', + }); + + const current = sheet.count += 1; + sheet.count = current; + + const vars = generateVars(ctx, path, functionParent); + statement.insertBefore(t.expressionStatement( + t.sequenceExpression([ + t.callExpression( + getHookIdentifier(ctx, path, 'useSolidStyled', SOURCE_MODULE), + [ + t.binaryExpression('+', sheet.id, t.stringLiteral(`-${current}`)), + cssID, + ], + ), + ...( + variables.length + ? [t.callExpression( + vars, + [t.arrowFunctionExpression([], t.objectExpression(variables))], + )] + : [] + ), + ]), + )); + + transformJSX(ctx, functionParent); + } + } + } + path.replaceWith(t.jsxText('')); + } +} + +function processTaggedTemplate( + ctx: StateContext, + programPath: NodePath, + path: NodePath, +) { + // Get the function parent first + const functionParent = path.scope.getFunctionParent(); + if (functionParent) { + const sheet = generateSheet( + ctx, + functionParent, + ); + + // Convert template into a CSS sheet + const { sheet: compiledSheet, variables } = processTemplate( + ctx, + sheet.scope, + path.node.quasi, + true, + ); + + const cssID = programPath.scope.generateUidIdentifier('css'); + + programPath.scope.push({ + id: cssID, + init: t.stringLiteral(compiledSheet), + kind: 'const', + }); + + const current = sheet.count += 1; + sheet.count = current; + + const vars = generateVars(ctx, path, functionParent); + + path.replaceWith(t.expressionStatement( + t.sequenceExpression([ + t.callExpression( + getHookIdentifier(ctx, path, 'useSolidStyled', SOURCE_MODULE), + [ + t.binaryExpression('+', sheet.id, t.stringLiteral(`-${current}`)), + cssID, + ], + ), + ...( + variables.length + ? [t.callExpression( + vars, + [t.arrowFunctionExpression([], t.objectExpression(variables))], + )] + : [] + ), + ]), + )); + + transformJSX(ctx, functionParent); + } +} + type State = babel.PluginPass & { opts: SolidStyledOptions }; export default function solidStyledPlugin(): PluginObj { @@ -409,6 +553,7 @@ export default function solidStyledPlugin(): PluginObj { visitor: { Program(programPath, state) { const validIdentifiers = new Set(); + const validNamespaces = new Set(); const ctx: StateContext = { hooks: new Map(), sheets: new WeakMap(), @@ -428,151 +573,53 @@ export default function solidStyledPlugin(): PluginObj { && isValidSpecifier(specifier) ) { validIdentifiers.add(specifier.local); + } else if (t.isImportNamespaceSpecifier(specifier)) { + validNamespaces.add(specifier.local); } } } }, JSXElement(path) { - const opening = path.node.openingElement; - if (!t.isJSXIdentifier(opening.name)) { - return; - } - if (opening.name.name !== 'style') { - return; - } - let isGlobal = false; - let isJSX = false; - for (let i = 0, len = opening.attributes.length; i < len; i += 1) { - const attr = opening.attributes[i]; - if (t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name)) { - if (attr.name.name === 'jsx') { - isJSX = true; - } - if (attr.name.name === 'global') { - isGlobal = true; - } - } - } - if (!isJSX) { - return; - } - const functionParent = path.scope.getFunctionParent(); - if (functionParent) { - const sheet = generateSheet( - ctx, - functionParent, - ); - const statement = path.getStatementParent(); - if (statement) { - for (let i = 0, len = path.node.children.length; i < len; i += 1) { - const child = path.node.children[i]; - if (t.isJSXExpressionContainer(child) && t.isTemplateLiteral(child.expression)) { - const { sheet: compiledSheet, variables } = processTemplate( - ctx, - sheet.scope, - child.expression, - !isGlobal, - ); - - const cssID = programPath.scope.generateUidIdentifier('css'); - - programPath.scope.push({ - id: cssID, - init: t.stringLiteral(compiledSheet), - kind: 'const', - }); - - const current = sheet.count += 1; - sheet.count = current; - - const vars = generateVars(ctx, path, functionParent); - statement.insertBefore(t.expressionStatement( - t.sequenceExpression([ - t.callExpression( - getHookIdentifier(ctx, path, 'useSolidStyled', SOURCE_MODULE), - [ - t.binaryExpression('+', sheet.id, t.stringLiteral(`-${current}`)), - cssID, - ], - ), - ...( - variables.length - ? [t.callExpression( - vars, - [t.arrowFunctionExpression([], t.objectExpression(variables))], - )] - : [] - ), - ]), - )); - - transformJSX(ctx, functionParent); - } - } - } - path.replaceWith(t.jsxText('')); - } + processJSXTemplate( + ctx, + programPath, + path, + ); }, TaggedTemplateExpression(path) { + if (!t.isStatement(path.parent)) { + return; + } const { tag } = path.node; if (t.isIdentifier(tag)) { - const binding = path.scope.getBinding(tag.name); + const binding = path.scope.getBindingIdentifier(tag.name); if ( binding - && validIdentifiers.has(binding.identifier) - && t.isStatement(path.parent) + && validIdentifiers.has(binding) ) { - // Get the function parent first - const functionParent = path.scope.getFunctionParent(); - if (functionParent) { - const sheet = generateSheet( - ctx, - functionParent, - ); - - // Convert template into a CSS sheet - const { sheet: compiledSheet, variables } = processTemplate( - ctx, - sheet.scope, - path.node.quasi, - true, - ); - - const cssID = programPath.scope.generateUidIdentifier('css'); - - programPath.scope.push({ - id: cssID, - init: t.stringLiteral(compiledSheet), - kind: 'const', - }); - - const current = sheet.count += 1; - sheet.count = current; - - const vars = generateVars(ctx, path, functionParent); - - path.replaceWith(t.expressionStatement( - t.sequenceExpression([ - t.callExpression( - getHookIdentifier(ctx, path, 'useSolidStyled', SOURCE_MODULE), - [ - t.binaryExpression('+', sheet.id, t.stringLiteral(`-${current}`)), - cssID, - ], - ), - ...( - variables.length - ? [t.callExpression( - vars, - [t.arrowFunctionExpression([], t.objectExpression(variables))], - )] - : [] - ), - ]), - )); - - transformJSX(ctx, functionParent); - } + processTaggedTemplate( + ctx, + programPath, + path, + ); + } + } else if ( + t.isMemberExpression(tag) + && t.isIdentifier(tag.object) + && t.isIdentifier(tag.property) + && !tag.computed + ) { + const targetName = tag.property.name; + const binding = path.scope.getBindingIdentifier(tag.object.name); + if ( + binding + && validNamespaces.has(binding) + ) { + processTaggedTemplate( + ctx, + programPath, + path, + ); } } }, From 42c0fe441f1c1ab4c435abf219acdab0010843f7 Mon Sep 17 00:00:00 2001 From: Alexis Munsayac Date: Thu, 13 Oct 2022 18:04:16 +0800 Subject: [PATCH 5/7] Move babel plugin to `solid-styled/babel` --- README.md | 66 +- examples/demo/package.json | 5 +- examples/demo/vite.config.js | 2 +- package.json | 6 +- .../babel-plugin-solid-styled/.eslintrc.js | 17 - packages/babel-plugin-solid-styled/.gitignore | 107 -- packages/babel-plugin-solid-styled/LICENSE | 7 - packages/babel-plugin-solid-styled/README.md | 36 - packages/babel-plugin-solid-styled/example.js | 65 - .../babel-plugin-solid-styled/package.json | 78 - .../babel-plugin-solid-styled/pridepack.json | 6 - .../tsconfig.eslint.json | 21 - .../babel-plugin-solid-styled/tsconfig.json | 21 - packages/solid-styled/README.md | 66 +- .../src => solid-styled/babel}/env.d.ts | 0 .../src => solid-styled/babel}/index.ts | 21 +- packages/solid-styled/package.json | 33 +- packages/solid-styled/pridepack.json | 6 +- packages/solid-styled/tsconfig.eslint.json | 2 +- packages/solid-styled/tsconfig.json | 4 +- pnpm-lock.yaml | 1662 +++++++---------- 21 files changed, 821 insertions(+), 1410 deletions(-) delete mode 100644 packages/babel-plugin-solid-styled/.eslintrc.js delete mode 100644 packages/babel-plugin-solid-styled/.gitignore delete mode 100644 packages/babel-plugin-solid-styled/LICENSE delete mode 100644 packages/babel-plugin-solid-styled/README.md delete mode 100644 packages/babel-plugin-solid-styled/example.js delete mode 100644 packages/babel-plugin-solid-styled/package.json delete mode 100644 packages/babel-plugin-solid-styled/pridepack.json delete mode 100644 packages/babel-plugin-solid-styled/tsconfig.eslint.json delete mode 100644 packages/babel-plugin-solid-styled/tsconfig.json rename packages/{babel-plugin-solid-styled/src => solid-styled/babel}/env.d.ts (100%) rename packages/{babel-plugin-solid-styled/src => solid-styled/babel}/index.ts (96%) diff --git a/README.md b/README.md index 5c8df94..90dee26 100644 --- a/README.md +++ b/README.md @@ -8,17 +8,14 @@ ```bash npm i solid-styled -npm i -D babel-plugin-solid-styled ``` ```bash yarn add solid-styled -yarn add -D babel-plugin-solid-styled ``` ```bash pnpm add solid-styled -pnpm add -D babel-plugin-solid-styled ``` ## Features @@ -34,12 +31,12 @@ pnpm add -D babel-plugin-solid-styled ## Usage -For `solid-styled` to make its magic work properly, you need to add the `babel-plugin-solid-styled` plugin in the babel configuration: +For `solid-styled` to make its magic work properly, you need to add the `solid-styled/babel` plugin in the babel configuration: ### Vite ```js -import solidStyled from 'babel-plugin-solid-styled'; +import solidStyled from 'solid-styled/babel'; export default { plugins: [ @@ -57,7 +54,7 @@ export default { ### SolidStart / Astro / any Vite SSR framework ```js -import solidStyled from 'babel-plugin-solid-styled'; +import solidStyled from 'solid-styled/babel'; export default { plugins: [ @@ -77,7 +74,7 @@ export default { ```js { "plugins": [ - "babel-plugin-solid-styled" + "solid-styled/babel" ] } ``` @@ -102,37 +99,6 @@ export default { } ``` -### `` - -`` manages the lifecycle of stylesheets (for instance, on the client side, styles of a component get removed from memory if all instances of that component unmount). It needs to be included only once, preferably at the root of your SolidJS application. - -```js -import { StyleRegistry } from 'solid-styled'; - - - - -``` - -For SSR, you can pass an array to the `styles` prop of ``. This array collects all of the "critical" (initial render) stylesheets, that which you can render as a string with `renderSheets`. - -```js -import { renderSheets } from 'solid-styled'; - -const styles = []; - -renderToString(() => ( - - - -)); - -// Render sheets -// You can use the resulting sheet by inserting -// it into an HTML template. -const styles = renderSheets(styles); -``` - ### `css` Use the `css` tagged template for writing stylesheets. @@ -310,6 +276,30 @@ You can also use ` - - - - -
- -
- - - ); -} -`, { - plugins: [ - [plugin, { verbose: true }] - ], - parserOpts: { - plugins: [ - 'jsx' - ] - } -}).then((result) => console.log(result.code)); \ No newline at end of file diff --git a/packages/babel-plugin-solid-styled/package.json b/packages/babel-plugin-solid-styled/package.json deleted file mode 100644 index afdc8c1..0000000 --- a/packages/babel-plugin-solid-styled/package.json +++ /dev/null @@ -1,78 +0,0 @@ -{ - "name": "babel-plugin-solid-styled", - "version": "0.6.3", - "type": "module", - "exports": { - ".": { - "development": { - "require": "./dist/cjs/development/index.cjs", - "import": "./dist/esm/development/index.mjs" - }, - "require": "./dist/cjs/production/index.cjs", - "import": "./dist/esm/production/index.mjs", - "types": "./dist/types/index.d.ts" - } - }, - "files": [ - "dist", - "src" - ], - "engines": { - "node": ">=10" - }, - "license": "MIT", - "devDependencies": { - "@babel/core": "^7.18.5", - "@types/babel__core": "^7.1.19", - "@types/babel__traverse": "^7.17.1", - "@types/node": "^18.7.3", - "eslint": "^8.21.0", - "eslint-config-lxsmnsyc": "^0.4.8", - "pridepack": "2.3.0", - "solid-styled": "0.6.3", - "tslib": "^2.4.0", - "typescript": "^4.7.4" - }, - "peerDependencies": { - "@babel/core": "^7.16" - }, - "description": "Babel plugin for solid-styled", - "repository": { - "url": "https://github.com/lxsmnsyc/solid-styled.git", - "type": "git" - }, - "homepage": "https://github.com/lxsmnsyc/solid-styled/tree/main/packages/babel-plugin-solid-styled", - "bugs": { - "url": "https://github.com/lxsmnsyc/solid-styled/issues" - }, - "publishConfig": { - "access": "public" - }, - "author": "Alexis Munsayac", - "private": false, - "scripts": { - "prepublishOnly": "pridepack clean && pridepack build", - "build": "pridepack build", - "type-check": "pridepack check", - "lint": "pridepack lint", - "test": "pridepack test --passWithNoTests", - "clean": "pridepack clean", - "watch": "pridepack watch", - "start": "pridepack start", - "dev": "pridepack dev" - }, - "dependencies": { - "@babel/helper-module-imports": "^7.16.7", - "@babel/traverse": "^7.17.9", - "@babel/types": "^7.17.0", - "@types/css-tree": "^1.0.7", - "css-tree": "^2.1.0", - "js-xxhash": "^1.0.4" - }, - "typesVersions": { - "*": {} - }, - "types": "./dist/types/index.d.ts", - "main": "./dist/cjs/production/index.cjs", - "module": "./dist/esm/production/index.mjs" -} diff --git a/packages/babel-plugin-solid-styled/pridepack.json b/packages/babel-plugin-solid-styled/pridepack.json deleted file mode 100644 index a3dfbbe..0000000 --- a/packages/babel-plugin-solid-styled/pridepack.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "target": "es2017", - "jest": { - "preset": "ts-jest" - } -} \ No newline at end of file diff --git a/packages/babel-plugin-solid-styled/tsconfig.eslint.json b/packages/babel-plugin-solid-styled/tsconfig.eslint.json deleted file mode 100644 index 5c9c775..0000000 --- a/packages/babel-plugin-solid-styled/tsconfig.eslint.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "exclude": ["node_modules"], - "include": ["src", "types", "test"], - "compilerOptions": { - "module": "ESNext", - "lib": ["ESNext"], - "importHelpers": true, - "declaration": true, - "sourceMap": true, - "rootDir": "./", - "strict": true, - "noUnusedLocals": true, - "noUnusedParameters": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true, - "moduleResolution": "node", - "jsx": "react", - "esModuleInterop": true, - "target": "ES2017" - } -} diff --git a/packages/babel-plugin-solid-styled/tsconfig.json b/packages/babel-plugin-solid-styled/tsconfig.json deleted file mode 100644 index ff42f54..0000000 --- a/packages/babel-plugin-solid-styled/tsconfig.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "exclude": ["node_modules"], - "include": ["src", "types"], - "compilerOptions": { - "module": "ESNext", - "lib": ["ESNext"], - "importHelpers": true, - "declaration": true, - "sourceMap": true, - "rootDir": "./src", - "strict": true, - "noUnusedLocals": true, - "noUnusedParameters": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true, - "moduleResolution": "node", - "jsx": "react", - "esModuleInterop": true, - "target": "ES2017" - } -} diff --git a/packages/solid-styled/README.md b/packages/solid-styled/README.md index 5c8df94..90dee26 100644 --- a/packages/solid-styled/README.md +++ b/packages/solid-styled/README.md @@ -8,17 +8,14 @@ ```bash npm i solid-styled -npm i -D babel-plugin-solid-styled ``` ```bash yarn add solid-styled -yarn add -D babel-plugin-solid-styled ``` ```bash pnpm add solid-styled -pnpm add -D babel-plugin-solid-styled ``` ## Features @@ -34,12 +31,12 @@ pnpm add -D babel-plugin-solid-styled ## Usage -For `solid-styled` to make its magic work properly, you need to add the `babel-plugin-solid-styled` plugin in the babel configuration: +For `solid-styled` to make its magic work properly, you need to add the `solid-styled/babel` plugin in the babel configuration: ### Vite ```js -import solidStyled from 'babel-plugin-solid-styled'; +import solidStyled from 'solid-styled/babel'; export default { plugins: [ @@ -57,7 +54,7 @@ export default { ### SolidStart / Astro / any Vite SSR framework ```js -import solidStyled from 'babel-plugin-solid-styled'; +import solidStyled from 'solid-styled/babel'; export default { plugins: [ @@ -77,7 +74,7 @@ export default { ```js { "plugins": [ - "babel-plugin-solid-styled" + "solid-styled/babel" ] } ``` @@ -102,37 +99,6 @@ export default { } ``` -### `` - -`` manages the lifecycle of stylesheets (for instance, on the client side, styles of a component get removed from memory if all instances of that component unmount). It needs to be included only once, preferably at the root of your SolidJS application. - -```js -import { StyleRegistry } from 'solid-styled'; - - - - -``` - -For SSR, you can pass an array to the `styles` prop of ``. This array collects all of the "critical" (initial render) stylesheets, that which you can render as a string with `renderSheets`. - -```js -import { renderSheets } from 'solid-styled'; - -const styles = []; - -renderToString(() => ( - - - -)); - -// Render sheets -// You can use the resulting sheet by inserting -// it into an HTML template. -const styles = renderSheets(styles); -``` - ### `css` Use the `css` tagged template for writing stylesheets. @@ -310,6 +276,30 @@ You can also use `