@linktr.ee/create-link-app 0.3.0-next.35 → 0.3.0-next.37

package/dist/postcss/postcss.config.js

@@ -3,19 +3,29 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPostcssConfig = void 0;
 const path_1 = __importDefault(require("path"));
 const tailwindcss_1 = __importDefault(require("tailwindcss"));
 const autoprefixer_1 = __importDefault(require("autoprefixer"));
 const componentLibraryContentPath = path_1.default.join(require.resolve('@linktr.ee/component-library/tailwind.config').split('/').slice(0, -1).join('/'), 'dist', '**', '*.js');
 const uiLinkKitPath = path_1.default.join(require.resolve('@linktr.ee/ui-link-kit').split('/').slice(0, -2).join('/'), '**', '*.js');
-const config = {
-    plugins: [
-        (0, tailwindcss_1.default)({
-            content: [`${process.cwd()}/src/**/*.{js,jsx,ts,tsx}`, componentLibraryContentPath, uiLinkKitPath],
-            presets: [require('@linktr.ee/component-library/tailwind.config')],
-            plugins: [],
-        }),
-        (0, autoprefixer_1.default)(),
-    ],
-};
-module.exports = config;
+function getPostcssConfig({ linkTypeSlug, env = 'production' }) {
+    const isStorybook = env === 'storybook';
+    const content = [`${process.cwd()}/src/**/*.{js,jsx,ts,tsx}`, uiLinkKitPath];
+    if (isStorybook) {
+        content.push(componentLibraryContentPath);
+    }
+    return {
+        ...(isStorybook && { inject: { insertAtTop: true } }),
+        plugins: [
+            (0, tailwindcss_1.default)({
+                important: `[data-link-type-id=${linkTypeSlug}]`,
+                content,
+                presets: [require('@linktr.ee/component-library/tailwind.config')],
+                plugins: [],
+            }),
+            (0, autoprefixer_1.default)(),
+        ],
+    };
+}
+exports.getPostcssConfig = getPostcssConfig;

package/dist/storybook/main.js

@@ -1,33 +1,14 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const postcss_1 = __importDefault(require("postcss"));
-const postcssOptions = __importStar(require("../postcss/postcss.config"));
+const webpack_1 = __importDefault(require("webpack"));
+const postcss_config_1 = require("../postcss/postcss.config");
+// Do not need to be the real values, just need to be defined for storybook
+const linkTypeSlug = 'test-id';
+const linkTypeId = 'testId';
 const config = {
     stories: [`${process.cwd()}/src/**/*.stories.@(js|jsx|ts|tsx)`],
     addons: [
@@ -49,7 +30,7 @@ const config = {
                 cssLoaderOptions: { importLoaders: 1 },
                 postcssLoaderOptions: {
                     implementation: postcss_1.default,
-                    postcssOptions: { ...postcssOptions },
+                    postcssOptions: (0, postcss_config_1.getPostcssConfig)({ linkTypeSlug, env: 'storybook' }),
                 },
             },
         },
@@ -58,5 +39,15 @@ const config = {
     core: {
         builder: 'webpack5',
     },
+    webpackFinal: async (config) => {
+        if (config.plugins?.length) {
+            // Add the DefinePlugin to the Webpack plugins array
+            config.plugins.push(new webpack_1.default.DefinePlugin({
+                __LINK_TYPE_ID__: JSON.stringify(linkTypeId),
+                __LINK_TYPE_SLUG__: JSON.stringify(linkTypeSlug),
+            }));
+        }
+        return config;
+    },
 };
 module.exports = config;

package/dist/webpack/webpack.config.js

@@ -1,28 +1,5 @@
 "use strict";
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -37,7 +14,7 @@ const webpack_1 = require("webpack");
 const camelcase_1 = __importDefault(require("camelcase"));
 const slugify_1 = __importDefault(require("slugify"));
 const compile_1 = __importDefault(require("../lib/schema/compile"));
-const postcssOptions = __importStar(require("../postcss/postcss.config"));
+const postcss_config_1 = require("../postcss/postcss.config");
 const { ModuleFederationPlugin } = webpack_1.container;
 function toVirtualModule(code) {
     const base64 = Buffer.from(code).toString('base64');
@@ -103,7 +80,7 @@ async function default_1(env, options) {
                         {
                             loader: 'postcss-loader',
                             options: {
-                                postcssOptions: { ...postcssOptions },
+                                postcssOptions: { ...(0, postcss_config_1.getPostcssConfig)({ linkTypeSlug }) },
                             },
                         },
                     ],
@@ -164,6 +141,8 @@ async function default_1(env, options) {
         };
         config.plugins.push(new webpack_1.DefinePlugin({
             __ALLOW_ANY_ORIGIN__: options?.allowAnyOrigin,
+            __LINK_TYPE_SLUG__: JSON.stringify(linkTypeSlug),
+            __LINK_TYPE_ID__: JSON.stringify(linkTypeId),
         }), 
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore

package/oclif.manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.3.0-next.35",
+  "version": "0.3.0-next.37",
   "commands": {
     "build": {
       "id": "build",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/create-link-app",
-  "version": "0.3.0-next.35",
+  "version": "0.3.0-next.37",
   "description": "Create a Link App on Linktr.ee.",
   "license": "UNLICENSED",
   "author": "Linktree",
@@ -35,7 +35,7 @@
     "@babel/preset-react": "^7.17.12",
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.3",
-    "@linktr.ee/component-library": "^7.0.17",
+    "@linktr.ee/component-library": "latest",
     "@linktr.ee/ui-link-kit": "latest",
     "@oclif/core": "^1.9.0",
     "@oclif/plugin-help": "^5.1.12",

package/templates/react-ts/src/components/Layouts.tsx

@@ -43,7 +43,13 @@ const Grid = (props: AppProps) => {
 
 const Stack = (props: AppProps) => {
   return (
-    <div className="flex p-2 h-full gap-4 w-full" style={{ ...baseStyle, borderRadius: 'var(--lt-stack-container-radius)' }}>
+    <div
+      className="flex p-2 h-full gap-4 w-full"
+      style={{
+        ...baseStyle,
+        borderRadius: 'var(--lt-stack-container-radius)',
+      }}
+    >
       <div className="w-16 aspect-square"></div>
       <h2 className="mr-20">Stack</h2>
     </div>

package/templates/react-ts/src/stories/LinkApp.stories.tsx

@@ -31,8 +31,9 @@ export default {
 
 export const Stack: ComponentStory<typeof LinkApp> = (args) => (
   <div
-    className="m-2"
+    data-link-type-id={__LINK_TYPE_SLUG__}
     style={{
+      margin: '0.5rem',
       width: 374,
       height: 80,
     }}
@@ -46,8 +47,9 @@ Stack.args = {
 
 export const Grid: ComponentStory<typeof LinkApp> = (args) => (
   <div
-    className="m-2"
+    data-link-type-id={__LINK_TYPE_SLUG__}
     style={{
+      margin: '0.5rem',
       width: 183,
       height: 240,
     }}
@@ -61,8 +63,9 @@ Grid.args = {
 
 export const Carousel: ComponentStory<typeof LinkApp> = (args) => (
   <div
-    className="m-2"
+    data-link-type-id={__LINK_TYPE_SLUG__}
     style={{
+      margin: '0.5rem',
       width: 224,
       height: 296,
     }}
@@ -76,8 +79,9 @@ Carousel.args = {
 
 export const Featured: ComponentStory<typeof LinkApp> = (args) => (
   <div
-    className="m-2"
+    data-link-type-id={__LINK_TYPE_SLUG__}
     style={{
+      margin: '0.5rem',
       width: 374,
       height: 374,
     }}

package/templates/react-ts/src/types/global.d.ts

@@ -6,3 +6,6 @@ declare module '*manifest.json' {
 declare module '*props-data.json' {
   export const name: string
 }
+
+declare const __LINK_TYPE_ID__: string
+declare const __LINK_TYPE_SLUG__: string