build(@vtmn/svelte): inject CSS to dist folder by switching to PostCSS

.github/workflows/build-canary.yml

@@ -9,10 +9,6 @@ jobs:
     if: github.event.action == 'labeled' && contains(github.event.label.name, 'Publish canary')
     name: Build canary
     runs-on: ubuntu-latest
-    env:
-      PR_NUMBER: ${{ github.event.pull_request.number }}
-      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
     steps:
       - uses: actions/checkout@v2
         with:
@@ -48,15 +44,19 @@ jobs:
         id: publish-canary
         run: |
           npm whoami
-          lerna publish --canary --preid $PR_NUMBER --no-verify-access --no-private --no-commit-hooks --yes
+          lerna publish --canary --preid $PR_NUMBER --no-verify-access --no-private --no-commit-hooks --no-changelog --yes
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+          PR_NUMBER: ${{ github.event.pull_request.number }}
 
       - name: Manage pull request labels
         uses: actions/github-script@v4
         if: github.event_name == 'pull_request'
         with:
           github-token: ${{secrets.GITHUB_TOKEN}}
           script: |
-            const name = 'Publish canary';
+            const name = 'Publish canary :hatched_chick:';
             const { issue: { number: issue_number }, repo: { owner, repo }  } = context;
             try {
               await github.issues.removeLabel({
@@ -77,7 +77,7 @@ jobs:
           script: |
             const comment = [
               ':hatched_chick: **Canary published successfully** !',
-              '${{ steps.publish-canary.output.result }}'
+              'Check the workflow https://github.com/Decathlon/vitamin-web/runs/${{ github.run_id }}'
             ];
             return comment.join('\n');
 

CONTRIBUTING.md

@@ -145,7 +145,6 @@ When you open your Pull Request provide as much information as possible.
 - For an issue, describe what you are fixing with your pull request and how you had found the defect.
 - If you are proposing an enhancement, describe what you are adding to the code (new function, performance enhancement, documentation update, changing an existing function, ...).
 
-
 #### Publish canary version
 
 On your newest pull request, it is possible to publish a canary version in order to test it on your project before the final publish.

packages/sources/svelte/package.json

@@ -76,12 +76,16 @@
     "eslint-plugin-svelte3": "4.0.0",
     "jest": "^28.1.0",
     "jest-environment-jsdom": "^28.1.0",
+    "postcss": "^8.4.14",
+    "postcss-import": "^14.1.0",
+    "postcss-url": "^10.1.3",
     "rollup": "^2.73.0",
-    "rollup-plugin-css-only": "^3.1.0",
+    "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-svelte": "^7.1.0",
     "svelte": "3.49.0",
     "svelte-jester": "^2.3.2",
-    "svelte-preprocess": "4.10.7"
+    "svelte-preprocess": "4.10.7",
+    "rollup-plugin-terser": "^7.0.2"
   },
   "jest": {
     "testEnvironment": "jsdom",
@@ -109,7 +113,8 @@
       "url": "http://www.apache.org/licenses/LICENSE-2.0"
     }
   ],
-  "main": "src/index.js",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
   "svelte": "src/index.js",
   "babel": {
     "presets": [

packages/sources/svelte/rollup.config.js

@@ -1,110 +1,87 @@
 import resolve from '@rollup/plugin-node-resolve';
-import css from 'rollup-plugin-css-only';
 import svelte from 'rollup-plugin-svelte';
 import sveltePreprocess from 'svelte-preprocess';
+import postcss from 'rollup-plugin-postcss';
+import postcssImport from 'postcss-import';
+import postcssUrl from 'postcss-url';
+import fs from 'fs';
+import path from 'path';
+import pkg from './package.json';
+import { terser } from 'rollup-plugin-terser';
+
 const preprocessOptions = require('./svelte.config').preprocessOptions;
 
-const src = {
-  components: [
-    {
-      folder: 'actions',
-      components: [
-        'VtmnButton',
-        'VtmnDropdown',
-        'VtmnDropdownItem',
-        'VtmnLink',
-      ],
-    },
-    {
-      folder: 'forms',
-      components: ['VtmnSelect', 'VtmnTextInput'],
-    },
-    {
-      folder: 'indicators',
-      components: [
-        'VtmnBadge',
-        'VtmnLoader',
-        'VtmnPrice',
-        'VtmnProgressbar',
-        'VtmnRating',
-        'VtmnTag',
-      ],
-    },
-    {
-      folder: 'navigation',
-      components: [
-        'VtmnBreadcrumb',
-        'VtmnBreadcrumbItem',
-        'VtmnNavbar',
-        'VtmnSearch',
-        'VtmnTabs',
-        'VtmnTabsItem',
-      ],
-    },
-    {
-      folder: 'overlays',
-      components: [
-        'VtmnAlert',
-        'VtmnModal',
-        'VtmnPopover',
-        'VtmnSnackbar',
-        'VtmnToast',
-        'VtmnTooltip',
-      ],
-    },
-    {
-      folder: 'selection-controls',
-      components: [
-        'VtmnCheckbox',
-        'VtmnChip',
-        'VtmnQuantity',
-        'VtmnRadioButton',
-        'VtmnToggle',
-      ],
-    },
+const postcssProcess = (component, variant = '') =>
+  postcss({
+    extract: `${component}${variant}.css`,
+    plugins: [
+      postcssImport({
+        load: (filename) => {
+          const finalPath = filename.includes('@vtmn/css-')
+            ? filename.replaceAll('.css', `${variant}.css`)
+            : filename;
+          return fs.readFileSync(path.resolve(finalPath), {
+            encoding: 'utf8',
+            flag: 'r',
+          });
+        },
+      }),
+      postcssUrl({
+        url: ({ absolutePath, pathname }) => {
+          const dist = path.join(__dirname, 'dist');
+          if (!fs.existsSync(dist)) {
+            fs.mkdirSync(dist, { recursive: true });
+          }
+          const destinationPath = path.join(__dirname, 'dist', pathname);
+          if (!fs.existsSync(destinationPath)) {
+            fs.copyFileSync(absolutePath, destinationPath);
+          }
+          return pathname;
+        },
+      }),
+    ],
+  });
+
+const globals = {
+  'svelte/internal': 'svelte/internal',
+  svelte: 'svelte',
+};
+
+const svelteOptions = (component, variant) => ({
+  external: /^svelte.*$/,
+  output: [
     {
-      folder: 'structure',
-      components: [
-        'VtmnAccordion',
-        'VtmnCard',
-        'VtmnDivider',
-        'VtmnList',
-        'VtmnListItem',
-        'VtmnSkeleton',
-      ],
+      file: pkg.module,
+      format: 'es',
+      sourcemap: true,
+      globals,
     },
-  ],
-  guidelines: [
     {
-      folder: 'iconography',
-      components: ['VtmnIcon'],
+      file: pkg.main,
+      format: 'umd',
+      name: 'index',
+      sourcemap: true,
+      globals,
     },
   ],
-};
-
-const svelteOptions = (component) => ({
-  output: [
-    { file: `dist/${component}.mjs`, format: 'es' },
-    { file: `dist/${component}.js`, format: 'umd', name: component },
-  ],
   plugins: [
     svelte({
       preprocess: sveltePreprocess(preprocessOptions),
     }),
-    css({ output: `${component}.css` }),
-    resolve(),
+    postcssProcess(component, variant),
+    resolve({
+      // Exclude all svelte related stuff
+      resolveOnly: [/^(?!svelte.*$)/],
+    }),
+    terser(),
   ],
 });
 
-const predicate =
-  (baseDir) =>
-  ({ folder, components }) =>
-    components.map((component) => ({
-      input: `src/${baseDir}/${folder}/${component}/${component}.svelte`,
-      ...svelteOptions(component),
-    }));
-
 export default [
-  ...src.components.flatMap(predicate('components')),
-  ...src.guidelines.flatMap(predicate('guidelines')),
+  ...[undefined, '-base10', '-with-vars-base10', '-with-vars'].map(
+    (variant) => ({
+      input: 'src/index.js',
+      ...svelteOptions('index', variant),
+    }),
+  ),
 ];

yarn.lock

@@ -3304,14 +3304,6 @@
     make-dir "^3.1.0"
     mime "^2.4.6"
 
-"@rollup/pluginutils@4", "@rollup/pluginutils@^4.1.2", "@rollup/pluginutils@^4.2.1":
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.2.1.tgz#e6c6c3aba0744edce3fb2074922d3776c0af2a6d"
-  integrity sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==
-  dependencies:
-    estree-walker "^2.0.1"
-    picomatch "^2.2.2"
-
 "@rollup/pluginutils@^3.1.0":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-3.1.0.tgz#706b4524ee6dc8b103b3c995533e5ad680c02b9b"
@@ -3321,6 +3313,14 @@
     estree-walker "^1.0.1"
     picomatch "^2.2.2"
 
+"@rollup/pluginutils@^4.1.2", "@rollup/pluginutils@^4.2.1":
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.2.1.tgz#e6c6c3aba0744edce3fb2074922d3776c0af2a6d"
+  integrity sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==
+  dependencies:
+    estree-walker "^2.0.1"
+    picomatch "^2.2.2"
+
 "@rushstack/eslint-patch@^1.1.0":
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.1.4.tgz#0c8b74c50f29ee44f423f7416829c0bf8bb5eb27"
@@ -9653,6 +9653,11 @@ cubic2quad@^1.2.1:
   resolved "https://registry.yarnpkg.com/cubic2quad/-/cubic2quad-1.2.1.tgz#2442260b72c02ee4b6a2fe998fcc1c4073622286"
   integrity sha512-wT5Y7mO8abrV16gnssKdmIhIbA9wSkeMzhh27jAguKrV82i24wER0vL5TGhUJ9dbJNDcigoRZ0IAHFEEEI4THQ==
 
+cuint@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/cuint/-/cuint-0.2.2.tgz#408086d409550c2631155619e9fa7bcadc3b991b"
+  integrity sha512-d4ZVpCW31eWwCMe1YT3ur7mUDnTXbgwyzaL320DrcRT45rfjYxkt5QWLrmOJ+/UEAI2+fQgKe/fCjR8l4TpRgw==
+
 currently-unhandled@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
@@ -15689,7 +15694,7 @@ make-dir@^2.0.0, make-dir@^2.1.0:
     pify "^4.0.1"
     semver "^5.6.0"
 
-make-dir@^3.0.0, make-dir@^3.0.2, make-dir@^3.1.0:
+make-dir@^3.0.0, make-dir@^3.0.2, make-dir@^3.1.0, make-dir@~3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
   integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
@@ -16121,6 +16126,11 @@ mime@^2.4.4, mime@^2.4.6:
   resolved "https://registry.yarnpkg.com/mime/-/mime-2.6.0.tgz#a2a682a95cd4d0cb1d6257e28f83da7e35800367"
   integrity sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==
 
+mime@~2.5.2:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-2.5.2.tgz#6e3dc6cc2b9510643830e5f19d5cb753da5eeabe"
+  integrity sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg==
+
 mimic-fn@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
@@ -16203,6 +16213,13 @@ minimatch@^5.0.1:
   dependencies:
     brace-expansion "^2.0.1"
 
+minimatch@~3.0.4:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.8.tgz#5e6a59bd11e2ab0de1cfb843eb2d82e546c321c1"
+  integrity sha512-6FsRAQsxQ61mw+qP1ZzbL9Bc78x2p5OqNgNpnoAFLTrX8n5Kxph0CsnhmKKNXTWjXqU5L0pGPR7hYk+XWZr60Q==
+  dependencies:
+    brace-expansion "^1.1.7"
+
 minimist-options@4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/minimist-options/-/minimist-options-4.1.0.tgz#c0655713c53a8a2ebd77ffa247d342c40f010619"
@@ -18498,6 +18515,16 @@ postcss-unique-selectors@^5.1.1:
   dependencies:
     postcss-selector-parser "^6.0.5"
 
+postcss-url@^10.1.3:
+  version "10.1.3"
+  resolved "https://registry.yarnpkg.com/postcss-url/-/postcss-url-10.1.3.tgz#54120cc910309e2475ec05c2cfa8f8a2deafdf1e"
+  integrity sha512-FUzyxfI5l2tKmXdYc6VTu3TWZsInayEKPbiyW+P6vmmIrrb4I6CGX0BFoewgYHLK+oIL5FECEK02REYRpBvUCw==
+  dependencies:
+    make-dir "~3.1.0"
+    mime "~2.5.2"
+    minimatch "~3.0.4"
+    xxhashjs "~0.2.2"
+
 postcss-value-parser@^3.3.0:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
@@ -20159,19 +20186,12 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
     hash-base "^3.0.0"
     inherits "^2.0.1"
 
-rollup-plugin-css-only@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-css-only/-/rollup-plugin-css-only-3.1.0.tgz#6a701cc5b051c6b3f0961e69b108a9a118e1b1df"
-  integrity sha512-TYMOE5uoD76vpj+RTkQLzC9cQtbnJNktHPB507FzRWBVaofg7KhIqq1kGbcVOadARSozWF883Ho9KpSPKH8gqA==
-  dependencies:
-    "@rollup/pluginutils" "4"
-
 rollup-plugin-peer-deps-external@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/rollup-plugin-peer-deps-external/-/rollup-plugin-peer-deps-external-2.2.4.tgz#8a420bbfd6dccc30aeb68c9bf57011f2f109570d"
   integrity sha512-AWdukIM1+k5JDdAqV/Cxd+nejvno2FVLVeZ74NKggm3Q5s9cbbcOgUPGdbxPi4BXu7xGaZ8HG12F+thImYu/0g==
 
-rollup-plugin-postcss@^4.0.0:
+rollup-plugin-postcss@^4.0.0, rollup-plugin-postcss@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/rollup-plugin-postcss/-/rollup-plugin-postcss-4.0.2.tgz#15e9462f39475059b368ce0e49c800fa4b1f7050"
   integrity sha512-05EaY6zvZdmvPUDi3uCcAQoESDcYnv8ogJJQRp6V5kZ6J6P7uAVJlrTZcaaA20wTH527YTnKfkAoPxWI/jPp4w==
@@ -24007,6 +24027,13 @@ xtend@^4.0.0, xtend@^4.0.1, xtend@^4.0.2, xtend@~4.0.1:
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
 
+xxhashjs@~0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/xxhashjs/-/xxhashjs-0.2.2.tgz#8a6251567621a1c46a5ae204da0249c7f8caa9d8"
+  integrity sha512-AkTuIuVTET12tpsVIQo+ZU6f/qDmKuRUcjaqR+OIvm+aCBsZ95i7UVY5WJ9TMsSaZ0DA2WxoZ4acu0sPH+OKAw==
+  dependencies:
+    cuint "^0.2.2"
+
 y18n@^4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.3.tgz#b5f259c82cd6e336921efd7bfd8bf560de9eeedf"