@flourish/ui-styles 5.0.1 → 5.0.3

package/.eslintrc.json

@@ -1,3 +1,7 @@
 {
-    "extends": "../../.eslintrc.cjs"
+    "extends": "../../.eslintrc.cjs",
+    "ignorePatterns": [
+        "ui-styles.js",
+        "ui-styles.min.js"
+    ]
 }

package/RELEASE_NOTES.md

@@ -1,3 +1,9 @@
+# 5.0.3
+* Republish version with pnpm
+
+# 5.0.2
+* Set slider-label box-sizing to content-box so that padding is included
+
 # 5.0.1
 * Fix license annotation
 
@@ -25,4 +31,4 @@
 * Apply font size and weight to control title
 
 # 1.0.0
-* First release
+* First release

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flourish/ui-styles",
-  "version": "5.0.1",
+  "version": "5.0.3",
   "private": false,
   "description": "Flourish module for styling UI elements",
   "main": "ui-styles.js",
@@ -8,14 +8,17 @@
   "author": "Kiln Enterprises Ltd",
   "license": "LicenseRef-LICENSE",
   "dependencies": {
-    "@flourish/pocket-knife": "^1.0.0",
-    "d3-selection": "^1.4.0"
+    "d3-selection": "^1.4.0",
+    "@flourish/pocket-knife": "^1.3.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.20.2",
+    "@babel/preset-env": "^7.20.2",
     "@flourish/eslint-plugin-flourish": "^0.7.2",
+    "@rollup/plugin-babel": "^6.0.4",
     "eslint": "^8.35.0",
-    "rollup": "3",
-    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup": "^4.6.1",
+    "@rollup/plugin-node-resolve": "^15.2.3",
     "uglify-js": "^3.17.4"
   },
   "repository": {

package/rollup.config.mjs

@@ -1,4 +1,7 @@
-import nodeResolve from "rollup-plugin-node-resolve";
+import nodeResolve from "@rollup/plugin-node-resolve";
+import babel from "@rollup/plugin-babel";
+
+const is_production = process.env.NODE_ENV === "production" || !!process.env.CI;
 
 export default {
 	input: "src/index.js",
@@ -8,7 +11,8 @@ export default {
 		name: "ui-styles"
 	},
 	plugins: [
-		nodeResolve()
+		nodeResolve(),
+		is_production && babel({ babelHelpers: "bundled", rootMode: "upward" }),
 	],
 	onwarn: function (warning, warn) {
 		if (warning.code === "CIRCULAR_DEPENDENCY") return;

package/src/button-style/index.js

@@ -1,5 +1,5 @@
 import { hexToRgba, getTextDirection } from "@flourish/pocket-knife";
-import Stylesheet from "../lib/js2css";
+import Stylesheet from "../lib/js2css.js";
 
 var DEFAULTS = Object.freeze({
 	background: null,

package/src/dropdown-style/index.js

@@ -1,5 +1,5 @@
 import { hexToRgba } from "@flourish/pocket-knife";
-import Stylesheet from "../lib/js2css";
+import Stylesheet from "../lib/js2css.js";
 
 var DEFAULTS = Object.freeze({
 	background: null,

package/src/general-controls-style/index.js

@@ -1,4 +1,4 @@
-import Stylesheet from "../lib/js2css";
+import Stylesheet from "../lib/js2css.js";
 
 var DEFAULTS = Object.freeze({
 	font_size: 1,

package/src/index.js

@@ -1,7 +1,7 @@
-import GeneralControlsStyle from "./general-controls-style";
-import ButtonStyle from "./button-style";
-import DropdownStyle from "./dropdown-style";
-import SliderStyle from "./slider-style";
+import GeneralControlsStyle from "./general-controls-style/index.js";
+import ButtonStyle from "./button-style/index.js";
+import DropdownStyle from "./dropdown-style/index.js";
+import SliderStyle from "./slider-style/index.js";
 
 function createGeneralControlsStyle(state, selector, layout) {
 	return new GeneralControlsStyle(state, selector, layout);

package/src/slider-style/index.js

@@ -1,5 +1,5 @@
-import { remToPx } from "../lib/remToPx";
-import Stylesheet from "../lib/js2css";
+import { remToPx } from "../lib/remToPx.js";
+import Stylesheet from "../lib/js2css.js";
 
 var DEFAULTS = Object.freeze({
 	play_color: null,
@@ -56,6 +56,7 @@ SliderStyle.prototype.update = function() {
 
 	this._styles.select(this._selector + " .slider-label")
 		.style("padding-inline-start", "0.3rem")
+		.style("box-sizing", "content-box")
 		.style("color", text_color);
 
 	this._styles.select(this._selector + " input[type=range]")

package/ui-styles.js

@@ -866,6 +866,7 @@
 
 		this._styles.select(this._selector + " .slider-label")
 			.style("padding-inline-start", "0.3rem")
+			.style("box-sizing", "content-box")
 			.style("color", text_color);
 
 		this._styles.select(this._selector + " input[type=range]")