Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

creating a animation in :global scope animation's name is translated to local name in the keyframes #759

Closed
wende60 opened this issue Aug 23, 2018 · 6 comments

Comments

@wende60
Copy link

@wende60 wende60 commented Aug 23, 2018

"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
Copy link

@vkuzma vkuzma commented Aug 29, 2018

Same problem here, did you find a workaround?

Loading

@wende60
Copy link
Author

@wende60 wende60 commented Aug 30, 2018

did something like

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

so you have a global class and everything inside is local

Loading

@alexander-akait
Copy link
Member

@alexander-akait alexander-akait commented Oct 30, 2018

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

Loading

@jahed
Copy link

@jahed jahed commented Jul 6, 2019

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.

Loading

@brendanfalkowski
Copy link

@brendanfalkowski brendanfalkowski commented Jul 12, 2019

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

Loading

@alexander-akait
Copy link
Member

@alexander-akait alexander-akait commented Jul 13, 2019

@brendanfalkowski please open new issue with reproducible repo

Loading

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
5 participants