Support css wildcard selector

[ilomon10]

Hello.

I currently work with wildcard selector to speed up writing style on css. css code like this:

.bar-foo {
  // css property
}
.foo-bar {
  // css property
}
[class*="foo"]:not(.bar-foo) {
  // css property must replace everyting include "foo" exclude "bar-foo"
}

Its working fine when build in dev mode (npm start) but when build in prod mode (npm run build) classname at css file gets compressed

/*
 *  Development build
 */
.bar-foo_generateCodeA  {
  // css property
}
.foo-bar_generateCodeB {
  // css property
}
[class*="foo-"]:not(.bar-foo_generateCodeA) {
  // css property must replace everyting contains "foo" exclude "bar-foo"
}


/*
 *  Production build
 */
._generateCodeA {
  // css property
}
._generateCodeB {
  // css property
}
[class*="foo-"]:not(._generateCodeA) {
  // css property must replace everyting contains "foo" exclude "bar-foo"
}

Css cant be replaced when classname gone. Maybe i have to add some 'flag' to build production or any best practice to write like my case.

Let me know.

[psyycker]

Hi! Are you encountering this problem by using only CRL+ example or is it in a bigger project. The CSS will be parsed by your main bundler. If you are using Webpack, you might want to have a look on how Webpack compresses your CSS. Did you also try to give this a go outside the library you've created?

[ilomon10]

It happend when i use CRL 3.1.1.

Previously, when i use older version, it working fine because css not at saperate (maybe idk how its done). Here my script and dependency.

...
  "scripts": {
    "build:css": "node-sass src/component/sass -o src/component/css",
    "build": "microbundle-crl --no-compress --format modern,cjs",
    "start": "microbundle-crl watch --no-compress --format modern,cjs",
    "prepare": "run-s build",
    "test": "run-s test:unit test:lint test:build",
    "test:build": "run-s build",
    "test:lint": "eslint .",
    "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
    "test:watch": "react-scripts test --env=jsdom",
    "predeploy": "cd example && npm install && npm run build",
    "deploy": "gh-pages -d example/build"
  },
  "peerDependencies": {
    "react": "^16.0.0"
  },
  "devDependencies": {
    "babel-eslint": "^10.0.3",
    "cross-env": "^7.0.2",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.7.0",
    "eslint-config-standard": "^14.1.0",
    "eslint-config-standard-react": "^9.2.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-node": "^11.0.0",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-react": "^7.17.0",
    "eslint-plugin-standard": "^4.0.1",
    "gh-pages": "^2.2.0",
    "microbundle-crl": "^0.13.10",
    "node-sass": "^4.14.1",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.0.4",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "^3.4.1"
  },
....

What should i do? Btw, its not bigger project, just a mini library.

-Thanks.