Merge pull request #10 from lxsmnsyc/next

0.7.0

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 {
 }
 ```
 
-### `<StyleRegistry>`
-
-`<StyleRegistry>` 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';
-
-<StyleRegistry>
-  <App />
-</StyleRegistry>
-```
-
-For SSR, you can pass an array to the `styles` prop of `<StyleRegistry>`. 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(() => (
-  <StyleRegistry styles={styles}>
-    <App />
-  </StyleRegistry>
-));
-
-// 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}');
 
-<Dynamic component={props.as} data-s-xxxx style={vars()}>
+<Dynamic component={props.as} s:xxxx style={vars()}>
   {props.children}
 </Dynamic>
 ```
@@ -310,6 +276,30 @@ You can also use `<style jsx global>` for declaring global styles.
 
 The main motivation for writing an alternative way of declaring styles with `<style jsx>` is to facilitate the migration from `solid-styled-jsx` to `solid-styled`. Possibly, some developers may as well use `<style jsx>` because of their familiarity with adding the styles inside the JSX.
 
+## SSR
+
+
+### `<StyleRegistry>`
+
+For SSR, you can pass an array to the `styles` prop of `<StyleRegistry>`. 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(() => (
+  <StyleRegistry styles={styles}>
+    <App />
+  </StyleRegistry>
+));
+
+// Render sheets
+// You can use the resulting sheet by inserting
+// it into an HTML template.
+const styles = renderSheets(styles);
+```
+
 ## Limitations
 
 - Scoping `css` can only be called directly on components. This is so that the Babel plugin can find and transform the JSX of the component. Global `css` (i.e. `:global` or `@global`) can be used inside other functions i.e. hooks, utilities.

examples/demo/package.json

@@ -7,10 +7,9 @@
     "serve": "vite preview"
   },
   "devDependencies": {
-    "babel-plugin-solid-styled": "0.6.3",
-    "eslint": "^8.23.1",
+    "eslint": "^8.25.0",
     "eslint-config-lxsmnsyc": "^0.4.8",
-    "typescript": "^4.8.3",
+    "typescript": "^4.8.4",
     "vite": "^3.1.3",
     "vite-plugin-solid": "^2.3.6"
   },

examples/demo/vite.config.js

@@ -1,6 +1,6 @@
 import { defineConfig } from 'vite';
 import solidPlugin from 'vite-plugin-solid';
-import solidStyled from 'babel-plugin-solid-styled';
+import solidStyled from 'solid-styled/babel';
 
 export default defineConfig({
   plugins: [

package.json

@@ -6,9 +6,9 @@
     "examples/*"
   ],
   "devDependencies": {
-    "eslint": "^8.21.0",
+    "eslint": "^8.25.0",
     "eslint-config-lxsmnsyc": "^0.4.8",
-    "lerna": "^5.3.0",
-    "typescript": "^4.7.4"
+    "lerna": "^6.0.0",
+    "typescript": "^4.8.4"
   }
 }