package.json

{
  "name": "lusso-components",
  "version": "3.3.0",
  "description": "lusso components",
  "license": "ISC",
  "main": "dist/lusso-components.cjs.js",
  "module": "dist/lusso-components.esm.js",
  "types": "dist/lusso-components.esm.d.ts",
  "sideEffects": [
    "*.pcss"
  ],
  "files": [
    "dist"
  ],
  "scripts": {
    "clean": "rimraf dist/",
    "build": "yarn run clean && NODE_ENV=production rollup -c"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^19.0.0",
    "@rollup/plugin-json": "^4.1.0",
    "@rollup/plugin-node-resolve": "^13.0.0",
    "@types/react": "^17.0.11",
    "@types/react-dom": "^17.0.7",
    "autoprefixer": "^10.2.6",
    "clsx": "^1.1.1",
    "postcss": "^8.3.0",
    "postcss-import": "^14.0.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "rimraf": "^3.0.2",
    "rollup": "^2.51.0",
    "rollup-plugin-postcss": "^4.0.0",
    "rollup-plugin-ts": "^1.4.0",
    "typescript": "^4.3.2"
  },
  "dependencies": {
    "@veikkaus/lusso-core": "^3.3.0"
  },
  "peerDependencies": {
    "react": ">= 17.0.0",
    "react-dom": ">= 17.0.0"
  },
  "gitHead": "faed38feefaf52a4a90133b355992ecc30060c5f"
}

rollup.config.js

// import babel from "@rollup/plugin-babel";

import typescript from "rollup-plugin-ts";

import commonjs from "@rollup/plugin-commonjs";
import resolve from "@rollup/plugin-node-resolve";
import json from "@rollup/plugin-json";
// import copy from "rollup-plugin-copy";
import postcss from "rollup-plugin-postcss";
import postcssImport from "postcss-import";
import autoprefixer from 'autoprefixer'
import pkg from "./package.json";

const jsExtensions = [".js", ".jsx", ".ts", ".tsx"];
const cssExtensions = [".pcss", ".css"];

const name = "Tandem";

export default {
  input: "./src/index.tsx",

  // Specify here external modules which you don't want to include in your bundle (for instance: 'lodash', 'moment' etc.)
  // https://rollupjs.org/guide/en#external-e-external
  external: [/^react/, /@babel\/runtime/],

  plugins: [
    // Allows node_modules resolution
    resolve({ extensions: jsExtensions }),

    // Allow bundling cjs modules. Rollup doesn't understand cjs
    commonjs(),

    // Compile TypeScript/JavaScript files

    typescript({
      exclude: ["scripts/**/*", "config/**/*", "src/**/*.stories.tsx"]
    }),

    json(),

    // Extract CSS file

    postcss({
      extensions: cssExtensions,
      modules: true,
      plugins: [
        postcssImport,
        autoprefixer
      ]
      // extract: 'tandem-core.css'
    }),

    // Include font files
    /*
    copy({
      targets: [
        {
          src: "src/fonts/*{.woff,.woff2}",
          dest: "dist/fonts",
        },
        {
          src: "src/design-tokens/*.*",
          dest: "dist",
        },
      ],
    }),


    // Include mobile icon files
    copy({
      targets: [
        {
          src: "mobile-icon-library/*{.svg,.png}",
          dest: "dist/mobile-icon-library",
        },
      ],
    }),
    */
  ],

  output: [
    {
      file: pkg.main,
      format: "cjs"
    },
    {
      file: pkg.module,
      format: "es"
    }
  ]
};

src---index.tsx

export { default as Button } from "./components/Button";
export { default as LabeledSwitch } from "./components/LabeledSwitch";
export { default as Themed } from "./components/Themed";

export { defaultTheme, otherTheme, losoTheme } from "./theme";

tsconfig.json

{
  "compilerOptions": {
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "jsx": "react-jsx",
    "target": "ES2015",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "noImplicitAny": false,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": false,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "sourceMap": true,
    "isolatedModules": true,
    "allowJs": false,
    "declaration": true,
    "declarationDir": "./dist",
    "noUnusedLocals": false
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules",
    "build",
    "dist",
    "public",
    "scripts",
    "config"
  ]
  // "include": ["src/**/*", "/webpack.config.ts"]
}