responsive grid-cols not compiled

kavaro commented 3 years ago

First of all, thanks for this wonderfull project.

I am currently stuck on the following issue:

<div class="lg:grid-cols-2"></div>

is compiled into:

<div class="lggrid-cols-2"></div>

This was working with taildwindcss without extra config.

None responsive grid-cols compile correctly.

kavaro commented 3 years ago

"svelte-windicss-preprocess": "^3.1.2"

kavaro commented 3 years ago

UPDATE: The issue occurs in a svelte component to which I pass a className prop that is appended to the class attr.

The following works correctly:

<div class="{className} relative grid grid-cols-1 lg:grid-cols-2"></div>

While the code below fails:

<div class="relative grid grid-cols-1 lg:grid-cols-2 {className}"></div>

So, it seems that the {className} syntax causes the issue.

voorjaar commented 3 years ago

cc @alexanderniebuhr

alexanderniebuhr commented 3 years ago

@kavaro I cannot reproduce it currently. It works for me. What is your setup? did you man with component custom-element ?

kavaro commented 3 years ago

Actually I am having this issue with all responsive classnames when followed by {className}. When I put {className} before the responsive classname it is ok.

In the following component

the class of the first div is compiled into: class="windi-h7g7v7 smbg-red-500 svelte-10b29kx" --> not correct
the class of the second div is compiled into: class="windi-17aj0ut svelte-10b29kx" --> correct

<script lang="ts">
  let className = "";
  export { className as class };
</script>

<div class="w-48 h-48 mt-24 bg-green-500 sm:bg-red-500 {className}" />
<div class="{className} w-48 h-48 mt-24 bg-green-500 sm:bg-red-500" />

My setup is a sapper project with the following configuration:

// preprocess.config.js

const sveltePreprocess = require('svelte-preprocess');
const windicssPreprocess = require('svelte-windicss-preprocess');

module.exports = (dev) => [
  sveltePreprocess.typescript(),
  windicssPreprocess.preprocess({
    mode: "dev",
    config: 'windi.config.js', // windi config file path (optional)
    compile: true, // false: interpretation mode; true: compilation mode (optional)
    prefix: 'windi-', // set compilation mode style prefix
    safeList: [], // (optional)
  })
]

// rollup.config.js

const timestamp = process.env.SAPPER_TIMESTAMP || Date.now();
const mode = process.env.NODE_ENV;
const dev = mode === 'development';
const legacy = !!process.env.SAPPER_LEGACY_BUILD;

const onwarn = (warning, onwarn) =>
  (warning.code === 'MISSING_EXPORT' && /'preload'/.test(warning.message)) ||
  (warning.code === 'CIRCULAR_DEPENDENCY' && /[/\\]@sapper[/\\]/.test(warning.message)) ||
  (warning.code === 'THIS_IS_UNDEFINED') ||
  onwarn(warning);

const preprocess = require('./preprocess.config.js')(dev)

export default {
  client: {
    input: config.client.input().replace(/\.js$/, '.ts'),
    output: config.client.output(),
    plugins: [
      replace({
        'process.browser': true,
        'process.env.NODE_ENV': JSON.stringify(mode),
        'process.env.SAPPER_TIMESTAMP': timestamp
      }),
      svelte({
        preprocess,
        compilerOptions: {
          dev,
          hydratable: true
        }
      }),
      url({
        sourceDir: path.resolve(__dirname, 'src/node_modules/images'),
        publicPath: '/client/'
      }),
      resolve({
        browser: true,
        dedupe: ['svelte']
      }),
      commonjs(),
      typescript({ sourceMap: dev }),

      legacy && babel({
        extensions: ['.js', '.mjs', '.html', '.svelte'],
        babelHelpers: 'runtime',
        exclude: ['node_modules/@babel/**'],
        presets: [
          ['@babel/preset-env', {
            targets: '> 0.25%, not dead'
          }]
        ],
        plugins: [
          '@babel/plugin-syntax-dynamic-import',
          ['@babel/plugin-transform-runtime', {
            useESModules: true
          }]
        ]
      }),

      !dev && terser({
        module: true
      })
    ],

    preserveEntrySignatures: false,
    onwarn,
  },

  server: {
    input: { server: config.server.input().server.replace(/\.js$/, ".ts") },
    output: config.server.output(),
    plugins: [
      replace({
        'process.browser': false,
        'process.env.NODE_ENV': JSON.stringify(mode),
        'process.env.SAPPER_TIMESTAMP': timestamp
      }),
      svelte({
        preprocess,
        compilerOptions: {
          dev,
          generate: 'ssr',
          hydratable: true
        },
        emitCss: false
      }),
      url({
        sourceDir: path.resolve(__dirname, 'src/node_modules/images'),
        publicPath: '/client/',
        emitFiles: false // already emitted by client build
      }),
      resolve({
        dedupe: ['svelte']
      }),
      commonjs(),
      typescript({ sourceMap: dev })
    ],
    external: Object.keys(pkg.dependencies).concat(require('module').builtinModules),

    preserveEntrySignatures: 'strict',
    onwarn,
  },

  serviceworker: !dev && {
    input: config.serviceworker.input().replace(/\.js$/, '.ts'),
    output: config.serviceworker.output(),
    plugins: [
      resolve(),
      replace({
        'process.browser': true,
        'process.env.NODE_ENV': JSON.stringify(mode),
        'process.env.SAPPER_TIMESTAMP': timestamp
      }),
      commonjs(),
      typescript({ sourceMap: dev }),
      !dev && terser()
    ],

    preserveEntrySignatures: false,
    onwarn,
  }
};

// windi.config.js

module.exports = {
  variants: {},
  theme: {
    extend: {
      transitionProperty: {
        'max-h': 'max-height'
      }
    }
  },
  plugins: [
    require('windicss/plugin/aspect-ratio'),
    require('windicss/plugin/forms'),
    require('windicss/plugin/typography'),
    require('tailwindcss-textshadow'),
    require('windicss/plugin/filters'),
    require('windicss/plugin/scroll-snap'),
    require('windicss/plugin/line-clamp')
  ],
  future: {
    removeDeprecatedGapUtilities: true,
  },
}

and dev dependencies

{
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/runtime": "^7.0.0",
    "@rollup/plugin-babel": "^5.0.0",
    "@rollup/plugin-commonjs": "^14.0.0",
    "@rollup/plugin-node-resolve": "^8.0.0",
    "@rollup/plugin-replace": "^2.2.0",
    "@rollup/plugin-typescript": "^6.0.0",
    "@rollup/plugin-url": "^5.0.0",
    "@tailwindcss/aspect-ratio": "^0.2.0",
    "@tailwindcss/forms": "^0.2.1",
    "@tailwindcss/typography": "^0.4.0",
    "@tsconfig/svelte": "^1.0.10",
    "@types/compression": "^1.7.0",
    "@types/node": "^14.14.35",
    "@types/polka": "^0.5.1",
    "@types/svgo": "^2.0.0",
    "autoprefixer": "^10.2.4",
    "cssnano": "^4.1.10",
    "postcss": "^8.2.6",
    "postcss-import": "^14.0.0",
    "postcss-load-config": "^3.0.1",
    "postcss-nested": "^5.0.3",
    "prettier-plugin-svelte": "^2.2.0",
    "rollup": "^2.3.4",
    "rollup-plugin-svelte": "^7.0.0",
    "rollup-plugin-terser": "^7.0.0",
    "sapper": "^0.29.1",
    "svelte": "^3.32.3",
    "svelte-check": "^1.1.34",
    "svelte-preprocess": "^4.6.9",
    "svelte-windicss-preprocess": "^3.1.2",
    "svgo": "^2.2.2",
    "tailwindcss": "^2.0.3",
    "tailwindcss-textshadow": "^2.1.3",
    "ts-node": "^9.1.1",
    "tslib": "^2.0.1",
    "typescript": "^4.1.5"
  }
}

alexanderniebuhr commented 3 years ago

this information was much better for me to reproduce :) can you try for me v3.1.3

kavaro commented 3 years ago

I can confirm that the issue has been fixed in v3.1.3. Thanks for the very fast response and fix.

alexanderniebuhr commented 3 years ago

if you have any new issues please let us know. And thanks for using WindiCss. Also if you need some help or want to chat checkout discord

windicss / svelte-windicss-preprocess

responsive grid-cols not compiled #82