Merge pull request #306 from PrestaShopCorp/fix-rollup-config

Fix rollup config

build/package.json

@@ -36,7 +36,6 @@
   "devDependencies": {
     "@esbuild-kit/cjs-loader": "^2.4.2",
     "@pnpm/types": "^9.0.0",
-    "@rollup/plugin-json": "^6.1.0",
     "@types/rollup-plugin-css-only": "^3.1.0",
     "unbuild": "^1.2.0",
     "vue": "^3.2.47"

build/src/tasks/full-bundle.ts

@@ -8,7 +8,6 @@ import esbuild from 'rollup-plugin-esbuild'
 import { parallel } from 'gulp'
 import glob from 'fast-glob'
 import { camelCase, upperFirst } from 'lodash-unified'
-import json from '@rollup/plugin-json'
 import { version } from '../../../packages/puik/version'
 import { PuikAlias } from '../plugins/puik-alias'
 import {
@@ -49,7 +48,6 @@ async function buildFullEntry(minify: boolean) {
           'process.env.NODE_ENV': JSON.stringify('production'),
         },
       }),
-      json(),
     ],
     external: await generateExternal({ full: true }),
   })
@@ -99,7 +97,6 @@ async function buildFullLocale(minify: boolean) {
             sourceMap: minify,
             target,
           }),
-          json(),
         ],
       })
       await writeBundles(bundle, [

build/src/tasks/modules.ts

@@ -5,7 +5,6 @@ import { nodeResolve } from '@rollup/plugin-node-resolve'
 import commonjs from '@rollup/plugin-commonjs'
 import esbuild from 'rollup-plugin-esbuild'
 import glob from 'fast-glob'
-import json from '@rollup/plugin-json'
 import {
   puikRoot,
   pkgRoot,
@@ -45,7 +44,6 @@ export const buildModules = async () => {
           '.vue': 'ts',
         },
       }),
-      json(),
     ],
     external: await generateExternal({ full: false }),
     treeshake: false,

packages/components/icon/src/icon.vue

@@ -4,22 +4,22 @@
     class="puik-icon"
     :style="style"
     :data-test="dataTest"
+    :class="{
+      'puik-icon--disabled': isDisabled,
+    }"
   >
     {{ icon }}
   </component>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import resolveConfig from 'tailwindcss/resolveConfig'
-import tailwindConfig from '@puik/tailwind-preset/theme'
 import { iconProps } from './icon'
 
 defineOptions({
   name: 'PuikIcon',
 })
 
-const fullConf = resolveConfig(tailwindConfig)
 const props = defineProps(iconProps)
 
 const fontSize = computed(() => {
@@ -32,9 +32,7 @@ const fontSize = computed(() => {
 const style = computed(() => {
   return {
     fontSize: fontSize.value,
-    color: props.isDisabled
-      ? fullConf.extend?.colors?.primary['500']
-      : props.color,
+    color: props.color,
   }
 })
 </script>

packages/components/icon/test/icon.spec.ts

@@ -40,7 +40,7 @@ describe('Icon tests', () => {
       isDisabled: true,
     })
 
-    expect(findIcon().element.style.color).toBe('rgb(187, 187, 187)')
+    expect(findIcon().classes()).toContain('puik-icon--disabled')
   })
 
   it('should set the color', async () => {
@@ -84,6 +84,3 @@ describe('Icon tests', () => {
     expect(findIcon().attributes('data-test')).toBe('test')
   })
 })
-function resolveConfig(tailwindConfig: any) {
-  throw new Error('Function not implemented.')
-}

packages/tailwind-preset/index.js

@@ -1,7 +1,6 @@
 // eslint-disable-next-line @typescript-eslint/no-var-requires
-// const Puiktheme = require('./theme')
-import PuikTheme from './theme'
+const Puiktheme = require('./theme')
 
-export default {
-  theme: PuikTheme,
+module.exports = {
+  theme: Puiktheme,
 }

packages/tailwind-preset/theme.js

@@ -1,5 +1,4 @@
-/** @type {import('tailwindcss').Config} */
-export default {
+module.exports = {
   extend: {
     colors: {
       primary: {

packages/theme/src/icon.scss

@@ -1,3 +1,6 @@
 .puik-icon {
   @apply font-materialIcons leading-none;
 }
+.puik-icon--disabled {
+  color: theme('colors.primary.500') !important;
+}

packages/theme/tailwind.config.js

@@ -1,8 +1,6 @@
-import tailwindConfig from '@puik/tailwind-preset'
-
 /* eslint-disable @typescript-eslint/no-var-requires */
 module.exports = {
-  presets: [tailwindConfig],
+  presets: [require('@puik/tailwind-preset')],
   content: ['./src/**/*.scss'],
   plugins: [require('tailwind-scrollbar')({ nocompatible: true })],
   darkMode: 'class', // To remove if we wanna use the css' prefers-color-scheme feature (dark mode based on OS/browser preference)

packages/theme/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true
+  }
+}

playground/.gitignore

@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# views directory
+views