diff --git a/README.md b/README.md index 5c8df94..1f68e30 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. @@ -271,9 +237,9 @@ css` which compiles into ```js -useSolidStyled('xxxx', '*[data-s-xxxx]{color:red}'); +useSolidStyled('xxxx', '*[s\\:xxxx]{color:red}'); - + {props.children} ``` @@ -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..1f68e30 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. @@ -271,9 +237,9 @@ css` which compiles into ```js -useSolidStyled('xxxx', '*[data-s-xxxx]{color:red}'); +useSolidStyled('xxxx', '*[s\\:xxxx]{color:red}'); - + {props.children} ``` @@ -310,6 +276,30 @@ You can also use `