storybook-addon-pseudo-states 1.0.1 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/CHANGELOG.md +4 -1
  2. package/dist/cjs/withPseudoState.js +29 -3
  3. package/dist/esm/withPseudoState.js +29 -3
  4. package/package.json +7 -7
package/CHANGELOG.md CHANGED
@@ -2,15 +2,18 @@
2
2
 
3
3
  #### 🐛 Bug Fix
4
4
 
5
+ - Add support for custom elements using `:host(:hover)` like styling. [#17](https://github.com/chromaui/storybook-addon-pseudo-states/pull/17) (jeroen.zwartepoorte@iddinkgroup.com [@ghengeveld](https://github.com/ghengeveld))
5
6
  - Setup auto [#7](https://github.com/chromaui/storybook-addon-pseudo-states/pull/7) ([@ghengeveld](https://github.com/ghengeveld))
6
7
 
7
8
  #### ⚠️ Pushed to `main`
8
9
 
10
+ - Upgrade Storybook ([@ghengeveld](https://github.com/ghengeveld))
9
11
  - Ignore .env file ([@ghengeveld](https://github.com/ghengeveld))
10
12
 
11
- #### Authors: 1
13
+ #### Authors: 2
12
14
 
13
15
  - Gert Hengeveld ([@ghengeveld](https://github.com/ghengeveld))
16
+ - Jeroen Zwartepoorte ([@jpzwarte](https://github.com/jpzwarte))
14
17
 
15
18
  ---
16
19
 
package/dist/cjs/withPseudoState.js CHANGED
@@ -123,13 +123,24 @@ var warnOnce = function warnOnce(message) {
123
123
 
124
124
 
125
125
  function rewriteStyleSheets(shadowRoot) {
126
- var _iterator = _createForOfIteratorHelper((shadowRoot || document).styleSheets),
126
+ var _shadowRoot$adoptedSt;
127
+
128
+ var styleSheets = shadowRoot ? shadowRoot.styleSheets : document.styleSheets;
129
+ if (shadowRoot !== null && shadowRoot !== void 0 && (_shadowRoot$adoptedSt = shadowRoot.adoptedStyleSheets) !== null && _shadowRoot$adoptedSt !== void 0 && _shadowRoot$adoptedSt.length) styleSheets = shadowRoot.adoptedStyleSheets;
130
+
131
+ var _iterator = _createForOfIteratorHelper(styleSheets),
127
132
  _step;
128
133
 
129
134
  try {
130
135
  for (_iterator.s(); !(_step = _iterator.n()).done;) {
131
136
  var sheet = _step.value;
132
137
 
138
+ if (sheet._pseudoStatesRewritten) {
139
+ continue;
140
+ } else {
141
+ sheet._pseudoStatesRewritten = true;
142
+ }
143
+
133
144
  try {
134
145
  var index = 0;
135
146
 
@@ -147,10 +158,25 @@ function rewriteStyleSheets(shadowRoot) {
147
158
  if (selector.includes(".pseudo-")) return [];
148
159
  var states = [];
149
160
  var plainSelector = selector.replace(matchAll, function (_, state) {
150
- states.push(".pseudo-".concat(state));
161
+ states.push(state);
151
162
  return "";
152
163
  });
153
- var stateSelector = shadowRoot ? ":host(".concat(states.join(""), ") ").concat(plainSelector) : "".concat(states.join(""), " ").concat(plainSelector);
164
+ var stateSelector;
165
+
166
+ if (selector.startsWith(":host(")) {
167
+ stateSelector = states.reduce(function (acc, state) {
168
+ return acc.replaceAll(":".concat(state), ".pseudo-".concat(state));
169
+ }, selector);
170
+ } else if (shadowRoot) {
171
+ stateSelector = ":host(".concat(states.map(function (s) {
172
+ return ".pseudo-".concat(s);
173
+ }).join(""), ") ").concat(plainSelector);
174
+ } else {
175
+ stateSelector = "".concat(states.map(function (s) {
176
+ return ".pseudo-".concat(s);
177
+ }).join(""), " ").concat(plainSelector);
178
+ }
179
+
154
180
  return [selector, stateSelector];
155
181
  }).join(", "));
156
182
  sheet.deleteRule(index);
package/dist/esm/withPseudoState.js CHANGED
@@ -110,13 +110,24 @@ var warnOnce = function warnOnce(message) {
110
110
 
111
111
 
112
112
  function rewriteStyleSheets(shadowRoot) {
113
- var _iterator = _createForOfIteratorHelper((shadowRoot || document).styleSheets),
113
+ var _shadowRoot$adoptedSt;
114
+
115
+ var styleSheets = shadowRoot ? shadowRoot.styleSheets : document.styleSheets;
116
+ if (shadowRoot !== null && shadowRoot !== void 0 && (_shadowRoot$adoptedSt = shadowRoot.adoptedStyleSheets) !== null && _shadowRoot$adoptedSt !== void 0 && _shadowRoot$adoptedSt.length) styleSheets = shadowRoot.adoptedStyleSheets;
117
+
118
+ var _iterator = _createForOfIteratorHelper(styleSheets),
114
119
  _step;
115
120
 
116
121
  try {
117
122
  for (_iterator.s(); !(_step = _iterator.n()).done;) {
118
123
  var sheet = _step.value;
119
124
 
125
+ if (sheet._pseudoStatesRewritten) {
126
+ continue;
127
+ } else {
128
+ sheet._pseudoStatesRewritten = true;
129
+ }
130
+
120
131
  try {
121
132
  var index = 0;
122
133
 
@@ -134,10 +145,25 @@ function rewriteStyleSheets(shadowRoot) {
134
145
  if (selector.includes(".pseudo-")) return [];
135
146
  var states = [];
136
147
  var plainSelector = selector.replace(matchAll, function (_, state) {
137
- states.push(".pseudo-".concat(state));
148
+ states.push(state);
138
149
  return "";
139
150
  });
140
- var stateSelector = shadowRoot ? ":host(".concat(states.join(""), ") ").concat(plainSelector) : "".concat(states.join(""), " ").concat(plainSelector);
151
+ var stateSelector;
152
+
153
+ if (selector.startsWith(":host(")) {
154
+ stateSelector = states.reduce(function (acc, state) {
155
+ return acc.replaceAll(":".concat(state), ".pseudo-".concat(state));
156
+ }, selector);
157
+ } else if (shadowRoot) {
158
+ stateSelector = ":host(".concat(states.map(function (s) {
159
+ return ".pseudo-".concat(s);
160
+ }).join(""), ") ").concat(plainSelector);
161
+ } else {
162
+ stateSelector = "".concat(states.map(function (s) {
163
+ return ".pseudo-".concat(s);
164
+ }).join(""), " ").concat(plainSelector);
165
+ }
166
+
141
167
  return [selector, stateSelector];
142
168
  }).join(", "));
143
169
  sheet.deleteRule(index);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "storybook-addon-pseudo-states",
3
- "version": "1.0.1",
3
+ "version": "1.0.2",
4
4
  "description": "CSS pseudo states for Storybook",
5
5
  "keywords": [
6
6
  "storybook-addons",
@@ -37,7 +37,7 @@
37
37
  "@babel/core": "^7.12.3",
38
38
  "@babel/preset-env": "^7.12.1",
39
39
  "@babel/preset-react": "^7.12.5",
40
- "@storybook/react": "^6.1.14",
40
+ "@storybook/react": "^6.4.19",
41
41
  "auto": "^10.16.8",
42
42
  "babel-loader": "^8.1.0",
43
43
  "chromatic": "^5.6.0",
@@ -47,11 +47,11 @@
47
47
  "rimraf": "^3.0.2"
48
48
  },
49
49
  "peerDependencies": {
50
- "@storybook/addons": "^6.1.14",
51
- "@storybook/api": "^6.1.14",
52
- "@storybook/components": "^6.1.14",
53
- "@storybook/core-events": "^6.1.14",
54
- "@storybook/theming": "^6.1.14",
50
+ "@storybook/addons": "^6.4.19",
51
+ "@storybook/api": "^6.4.19",
52
+ "@storybook/components": "^6.4.19",
53
+ "@storybook/core-events": "^6.4.19",
54
+ "@storybook/theming": "^6.4.19",
55
55
  "react": "^16.8.0 || ^17.0.0",
56
56
  "react-dom": "^16.8.0 || ^17.0.0"
57
57
  },