styled-components-jsx 1.0.1 → 1.0.3

package/README.md

@@ -9,23 +9,6 @@ Write styles like [`styled-components`](https://www.npmjs.com/package/styled-com
 
 If you love the simplicity and performance of `styled-jsx` but prefer the ergonomic syntax of `styled-components`, this library gives you the best of both worlds.
 
----
-
-## 🚀 Installation
-> ⚠️ Requires [`styled-jsx`](https://www.npmjs.com/package/styled-jsx) to be installed and configured in your app.
-
-
-With **Yarn**:
-```bash
-yarn add styled-components-jsx
-```
-
-With **npm**:
-```bash
-npm install styled-components-jsx
-```
-
-
 ---
 
 ## ✨ Basic Usage
@@ -73,9 +56,79 @@ This library wraps your styles using `styled-jsx`, giving you:
 - Support for both DOM elements and custom React components
 - Automatic prop filtering (`$`-prefixed props are stripped from DOM)
 
+---
+
+## 🚀 Installation
+
+> ⚠️ This package requires [`styled-jsx`](https://www.npmjs.com/package/styled-jsx) to be installed and properly processed by Babel.  
+> If you're using **Next.js**, it works with minimal configuration. For other setups (Vite, Webpack, etc.), you may need to configure Babel manually.
+
+Install with **Yarn**:
+
+```bash
+yarn add styled-components-jsx
+```
+
+Or with **npm**:
+
+```bash
+npm install styled-components-jsx
+```
 
 ---
 
+### ✅ If you're using **Next.js**
+
+Make sure to enable transpilation for this package inside your `next.config.js`:
+
+```js
+// next.config.js
+const nextConfig = {
+  transpilePackages: ['styled-components-jsx'],
+}
+
+module.exports = nextConfig
+```
+
+This ensures that `styled-components-jsx` is properly handled by Next.js' Babel pipeline, including the `styled-jsx` plugin.
+
+---
+
+### ⚠️ If you're **not using Next.js**
+
+You must ensure that your Webpack (or Vite/Rollup) build pipeline:
+
+- Applies **Babel** to `node_modules/styled-components-jsx`
+- Includes the [`styled-jsx/babel`](https://www.npmjs.com/package/styled-jsx#with-babel) plugin
+
+Here's a minimal Babel config example:
+
+```json
+{
+  "presets": ["@babel/preset-react", "@babel/preset-typescript"],
+  "plugins": ["styled-jsx/babel"]
+}
+```
+
+And in Webpack:
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        include: /node_modules\/styled-components-jsx/,
+        use: 'babel-loader',
+      },
+    ],
+  },
+}
+```
+
+---
+
+
 ## 🛠 Configuration
 
 For full setup (e.g., Babel, SSR, Next.js), refer to the [`styled-jsx` documentation](https://github.com/vercel/styled-jsx).

package/package.json

@@ -1,7 +1,8 @@
 {
-  "version": "1.0.1",
+  "version": "1.0.3",
   "license": "MIT",
   "name": "styled-components-jsx",
+  "type": "module",
   "author": {
     "email": "freshcrowd@gmail.com",
     "name": "Denis Orlov",
@@ -23,24 +24,14 @@
     "react-typescript",
     "typescript"
   ],
-  "module": "dist/styled-components-jsx.esm.js",
-  "main": "dist/index.js",
-  "typings": "dist/index.d.ts",
+  "main": "./src/index.tsx",
+  "types": "./src/index.tsx",
   "files": [
-    "dist"
+    "src"
   ],
   "scripts": {
-    "start": "tsdx watch",
-    "build": "tsdx build",
-    "lint": "tsdx lint",
-    "prepare": "install-peers && tsdx build",
     "postinstall": "manypkg fix && manypkg check"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "tsdx lint"
-    }
-  },
   "prettier": {
     "printWidth": 100,
     "trailingComma": "es5",
@@ -71,7 +62,6 @@
   "devDependencies": {
     "@eslint/js": "9.24.0",
     "@manypkg/cli": "0.23.0",
-    "@next/eslint-plugin-next": "^15.3.0",
     "@types/react": "^18.0.0 ||^19.0.0",
     "@types/react-dom": "^19.1.2",
     "@types/styled-jsx": "3.4.4",
@@ -87,14 +77,9 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-security": "3.0.1",
     "eslint-plugin-unicorn": "58.0.0",
-    "husky": "^9.1.7",
-    "install-peers-cli": "^2.2.0",
     "prettier": "3.5.3",
     "react": "^18.0.0 ||^19.0.0",
     "react-dom": "^18.0.0 ||^19.0.0",
-    "semantic-release": "24.2.3",
-    "tsdx": "^0.14.1",
-    "tslib": "^2.8.1",
     "typescript": "5.8.3",
     "typescript-eslint": "^8.29.1"
   }

package/src/helpers/minifyLess.ts

@@ -0,0 +1,22 @@
+/* Precompile regular expressions */
+const commentRegex = /\/\*[\s\S]*?\*\/|\/\/.*/g
+const symbolRegex = /\s*([{}:;,>~+()])\s*/g
+const whitespaceRegex = /\s+/g
+const semicolonRegex = /;}/g
+
+/**
+ * Minifies a LESS string by removing comments, extra spaces, and unnecessary semicolons.
+ *
+ * @param {string} lessString - The LESS string to be minified.
+ * @returns {string} - The minified LESS string.
+ */
+export function minifyLess(lessString: string): string {
+	return lessString
+		.replaceAll(commentRegex, '') // Remove multi-line and single-line comments
+		.replaceAll(symbolRegex, '$1') // Remove extra spaces around symbols
+		.replaceAll(whitespaceRegex, ' ') // Compress remaining whitespace to a single space
+		.replaceAll(semicolonRegex, '}') // Remove extra semicolons before closing braces
+		.trim() // Trim spaces from the beginning and end
+}
+
+console.log('test')

package/src/index.tsx

@@ -0,0 +1,89 @@
+import React, { ElementType, JSX, ReactNode } from 'react'
+import { minifyLess } from './helpers/minifyLess'
+
+/**
+ * Type definition for the styled function.
+ * Supports both HTML elements and React components.
+ */
+type StyledComponent<T extends ElementType> = <P extends object = React.ComponentProps<T>>(
+	styles: TemplateStringsArray,
+	...interpolations: Array<((properties: P) => string | number) | string | number>
+) => (properties: P & { children?: ReactNode; className?: string }) => JSX.Element
+
+/**
+ * Filters out props starting with '$' or custom props not accepted by HTML elements.
+ */
+const filterDollarProperties = <T extends Record<string, unknown>>(properties: T): Partial<T> =>
+	Object.fromEntries(
+		Object.entries(properties).filter(([key]) => !key.startsWith('$'))
+	) as Partial<T>
+
+/**
+ * Base function to create styled components.
+ *
+ * @param Component - An HTML tag (e.g., "div", "button") or a React component.
+ * @returns A function that takes CSS styles and returns a styled component.
+ */
+const createStyled =
+	<T extends ElementType>(Component: T): StyledComponent<T> =>
+	(styles, ...interpolations) =>
+	properties => {
+		// Non-removable class reference for this plugin
+		const classNameReference = '🎨'
+
+		// Process styles and replace interpolations with actual prop values
+		const processedStyles = styles
+			.map((style, index) => {
+				const interpolation = interpolations[index]
+				const value =
+					typeof interpolation === 'function'
+						? interpolation(properties)
+						: (interpolation ?? '')
+				return style + value
+			})
+			.join('')
+
+		const isCustomComponent = typeof Component !== 'string'
+		const filteredProperties = isCustomComponent
+			? properties
+			: filterDollarProperties(properties)
+
+		// Ensure Component is a valid React component or HTML tag
+		const Element: ElementType = Component
+
+		return (
+			<>
+				<Element
+					{...filteredProperties}
+					className={[properties.className, classNameReference].filter(Boolean).join(' ')}
+				>
+					{properties.children}
+				</Element>
+				<style jsx>{`
+					.${classNameReference} {
+						${minifyLess(processedStyles)}
+					}
+				`}</style>
+			</>
+		)
+	}
+
+/**
+ * Utility type for mapping styled properties to common HTML elements.
+ */
+type StyledHTMLTags = {
+	[Tag in keyof JSX.IntrinsicElements]: StyledComponent<Tag>
+}
+
+/**
+ * Proxy-based styled function allowing:
+ * - `styled("div")`
+ * - `styled.div`
+ */
+const styled = new Proxy(createStyled, {
+	get: (_, tag: keyof JSX.IntrinsicElements) => createStyled(tag),
+}) as typeof createStyled & StyledHTMLTags
+
+export { minifyLess }
+
+export default styled

package/dist/helpers/minifyLess.d.ts

@@ -1,8 +0,0 @@
-/**
- * Minifies a LESS string by removing comments, extra spaces, and unnecessary semicolons.
- *
- * @param {string} lessString - The LESS string to be minified.
- * @returns {string} - The minified LESS string.
- */
-export declare function minifyLess(lessString: string): string;
-//# sourceMappingURL=minifyLess.d.ts.map

package/dist/helpers/minifyLess.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"minifyLess.d.ts","sourceRoot":"","sources":["../src/helpers/minifyLess.ts"],"names":[],"mappings":"AAMA;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAOrD"}

package/dist/index.d.ts

@@ -1,25 +0,0 @@
-import React, { ElementType, JSX, ReactNode } from 'react';
-import { minifyLess } from './helpers/minifyLess';
-/**
- * Type definition for the styled function.
- * Supports both HTML elements and React components.
- */
-declare type StyledComponent<T extends ElementType> = <P extends object = React.ComponentProps<T>>(styles: TemplateStringsArray, ...interpolations: Array<((properties: P) => string | number) | string | number>) => (properties: P & {
-    children?: ReactNode;
-    className?: string;
-}) => JSX.Element;
-/**
- * Utility type for mapping styled properties to common HTML elements.
- */
-declare type StyledHTMLTags = {
-    [Tag in keyof JSX.IntrinsicElements]: StyledComponent<Tag>;
-};
-/**
- * Proxy-based styled function allowing:
- * - `styled("div")`
- * - `styled.div`
- */
-declare const styled: (<T extends React.ElementType<any, "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "center" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "search" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view">>(Component: T) => StyledComponent<T>) & StyledHTMLTags;
-export { minifyLess };
-export default styled;
-//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAEjD;;;GAGG;AACH,aAAK,eAAe,CAAC,CAAC,SAAS,WAAW,IAAI,CAAC,CAAC,SAAS,MAAM,GAAG,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,EACxF,MAAM,EAAE,oBAAoB,EAC5B,GAAG,cAAc,EAAE,KAAK,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,CAAC,GAAG,MAAM,GAAG,MAAM,CAAC,KAC5E,CAAC,UAAU,EAAE,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,KAAK,GAAG,CAAC,OAAO,CAAA;AAyDlF;;GAEG;AACH,aAAK,cAAc,GAAG;KACpB,GAAG,IAAI,MAAM,GAAG,CAAC,iBAAiB,GAAG,eAAe,CAAC,GAAG,CAAC;CAC1D,CAAA;AAED;;;;GAIG;AACH,QAAA,MAAM,MAAM,u9DAE8B,CAAA;AAE1C,OAAO,EAAE,UAAU,EAAE,CAAA;AAErB,eAAe,MAAM,CAAA"}

package/dist/index.js

@@ -1,8 +0,0 @@
-
-'use strict'
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./styled-components-jsx.cjs.production.min.js')
-} else {
-  module.exports = require('./styled-components-jsx.cjs.development.js')
-}

package/dist/styled-components-jsx.cjs.development.js

@@ -1,83 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var React = _interopDefault(require('react'));
-
-/* Precompile regular expressions */
-var commentRegex = /\/\*[\s\S]*?\*\/|\/\/.*/g;
-var symbolRegex = /\s*([{}:;,>~+()])\s*/g;
-var whitespaceRegex = /\s+/g;
-var semicolonRegex = /;}/g;
-/**
- * Minifies a LESS string by removing comments, extra spaces, and unnecessary semicolons.
- *
- * @param {string} lessString - The LESS string to be minified.
- * @returns {string} - The minified LESS string.
- */
-function minifyLess(lessString) {
-  return lessString.replaceAll(commentRegex, '') // Remove multi-line and single-line comments
-  .replaceAll(symbolRegex, '$1') // Remove extra spaces around symbols
-  .replaceAll(whitespaceRegex, ' ') // Compress remaining whitespace to a single space
-  .replaceAll(semicolonRegex, '}') // Remove extra semicolons before closing braces
-  .trim(); // Trim spaces from the beginning and end
-}
-
-/**
- * Filters out props starting with '$' or custom props not accepted by HTML elements.
- */
-var filterDollarProperties = function filterDollarProperties(properties) {
-  return Object.fromEntries(Object.entries(properties).filter(function (_ref) {
-    var key = _ref[0];
-    return !key.startsWith('$');
-  }));
-};
-/**
- * Base function to create styled components.
- *
- * @param Component - An HTML tag (e.g., "div", "button") or a React component.
- * @returns A function that takes CSS styles and returns a styled component.
- */
-var createStyled = function createStyled(Component) {
-  return function (styles) {
-    for (var _len = arguments.length, interpolations = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      interpolations[_key - 1] = arguments[_key];
-    }
-    return function (properties) {
-      // Non-removable class reference for this plugin
-      var classNameReference = '🎨';
-      // Process styles and replace interpolations with actual prop values
-      var processedStyles = styles.map(function (style, index) {
-        var interpolation = interpolations[index];
-        var value = typeof interpolation === 'function' ? interpolation(properties) : interpolation != null ? interpolation : '';
-        return style + value;
-      }).join('');
-      var isCustomComponent = typeof Component !== 'string';
-      var filteredProperties = isCustomComponent ? properties : filterDollarProperties(properties);
-      // Ensure Component is a valid React component or HTML tag
-      var Element = Component;
-      var content = "." + classNameReference + "{" + minifyLess(processedStyles) + "}";
-      return React.createElement(React.Fragment, null, React.createElement(Element, Object.assign({}, filteredProperties, {
-        className: [properties.className, classNameReference].filter(Boolean).join(' ')
-      }), properties.children), React.createElement("style", {
-        jsx: true
-      }, content));
-    };
-  };
-};
-/**
- * Proxy-based styled function allowing:
- * - `styled("div")`
- * - `styled.div`
- */
-var styled = /*#__PURE__*/new Proxy(createStyled, {
-  get: function get(_, tag) {
-    return createStyled(tag);
-  }
-});
-
-exports.default = styled;
-exports.minifyLess = minifyLess;
-//# sourceMappingURL=styled-components-jsx.cjs.development.js.map

package/dist/styled-components-jsx.cjs.development.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styled-components-jsx.cjs.development.js","sources":["../src/helpers/minifyLess.ts","../src/index.tsx"],"sourcesContent":["/* Precompile regular expressions */\nconst commentRegex = /\\/\\*[\\s\\S]*?\\*\\/|\\/\\/.*/g\nconst symbolRegex = /\\s*([{}:;,>~+()])\\s*/g\nconst whitespaceRegex = /\\s+/g\nconst semicolonRegex = /;}/g\n\n/**\n * Minifies a LESS string by removing comments, extra spaces, and unnecessary semicolons.\n *\n * @param {string} lessString - The LESS string to be minified.\n * @returns {string} - The minified LESS string.\n */\nexport function minifyLess(lessString: string): string {\n\treturn lessString\n\t\t.replaceAll(commentRegex, '') // Remove multi-line and single-line comments\n\t\t.replaceAll(symbolRegex, '$1') // Remove extra spaces around symbols\n\t\t.replaceAll(whitespaceRegex, ' ') // Compress remaining whitespace to a single space\n\t\t.replaceAll(semicolonRegex, '}') // Remove extra semicolons before closing braces\n\t\t.trim() // Trim spaces from the beginning and end\n}\n","import React, { ElementType, JSX, ReactNode } from 'react'\nimport { minifyLess } from './helpers/minifyLess'\n\n/**\n * Type definition for the styled function.\n * Supports both HTML elements and React components.\n */\ntype StyledComponent<T extends ElementType> = <P extends object = React.ComponentProps<T>>(\n\tstyles: TemplateStringsArray,\n\t...interpolations: Array<((properties: P) => string | number) | string | number>\n) => (properties: P & { children?: ReactNode; className?: string }) => JSX.Element\n\n/**\n * Filters out props starting with '$' or custom props not accepted by HTML elements.\n */\nconst filterDollarProperties = <T extends Record<string, unknown>>(properties: T): Partial<T> =>\n\tObject.fromEntries(\n\t\tObject.entries(properties).filter(([key]) => !key.startsWith('$'))\n\t) as Partial<T>\n\n/**\n * Base function to create styled components.\n *\n * @param Component - An HTML tag (e.g., \"div\", \"button\") or a React component.\n * @returns A function that takes CSS styles and returns a styled component.\n */\nconst createStyled =\n\t<T extends ElementType>(Component: T): StyledComponent<T> =>\n\t(styles, ...interpolations) =>\n\tproperties => {\n\t\t// Non-removable class reference for this plugin\n\t\tconst classNameReference = '🎨'\n\n\t\t// Process styles and replace interpolations with actual prop values\n\t\tconst processedStyles = styles\n\t\t\t.map((style, index) => {\n\t\t\t\tconst interpolation = interpolations[index]\n\t\t\t\tconst value =\n\t\t\t\t\ttypeof interpolation === 'function'\n\t\t\t\t\t\t? interpolation(properties)\n\t\t\t\t\t\t: (interpolation ?? '')\n\t\t\t\treturn style + value\n\t\t\t})\n\t\t\t.join('')\n\n\t\tconst isCustomComponent = typeof Component !== 'string'\n\t\tconst filteredProperties = isCustomComponent\n\t\t\t? properties\n\t\t\t: filterDollarProperties(properties)\n\n\t\t// Ensure Component is a valid React component or HTML tag\n\t\tconst Element: ElementType = Component\n\t\tconst content = `.${classNameReference}{${minifyLess(processedStyles)}}`\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<Element\n\t\t\t\t\t{...filteredProperties}\n\t\t\t\t\tclassName={[properties.className, classNameReference].filter(Boolean).join(' ')}\n\t\t\t\t>\n\t\t\t\t\t{properties.children}\n\t\t\t\t</Element>\n\t\t\t\t<style jsx>{content}</style>\n\t\t\t</>\n\t\t)\n\t}\n\n/**\n * Utility type for mapping styled properties to common HTML elements.\n */\ntype StyledHTMLTags = {\n\t[Tag in keyof JSX.IntrinsicElements]: StyledComponent<Tag>\n}\n\n/**\n * Proxy-based styled function allowing:\n * - `styled(\"div\")`\n * - `styled.div`\n */\nconst styled = new Proxy(createStyled, {\n\tget: (_, tag: keyof JSX.IntrinsicElements) => createStyled(tag),\n}) as typeof createStyled & StyledHTMLTags\n\nexport { minifyLess }\n\nexport default styled\n"],"names":["commentRegex","symbolRegex","whitespaceRegex","semicolonRegex","minifyLess","lessString","replaceAll","trim","filterDollarProperties","properties","Object","fromEntries","entries","filter","_ref","key","startsWith","createStyled","Component","styles","_len","arguments","length","interpolations","Array","_key","classNameReference","processedStyles","map","style","index","interpolation","value","join","isCustomComponent","filteredProperties","Element","content","React","className","Boolean","children","jsx","styled","Proxy","get","_","tag"],"mappings":";;;;;;;;AAAA;AACA,IAAMA,YAAY,GAAG,0BAA0B;AAC/C,IAAMC,WAAW,GAAG,uBAAuB;AAC3C,IAAMC,eAAe,GAAG,MAAM;AAC9B,IAAMC,cAAc,GAAG,KAAK;AAE5B;;;;;;SAMgBC,UAAUA,CAACC,UAAkB;EAC5C,OAAOA,UAAU,CACfC,UAAU,CAACN,YAAY,EAAE,EAAE,CAAC;GAC5BM,UAAU,CAACL,WAAW,EAAE,IAAI,CAAC;GAC7BK,UAAU,CAACJ,eAAe,EAAE,GAAG,CAAC;GAChCI,UAAU,CAACH,cAAc,EAAE,GAAG,CAAC;GAC/BI,IAAI,EAAE,CAAA;AACT;;ACPA;;;AAGA,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAsBA,CAAuCC,UAAa;EAAA,OAC/EC,MAAM,CAACC,WAAW,CACjBD,MAAM,CAACE,OAAO,CAACH,UAAU,CAAC,CAACI,MAAM,CAAC,UAAAC,IAAA;IAAA,IAAEC,GAAG,GAAAD,IAAA;IAAA,OAAM,CAACC,GAAG,CAACC,UAAU,CAAC,GAAG,CAAC;IAAC,CACpD;AAAA;AAEhB;;;;;;AAMA,IAAMC,YAAY,GACjB,SADKA,YAAYA,CACOC,SAAY;EAAA,OACpC,UAACC,MAAM;IAAA,SAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAKC,cAAc,OAAAC,KAAA,CAAAJ,IAAA,OAAAA,IAAA,WAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA;MAAdF,cAAc,CAAAE,IAAA,QAAAJ,SAAA,CAAAI,IAAA;;IAAA,OAC1B,UAAAhB,UAAU;;MAET,IAAMiB,kBAAkB,GAAG,IAAI;;MAG/B,IAAMC,eAAe,GAAGR,MAAM,CAC5BS,GAAG,CAAC,UAACC,KAAK,EAAEC,KAAK;QACjB,IAAMC,aAAa,GAAGR,cAAc,CAACO,KAAK,CAAC;QAC3C,IAAME,KAAK,GACV,OAAOD,aAAa,KAAK,UAAU,GAChCA,aAAa,CAACtB,UAAU,CAAC,GACxBsB,aAAa,WAAbA,aAAa,GAAI,EAAG;QACzB,OAAOF,KAAK,GAAGG,KAAK;OACpB,CAAC,CACDC,IAAI,CAAC,EAAE,CAAC;MAEV,IAAMC,iBAAiB,GAAG,OAAOhB,SAAS,KAAK,QAAQ;MACvD,IAAMiB,kBAAkB,GAAGD,iBAAiB,GACzCzB,UAAU,GACVD,sBAAsB,CAACC,UAAU,CAAC;;MAGrC,IAAM2B,OAAO,GAAgBlB,SAAS;MACtC,IAAMmB,OAAO,SAAOX,kBAAkB,SAAItB,UAAU,CAACuB,eAAe,CAAC,MAAG;MAExE,OACCW,0CACCA,oBAACF,OAAO,oBACHD,kBAAkB;QACtBI,SAAS,EAAE,CAAC9B,UAAU,CAAC8B,SAAS,EAAEb,kBAAkB,CAAC,CAACb,MAAM,CAAC2B,OAAO,CAAC,CAACP,IAAI,CAAC,GAAG;UAE7ExB,UAAU,CAACgC,QAAQ,CACX,EACVH;QAAOI,GAAG;SAAEL,OAAO,CAAS,CAC1B;KAEJ;;AAAA;AASF;;;;;AAKA,IAAMM,MAAM,gBAAG,IAAIC,KAAK,CAAC3B,YAAY,EAAE;EACtC4B,GAAG,EAAE,SAALA,GAAGA,CAAGC,CAAC,EAAEC,GAAgC;IAAA,OAAK9B,YAAY,CAAC8B,GAAG,CAAC;;CAC/D,CAAyC;;;;;"}

package/dist/styled-components-jsx.cjs.production.min.js

@@ -1,2 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e,r=/\/\*[\s\S]*?\*\/|\/\/.*/g,n=/\s*([{}:;,>~+()])\s*/g,l=/\s+/g,a=/;}/g;function c(e){return e.replaceAll(r,"").replaceAll(n,"$1").replaceAll(l," ").replaceAll(a,"}").trim()}var i=function(e){return Object.fromEntries(Object.entries(e).filter((function(e){return!e[0].startsWith("$")})))},u=function(e){return function(r){for(var n=arguments.length,l=new Array(n>1?n-1:0),a=1;a<n;a++)l[a-1]=arguments[a];return function(n){var a="🎨",u=r.map((function(e,t){var r=l[t];return e+("function"==typeof r?r(n):null!=r?r:"")})).join(""),o="string"!=typeof e?n:i(n),s=e,f="."+a+"{"+c(u)+"}";return t.createElement(t.Fragment,null,t.createElement(s,Object.assign({},o,{className:[n.className,a].filter(Boolean).join(" ")}),n.children),t.createElement("style",{jsx:!0},f))}}};exports.default=new Proxy(u,{get:function(e,t){return u(t)}}),exports.minifyLess=c;
-//# sourceMappingURL=styled-components-jsx.cjs.production.min.js.map

package/dist/styled-components-jsx.cjs.production.min.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styled-components-jsx.cjs.production.min.js","sources":["../src/helpers/minifyLess.ts","../src/index.tsx"],"sourcesContent":["/* Precompile regular expressions */\nconst commentRegex = /\\/\\*[\\s\\S]*?\\*\\/|\\/\\/.*/g\nconst symbolRegex = /\\s*([{}:;,>~+()])\\s*/g\nconst whitespaceRegex = /\\s+/g\nconst semicolonRegex = /;}/g\n\n/**\n * Minifies a LESS string by removing comments, extra spaces, and unnecessary semicolons.\n *\n * @param {string} lessString - The LESS string to be minified.\n * @returns {string} - The minified LESS string.\n */\nexport function minifyLess(lessString: string): string {\n\treturn lessString\n\t\t.replaceAll(commentRegex, '') // Remove multi-line and single-line comments\n\t\t.replaceAll(symbolRegex, '$1') // Remove extra spaces around symbols\n\t\t.replaceAll(whitespaceRegex, ' ') // Compress remaining whitespace to a single space\n\t\t.replaceAll(semicolonRegex, '}') // Remove extra semicolons before closing braces\n\t\t.trim() // Trim spaces from the beginning and end\n}\n","import React, { ElementType, JSX, ReactNode } from 'react'\nimport { minifyLess } from './helpers/minifyLess'\n\n/**\n * Type definition for the styled function.\n * Supports both HTML elements and React components.\n */\ntype StyledComponent<T extends ElementType> = <P extends object = React.ComponentProps<T>>(\n\tstyles: TemplateStringsArray,\n\t...interpolations: Array<((properties: P) => string | number) | string | number>\n) => (properties: P & { children?: ReactNode; className?: string }) => JSX.Element\n\n/**\n * Filters out props starting with '$' or custom props not accepted by HTML elements.\n */\nconst filterDollarProperties = <T extends Record<string, unknown>>(properties: T): Partial<T> =>\n\tObject.fromEntries(\n\t\tObject.entries(properties).filter(([key]) => !key.startsWith('$'))\n\t) as Partial<T>\n\n/**\n * Base function to create styled components.\n *\n * @param Component - An HTML tag (e.g., \"div\", \"button\") or a React component.\n * @returns A function that takes CSS styles and returns a styled component.\n */\nconst createStyled =\n\t<T extends ElementType>(Component: T): StyledComponent<T> =>\n\t(styles, ...interpolations) =>\n\tproperties => {\n\t\t// Non-removable class reference for this plugin\n\t\tconst classNameReference = '🎨'\n\n\t\t// Process styles and replace interpolations with actual prop values\n\t\tconst processedStyles = styles\n\t\t\t.map((style, index) => {\n\t\t\t\tconst interpolation = interpolations[index]\n\t\t\t\tconst value =\n\t\t\t\t\ttypeof interpolation === 'function'\n\t\t\t\t\t\t? interpolation(properties)\n\t\t\t\t\t\t: (interpolation ?? '')\n\t\t\t\treturn style + value\n\t\t\t})\n\t\t\t.join('')\n\n\t\tconst isCustomComponent = typeof Component !== 'string'\n\t\tconst filteredProperties = isCustomComponent\n\t\t\t? properties\n\t\t\t: filterDollarProperties(properties)\n\n\t\t// Ensure Component is a valid React component or HTML tag\n\t\tconst Element: ElementType = Component\n\t\tconst content = `.${classNameReference}{${minifyLess(processedStyles)}}`\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<Element\n\t\t\t\t\t{...filteredProperties}\n\t\t\t\t\tclassName={[properties.className, classNameReference].filter(Boolean).join(' ')}\n\t\t\t\t>\n\t\t\t\t\t{properties.children}\n\t\t\t\t</Element>\n\t\t\t\t<style jsx>{content}</style>\n\t\t\t</>\n\t\t)\n\t}\n\n/**\n * Utility type for mapping styled properties to common HTML elements.\n */\ntype StyledHTMLTags = {\n\t[Tag in keyof JSX.IntrinsicElements]: StyledComponent<Tag>\n}\n\n/**\n * Proxy-based styled function allowing:\n * - `styled(\"div\")`\n * - `styled.div`\n */\nconst styled = new Proxy(createStyled, {\n\tget: (_, tag: keyof JSX.IntrinsicElements) => createStyled(tag),\n}) as typeof createStyled & StyledHTMLTags\n\nexport { minifyLess }\n\nexport default styled\n"],"names":["commentRegex","symbolRegex","whitespaceRegex","semicolonRegex","minifyLess","lessString","replaceAll","trim","filterDollarProperties","properties","Object","fromEntries","entries","filter","_ref","startsWith","createStyled","Component","styles","_len","arguments","length","interpolations","Array","_key","classNameReference","processedStyles","map","style","index","interpolation","join","filteredProperties","Element","content","React","className","Boolean","children","jsx","Proxy","get","_","tag"],"mappings":"gJACMA,EAAe,2BACfC,EAAc,wBACdC,EAAkB,OAClBC,EAAiB,eAQPC,EAAWC,GAC1B,OAAOA,EACLC,WAAWN,EAAc,IACzBM,WAAWL,EAAa,MACxBK,WAAWJ,EAAiB,KAC5BI,WAAWH,EAAgB,KAC3BI,OCHH,IAAMC,EAAyB,SAAoCC,GAAa,OAC/EC,OAAOC,YACND,OAAOE,QAAQH,GAAYI,QAAO,SAAAC,GAAK,OAAAA,KAAWC,WAAW,UASzDC,EACL,SAAwBC,GAAY,OACpC,SAACC,GAAM,QAAAC,EAAAC,UAAAC,OAAKC,MAAcC,MAAAJ,IAAAA,OAAAK,IAAAA,EAAAL,EAAAK,IAAdF,EAAcE,KAAAJ,UAAAI,GAAA,OAC1B,SAAAf,GAEC,IAAMgB,EAAqB,KAGrBC,EAAkBR,EACtBS,KAAI,SAACC,EAAOC,GACZ,IAAMC,EAAgBR,EAAeO,GAKrC,OAAOD,GAHmB,mBAAlBE,EACJA,EAAcrB,SACbqB,EAAAA,EAAiB,OAGtBC,KAAK,IAGDC,EADyC,iBAAdf,EAE9BR,EACAD,EAAuBC,GAGpBwB,EAAuBhB,EACvBiB,MAAcT,MAAsBrB,EAAWsB,OAErD,OACCS,gCACCA,gBAACF,mBACID,GACJI,UAAW,CAAC3B,EAAW2B,UAAWX,GAAoBZ,OAAOwB,SAASN,KAAK,OAE1EtB,EAAW6B,UAEbH,yBAAOI,QAAKL,uBAiBD,IAAIM,MAAMxB,EAAc,CACtCyB,IAAK,SAACC,EAAGC,GAAgC,OAAK3B,EAAa2B"}

package/dist/styled-components-jsx.esm.js

@@ -1,77 +0,0 @@
-import React from 'react';
-
-/* Precompile regular expressions */
-var commentRegex = /\/\*[\s\S]*?\*\/|\/\/.*/g;
-var symbolRegex = /\s*([{}:;,>~+()])\s*/g;
-var whitespaceRegex = /\s+/g;
-var semicolonRegex = /;}/g;
-/**
- * Minifies a LESS string by removing comments, extra spaces, and unnecessary semicolons.
- *
- * @param {string} lessString - The LESS string to be minified.
- * @returns {string} - The minified LESS string.
- */
-function minifyLess(lessString) {
-  return lessString.replaceAll(commentRegex, '') // Remove multi-line and single-line comments
-  .replaceAll(symbolRegex, '$1') // Remove extra spaces around symbols
-  .replaceAll(whitespaceRegex, ' ') // Compress remaining whitespace to a single space
-  .replaceAll(semicolonRegex, '}') // Remove extra semicolons before closing braces
-  .trim(); // Trim spaces from the beginning and end
-}
-
-/**
- * Filters out props starting with '$' or custom props not accepted by HTML elements.
- */
-var filterDollarProperties = function filterDollarProperties(properties) {
-  return Object.fromEntries(Object.entries(properties).filter(function (_ref) {
-    var key = _ref[0];
-    return !key.startsWith('$');
-  }));
-};
-/**
- * Base function to create styled components.
- *
- * @param Component - An HTML tag (e.g., "div", "button") or a React component.
- * @returns A function that takes CSS styles and returns a styled component.
- */
-var createStyled = function createStyled(Component) {
-  return function (styles) {
-    for (var _len = arguments.length, interpolations = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      interpolations[_key - 1] = arguments[_key];
-    }
-    return function (properties) {
-      // Non-removable class reference for this plugin
-      var classNameReference = '🎨';
-      // Process styles and replace interpolations with actual prop values
-      var processedStyles = styles.map(function (style, index) {
-        var interpolation = interpolations[index];
-        var value = typeof interpolation === 'function' ? interpolation(properties) : interpolation != null ? interpolation : '';
-        return style + value;
-      }).join('');
-      var isCustomComponent = typeof Component !== 'string';
-      var filteredProperties = isCustomComponent ? properties : filterDollarProperties(properties);
-      // Ensure Component is a valid React component or HTML tag
-      var Element = Component;
-      var content = "." + classNameReference + "{" + minifyLess(processedStyles) + "}";
-      return React.createElement(React.Fragment, null, React.createElement(Element, Object.assign({}, filteredProperties, {
-        className: [properties.className, classNameReference].filter(Boolean).join(' ')
-      }), properties.children), React.createElement("style", {
-        jsx: true
-      }, content));
-    };
-  };
-};
-/**
- * Proxy-based styled function allowing:
- * - `styled("div")`
- * - `styled.div`
- */
-var styled = /*#__PURE__*/new Proxy(createStyled, {
-  get: function get(_, tag) {
-    return createStyled(tag);
-  }
-});
-
-export default styled;
-export { minifyLess };
-//# sourceMappingURL=styled-components-jsx.esm.js.map

package/dist/styled-components-jsx.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styled-components-jsx.esm.js","sources":["../src/helpers/minifyLess.ts","../src/index.tsx"],"sourcesContent":["/* Precompile regular expressions */\nconst commentRegex = /\\/\\*[\\s\\S]*?\\*\\/|\\/\\/.*/g\nconst symbolRegex = /\\s*([{}:;,>~+()])\\s*/g\nconst whitespaceRegex = /\\s+/g\nconst semicolonRegex = /;}/g\n\n/**\n * Minifies a LESS string by removing comments, extra spaces, and unnecessary semicolons.\n *\n * @param {string} lessString - The LESS string to be minified.\n * @returns {string} - The minified LESS string.\n */\nexport function minifyLess(lessString: string): string {\n\treturn lessString\n\t\t.replaceAll(commentRegex, '') // Remove multi-line and single-line comments\n\t\t.replaceAll(symbolRegex, '$1') // Remove extra spaces around symbols\n\t\t.replaceAll(whitespaceRegex, ' ') // Compress remaining whitespace to a single space\n\t\t.replaceAll(semicolonRegex, '}') // Remove extra semicolons before closing braces\n\t\t.trim() // Trim spaces from the beginning and end\n}\n","import React, { ElementType, JSX, ReactNode } from 'react'\nimport { minifyLess } from './helpers/minifyLess'\n\n/**\n * Type definition for the styled function.\n * Supports both HTML elements and React components.\n */\ntype StyledComponent<T extends ElementType> = <P extends object = React.ComponentProps<T>>(\n\tstyles: TemplateStringsArray,\n\t...interpolations: Array<((properties: P) => string | number) | string | number>\n) => (properties: P & { children?: ReactNode; className?: string }) => JSX.Element\n\n/**\n * Filters out props starting with '$' or custom props not accepted by HTML elements.\n */\nconst filterDollarProperties = <T extends Record<string, unknown>>(properties: T): Partial<T> =>\n\tObject.fromEntries(\n\t\tObject.entries(properties).filter(([key]) => !key.startsWith('$'))\n\t) as Partial<T>\n\n/**\n * Base function to create styled components.\n *\n * @param Component - An HTML tag (e.g., \"div\", \"button\") or a React component.\n * @returns A function that takes CSS styles and returns a styled component.\n */\nconst createStyled =\n\t<T extends ElementType>(Component: T): StyledComponent<T> =>\n\t(styles, ...interpolations) =>\n\tproperties => {\n\t\t// Non-removable class reference for this plugin\n\t\tconst classNameReference = '🎨'\n\n\t\t// Process styles and replace interpolations with actual prop values\n\t\tconst processedStyles = styles\n\t\t\t.map((style, index) => {\n\t\t\t\tconst interpolation = interpolations[index]\n\t\t\t\tconst value =\n\t\t\t\t\ttypeof interpolation === 'function'\n\t\t\t\t\t\t? interpolation(properties)\n\t\t\t\t\t\t: (interpolation ?? '')\n\t\t\t\treturn style + value\n\t\t\t})\n\t\t\t.join('')\n\n\t\tconst isCustomComponent = typeof Component !== 'string'\n\t\tconst filteredProperties = isCustomComponent\n\t\t\t? properties\n\t\t\t: filterDollarProperties(properties)\n\n\t\t// Ensure Component is a valid React component or HTML tag\n\t\tconst Element: ElementType = Component\n\t\tconst content = `.${classNameReference}{${minifyLess(processedStyles)}}`\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<Element\n\t\t\t\t\t{...filteredProperties}\n\t\t\t\t\tclassName={[properties.className, classNameReference].filter(Boolean).join(' ')}\n\t\t\t\t>\n\t\t\t\t\t{properties.children}\n\t\t\t\t</Element>\n\t\t\t\t<style jsx>{content}</style>\n\t\t\t</>\n\t\t)\n\t}\n\n/**\n * Utility type for mapping styled properties to common HTML elements.\n */\ntype StyledHTMLTags = {\n\t[Tag in keyof JSX.IntrinsicElements]: StyledComponent<Tag>\n}\n\n/**\n * Proxy-based styled function allowing:\n * - `styled(\"div\")`\n * - `styled.div`\n */\nconst styled = new Proxy(createStyled, {\n\tget: (_, tag: keyof JSX.IntrinsicElements) => createStyled(tag),\n}) as typeof createStyled & StyledHTMLTags\n\nexport { minifyLess }\n\nexport default styled\n"],"names":["commentRegex","symbolRegex","whitespaceRegex","semicolonRegex","minifyLess","lessString","replaceAll","trim","filterDollarProperties","properties","Object","fromEntries","entries","filter","_ref","key","startsWith","createStyled","Component","styles","_len","arguments","length","interpolations","Array","_key","classNameReference","processedStyles","map","style","index","interpolation","value","join","isCustomComponent","filteredProperties","Element","content","React","className","Boolean","children","jsx","styled","Proxy","get","_","tag"],"mappings":";;AAAA;AACA,IAAMA,YAAY,GAAG,0BAA0B;AAC/C,IAAMC,WAAW,GAAG,uBAAuB;AAC3C,IAAMC,eAAe,GAAG,MAAM;AAC9B,IAAMC,cAAc,GAAG,KAAK;AAE5B;;;;;;SAMgBC,UAAUA,CAACC,UAAkB;EAC5C,OAAOA,UAAU,CACfC,UAAU,CAACN,YAAY,EAAE,EAAE,CAAC;GAC5BM,UAAU,CAACL,WAAW,EAAE,IAAI,CAAC;GAC7BK,UAAU,CAACJ,eAAe,EAAE,GAAG,CAAC;GAChCI,UAAU,CAACH,cAAc,EAAE,GAAG,CAAC;GAC/BI,IAAI,EAAE,CAAA;AACT;;ACPA;;;AAGA,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAsBA,CAAuCC,UAAa;EAAA,OAC/EC,MAAM,CAACC,WAAW,CACjBD,MAAM,CAACE,OAAO,CAACH,UAAU,CAAC,CAACI,MAAM,CAAC,UAAAC,IAAA;IAAA,IAAEC,GAAG,GAAAD,IAAA;IAAA,OAAM,CAACC,GAAG,CAACC,UAAU,CAAC,GAAG,CAAC;IAAC,CACpD;AAAA;AAEhB;;;;;;AAMA,IAAMC,YAAY,GACjB,SADKA,YAAYA,CACOC,SAAY;EAAA,OACpC,UAACC,MAAM;IAAA,SAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAKC,cAAc,OAAAC,KAAA,CAAAJ,IAAA,OAAAA,IAAA,WAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA;MAAdF,cAAc,CAAAE,IAAA,QAAAJ,SAAA,CAAAI,IAAA;;IAAA,OAC1B,UAAAhB,UAAU;;MAET,IAAMiB,kBAAkB,GAAG,IAAI;;MAG/B,IAAMC,eAAe,GAAGR,MAAM,CAC5BS,GAAG,CAAC,UAACC,KAAK,EAAEC,KAAK;QACjB,IAAMC,aAAa,GAAGR,cAAc,CAACO,KAAK,CAAC;QAC3C,IAAME,KAAK,GACV,OAAOD,aAAa,KAAK,UAAU,GAChCA,aAAa,CAACtB,UAAU,CAAC,GACxBsB,aAAa,WAAbA,aAAa,GAAI,EAAG;QACzB,OAAOF,KAAK,GAAGG,KAAK;OACpB,CAAC,CACDC,IAAI,CAAC,EAAE,CAAC;MAEV,IAAMC,iBAAiB,GAAG,OAAOhB,SAAS,KAAK,QAAQ;MACvD,IAAMiB,kBAAkB,GAAGD,iBAAiB,GACzCzB,UAAU,GACVD,sBAAsB,CAACC,UAAU,CAAC;;MAGrC,IAAM2B,OAAO,GAAgBlB,SAAS;MACtC,IAAMmB,OAAO,SAAOX,kBAAkB,SAAItB,UAAU,CAACuB,eAAe,CAAC,MAAG;MAExE,OACCW,0CACCA,oBAACF,OAAO,oBACHD,kBAAkB;QACtBI,SAAS,EAAE,CAAC9B,UAAU,CAAC8B,SAAS,EAAEb,kBAAkB,CAAC,CAACb,MAAM,CAAC2B,OAAO,CAAC,CAACP,IAAI,CAAC,GAAG;UAE7ExB,UAAU,CAACgC,QAAQ,CACX,EACVH;QAAOI,GAAG;SAAEL,OAAO,CAAS,CAC1B;KAEJ;;AAAA;AASF;;;;;AAKA,IAAMM,MAAM,gBAAG,IAAIC,KAAK,CAAC3B,YAAY,EAAE;EACtC4B,GAAG,EAAE,SAALA,GAAGA,CAAGC,CAAC,EAAEC,GAAgC;IAAA,OAAK9B,YAAY,CAAC8B,GAAG,CAAC;;CAC/D,CAAyC;;;;;"}