Css-loader: creating a animation in :global scope animation's name is translated to local name in the keyframes

[wende60]

"css-loader": "^1.0.0",
"css-modules": "^0.3.0",

Do you want to request a feature or report a bug?

bug

What is the current behavior?
creating a animation in :global scope animation's name is translated to local name in the keyframes

If the current behavior is a bug, please provide the steps to reproduce.

compiling this css:

:global {
    .shake {
        animation: example 3s linear;
    }
    @keyframes :global(example) {
        0%   {background-color: red;}
        100% {background-color: green;}
    }
}

results in (files name is _core)

.shake {
    animation: example 3s linear;
}
@-webkit-keyframes _core__-global-example- {
    0%   {background-color: red;}
    100% {background-color: green;}
}

What is the expected behavior?
should result in

.shake {
    animation: example 3s linear;
}
@-webkit-keyframes example {
    0%   {background-color: red;}
    100% {background-color: green;}
}

If this is a feature request, what is motivation or use case for changing the behavior?

Please mention other relevant information such as your webpack version, Node.js version and Operating System.
using a mac OSX

  "devDependencies": {
    "autoprefixer": "^9.1.3",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-eslint": "^8.2.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-dynamic-import-node": "^2.0.0",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-transform-async-to-generator": "^6.24.1",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "babel-plugin-transform-react-constant-elements": "^6.23.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-plugin-webpack-alias": "^2.1.2",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-register": "^6.26.0",
    "chai": "^4.1.2",
    "chai-as-promised": "^7.1.1",
    "chai-enzyme": "^1.0.0-beta.1",
    "css-loader": "^1.0.0",
    "css-modules": "^0.3.0",
    "cssnano": "^4.0.5",
    "enzyme": "^3.4.1",
    "enzyme-adapter-react-16": "^1.2.0",
    "eslint": "^5.2.0",
    "eslint-plugin-babel": "^5.1.0",
    "eslint-plugin-cypress": "^2.0.1",
    "eslint-plugin-react": "^7.10.0",
    "fetch-mock": "^6.5.2",
    "html-webpack-plugin": "^4.0.0-alpha",
    "ignore-styles": "^5.0.1",
    "jsdom": "^11.12.0",
    "jsdom-global": "^3.0.2",
    "mini-css-extract-plugin": "0.4.1",
    "mocha": "^5.2.0",
    "node-sass": "^4.9.0",
    "nyc": "^12.0.2",
    "postcss-loader": "^3.0.0",
    "redux-mock-store": "^1.5.3",
    "sass-loader": "^7.0.3",
    "sass-resources-loader": "^1.3.3",
    "script-ext-html-webpack-plugin": "^2.0.1",
    "sinon": "^6.1.4",
    "sinon-chai": "^3.2.0",
    "style-loader": "^0.21.0",
    "svgo": "^1.0.5",
    "svgo-loader": "^2.1.0",
    "webpack": "^4.11.1",
    "webpack-cli": "^3.0.3",
    "webpack-dev-server": "^3.1.4",
    "webpack-manifest-plugin": "^2.0.3"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "classnames": "^2.2.6",
    "connected-react-router": "^4.3.0",
    "country-data": "^0.0.31",
    "create-react-class": "^15.6.3",
    "file-loader": "^2.0.0",
    "google-map-react": "^1.0.5",
    "history": "^4.7.2",
    "html-loader": "^0.5.5",
    "mobile-detect": "^1.4.2",
    "moment": "^2.22.2",
    "prop-types": "^15.6.2",
    "react": "^16.4.0",
    "react-addons-update": "^15.6.2",
    "react-day-picker": "^7.1.10",
    "react-dom": "^16.4.0",
    "react-inlinesvg": "0.8.1",
    "react-loadable": "^5.5.0",
    "react-modal": "^3.5.1",
    "react-pointable": "^1.1.3",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.3.1",
    "react-router-redux": "^4.0.8",
    "react-slider": "^0.11.2",
    "react-toggle": "^4.0.2",
    "react-transition-group": "1.x",
    "recompose": "^0.27.1",
    "redux": "^4.0.0",
    "redux-axios-middleware": "^4.0.0",
    "redux-form": "^7.4.2",
    "redux-thunk": "^2.3.0",
    "remove": "^0.1.5",
    "sixt-dict": "^2.0.1",
    "smoothscroll": "^0.4.0",
    "url-loader": "^1.0.1"
  }

[vkuzma]

Same problem here, did you find a workaround?

[wende60]

did something like

:global {
    .myclass {
        :local {
            animation: ...
        }
    }
}

so you have a global class and everything inside is local

[alexander-akait]

Problem on postcss-modules side, we can't do anything here, sorry. Feel free to create issue in postcss-modules repo

[jahed]

The fix I found is to do:

:global {
    .shake {
        animation: example 3s linear;
    }
}

@keyframes :global(example) {
    0%   {background-color: red;}
    100% {background-color: green;}
}

In general, any @ rules in :global seems to cause incorrect behaviour. Not sure if it's part of CSS Modules spec to behave like that or not.

[brendanfalkowski]

For reference, I found this issue while debugging and documented several approaches here: https://gravitydept.com/blog/keyframe-animations-in-css-modules

[alexander-akait]

@brendanfalkowski please open new issue with reproducible repo